feat: Add initial support for ChartJs plugins

+ adding plugin for crosshair and zoom
+ adding plugin for data labels

ui/StatusQ/sandbox/pages/StatusChartPanelPage.qml

@@ -75,8 +75,8 @@ Item {
             for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
                 result[i] = Math.random() * (maxStep - minStep) + minStep;
             }
-            graphDetail.chart.chartData.datasets[0].data = result;
-            graphDetail.chart.animateToNewData();
+            graphDetail.chart.datasets[0].data = result;
+            graphDetail.chart.refresh();
         }
     }
 
@@ -97,24 +97,21 @@ Item {
             //if graph bar
             //switch graph
         }
-        chart.chartType: 'line'
-        chart.chartData: {
-            return {
-                labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
-                datasets: [{
-                    label: 'Price',
-                    xAxisId: 'x-axis-1',
-                    yAxisId: 'y-axis-1',
-                    backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
-                    borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
-                    borderWidth: 3,
-                    pointRadius: 0,
-                    //data: d.generateData()
-                }]
-            }
+        chart.type: 'line'
+        chart.labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange]
+        chart.datasets: {
+            return [{
+                label: 'Price',
+                xAxisId: 'x-axis-1',
+                yAxisId: 'y-axis-1',
+                backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
+                borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
+                borderWidth: 3,
+                pointRadius: 0
+            }]
         }
 
-        chart.chartOptions: {
+        chart.options: {
             return {
                 maintainAspectRatio: false,
                 responsive: true,

ui/StatusQ/src/StatusQ/Components/StatusChartPanel.qml

@@ -170,7 +170,7 @@ Page {
     }
 
     contentItem: Item {
-        Chart {
+        ChartCanvas {
             id: graphComponent
             anchors.fill: parent
         }

ui/StatusQ/src/StatusQ/Components/private/chart/ChartCanvas.qml

@@ -0,0 +1,113 @@
+import QtQuick 2.0
+
+import "./Library/Library.js" as Lib
+
+Canvas {
+    id: canvas
+
+    readonly property var availablePlugins: {
+        return { datalabels: ChartDataLabels }
+    }
+
+    property string type: chartType
+    property var options: chartOptions
+    property var plugins: []
+    property var labels: []
+    property var datasets: []
+
+    signal resized()
+
+    function refresh() {
+        if (d.instance) {
+            Qt.callLater(d.refresh)
+        }
+    }
+
+    function rebuild() {
+        if (available) {
+            Qt.callLater(d.rebuild)
+        }
+    }
+
+    // [WORKAROUND] context.lineWidth > 1 makes the scene graph polish step very slow
+    // in case of "Image" render target, so by default let's draw with OpenGL when
+    // possible (which seems only possible with "Cooperative" strategy).
+    renderTarget: Canvas.FramebufferObject
+    renderStrategy: Canvas.Cooperative
+
+    // https://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element
+    implicitHeight: 150
+    implicitWidth: 300
+
+    // [polyfill] Element
+    readonly property alias clientHeight: canvas.height
+    readonly property alias clientWidth: canvas.width
+
+    // [polyfill] canvas.style
+    readonly property var style: ({
+        height: canvas.height,
+        width: canvas.width
+    })
+
+    // [polyfill] element.getBoundingClientRect
+    // https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect
+    function getBoundingClientRect() {
+        return {top: 0, right: canvas.width, bottom: canvas.height, left: 0}
+    }
+
+    /**
+        \internal
+     */
+    property alias _mouse: mouse
+
+    MouseArea {
+        id: mouse
+        anchors.fill: parent
+        hoverEnabled: enabled
+        enabled: false
+    }
+
+    onTypeChanged: rebuild()
+    onOptionsChanged: refresh()
+    onPluginsChanged: refresh()
+    onLabelsChanged: refresh()
+    onDatasetsChanged: rebuild()
+    onHeightChanged: resized()
+    onWidthChanged: resized()
+    onAvailableChanged: {
+        if (!d.instance) {
+            rebuild()
+        }
+    }
+
+    QtObject {
+        id: d
+
+        property var instance: null
+
+        function refresh() {
+            instance.config.options = canvas.options
+            instance.config.plugins = canvas.plugins
+            instance.data.labels = canvas.labels
+            instance.update()
+        }
+
+        function rebuild() {
+            if (instance) {
+                instance.destroy()
+                instance = null
+            }
+            var ctx = canvas.getContext('2d');
+            const config = {
+                type: canvas.type,
+                options: canvas.options,
+                plugins: canvas.plugins,
+                data: {
+                    labels: canvas.labels,
+                    datasets: canvas.datasets
+                }
+            }
+            instance = new Chart(ctx, config)
+        }
+    }
+}