@eclipse-scout/chart 24.2.17 → 25.1.0-beta.2

package/dist/file-list

@@ -1,13 +1,13 @@
-eclipse-scout-chart-eb8127f41211b904a4d2.min.js
-eclipse-scout-chart-eb8127f41211b904a4d2.min.js.map
-eclipse-scout-chart-theme-0ccdbef637d0a76afc97.min.css
-eclipse-scout-chart-theme-dark-7f7bf1d1273a6775ec74.min.css
+eclipse-scout-chart-f2ef4dc34a38fde9cfea.min.js
+eclipse-scout-chart-f2ef4dc34a38fde9cfea.min.js.map
+eclipse-scout-chart-theme-03e8dfdce2c2cd602f40.min.css
+eclipse-scout-chart-theme-dark-378a537154001198a741.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-6dfc38f90757c5fbaa5c.min.js
-eclipse-scout-chart.esm-6dfc38f90757c5fbaa5c.min.js.map
+eclipse-scout-chart.esm-68ec6b6400b08664057c.min.js
+eclipse-scout-chart.esm-68ec6b6400b08664057c.min.js.map
 eclipse-scout-chart.esm.js
 eclipse-scout-chart.esm.js.map
 eclipse-scout-chart.js

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@eclipse-scout/chart",
-  "version": "24.2.17",
+  "version": "25.1.0-beta.2",
   "description": "Eclipse Scout chart",
   "author": "BSI Business Systems Integration AG",
-  "homepage": "https://www.eclipse.org/scout",
+  "homepage": "https://eclipse.dev/scout/",
   "repository": {
     "type": "git",
     "url": "https://github.com/eclipse-scout/scout.rt.git"
   },
   "license": "EPL-2.0",
   "engines": {
-    "node": ">=20.10.0",
-    "npm": ">=10.2.3",
-    "pnpm": ">=8.11.0"
+    "node": ">=22.12.0",
+    "npm": ">=10.9.0",
+    "pnpm": ">=9.15.0"
   },
   "keywords": [
     "scout",
@@ -34,19 +34,19 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "24.2.17",
-    "@eclipse-scout/releng": "^24.1.0",
-    "jasmine-core": "5.1.1",
+    "@eclipse-scout/cli": "25.1.0-beta.2",
+    "@eclipse-scout/releng": "^25.1.0",
+    "jasmine-core": "5.5.0",
     "jasmine-jquery": "2.1.1",
-    "karma": "6.4.2",
-    "@types/jquery": "3.5.29",
-    "@types/jasmine": "5.1.4",
+    "karma": "6.4.4",
+    "@types/jquery": "3.5.32",
+    "@types/jasmine": "5.1.5",
     "@types/jasmine-jquery": "1.5.37"
   },
   "dependencies": {
-    "@eclipse-scout/core": "24.2.17",
+    "@eclipse-scout/core": "25.1.0-beta.2",
     "jquery": "3.7.1",
-    "chart.js": "4.4.0",
+    "chart.js": "4.4.6",
     "chartjs-plugin-datalabels": "2.2.0"
   },
   "scripts": {

package/src/chart/Chart.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -394,6 +394,7 @@
   overflow: hidden;
 
   /* use padding area for label, legend */
+
   & > .field.chart {
     overflow: visible;
 
@@ -690,6 +691,63 @@ path.speedo-chart-arc, path.pointer {
   &.red {
     stroke: @speedo-chart-red;
   }
+
+  .color-alternative & {
+
+    &.dark-green {
+      stroke: @speedo-chart-dark-green-alternative;
+    }
+
+    &.light-green {
+      stroke: @speedo-chart-green-alternative;
+    }
+
+    &.yellow {
+      stroke: @speedo-chart-yellow-alternative;
+    }
+
+    &.red {
+      stroke: @speedo-chart-red-alternative;
+    }
+  }
+
+  .inverted & {
+
+    &.dark-green {
+      stroke: @speedo-chart-dark-green-inverted;
+    }
+
+    &.light-green {
+      stroke: @speedo-chart-green-inverted;
+    }
+
+    &.yellow {
+      stroke: @speedo-chart-yellow-inverted;
+    }
+
+    &.red {
+      stroke: @speedo-chart-red-inverted;
+    }
+
+    .color-alternative& {
+
+      &.dark-green {
+        stroke: @speedo-chart-dark-green-alternative-inverted;
+      }
+
+      &.light-green {
+        stroke: @speedo-chart-green-alternative-inverted;
+      }
+
+      &.yellow {
+        stroke: @speedo-chart-yellow-alternative-inverted;
+      }
+
+      &.red {
+        stroke: @speedo-chart-red-alternative-inverted;
+      }
+    }
+  }
 }
 
 /* --- Salesfunnel --- */

package/src/chart/ChartJsRenderer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2025 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,11 +10,11 @@
 import {AbstractChartRenderer, CartesianChartScale, Chart, ChartAxis, ChartColorMode, ChartConfig, ChartData, chartJsDateAdapter, ChartType, ClickObject, NumberFormatter, RadialChartScale} from '../index';
 import {
   _adapters as chartJsAdapters, ActiveElement, ArcElement, BarElement, BubbleDataPoint, CartesianScaleOptions, CategoryScale, Chart as ChartJs, ChartArea, ChartConfiguration, ChartDataset, ChartEvent, ChartType as ChartJsType, Color,
-  DefaultDataPoint, FontSpec, LegendElement, LegendItem, LegendOptions, LinearScaleOptions, PointElement, PointHoverOptions, RadialLinearScaleOptions, Scale, ScatterDataPoint, Scriptable, ScriptableContext, TooltipCallbacks, TooltipItem,
-  TooltipLabelStyle, TooltipModel, TooltipOptions
+  DefaultDataPoint, FontSpec, LegendElement, LegendItem, LegendOptions, LinearScaleOptions, Point as ChartJsPoint, 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';
+import {aria, arrays, colorSchemes, graphics, numbers, objects, Point, scout, SomeRequired, strings, styles, Tooltip, tooltips} from '@eclipse-scout/core';
 import ChartDataLabels, {Context} from 'chartjs-plugin-datalabels';
 import $ from 'jquery';
 
@@ -63,6 +63,14 @@ $.extend(true, ChartJs.overrides, {
         radius: 3
       }
     }
+  },
+  bubble: {
+    layout: {
+      // Enabled auto padding would cause Chart.js to automatically add padding, in the size of the largest bubble
+      // (defined by 'sizeOfLargestBubble'), around the chart. This wastes spaces and is not necessary, as we adjust
+      // the axes already with the bubble size in mind.
+      autoPadding: false
+    }
   }
 });
 
@@ -256,7 +264,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     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._adjustSize(this.chartJs.config, this.chartJs.chartArea, {isDatasetVisible: i => this.chartJs.getDatasetMeta(i).visible});
     this.refresh();
   }
 
@@ -437,7 +445,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
 
     this.refresh();
 
-    this._adjustSize(this.chartJs.config, this.chartJs.chartArea);
+    this._adjustSize(this.chartJs.config, this.chartJs.chartArea, {isDatasetVisible: i => this.chartJs.getDatasetMeta(i).visible});
     this.refresh();
   }
 
@@ -907,11 +915,11 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     }
     if (objects.isFunction(tooltipLabelValue)) {
       labelValue = tooltipLabelValue(tooltipItem);
-      labelValue = objects.isString(labelValue) || objects.isPlainObject(labelValue) ? labelValue : '';
+      labelValue = objects.isString(labelValue) || objects.isObject(labelValue) ? labelValue : '';
     }
     if (objects.isFunction(tooltipColor)) {
       labelColor = tooltipColor(tooltipItem);
-      labelColor = objects.isPlainObject(labelColor) ? (labelColor.backgroundColor || '') : '';
+      labelColor = objects.isObject(labelColor) ? (labelColor.backgroundColor || '') : '';
     }
     return {label, labelValue, labelColor};
   }
@@ -1110,7 +1118,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       value = dataset.data[dataIndex];
 
     if (this._isHorizontalBar(config)) {
-      if (objects.isPlainObject(value) && objects.isArray(value.x) && value.x.length === 2) {
+      if (objects.isObject(value) && objects.isArray(value.x) && value.x.length === 2) {
         let avg = (value.x[0] + value.x[1]) / 2;
         tooltipDirection = avg < 0 ? 'left' : 'right';
       } else {
@@ -2348,6 +2356,9 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     defaultLegendClick.call(this.chartJs, e, legendItem, legend);
     this._onLegendLeave(e, legendItem, legend);
     this._onLegendHoverPointer(e, legendItem, legend);
+
+    this._adjustSize(this.chartJs.config, this.chartJs.chartArea, {isDatasetVisible: i => this.chartJs.getDatasetMeta(i).visible});
+    this.refresh();
   }
 
   protected _onLegendHover(e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>) {
@@ -2486,15 +2497,15 @@ export class ChartJsRenderer extends AbstractChartRenderer {
 
   protected _onResize(chart: ChartJsChart, size: { width: number; height: number }) {
     chart.update();
-    this._adjustSize(chart.config, chart.chartArea);
+    this._adjustSize(chart.config, chart.chartArea, {isDatasetVisible: i => chart.getDatasetMeta(i).visible});
   }
 
-  protected _adjustSize(config: ChartConfig, chartArea: ChartArea) {
-    this._adjustBubbleSizes(config, chartArea);
-    this._adjustGridMaxMin(config, chartArea);
+  protected _adjustSize(config: ChartConfig, chartArea: ChartArea, options?: ChartJsRendererAdjustSizeOptions) {
+    this._adjustBubbleSizes(config, chartArea, options);
+    this._adjustGridMaxMin(config, chartArea, options);
   }
 
-  protected _adjustBubbleSizes(config: ChartConfig, chartArea: ChartArea) {
+  protected _adjustBubbleSizes(config: ChartConfig, chartArea: ChartArea, options?: ChartJsRendererAdjustSizeOptions) {
     if (config.type !== Chart.Type.BUBBLE) {
       return;
     }
@@ -2507,7 +2518,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         data.r = Math.sqrt(data.z);
       }
     }));
-    let maxMinR = this._computeMaxMinValue(config, datasets, 'r', true),
+    let maxMinR = this._computeMaxMinValue(config, datasets, {...options, identifier: 'r', exact: true}),
       maxR = maxMinR.maxValue,
       minR = maxMinR.minValue,
       // Compute a scalingFactor and an offset to get the new radius newR = r * scalingFactor + offset.
@@ -2561,25 +2572,55 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     }));
   }
 
-  protected _computeMaxMinValue(config: ChartConfig, datasets: ChartDataset[], identifier?: string, exact?: boolean, boundRange?: boolean, padding?: number, space?: number): Boundary {
+  protected _computeMaxMinValue(config: ChartConfig, datasets: ChartDataset[], options?: ChartJsRendererComputeMaxMinValueOptions): Boundary {
     if (!datasets) {
       return;
     }
 
+    const {identifier, exact, boundRange, padding, space} = options || {};
+    const isDatasetVisible = options?.isDatasetVisible || (i => true);
+
+    // do not use 0 as default as the max-min-range might not include 0, e.g. all values are greater than 10.000
     let maxValue, minValue;
     if (config.type === Chart.Type.SCATTER && identifier === 'r') {
       // do not move the grid boundaries because of the radii of the points (would look weird)
       maxValue = 0;
       minValue = 0;
     } else {
+      // check if chart is stacked
+      const sums = [];
+      let calculateSum = false;
+      if (scout.isOneOf(config.type, Chart.Type.LINE, Chart.Type.BAR)) {
+        calculateSum = !!config.options.scales.y.stacked;
+      } else if (config.type === Chart.Type.BAR_HORIZONTAL) {
+        calculateSum = !!config.options.scales.x.stacked;
+      }
+
+      const extractValue = (data: (number | [number, number] | ChartJsPoint | BubbleDataPoint)) => {
+        if (identifier) {
+          return data[identifier];
+        }
+        return data;
+      };
+
       for (let i = 0; i < datasets.length; i++) {
+        // do not consider hidden datasets
+        if (!scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA) && !isDatasetVisible(i)) {
+          continue;
+        }
+
         for (let j = 0; j < datasets[i].data.length; j++) {
-          let value;
-          if (identifier) {
-            value = datasets[i].data[j][identifier];
-          } else {
-            value = datasets[i].data[j];
+          const value = extractValue(datasets[i].data[j]);
+
+          if (calculateSum) {
+            if (!sums[j]) {
+              sums[j] = 0;
+            }
+            sums[j] += value;
+
+            continue;
           }
+
           if (isNaN(maxValue)) {
             maxValue = value;
           } else {
@@ -2592,6 +2633,12 @@ export class ChartJsRenderer extends AbstractChartRenderer {
           }
         }
       }
+
+      // update maxValue/minValue with max/min sum
+      if (calculateSum) {
+        maxValue = Math.max(arrays.max(sums), 0);
+        minValue = Math.min(arrays.min(sums), 0);
+      }
     }
 
     if (isNaN(maxValue)) {
@@ -2668,7 +2715,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     return value;
   }
 
-  protected _adjustGridMaxMin(config: ChartConfig, chartArea: ChartArea) {
+  protected _adjustGridMaxMin(config: ChartConfig, chartArea: ChartArea, options?: ChartJsRendererAdjustSizeOptions) {
     if (!config || !config.type || !config.options || !config.options.adjustGridMaxMin || !config.options.scales || !chartArea) {
       return;
     }
@@ -2695,7 +2742,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       maxXTicks = Math.max(Math.floor(width / minSpaceBetweenXTicks) + 1, 3),
       maxYTicks = Math.max(Math.floor(height / minSpaceBetweenYTicks) + 1, 3);
 
-    let yBoundaries = this._computeYBoundaries(config, height),
+    let yBoundaries = this._computeYBoundaries(config, {...options, space: height}),
       yBoundary = yBoundaries.yBoundary,
       yBoundaryDiffType = yBoundaries.yBoundaryDiffType;
 
@@ -2717,11 +2764,12 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       return;
     }
 
-    let xBoundary = this._computeXBoundaryPointElement(config, width);
+    let xBoundary = this._computeXBoundaryPointElement(config, {...options, space: width});
     this._adjustAxisMaxMin(xAxis, maxXTicks, xBoundary);
   }
 
-  protected _computeBoundaryPointElement(config: ChartConfig, identifier: string, space: number): Boundary {
+  protected _computeBoundaryPointElement(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryWithIdentifierOptions, 'identifier' | 'space'>): Boundary {
+    const {identifier, space} = options;
     if (!config || !config.type || !scout.isOneOf(config.type, Chart.Type.BUBBLE, Chart.Type.SCATTER) || !config.data || !config.options || !config.options.scales || !(identifier === 'x' || identifier === 'y') || !space) {
       return;
     }
@@ -2732,16 +2780,16 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       labelMap = config.options[identifier + 'LabelMap'],
       boundary;
 
-    let maxR = this._computeMaxMinValue(config, datasets, 'r', true).maxValue,
+    let maxR = this._computeMaxMinValue(config, datasets, {...options, identifier: 'r', exact: true, space: null}).maxValue,
       padding = maxR;
     if (config.options.elements && config.options.elements.point && config.options.elements.point.hoverRadius) {
       padding = padding + (config.options.elements.point.hoverRadius as number);
     }
 
     if (offset) {
-      boundary = this._computeMaxMinValue(config, datasets, identifier, labelMap, true);
+      boundary = this._computeMaxMinValue(config, datasets, {...options, exact: !!labelMap, boundRange: true, space: null});
     } else {
-      boundary = this._computeMaxMinValue(config, datasets, identifier, labelMap, true, padding, space);
+      boundary = this._computeMaxMinValue(config, datasets, {...options, exact: !!labelMap, boundRange: true, padding});
     }
     if (labelMap) {
       boundary.maxValue = Math.ceil(boundary.maxValue);
@@ -2750,15 +2798,15 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     return boundary;
   }
 
-  protected _computeXBoundaryPointElement(config: ChartConfig, width: number): Boundary {
-    return this._computeBoundaryPointElement(config, 'x', width);
+  protected _computeXBoundaryPointElement(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryOptions, 'space'>): Boundary {
+    return this._computeBoundaryPointElement(config, {...options, identifier: 'x'});
   }
 
-  protected _computeYBoundaryPointElement(config: ChartConfig, height: number): Boundary {
-    return this._computeBoundaryPointElement(config, 'y', height);
+  protected _computeYBoundaryPointElement(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryOptions, 'space'>): Boundary {
+    return this._computeBoundaryPointElement(config, {...options, identifier: 'y'});
   }
 
-  protected _computeYBoundaries(config: ChartConfig, height: number): { yBoundary?: Boundary; yBoundaryDiffType?: Boundary } {
+  protected _computeYBoundaries(config: ChartConfig, options: SomeRequired<ChartJsRendererComputeBoundaryOptions, 'space'>): { yBoundary?: Boundary; yBoundaryDiffType?: Boundary } {
     if (!config || !config.type) {
       return {};
     }
@@ -2768,7 +2816,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       yBoundaryDiffType;
 
     if (scout.isOneOf(type, Chart.Type.BUBBLE, Chart.Type.SCATTER)) {
-      yBoundary = this._computeYBoundaryPointElement(config, height);
+      yBoundary = this._computeYBoundaryPointElement(config, options);
     } else {
       let datasets = [],
         datasetsDiffType = [];
@@ -2782,10 +2830,10 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         });
       }
 
-      yBoundary = this._computeMaxMinValue(config, datasets);
+      yBoundary = this._computeMaxMinValue(config, datasets, {...options, space: null});
 
       if (datasets.length && datasetsDiffType.length) {
-        yBoundaryDiffType = this._computeMaxMinValue(config, datasetsDiffType);
+        yBoundaryDiffType = this._computeMaxMinValue(config, datasetsDiffType, {...options, space: null});
         let yBoundaryRange = yBoundary.maxValue - yBoundary.minValue,
           yBoundaryRangeDiffType = yBoundaryDiffType.maxValue - yBoundaryDiffType.minValue;
         if (yBoundaryRange && yBoundaryRangeDiffType && (yBoundaryRange / yBoundaryRangeDiffType > 10 || yBoundaryRangeDiffType / yBoundaryRange > 10)) {
@@ -2899,6 +2947,20 @@ export type TooltipLabelGenerator = (tooltipItem: TooltipItem<any>) => string |
 export type TooltipLabelValueGenerator = (tooltipItem: TooltipItem<any>) => string | { x: string; y: string };
 export type TooltipLabelColorGenerator = (tooltipItem: TooltipItem<any>) => TooltipLabelStyle | void;
 export type TooltipRenderer = (context: { chart: ChartJs; tooltip: TooltipModel<any> }) => void;
+export type ChartJsRendererAdjustSizeOptions = {
+  isDatasetVisible?: (number) => boolean;
+};
+export type ChartJsRendererComputeBoundaryOptions = ChartJsRendererAdjustSizeOptions & {
+  space?: number;
+};
+export type ChartJsRendererComputeBoundaryWithIdentifierOptions = ChartJsRendererComputeBoundaryOptions & {
+  identifier?: string;
+};
+export type ChartJsRendererComputeMaxMinValueOptions = ChartJsRendererComputeBoundaryWithIdentifierOptions & {
+  exact?: boolean;
+  boundRange?: boolean;
+  padding?: number;
+};
 
 export type DatasetColors = {
   backgroundColors?: (string | string[])[];

package/src/index.ts

@@ -8,6 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 import {ObjectFactory} from '@eclipse-scout/core';
+import * as self from './index';
 
 export * from './chart/Chart';
 export * from './chart/ChartAdapter';
@@ -39,8 +40,6 @@ export * from './table/controls/ChartTableUserFilterModel';
 export * from './table/controls/ChartTableControlAdapter';
 export * from './table/controls/ChartTableControlLayout';
 
-import * as self from './index';
-
 export default self;
 
 ObjectFactory.get().registerNamespace('scout', self);

package/src/style/colors.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -86,6 +86,18 @@
 @speedo-chart-green: @palette-green-3;
 @speedo-chart-yellow: @palette-orange-3;
 @speedo-chart-red: @palette-red-3;
+@speedo-chart-dark-green-alternative: @speedo-chart-dark-green;
+@speedo-chart-green-alternative: @speedo-chart-green;
+@speedo-chart-yellow-alternative: @speedo-chart-yellow;
+@speedo-chart-red-alternative: @speedo-chart-red;
+@speedo-chart-dark-green-inverted: @speedo-chart-dark-green;
+@speedo-chart-green-inverted: @speedo-chart-green;
+@speedo-chart-yellow-inverted: @speedo-chart-yellow;
+@speedo-chart-red-inverted: @speedo-chart-red;
+@speedo-chart-dark-green-alternative-inverted: @speedo-chart-dark-green;
+@speedo-chart-green-alternative-inverted: @speedo-chart-green;
+@speedo-chart-yellow-alternative-inverted: @speedo-chart-yellow;
+@speedo-chart-red-alternative-inverted: @speedo-chart-red;
 @salesfunnel-bar-label-color: @palette-white;
 @salesfunnel-alternative-bar-label-color: @salesfunnel-bar-label-color;
 @salesfunnel-inverted-bar-label-color: @tile-default-inverted-background-color;