@eclipse-scout/chart 23.1.19 → 23.2.2

package/dist/file-list

@@ -1,13 +1,13 @@
-eclipse-scout-chart-c0371fbf62b6717784f4.min.js
-eclipse-scout-chart-c0371fbf62b6717784f4.min.js.map
+eclipse-scout-chart-7bef43c691398f0f5930.min.js
+eclipse-scout-chart-7bef43c691398f0f5930.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-a918cb3af9403c83adfe.min.js
-eclipse-scout-chart.esm-a918cb3af9403c83adfe.min.js.map
+eclipse-scout-chart.esm-cf2a1f4f475648b72788.min.js
+eclipse-scout-chart.esm-cf2a1f4f475648b72788.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": "23.1.19",
+  "version": "23.2.2",
   "description": "Eclipse Scout chart",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -26,17 +26,17 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "23.1.19",
+    "@eclipse-scout/cli": "23.2.2",
     "@eclipse-scout/releng": "^22.0.0",
-    "jasmine-core": "4.5.0",
+    "jasmine-core": "4.6.0",
     "jasmine-jquery": "2.1.1",
     "karma": "6.4.1",
-    "@types/jquery": "3.5.14",
-    "@types/jasmine": "4.3.0",
+    "@types/jquery": "3.5.16",
+    "@types/jasmine": "4.3.1",
     "@types/jasmine-jquery": "1.5.34"
   },
   "dependencies": {
-    "@eclipse-scout/core": "23.1.19",
+    "@eclipse-scout/core": "23.2.2",
     "jquery": "3.6.0",
     "chart.js": "3.9.1",
     "chartjs-plugin-datalabels": "2.1.0"

package/src/chart/AbstractChartRenderer.ts

@@ -9,7 +9,7 @@
  */
 
 import {Chart} from '../index';
-import {Session} from '@eclipse-scout/core';
+import {arrays, Session} from '@eclipse-scout/core';
 import {UpdateChartOptions} from './Chart';
 
 export class AbstractChartRenderer {
@@ -63,7 +63,7 @@ export class AbstractChartRenderer {
         }
       }
       // color should have been set.
-      if (!this.chart.config.options.autoColor && !chartValueGroup.colorHexValue && !chartValueGroup.cssClass) {
+      if (!this.chart.config.options.autoColor && !arrays.ensure(chartValueGroup.colorHexValue).length && !chartValueGroup.cssClass) {
         return false;
       }
     }

package/src/chart/Chart.ts

@@ -402,7 +402,7 @@ export type ChartValueGroup = {
   type?: string;
   groupName?: string;
   values: number[] | Record<string, number>[];
-  colorHexValue?: string;
+  colorHexValue?: string | string[];
   cssClass?: string;
 };
 

package/src/chart/ChartJsRenderer.ts

@@ -10,8 +10,8 @@
 import {AbstractChartRenderer, Chart, chartJsDateAdapter} 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, PointOptions, PointProps, RadialLinearScaleOptions, Scale, ScatterDataPoint, TooltipCallbacks, TooltipItem, TooltipLabelStyle, TooltipModel, TooltipOptions
+  FontSpec, LegendElement, LegendItem, LegendOptions, LinearScaleOptions, PointElement, PointHoverOptions, PointOptions, PointProps, RadialLinearScaleOptions, Scale, ScatterDataPoint, TooltipCallbacks, TooltipItem, TooltipLabelStyle,
+  TooltipModel, TooltipOptions
 } from 'chart.js';
 import 'chart.js/auto'; // Import from auto to register charts
 import {arrays, colorSchemes, graphics, numbers, objects, Point, scout, strings, styles, Tooltip, tooltips} from '@eclipse-scout/core';
@@ -899,7 +899,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       legendColor, backgroundColor, borderColor, index;
     if (scout.isOneOf((dataset.type || config.type), Chart.Type.LINE, Chart.Type.BAR, Chart.Type.BAR_HORIZONTAL, Chart.Type.RADAR, Chart.Type.BUBBLE, Chart.Type.SCATTER)) {
       borderColor = dataset.borderColor;
-      legendColor = dataset.legendColor;
+      legendColor = Array.isArray(dataset.legendColor) ? dataset.legendColor[tooltipItem.dataIndex] : dataset.legendColor;
       index = tooltipItem.datasetIndex;
     }
     if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
@@ -1643,12 +1643,21 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     colors = $.extend(true, colors, this._computeDatasetColors(config, multipleColorsPerDataset));
 
     data.datasets.forEach((elem, idx) => {
-      let backgroundColor = (multipleColorsPerDataset ? colors.backgroundColors : colors.backgroundColors[idx]),
-        borderColor = (multipleColorsPerDataset ? colors.borderColors : colors.borderColors[idx]),
-        hoverBackgroundColor = (multipleColorsPerDataset ? colors.hoverBackgroundColors : colors.hoverBackgroundColors[idx]),
-        hoverBorderColor = (multipleColorsPerDataset ? colors.hoverBorderColors : colors.hoverBorderColors[idx]),
-        legendColor = (multipleColorsPerDataset ? colors.legendColors : colors.legendColors[idx]),
-        pointHoverBackgroundColor = (multipleColorsPerDataset ? colors.pointHoverColors : colors.legendColors[idx]);
+      const getColor = colorsArray => {
+        let candidate = colorsArray[idx];
+        if (multipleColorsPerDataset && !Array.isArray(candidate)) {
+          // we want multiple colors -> get the parent array
+          candidate = colorsArray;
+        }
+        return candidate;
+      };
+
+      let backgroundColor = getColor(colors.backgroundColors),
+        borderColor = getColor(colors.borderColors),
+        hoverBackgroundColor = getColor(colors.hoverBackgroundColors),
+        hoverBorderColor = getColor(colors.hoverBorderColors),
+        legendColor = getColor(colors.legendColors),
+        pointHoverBackgroundColor = getColor(colors.pointHoverColors);
 
       let setProperty = (identifier, value) => {
         if (typeof elem[identifier] === 'function') {
@@ -1669,13 +1678,19 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         setProperty('pointHoverBorderColor', this.firstOpaqueBackgroundColor);
       }
       if (checkable) {
-        let datasetLength = elem.data.length;
+        const datasetLength = elem.data.length,
+          ensureColorArray = color => {
+            if (Array.isArray(color)) {
+              return color;
+            }
+            return arrays.init(datasetLength, color);
+          };
         if (scout.isOneOf(type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA, Chart.Type.BUBBLE, Chart.Type.SCATTER) || (type === Chart.Type.BAR && (elem.type || Chart.Type.BAR) === Chart.Type.BAR)) {
-          let uncheckedBackgroundColor = (multipleColorsPerDataset ? colors.backgroundColors : arrays.init(datasetLength, colors.backgroundColors[idx])),
-            uncheckedHoverBackgroundColor = (multipleColorsPerDataset ? colors.hoverBackgroundColors : arrays.init(datasetLength, colors.hoverBackgroundColors[idx])),
+          let uncheckedBackgroundColor = ensureColorArray(backgroundColor),
+            uncheckedHoverBackgroundColor = ensureColorArray(hoverBackgroundColor),
 
-            checkedBackgroundColor = (multipleColorsPerDataset ? colors.checkedBackgroundColors : arrays.init(datasetLength, colors.checkedBackgroundColors[idx])),
-            checkedHoverBackgroundColor = (multipleColorsPerDataset ? colors.checkedHoverBackgroundColors : arrays.init(datasetLength, colors.checkedHoverBackgroundColors[idx]));
+            checkedBackgroundColor = ensureColorArray(getColor(colors.checkedBackgroundColors)),
+            checkedHoverBackgroundColor = ensureColorArray(getColor(colors.checkedHoverBackgroundColors));
 
           setProperty('uncheckedBackgroundColor', uncheckedBackgroundColor);
           setProperty('uncheckedHoverBackgroundColor', uncheckedHoverBackgroundColor);
@@ -1685,10 +1700,12 @@ export class ChartJsRenderer extends AbstractChartRenderer {
           setProperty('backgroundColor', elem.uncheckedBackgroundColor);
           setProperty('hoverBackgroundColor', elem.uncheckedHoverBackgroundColor);
         } else if (scout.isOneOf(type, Chart.Type.LINE, Chart.Type.RADAR) || (type === Chart.Type.BAR && elem.type === Chart.Type.LINE)) {
-          let uncheckedPointBackgroundColor = arrays.init(datasetLength, pointHoverBackgroundColor),
-            uncheckedPointHoverBackgroundColor = arrays.init(datasetLength, pointHoverBackgroundColor),
-            checkedPointBackgroundColor = arrays.init(datasetLength, borderColor),
-            checkedPointHoverBackgroundColor = arrays.init(datasetLength, hoverBorderColor || borderColor);
+          let uncheckedPointBackgroundColor = ensureColorArray(pointHoverBackgroundColor),
+            uncheckedPointHoverBackgroundColor = ensureColorArray(pointHoverBackgroundColor),
+
+            checkedPointBackgroundColor = ensureColorArray(borderColor),
+            checkedPointHoverBackgroundColor = ensureColorArray(hoverBorderColor || borderColor);
+
           setProperty('uncheckedPointBackgroundColor', uncheckedPointBackgroundColor);
           setProperty('uncheckedPointHoverBackgroundColor', uncheckedPointHoverBackgroundColor);
           setProperty('checkedPointBackgroundColor', checkedPointBackgroundColor);
@@ -1838,9 +1855,6 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       };
 
     this.chart.data.chartValueGroups.forEach(elem => {
-      let rgbColor = styles.hexToRgb(elem.colorHexValue),
-        adjustColor = (opacity, darker) => this._adjustColorOpacity(styles.darkerColor(rgbColor, darker), opacity);
-
       let backgroundOpacity = 1,
         hoverBackgroundOpacity = 1,
         hoverBackgroundDarker = 0.1,
@@ -1884,17 +1898,45 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         hoverBackgroundDarker = 0;
       }
 
-      colors.backgroundColors.push(adjustColor((checkable || transparent) ? uncheckedBackgroundOpacity : backgroundOpacity, 0));
-      colors.borderColors.push(adjustColor(1, 0));
-      colors.hoverBackgroundColors.push(adjustColor((checkable || transparent) ? uncheckedHoverBackgroundOpacity : hoverBackgroundOpacity, (checkable || transparent) ? 0 : hoverBackgroundDarker));
-      colors.hoverBorderColors.push(adjustColor(1, hoverBorderDarker));
-
-      colors.checkedBackgroundColors.push(adjustColor(checkedBackgroundOpacity, checkedBackgroundDarker));
-      colors.checkedHoverBackgroundColors.push(adjustColor(checkedHoverBackgroundOpacity, checkedHoverBackgroundDarker));
+      const backgroundColors = [],
+        borderColors = [],
+        hoverBackgroundColors = [],
+        hoverBorderColors = [],
+        checkedBackgroundColors = [],
+        checkedHoverBackgroundColors = [],
+        legendColors = [],
+        pointHoverColors = [];
+
+      let colorHexValues = arrays.ensure(elem.colorHexValue);
+
+      const datasetLength = arrays.length(elem.values as any[]);
+      if (colorHexValues.length && colorHexValues.length < datasetLength) {
+        // repeat colors for the whole dataset
+        colorHexValues = arrays.init(datasetLength, null).map((elem, idx) => colorHexValues[idx % colorHexValues.length]);
+      }
 
-      colors.legendColors.push(adjustColor(1, 0));
+      colorHexValues.forEach(colorHexValue => {
+        const rgbColor = styles.hexToRgb(colorHexValue),
+          adjustColor = (opacity, darker) => this._adjustColorOpacity(styles.darkerColor(rgbColor, darker), opacity);
+
+        backgroundColors.push(adjustColor((checkable || transparent) ? uncheckedBackgroundOpacity : backgroundOpacity, 0));
+        borderColors.push(adjustColor(1, 0));
+        hoverBackgroundColors.push(adjustColor((checkable || transparent) ? uncheckedHoverBackgroundOpacity : hoverBackgroundOpacity, (checkable || transparent) ? 0 : hoverBackgroundDarker));
+        hoverBorderColors.push(adjustColor(1, hoverBorderDarker));
+        checkedBackgroundColors.push(adjustColor(checkedBackgroundOpacity, checkedBackgroundDarker));
+        checkedHoverBackgroundColors.push(adjustColor(checkedHoverBackgroundOpacity, checkedHoverBackgroundDarker));
+        legendColors.push(adjustColor(1, 0));
+        pointHoverColors.push(adjustColor(1, 0));
+      });
 
-      colors.pointHoverColors.push(adjustColor(1, 0));
+      colors.backgroundColors.push(backgroundColors);
+      colors.borderColors.push(borderColors);
+      colors.hoverBackgroundColors.push(hoverBackgroundColors);
+      colors.hoverBorderColors.push(hoverBorderColors);
+      colors.checkedBackgroundColors.push(checkedBackgroundColors);
+      colors.checkedHoverBackgroundColors.push(checkedHoverBackgroundColors);
+      colors.legendColors.push(legendColors);
+      colors.pointHoverColors.push(pointHoverColors);
     });
     colors.datalabelColor = this._computeDatalabelColor(type);
 
@@ -1985,7 +2027,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       let dataset = data.datasets[idx],
         legendColor, borderColor, backgroundColor;
       if (dataset && scout.isOneOf((dataset.type || config.type), Chart.Type.LINE, Chart.Type.BAR, Chart.Type.RADAR, Chart.Type.BUBBLE, Chart.Type.SCATTER)) {
-        legendColor = dataset.legendColor;
+        legendColor = arrays.ensure(dataset.legendColor)[0];
         borderColor = this._adjustColorOpacity(dataset.borderColor as string, 1);
       } else if (data.datasets.length && scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
         dataset = data.datasets[0];
@@ -2782,14 +2824,14 @@ export type TooltipLabelColorGenerator = (tooltipItem: TooltipItem<any>) => Tool
 export type TooltipRenderer = (context: { chart: ChartJs; tooltip: TooltipModel<any> }) => void;
 
 export type DatasetColors = {
-  backgroundColors?: string[];
-  borderColors?: string[];
-  hoverBackgroundColors?: string[];
-  hoverBorderColors?: string[];
-  checkedBackgroundColors?: string[];
-  checkedHoverBackgroundColors?: string[];
-  legendColors?: string[];
-  pointHoverColors?: string[];
+  backgroundColors?: (string | string[])[];
+  borderColors?: (string | string[])[];
+  hoverBackgroundColors?: (string | string[])[];
+  hoverBorderColors?: (string | string[])[];
+  checkedBackgroundColors?: (string | string[])[];
+  checkedHoverBackgroundColors?: (string | string[])[];
+  legendColors?: (string | string[])[];
+  pointHoverColors?: (string | string[])[];
   datalabelColor?: string;
 };
 

package/src/chart/FulfillmentChartRenderer.ts

@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {objects, scout} from '@eclipse-scout/core';
+import {arrays, objects, scout} from '@eclipse-scout/core';
 import {AbstractSvgChartRenderer, Chart} from '../index';
 import $ from 'jquery';
 import {UpdateChartOptions} from './Chart';
@@ -60,7 +60,7 @@ export class FulfillmentChartRenderer extends AbstractSvgChartRenderer {
   protected _renderPercentage(value: number, total: number) {
     // arc segment
     let arcClass = 'fulfillment-chart',
-      color = this.chart.data.chartValueGroups[0].colorHexValue,
+      color = arrays.ensure(this.chart.data.chartValueGroups[0].colorHexValue)[0],
       chartGroupCss = this.chart.data.chartValueGroups[0].cssClass;
 
     if (this.chart.config.options.autoColor) {
@@ -142,7 +142,7 @@ export class FulfillmentChartRenderer extends AbstractSvgChartRenderer {
 
   protected _renderCirclePath(cssClass: string, id: string, radius: number): JQuery<SVGElement> {
     let chartGroupCss = this.chart.data.chartValueGroups[0].cssClass;
-    let color = this.chart.data.chartValueGroups[1].colorHexValue;
+    let color = arrays.ensure(this.chart.data.chartValueGroups[1].colorHexValue)[0];
 
     if (this.chart.config.options.autoColor) {
       cssClass += ' auto-color';

package/src/chart/SalesfunnelChartRenderer.ts

@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {objects, strings} from '@eclipse-scout/core';
+import {arrays, objects, strings} from '@eclipse-scout/core';
 import {AbstractSvgChartRenderer, Chart} from '../index';
 import $ from 'jquery';
 import {ChartValueGroup, ClickObject} from './Chart';
@@ -126,7 +126,7 @@ export class SalesfunnelChartRenderer extends AbstractSvgChartRenderer {
         width: width,
         widthBottom: widthBottom,
         cssClass: 'salesfunnel-chart-bar',
-        fill: chartValueGroups[i].colorHexValue,
+        fill: arrays.ensure(chartValueGroups[i].colorHexValue)[0],
         label: chartValueGroups[i].groupName,
         clickObject: this._createClickObject(null, i)
       };
@@ -318,7 +318,7 @@ export class SalesfunnelChartRenderer extends AbstractSvgChartRenderer {
         width: width,
         widthBottom: width,
         cssClass: 'salesfunnel-chart-bar',
-        fill: chartValueGroups[i].colorHexValue,
+        fill: arrays.ensure(chartValueGroups[i].colorHexValue)[0],
         label: chartValueGroups[i].groupName,
         clickObject: this._createClickObject(null, i)
       };

package/src/chart/VennChartRenderer.ts

@@ -11,6 +11,7 @@ import {AbstractSvgChartRenderer, Chart, VennAsync3Calculator, VennCircle, VennC
 import $ from 'jquery';
 import {ChartValueGroup} from './Chart';
 import {LegendPositions} from './AbstractSvgChartRenderer';
+import {arrays} from '@eclipse-scout/core';
 
 export class VennChartRenderer extends AbstractSvgChartRenderer {
   animationTriggered: boolean;
@@ -86,17 +87,17 @@ export class VennChartRenderer extends AbstractSvgChartRenderer {
 
     // create svg elements and venns
     if (this.numberOfCircles > 0) {
-      this.$v1 = this._createCircle(0, this.data[0].colorHexValue, this.data[0].cssClass);
+      this.$v1 = this._createCircle(0, arrays.ensure(this.data[0].colorHexValue)[0], this.data[0].cssClass);
       this.vennNumber1 = new VennCircle(this.$v1);
       this.vennReal1 = new VennCircle(this.$v1);
     }
     if (this.numberOfCircles > 1) {
-      this.$v2 = this._createCircle(1, this.data[1].colorHexValue, this.data[1].cssClass);
+      this.$v2 = this._createCircle(1, arrays.ensure(this.data[1].colorHexValue)[0], this.data[1].cssClass);
       this.vennNumber2 = new VennCircle(this.$v2);
       this.vennReal2 = new VennCircle(this.$v2);
     }
     if (this.numberOfCircles > 2) {
-      this.$v3 = this._createCircle(2, this.data[2].colorHexValue, this.data[2].cssClass);
+      this.$v3 = this._createCircle(2, arrays.ensure(this.data[2].colorHexValue)[0], this.data[2].cssClass);
       this.vennNumber3 = new VennCircle(this.$v3);
       this.vennReal3 = new VennCircle(this.$v3);
     }

package/src/table/controls/ChartTableControl.ts

@@ -49,6 +49,7 @@ export class ChartTableControl extends TableControl implements ChartTableControl
 
   constructor() {
     super();
+    this.iconId = icons.CHART;
     this.tooltipText = '${textKey:ui.Chart}';
     this.chartAggregation = {
       modifier: TableMatrix.NumberGroup.COUNT
@@ -361,7 +362,11 @@ export class ChartTableControl extends TableControl implements ChartTableControl
   }
 
   protected _hasColumns(): boolean {
-    return this.table.columns.length !== 0;
+    return this._columns().length > 0;
+  }
+
+  protected _columns(): Column[] {
+    return new TableMatrix(this.table, this.session).columns();
   }
 
   protected _axisCount(columnCount: (number | Column<any>)[][], column: Column<any>): number {
@@ -861,7 +866,7 @@ export class ChartTableControl extends TableControl implements ChartTableControl
   }
 
   protected _handleIconLabel(label: string, axis: TableMatrixKeyAxis, iconClasses: string[]): string {
-    if (axis && axis.textIsIcon) {
+    if (axis && axis.isIcon) {
       let icon = icons.parseIconId(label);
       if (icon && icon.isFontIcon()) {
         iconClasses.push(...icon.appendCssClass('font-icon').split(' '));
@@ -977,7 +982,7 @@ export class ChartTableControl extends TableControl implements ChartTableControl
         }
       }
       label = axis.format(label as number);
-      if (axis.textIsIcon) {
+      if (axis.isIcon) {
         let icon = icons.parseIconId(label);
         if (icon && icon.isFontIcon()) {
           label = icon.iconCharacter;
@@ -1204,7 +1209,7 @@ export class ChartTableControl extends TableControl implements ChartTableControl
     }
 
     return {
-      text: '[' + (this.table.visibleColumns().indexOf(column) + 1) + ']'
+      text: '[' + (this._columns().indexOf(column) + 1) + ']'
     };
   }