@eclipse-scout/chart 24.1.15 → 24.2.0-beta.2

package/dist/file-list

@@ -1,13 +1,13 @@
-eclipse-scout-chart-2c6ae7947528f036e203.min.js
-eclipse-scout-chart-2c6ae7947528f036e203.min.js.map
-eclipse-scout-chart-theme-56ba6667e592ef147869.min.css
-eclipse-scout-chart-theme-dark-593955eea95984c5aa62.min.css
+eclipse-scout-chart-8156b4ff3ded6a4a0a51.min.js
+eclipse-scout-chart-8156b4ff3ded6a4a0a51.min.js.map
+eclipse-scout-chart-theme-3ac5a1e9bedc33d600c8.min.css
+eclipse-scout-chart-theme-dark-e9c7a6ec1bc2f34437ba.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-25520de13e473a9171b1.min.js
-eclipse-scout-chart.esm-25520de13e473a9171b1.min.js.map
+eclipse-scout-chart.esm-d6c3855b96d1a2003edc.min.js
+eclipse-scout-chart.esm-d6c3855b96d1a2003edc.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.15",
+  "version": "24.2.0-beta.2",
   "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.15",
+    "@eclipse-scout/cli": "24.2.0-beta.2",
     "@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.15",
+    "@eclipse-scout/core": "24.2.0-beta.2",
     "jquery": "3.7.1",
     "chart.js": "4.4.0",
     "chartjs-plugin-datalabels": "2.2.0"

package/src/chart/Chart.less

@@ -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
@@ -390,12 +390,16 @@
 /* min-width for charts */
 @chart-min-width: 75px;
 
-/* use padding area for label, legend */
-.tile > .form-field > .field.chart {
-  overflow: visible;
+.tile > .chart-field {
+  overflow: hidden;
 
-  & > svg {
+  /* use padding area for label, legend */
+  & > .field.chart {
     overflow: visible;
+
+    & > svg {
+      overflow: visible;
+    }
   }
 }
 

package/src/chart/Chart.ts

@@ -150,6 +150,7 @@ export class Chart extends Widget implements ChartModel {
       type: Chart.Type.PIE,
       options: {
         autoColor: true,
+        colorMode: ChartColorMode.AUTO,
         colorScheme: colorSchemes.ColorSchemeId.DEFAULT,
         transparent: false,
         maxSegments: 5,
@@ -421,6 +422,7 @@ export type ChartConfig = Partial<Omit<ChartConfiguration, 'type' | 'options'>>
 
 export type ChartConfigOptions = Omit<ChartOptions, 'scales'> & {
   autoColor?: boolean;
+  colorMode?: ChartColorMode;
   colorScheme?: ColorScheme | string;
   transparent?: boolean;
   maxSegments?: number;
@@ -484,6 +486,24 @@ 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;
 
+/**
+ * Determines what parts of the chart data is colored with the same colors.
+ */
+export enum ChartColorMode {
+  /**
+   * Uses one of the other options depending on the chart type.
+   */
+  AUTO = 'auto',
+  /**
+   * Uses a different color for each dataset.
+   */
+  DATASET = 'dataset',
+  /**
+   * Uses a different color for each datapoint in a dataset but the n-th datapoint in each dataset will be colored using the same color.
+   */
+  DATA = 'data'
+}
+
 export type ClickObject = {
   datasetIndex: number;
   dataIndex: number;

package/src/chart/ChartJsRenderer.ts

@@ -7,17 +7,16 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {AbstractChartRenderer, CartesianChartScale, Chart, chartJsDateAdapter, RadialChartScale} from '../index';
+import {AbstractChartRenderer, CartesianChartScale, Chart, ChartAxis, ChartColorMode, ChartConfig, ChartData, chartJsDateAdapter, ChartType, ClickObject, NumberFormatter, 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, Scriptable, ScriptableContext, TooltipCallbacks, TooltipItem, TooltipLabelStyle,
-  TooltipModel, TooltipOptions
+  _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
 } 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 ChartDataLabels, {Context} from 'chartjs-plugin-datalabels';
 import $ from 'jquery';
-import {ChartAxis, ChartConfig, ChartData, ChartType, ClickObject, NumberFormatter} from './Chart';
 
 ChartJs.register(ChartDataLabels);
 
@@ -124,9 +123,9 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     this.colorSchemeCssClass = '';
     this.minRadialChartDatalabelSpace = 25;
 
-    this._labelFormatter = this._formatLabel.bind(this);
-    this._xLabelFormatter = this._formatXLabel.bind(this);
-    this._yLabelFormatter = this._formatYLabel.bind(this);
+    this._labelFormatter = this._createLabelFormatter(this._formatLabel);
+    this._xLabelFormatter = this._createLabelFormatter(this._formatXLabel);
+    this._yLabelFormatter = this._createLabelFormatter(this._formatYLabel);
 
     this._xAxisFitter = this._fitXAxis.bind(this);
     this._yAxisFitter = this._fitYAxis.bind(this);
@@ -907,8 +906,8 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       return strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].z));
     } else if (config.type === Chart.Type.SCATTER) {
       return {
-        x: strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].x)),
-        y: strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex].y))
+        x: strings.encode(this._formatXLabel(dataset.data[tooltipItem.dataIndex].x)),
+        y: strings.encode(this._formatYLabel(dataset.data[tooltipItem.dataIndex].y))
       };
     }
     return strings.encode(this._formatLabel(dataset.data[tooltipItem.dataIndex]));
@@ -1190,6 +1189,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
           callback: this._labelFormatter
         },
         pointLabels: {
+          callback: this._labelFormatter,
           font: {
             size: ChartJs.defaults.font.size
           }
@@ -1428,24 +1428,46 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     }, plugins.datalabels);
   }
 
-  protected _formatLabel(label: number | string): string {
-    return this._formatLabelMap(label, null, this._getNumberFormatter());
+  protected _getNumberFormatter(): NumberFormatter {
+    return this.chartJs?.config?.options?.numberFormatter;
   }
 
-  protected _getNumberFormatter(): NumberFormatter {
-    if (this.chartJs && this.chartJs.config && this.chartJs.config.options) {
-      return this.chartJs.config.options.numberFormatter;
-    }
+  /**
+   * Creates an unbound function that calls the given formatter on this {@link ChartJsRenderer}. The context of this
+   * unbound function is passed to the formatter as argument.
+   */
+  protected _createLabelFormatter(formatter: LabelFormatter): LabelFormatter {
+    const renderer = this;
+    return function(label) {
+      return formatter.call(renderer, label, this);
+    };
   }
 
-  protected _formatXLabel(label: number | string): string {
+  protected _formatLabel(label: number | string, scale?: Scale): string {
+    label = this._formatCategory(label, scale);
+    return this._formatLabelMap(label, null, this._getNumberFormatter());
+  }
+
+  protected _formatXLabel(label: number | string, scale?: Scale): string {
+    label = this._formatCategory(label, scale);
     return this._formatLabelMap(label, this._getXLabelMap(), this._getNumberFormatter());
   }
 
-  protected _formatYLabel(label: number | string): string {
+  protected _formatYLabel(label: number | string, scale?: Scale): string {
+    label = this._formatCategory(label, scale);
     return this._formatLabelMap(label, this._getYLabelMap(), this._getNumberFormatter());
   }
 
+  /**
+   * Uses the given scale to format the given label iff it is a {@link CategoryScale}.
+   */
+  protected _formatCategory(label: number | string, scale?: Scale): number | string {
+    if (scale instanceof CategoryScale && numbers.isNumber(label)) {
+      return scale.getLabelForValue(label);
+    }
+    return label;
+  }
+
   protected _getXLabelMap(): Record<number | string, string> {
     return this._getLabelMap('xLabelMap');
   }
@@ -1623,7 +1645,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     if (config.type === Chart.Type.BUBBLE) {
       return this._formatLabel((value as BubbleDataPoint).z);
     } else if (config.type === Chart.Type.SCATTER) {
-      return strings.join(' / ', this._formatLabel((value as ScatterDataPoint).x), this._formatLabel((value as ScatterDataPoint).y));
+      return strings.join(' / ', this._formatXLabel((value as ScatterDataPoint).x), this._formatYLabel((value as ScatterDataPoint).y));
     }
     return this._formatLabel(value as number);
   }
@@ -1657,7 +1679,13 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       type = config.type,
       autoColor = config.options && config.options.autoColor,
       checkable = config.options && config.options.checkable,
-      multipleColorsPerDataset = autoColor && scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA),
+      colorMode = config.options && config.options.colorMode,
+      multipleColorsPerDataset = autoColor && (
+        colorMode === ChartColorMode.DATASET
+          ? false
+          : colorMode === ChartColorMode.DATA
+            ? true
+            : scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)),
       colors = {
         backgroundColors: [],
         borderColors: [],
@@ -2835,7 +2863,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
   }
 }
 
-export type LabelFormatter = (label: number | string) => string;
+export type LabelFormatter = (label: number | string, scale?: Scale) => string;
 export type AxisFitter = (axis: Scale<CartesianScaleOptions>) => void;
 export type DatalabelsDisplayHandler = (context: Context) => boolean;
 export type DatalabelsFormatter = (value: number | ScatterDataPoint | BubbleDataPoint, context: Context) => string;

package/src/chart/ChartLayout.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,8 +7,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {AbstractLayout} from '@eclipse-scout/core';
-import {UpdateChartOptions, Chart} from '../index';
+import {AbstractLayout, Tile} from '@eclipse-scout/core';
+import {Chart, ChartJsRenderer, UpdateChartOptions} from '../index';
 
 export class ChartLayout extends AbstractLayout {
   chart: Chart;
@@ -33,6 +33,14 @@ export class ChartLayout extends AbstractLayout {
     if (!this.chart.session.ready) {
       opts.debounce = false;
     }
+    // Don't debounce if the chart is inside a tile that is being dragged so the state is correct immediately when it is dropped
+    if (this.chart.findParent(Tile)?.$container.hasClass('dragged')) {
+      opts.debounce = false;
+    }
+    // Ensure chart has the correct size right after the layout.
+    if (this.chart.chartRenderer instanceof ChartJsRenderer) {
+      this.chart.chartRenderer.chartJs?.resize();
+    }
     this.chart.updateChart(opts);
   }
 }

package/src/table/controls/ChartTableControl.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
@@ -788,7 +788,9 @@ export class ChartTableControl extends TableControl implements ChartTableControl
         let label,
           keyX = xAxis[x];
         if (xAxis.column instanceof NumberColumn) {
-          label = keyX;
+          // the axis will format numbers as two digit decimals and null/undefined as the text '-empty-' or something similar
+          // only pass null/undefined to the axis as we want to leave the number format to the chart but need the '-empty-' string
+          label = objects.isNullOrUndefined(keyX) ? xAxis.format(keyX) : keyX;
         } else {
           label = this._handleIconLabel(xAxis.format(keyX), xAxis, iconClasses);
         }