update

src/Qt5/imports/FluentUI/Controls/FluChart.qml

@@ -4,25 +4,27 @@ import "./../JS/Chart.js" as Chart
 
 Canvas {
     id: control
-    property var window: Window.window
-    property var jsChart: undefined
     property string chartType
     property var chartData
     property var chartOptions
     property double chartAnimationProgress: 0.1
     property int animationEasingType: Easing.InOutExpo
-    property double animationDuration: 0
-    property var memorizedContext
-    property var memorizedData
-    property var memorizedOptions
+    property double animationDuration: 300
     property alias animationRunning: chartAnimator.running
     signal animationFinished()
     function animateToNewData()
     {
         chartAnimationProgress = 0.1;
-        jsChart.update();
+        d.jsChart.update();
         chartAnimator.restart();
     }
+    QtObject{
+        id:d
+        property var jsChart: undefined
+        property var memorizedContext
+        property var memorizedData
+        property var memorizedOptions
+    }
     MouseArea {
         id: event
         anchors.fill: control
@@ -56,11 +58,11 @@ Canvas {
             control.requestPaint();
         }
         onClicked:(mouse)=> {
-            submitEvent(mouse, "click");
-        }
+                      submitEvent(mouse, "click");
+                  }
         onPositionChanged:(mouse)=> {
-            submitEvent(mouse, "mousemove");
-        }
+                              submitEvent(mouse, "mousemove");
+                          }
         onExited: {
             submitEvent(undefined, "mouseout");
         }
@@ -68,11 +70,11 @@ Canvas {
             submitEvent(undefined, "mouseenter");
         }
         onPressed:(mouse)=> {
-            submitEvent(mouse, "mousedown");
-        }
+                      submitEvent(mouse, "mousedown");
+                  }
         onReleased:(mouse)=> {
-            submitEvent(mouse, "mouseup");
-        }
+                       submitEvent(mouse, "mouseup");
+                   }
     }
     PropertyAnimation {
         id: chartAnimator
@@ -90,34 +92,25 @@ Canvas {
         control.requestPaint();
     }
     onPaint: {
-        if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) {
+        if(control.getContext('2d') !== null && d.memorizedContext !== control.getContext('2d') || d.memorizedData !== control.chartData || d.memorizedOptions !== control.chartOptions) {
             var ctx = control.getContext('2d');
-
-            jsChart =  Chart.build(ctx, {
-                type: control.chartType,
-                data: control.chartData,
-                options: control.chartOptions
-                });
-
-            memorizedData = control.chartData ;
-            memorizedContext = control.getContext('2d');
-            memorizedOptions = control.chartOptions;
-
-            control.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
-
+            d.jsChart =  Chart.build(ctx, {type: control.chartType,data: control.chartData,options: control.chartOptions});
+            d.memorizedData = control.chartData ;
+            d.memorizedContext = control.getContext('2d');
+            d.memorizedOptions = control.chartOptions;
+            d.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
             chartAnimator.start();
         }
-
-        jsChart.draw(chartAnimationProgress);
+        d.jsChart.draw(chartAnimationProgress);
     }
     onWidthChanged: {
-        if(jsChart) {
-            jsChart.resize();
+        if(d.jsChart) {
+            d.jsChart.resize();
         }
     }
     onHeightChanged: {
-        if(jsChart) {
-            jsChart.resize();
+        if(d.jsChart) {
+            d.jsChart.resize();
         }
     }
 }