add chart example

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

@@ -50,31 +50,33 @@ Canvas {
             mouseEvent.left = 0;
             mouseEvent.top = 0;
             mouseEvent.target = control;
-
             if(handler) {
                 handler(mouseEvent);
             }
-
             control.requestPaint();
         }
-        onClicked:(mouse)=> {
-                      submitEvent(mouse, "click");
-                  }
-        onPositionChanged:(mouse)=> {
-                              submitEvent(mouse, "mousemove");
-                          }
+        onClicked:
+            (mouse)=> {
+                submitEvent(mouse, "click");
+            }
+        onPositionChanged:
+            (mouse)=> {
+                submitEvent(mouse, "mousemove");
+            }
         onExited: {
             submitEvent(undefined, "mouseout");
         }
         onEntered: {
             submitEvent(undefined, "mouseenter");
         }
-        onPressed:(mouse)=> {
-                      submitEvent(mouse, "mousedown");
-                  }
-        onReleased:(mouse)=> {
-                       submitEvent(mouse, "mouseup");
-                   }
+        onPressed:
+            (mouse)=> {
+                submitEvent(mouse, "mousedown");
+            }
+        onReleased:
+            (mouse)=> {
+                submitEvent(mouse, "mouseup");
+            }
     }
     PropertyAnimation {
         id: chartAnimator

src/Qt5/imports/FluentUI/JS/Chart.js

@@ -1618,10 +1618,6 @@ function hwbString(hwb, alpha) {
            + (alpha !== undefined && alpha !== 1 ? ", " + alpha : "") + ")";
 }
 
-function keyword(rgb) {
-  return reverseNames[rgb.slice(0, 3)];
-}
-
 // helpers
 function scale(num, min, max) {
    return Math.min(Math.max(min, num), max);
@@ -1632,13 +1628,16 @@ function hexDouble(num) {
   return (str.length < 2) ? "0" + str : str;
 }
 
-
 //create a list of reverse color names
 var reverseNames = {};
 for (var name in colorName$1) {
    reverseNames[colorName$1[name]] = name;
 }
 
+function keyword(rgb) {
+  return reverseNames[rgb.slice(0, 3)];
+}
+
 /* MIT license */
 
 

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

@@ -3,25 +3,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
@@ -47,31 +49,33 @@ Canvas {
             mouseEvent.left = 0;
             mouseEvent.top = 0;
             mouseEvent.target = control;
-
             if(handler) {
                 handler(mouseEvent);
             }
-
             control.requestPaint();
         }
-        onClicked:(mouse)=> {
-            submitEvent(mouse, "click");
-        }
-        onPositionChanged:(mouse)=> {
-            submitEvent(mouse, "mousemove");
-        }
+        onClicked:
+            (mouse)=> {
+                submitEvent(mouse, "click");
+            }
+        onPositionChanged:
+            (mouse)=> {
+                submitEvent(mouse, "mousemove");
+            }
         onExited: {
             submitEvent(undefined, "mouseout");
         }
         onEntered: {
             submitEvent(undefined, "mouseenter");
         }
-        onPressed:(mouse)=> {
-            submitEvent(mouse, "mousedown");
-        }
-        onReleased:(mouse)=> {
-            submitEvent(mouse, "mouseup");
-        }
+        onPressed:
+            (mouse)=> {
+                submitEvent(mouse, "mousedown");
+            }
+        onReleased:
+            (mouse)=> {
+                submitEvent(mouse, "mouseup");
+            }
     }
     PropertyAnimation {
         id: chartAnimator
@@ -89,34 +93,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();
         }
     }
 }