@eclipse-scout/chart 24.1.3 → 24.1.10

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.10",
   "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.10",
     "@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.10",
     "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
@@ -10,7 +10,7 @@
 import {AbstractChartRenderer, ChartEventMap, ChartJsRenderer, ChartLayout, ChartModel, FulfillmentChartRenderer, SalesfunnelChartRenderer, SpeedoChartRenderer, VennChartRenderer} from '../index';
 import {aria, arrays, ColorScheme, colorSchemes, EnumObject, HtmlComponent, InitModelOf, objects, Widget} from '@eclipse-scout/core';
 import {GreenAreaPosition} from './SpeedoChartRenderer';
-import {ChartConfiguration, LinearScaleOptions, RadialLinearScaleOptions} from 'chart.js';
+import {CategoryScaleOptions, ChartConfiguration, ChartOptions, LinearScaleOptions, LogarithmicScaleOptions, RadialLinearScaleOptions, ScaleType, TimeScaleOptions as ChartJsTimeScaleOptions} from 'chart.js';
 import $ from 'jquery';
 
 export class Chart extends Widget implements ChartModel {
@@ -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() {
@@ -407,60 +414,72 @@ export type ChartValueGroup = {
   cssClass?: string;
 };
 
-export type ChartConfig = Partial<Omit<ChartConfiguration, 'type'>> & {
+export type ChartConfig = Partial<Omit<ChartConfiguration, 'type' | 'options'>> & {
   type: ChartType;
-  options?: {
-    autoColor?: boolean;
-    colorScheme?: ColorScheme | string;
-    transparent?: boolean;
-    maxSegments?: number;
-    otherSegmentClickable?: boolean;
-    adjustGridMaxMin?: boolean;
-    clickable?: boolean;
-    checkable?: boolean;
-    scaleLabelByTypeMap?: Record<ChartType, Record<string, string>>;
-    numberFormatter?: NumberFormatter;
-    reformatLabels?: boolean;
-    handleResize?: boolean;
-    animation?: {
-      duration?: number;
-    };
-    scales?: {
-      x?: LinearScaleOptions & {
-        minSpaceBetweenTicks?: number;
-      };
-      y?: LinearScaleOptions & {
-        minSpaceBetweenTicks?: number;
-      };
-      yDiffType?: LinearScaleOptions;
-      r?: RadialLinearScaleOptions & {
-        minSpaceBetweenTicks?: number;
-      };
-    };
-    bubble?: {
-      sizeOfLargestBubble?: number;
-      minBubbleSize?: number;
-    };
-    fulfillment?: {
-      startValue?: number;
-    };
-    salesfunnel?: {
-      normalized?: boolean;
-      calcConversionRate?: boolean;
-    };
-    speedo?: {
-      greenAreaPosition?: GreenAreaPosition;
-    };
-    venn?: {
-      numberOfCircles?: 1 | 2 | 3;
-    };
-    plugins?: {
-      legend?: {
-        clickable?: boolean;
-      };
+  options?: ChartConfigOptions;
+};
+
+export type ChartConfigOptions = Omit<ChartOptions, 'scales'> & {
+  autoColor?: boolean;
+  colorScheme?: ColorScheme | string;
+  transparent?: boolean;
+  maxSegments?: number;
+  otherSegmentClickable?: boolean;
+  adjustGridMaxMin?: boolean;
+  clickable?: boolean;
+  checkable?: boolean;
+  scaleLabelByTypeMap?: Record<ChartType, Record<string, string>>;
+  numberFormatter?: NumberFormatter;
+  reformatLabels?: boolean;
+  handleResize?: boolean;
+  animation?: {
+    duration?: number;
+  };
+  scales?: {
+    x?: CartesianChartScale;
+    y?: CartesianChartScale;
+    yDiffType?: CartesianChartScale;
+    r?: RadialChartScale;
+  };
+  bubble?: {
+    sizeOfLargestBubble?: number;
+    minBubbleSize?: number;
+  };
+  fulfillment?: {
+    startValue?: number;
+  };
+  salesfunnel?: {
+    normalized?: boolean;
+    calcConversionRate?: boolean;
+  };
+  speedo?: {
+    greenAreaPosition?: GreenAreaPosition;
+  };
+  venn?: {
+    numberOfCircles?: 1 | 2 | 3;
+  };
+  plugins?: {
+    legend?: {
+      clickable?: boolean;
     };
   };
 };
+
+export type RadialChartScale = DeepPartial<RadialLinearScaleOptions> & {
+  type?: ScaleType;
+  minSpaceBetweenTicks?: number;
+};
+
+export type CartesianChartScale = DeepPartial<LinearScaleOptions | CategoryScaleOptions | TimeScaleOptions | LogarithmicScaleOptions> & {
+  type?: ScaleType;
+  minSpaceBetweenTicks?: number;
+};
+
+export type TimeScaleOptions = Omit<ChartJsTimeScaleOptions, 'min' | 'max'> & {
+  min?: string | number | Date | (() => string | number | Date);
+  max?: string | number | Date | (() => string | number | Date);
+};
+
 export type ChartType = EnumObject<typeof Chart.Type>;
 export type ChartPosition = EnumObject<typeof Chart.Position>;
 export type NumberFormatter = (label: number | string, defaultFormatter: (label: number | string) => string) => string;
@@ -491,3 +510,7 @@ export type UpdateChartOptions = {
   onlyRefresh?: boolean;
   enforceRerender?: boolean;
 };
+
+type DeepPartial<T> = T extends object ? {
+  [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

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
@@ -7,10 +7,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {AbstractChartRenderer, Chart, chartJsDateAdapter} from '../index';
+import {AbstractChartRenderer, CartesianChartScale, Chart, chartJsDateAdapter, RadialChartScale} from '../index';
 import {
   _adapters as chartJsAdapters, ActiveElement, ArcElement, BarElement, BubbleDataPoint, CartesianScaleOptions, Chart as ChartJs, ChartArea, ChartConfiguration, ChartDataset, ChartEvent, ChartType as ChartJsType, Color, DefaultDataPoint,
-  FontSpec, LegendElement, LegendItem, LegendOptions, LinearScaleOptions, PointElement, PointHoverOptions, RadialLinearScaleOptions, Scale, ScatterDataPoint, TooltipCallbacks, TooltipItem, TooltipLabelStyle, TooltipModel, TooltipOptions
+  FontSpec, LegendElement, LegendItem, LegendOptions, LinearScaleOptions, PointElement, PointHoverOptions, RadialLinearScaleOptions, Scale, ScatterDataPoint, Scriptable, ScriptableContext, TooltipCallbacks, TooltipItem, TooltipLabelStyle,
+  TooltipModel, TooltipOptions
 } from 'chart.js';
 import 'chart.js/auto'; // Import from auto to register charts
 import {aria, arrays, colorSchemes, graphics, numbers, objects, Point, scout, strings, styles, Tooltip, tooltips} from '@eclipse-scout/core';
@@ -241,10 +242,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 +254,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 +436,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 +460,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 +2270,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       }
     });
     if (update) {
-      this.chartJs.update();
+      this.refresh();
     }
   }
 
@@ -2297,7 +2318,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 +2349,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();
@@ -2782,7 +2803,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     });
   }
 
-  protected _adjustAxisMaxMin(axis: LinearScaleOptions | RadialLinearScaleOptions, maxTicks: number, maxMinValue: Boundary) {
+  protected _adjustAxisMaxMin(axis: AxisWithMaxMin, maxTicks: number, maxMinValue: Boundary) {
     if (!axis) {
       return;
     }
@@ -2845,6 +2866,12 @@ export type DatasetColors = {
 
 export type Boundary = { maxValue: number; minValue: number };
 
+export type AxisWithMaxMin = (CartesianChartScale | RadialChartScale) & {
+  ticks?: (CartesianChartScale | RadialChartScale)['ticks'] & {
+    stepSize?: number;
+  };
+};
+
 // extend chart.js
 
 export type ChartJsChart = Omit<ChartJs, 'config'> & {
@@ -2861,10 +2888,10 @@ declare module 'chart.js' {
     datasetId?: string;
     yAxisID?: 'y' | 'yDiffType';
 
-    pointBackgroundColor?: Color;
-    pointHoverBackgroundColor?: Color;
-    pointRadius?: number;
-    legendColor?: Color;
+    pointBackgroundColor?: Scriptable<Color, ScriptableContext<TType>>;
+    pointHoverBackgroundColor?: Scriptable<Color, ScriptableContext<TType>>;
+    pointRadius?: Scriptable<number, ScriptableContext<TType>>;
+    legendColor?: Scriptable<Color, number>;
 
     checkedBackgroundColor?: Color;
     checkedHoverBackgroundColor?: Color;

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.