@eclipse-scout/chart 24.1.3 → 24.1.6

package/dist/file-list

@@ -1,13 +1,13 @@
-eclipse-scout-chart-1a81682e3fb823b0ca01.min.js
-eclipse-scout-chart-1a81682e3fb823b0ca01.min.js.map
+eclipse-scout-chart-3ba6b8f30d5806cac8ae.min.js
+eclipse-scout-chart-3ba6b8f30d5806cac8ae.min.js.map
 eclipse-scout-chart-theme-56ba6667e592ef147869.min.css
 eclipse-scout-chart-theme-dark-593955eea95984c5aa62.min.css
 eclipse-scout-chart-theme-dark.css
 eclipse-scout-chart-theme-dark.css.map
 eclipse-scout-chart-theme.css
 eclipse-scout-chart-theme.css.map
-eclipse-scout-chart.esm-063bb266266e01e3ccd0.min.js
-eclipse-scout-chart.esm-063bb266266e01e3ccd0.min.js.map
+eclipse-scout-chart.esm-8d9db200429e545abcae.min.js
+eclipse-scout-chart.esm-8d9db200429e545abcae.min.js.map
 eclipse-scout-chart.esm.js
 eclipse-scout-chart.esm.js.map
 eclipse-scout-chart.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/chart",
-  "version": "24.1.3",
+  "version": "24.1.6",
   "description": "Eclipse Scout chart",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -26,7 +26,7 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "24.1.3",
+    "@eclipse-scout/cli": "24.1.6",
     "@eclipse-scout/releng": "^24.1.0",
     "jasmine-core": "5.1.1",
     "jasmine-jquery": "2.1.1",
@@ -36,7 +36,7 @@
     "@types/jasmine-jquery": "1.5.37"
   },
   "dependencies": {
-    "@eclipse-scout/core": "24.1.3",
+    "@eclipse-scout/core": "24.1.6",
     "jquery": "3.7.1",
     "chart.js": "4.4.0",
     "chartjs-plugin-datalabels": "2.2.0"

package/src/chart/AbstractChartRenderer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -9,10 +9,12 @@
  */
 
 import {Chart} from '../index';
-import {arrays, Session} from '@eclipse-scout/core';
+import {arrays, PropertyChangeEvent, PropertyEventEmitter, PropertyEventMap, Session} from '@eclipse-scout/core';
 import {UpdateChartOptions} from './Chart';
 
-export class AbstractChartRenderer {
+export class AbstractChartRenderer extends PropertyEventEmitter {
+  declare eventMap: AbstractChartRendererEventMap;
+
   chart: Chart;
   session: Session;
 
@@ -25,6 +27,7 @@ export class AbstractChartRenderer {
   firstOpaqueBackgroundColor: string;
 
   constructor(chart: Chart) {
+    super();
     this.chart = chart;
     this.session = chart.session;
     this.rendering = false;
@@ -87,14 +90,16 @@ export class AbstractChartRenderer {
    *          property is ignored when chart.config.options.animation.duration is <code>0</code>!
    */
   render(requestAnimation: boolean) {
-    this.animationDuration = requestAnimation ? this.chart.config.options.animation.duration : 0;
     if (!this.validate() || !this.chart.rendered) {
       return;
     }
+    const configAnimationDuration = this.chart.config.options.animation.duration;
+    this.setAnimationDuration(requestAnimation ? configAnimationDuration : 0);
     this.rendering = true;
     this._render();
     this.rendering = false;
     this.rendered = true;
+    this.setAnimationDuration(configAnimationDuration);
   }
 
   protected _render() {
@@ -121,11 +126,13 @@ export class AbstractChartRenderer {
       this.render(requestAnimation);
       return;
     }
-    this.animationDuration = requestAnimation ? this.chart.config.options.animation.duration : 0;
     if (!this.validate() || !this.isDataUpdatable()) {
       return;
     }
+    const configAnimationDuration = this.chart.config.options.animation.duration;
+    this.setAnimationDuration(requestAnimation ? configAnimationDuration : 0);
     this._updateData();
+    this.setAnimationDuration(configAnimationDuration);
   }
 
   protected _updateData() {
@@ -136,6 +143,10 @@ export class AbstractChartRenderer {
     return false;
   }
 
+  isDetachSupported(): boolean {
+    return true;
+  }
+
   refresh() {
     if (this.rendered) {
       this.remove(false);
@@ -143,18 +154,37 @@ export class AbstractChartRenderer {
     this.render(false);
   }
 
+  setAnimationDuration(animationDuration: number) {
+    if (!this.setProperty('animationDuration', animationDuration)) {
+      return;
+    }
+    if (this.rendered) {
+      this._renderAnimationDuration();
+    }
+  }
+
+  protected _setAnimationDuration(animationDuration: number) {
+    this._setProperty('animationDuration', animationDuration);
+  }
+
+  protected _renderAnimationDuration() {
+    // nop
+  }
+
   /**
    * @param requestAnimation
    *          Whether animations should be used while removing the chart. Note that his
    *          property is ignored when chart.config.options.animation.duration is <code>0</code>!
    */
   remove(requestAnimation = false, afterRemoveFunc?: (chartAnimationStopping?: boolean) => void) {
-    this.animationDuration = requestAnimation && this.chart.config.options.animation.duration;
+    const configAnimationDuration = this.chart.config.options.animation.duration;
+    this.setAnimationDuration(requestAnimation && configAnimationDuration);
     if (this.animationDuration && this.rendered) {
       this._removeAnimated(afterRemoveFunc);
     } else {
       this._remove(afterRemoveFunc);
     }
+    this.setAnimationDuration(configAnimationDuration);
   }
 
   protected _remove(afterRemoveFunc: (chartAnimationStopping?: boolean) => void) {
@@ -174,3 +204,7 @@ export class AbstractChartRenderer {
     return opts.requestAnimation;
   }
 }
+
+export interface AbstractChartRendererEventMap extends PropertyEventMap {
+  'propertyChange:animationDuration': PropertyChangeEvent<number>;
+}

package/src/chart/Chart.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -107,7 +107,14 @@ export class Chart extends Widget implements ChartModel {
 
   protected override _renderOnAttach() {
     super._renderOnAttach();
-    this._updateChartOptsWhileNotAttached.splice(0).forEach(opts => this.updateChart($.extend(true, {}, opts, {debounce: true})));
+    const updateChartOptsWhileNotAttached = this._updateChartOptsWhileNotAttached.splice(0);
+    if (!this.chartRenderer?.isDetachSupported()) {
+      // the chartRenderer does not support detach => recreate it
+      this._updateChartRenderer();
+      updateChartOptsWhileNotAttached.forEach(opts => delete opts.requestAnimation);
+      updateChartOptsWhileNotAttached.push({requestAnimation: false});
+    }
+    updateChartOptsWhileNotAttached.forEach(opts => this.updateChart($.extend(true, {}, opts, {debounce: true})));
   }
 
   protected override _remove() {

package/src/chart/ChartJsRenderer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -241,10 +241,10 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     }
     let config = $.extend(true, {}, this.chart.config);
     this._adjustConfig(config);
-    this._renderChart(config, true);
+    this._renderChart(config);
   }
 
-  protected _renderChart(config: ChartConfig, animated: boolean) {
+  protected _renderChart(config: ChartConfig) {
     if (this.chartJs) {
       this.chartJs.destroy();
     }
@@ -253,11 +253,11 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         animation: {}
       }
     }, config);
-    config.options.animation.duration = animated ? this.animationDuration : 0;
+    config.options.animation.duration = this.animationDuration;
 
     this.chartJs = new ChartJs(this.$canvas[0].getContext('2d'), config as ChartConfiguration) as ChartJsChart;
     this._adjustSize(this.chartJs.config, this.chartJs.chartArea);
-    this.chartJs.update();
+    this.refresh();
   }
 
   protected override _updateData() {
@@ -435,16 +435,22 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       (axis.ticks || {} as (LinearScaleOptions | RadialLinearScaleOptions)['ticks']).stepSize = undefined;
     });
 
-    this.chartJs.update();
+    this.refresh();
 
     this._adjustSize(this.chartJs.config, this.chartJs.chartArea);
-    this.chartJs.update();
+    this.refresh();
   }
 
   override isDataUpdatable(): boolean {
     return true;
   }
 
+  override isDetachSupported(): boolean {
+    // chart.js removes the animation-listeners onProgress and onComplete on detach and does not add them again on attach
+    // these listeners are needed for the datalabels => this renderer does not support detach
+    return false;
+  }
+
   override refresh() {
     if (this.chartJs) {
       this.chartJs.update();
@@ -453,9 +459,23 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     }
   }
 
+  protected override _renderAnimationDuration() {
+    if (!this.chartJs) {
+      return;
+    }
+    $.extend(true, this.chartJs.config, {
+      options: {
+        animation: {
+          duration: this.animationDuration
+        }
+      }
+    });
+    this.refresh();
+  }
+
   protected override _renderCheckedItems() {
     if (this.chartJs && this._checkItems(this.chartJs.config)) {
-      this.chartJs.update();
+      this.refresh();
     }
   }
 
@@ -2249,7 +2269,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       }
     });
     if (update) {
-      this.chartJs.update();
+      this.refresh();
     }
   }
 
@@ -2297,7 +2317,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       datasetType = dataset ? dataset.type : null;
     if ((datasetType || type) === Chart.Type.LINE) {
       this._setHoverBackgroundColor(dataset);
-      this.chartJs.update();
+      this.refresh();
     }
     this._updateHoverStyle(index, true);
     this.chartJs.render();
@@ -2328,7 +2348,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       datasetType = dataset ? dataset.type : null;
     if ((datasetType || type) === Chart.Type.LINE) {
       this._restoreBackgroundColor(dataset);
-      this.chartJs.update();
+      this.refresh();
     }
     this._updateHoverStyle(index, false);
     this.chartJs.render();

package/src/chart/VennChartRenderer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -103,6 +103,8 @@ export class VennChartRenderer extends AbstractSvgChartRenderer {
     }
 
     // Final callback
+    // In the case of 3 circles, draw will be called async after render is completed. Therefore, the current animationDuration needs to be set again when _draw is finally called.
+    const animationDurationRender = this.animationDuration;
     let draw = function() {
       this.readyToDraw = true;
       if (!this.$svg.isAttached()) {
@@ -110,7 +112,10 @@ export class VennChartRenderer extends AbstractSvgChartRenderer {
         return;
       }
       this.readyToDraw = false;
+      const animationDuration = this.animationDuration;
+      this.setAnimationDuration(animationDurationRender);
       this._draw(true, true);
+      this.setAnimationDuration(animationDuration);
     }.bind(this);
 
     // save callback if user navigated away while calculating and _draw is not executed.