@eclipse-scout/chart 23.2.13 → 24.1.0-beta.1

package/dist/file-list

@@ -1,13 +1,13 @@
-eclipse-scout-chart-7bef43c691398f0f5930.min.js
-eclipse-scout-chart-7bef43c691398f0f5930.min.js.map
+eclipse-scout-chart-1a81682e3fb823b0ca01.min.js
+eclipse-scout-chart-1a81682e3fb823b0ca01.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-cf2a1f4f475648b72788.min.js
-eclipse-scout-chart.esm-cf2a1f4f475648b72788.min.js.map
+eclipse-scout-chart.esm-063bb266266e01e3ccd0.min.js
+eclipse-scout-chart.esm-063bb266266e01e3ccd0.min.js.map
 eclipse-scout-chart.esm.js
 eclipse-scout-chart.esm.js.map
 eclipse-scout-chart.js

package/dist/texts.json

@@ -3,8 +3,10 @@
     "ui.Bio": "Tri.",
     "ui.Brd": "quad",
     "ui.Chart": "Chart",
+    "ui.FulfillmentChartAriaDescription": "Fulfillment chart. Current value: {0}%",
     "ui.Mio": "Mio.",
     "ui.Mrd": "Bio.",
+    "ui.SpeedoChartAriaDescription": "Speedo chart. Current value: {0} Minimum value: {1} Maximum value: {2}",
     "ui.TooMuchData": "Too much data",
     "ui.Trd": "Sex.",
     "ui.Tri": "Qui.",
@@ -37,8 +39,10 @@
     "ui.Bio": "Bio.",
     "ui.Brd": "Brd.",
     "ui.Chart": "Diagramm",
+    "ui.FulfillmentChartAriaDescription": "Erfüllungsgrad-Diagramm. Aktueller Wert: {0} %",
     "ui.Mio": "Mio.",
     "ui.Mrd": "Mrd.",
+    "ui.SpeedoChartAriaDescription": "Zeigerdiagramm. Aktueller Wert: {0} Minimaler Wert: {1} Maximaler Wert: {2}",
     "ui.TooMuchData": "Zu viele Daten",
     "ui.Trd": "Trd.",
     "ui.Tri": "Tri.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/chart",
-  "version": "23.2.13",
+  "version": "24.1.0-beta.1",
   "description": "Eclipse Scout chart",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -10,9 +10,9 @@
   },
   "license": "EPL-2.0",
   "engines": {
-    "node": ">=18.12.1",
-    "npm": ">=9.1.1",
-    "pnpm": ">=7.16.0"
+    "node": ">=20.10.0",
+    "npm": ">=10.2.3",
+    "pnpm": ">=8.11.0"
   },
   "keywords": [
     "scout",
@@ -26,20 +26,20 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "23.2.13",
-    "@eclipse-scout/releng": "^22.0.0",
-    "jasmine-core": "4.6.0",
+    "@eclipse-scout/cli": "24.1.0-beta.1",
+    "@eclipse-scout/releng": "^24.1.0",
+    "jasmine-core": "5.1.1",
     "jasmine-jquery": "2.1.1",
-    "karma": "6.4.1",
-    "@types/jquery": "3.5.16",
-    "@types/jasmine": "4.3.1",
-    "@types/jasmine-jquery": "1.5.34"
+    "karma": "6.4.2",
+    "@types/jquery": "3.5.29",
+    "@types/jasmine": "5.1.4",
+    "@types/jasmine-jquery": "1.5.37"
   },
   "dependencies": {
-    "@eclipse-scout/core": "23.2.13",
-    "jquery": "3.6.0",
-    "chart.js": "3.9.1",
-    "chartjs-plugin-datalabels": "2.1.0"
+    "@eclipse-scout/core": "24.1.0-beta.1",
+    "jquery": "3.7.1",
+    "chart.js": "4.4.0",
+    "chartjs-plugin-datalabels": "2.2.0"
   },
   "scripts": {
     "testserver:start": "scout-scripts test-server:start",

package/src/chart/AbstractSvgChartRenderer.ts

@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {ObjectFactory, strings, styles} from '@eclipse-scout/core';
+import {aria, ObjectFactory, strings, styles} from '@eclipse-scout/core';
 import $ from 'jquery';
 import {AbstractChartRenderer, Chart} from '../index';
 import {ClickObject} from './Chart';
@@ -43,6 +43,9 @@ export class AbstractSvgChartRenderer extends AbstractChartRenderer {
   protected override _render() {
     if (!this.$svg) {
       this.$svg = this.chart.$container.appendSVG('svg', 'chart-svg');
+      aria.role(this.$svg, 'img');
+      // labeling has to be done here because otherwise the svg is ignored
+      this.linkChartWithFieldLabel(this.$svg);
     }
     this.firstOpaqueBackgroundColor = styles.getFirstOpaqueBackgroundColor(this.$svg);
     // This works, because CSS specifies 100% width/height
@@ -65,6 +68,24 @@ export class AbstractSvgChartRenderer extends AbstractChartRenderer {
     this._renderInternal();
   }
 
+  /**
+   * Links chart svg with its field label so the field name is read when entering the chart
+   *
+   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby">ARIA: aria-labelledby</a>
+   */
+  linkChartWithFieldLabel($chartSvg: JQuery<Element>) {
+    if (!$chartSvg) {
+      return;
+    }
+    let $field = $chartSvg.parents('.chart-field');
+    if ($field.length > 0) {
+      let $fieldLabel = $field.eq(0).children('label');
+      if ($fieldLabel.length > 0) {
+        aria.linkElementWithLabel($chartSvg, $fieldLabel.eq(0));
+      }
+    }
+  }
+
   protected _renderInternal() {
     // Override in subclasses
   }

package/src/chart/Chart.ts

@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 import {AbstractChartRenderer, ChartEventMap, ChartJsRenderer, ChartLayout, ChartModel, FulfillmentChartRenderer, SalesfunnelChartRenderer, SpeedoChartRenderer, VennChartRenderer} from '../index';
-import {arrays, ColorScheme, colorSchemes, EnumObject, HtmlComponent, InitModelOf, objects, Widget} from '@eclipse-scout/core';
+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 $ from 'jquery';
@@ -83,6 +83,7 @@ export class Chart extends Widget implements ChartModel {
 
   protected override _render() {
     this.$container = this.$parent.appendDiv('chart');
+    aria.role(this.$container, 'none'); // ignore this container for screen readers, they care about the chart inside
 
     this.htmlComp = HtmlComponent.install(this.$container, this.session);
     this.htmlComp.setLayout(new ChartLayout(this));

package/src/chart/ChartJsRenderer.ts

@@ -10,11 +10,10 @@
 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, 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';
+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';
@@ -232,6 +231,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
   protected override _render() {
     if (!this.$canvas) {
       this.$canvas = this.chart.$container.appendElement('<canvas>') as JQuery<HTMLCanvasElement>;
+      aria.hidden(this.$canvas, true); // aria not supported yet
     }
     this.firstOpaqueBackgroundColor = styles.getFirstOpaqueBackgroundColor(this.$canvas);
     if (!chartJsGlobalsInitialized) {
@@ -1073,10 +1073,10 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         let avg = (value.x[0] + value.x[1]) / 2;
         tooltipDirection = avg < 0 ? 'left' : 'right';
       } else {
-        tooltipDirection = value < 0 ? 'left' : 'right';
+        tooltipDirection = (value as number) < 0 ? 'left' : 'right';
       }
     } else if ((dataset.type || config.type) === Chart.Type.BAR) {
-      tooltipPosition = value < 0 ? 'bottom' : 'top';
+      tooltipPosition = (value as number) < 0 ? 'bottom' : 'top';
     } else if (scout.isOneOf(config.type, Chart.Type.PIE, Chart.Type.DOUGHNUT, Chart.Type.POLAR_AREA)) {
       let element = (chart.getDatasetMeta(datasetIndex).data[dataIndex] as unknown as ArcElement).getProps(['startAngle', 'endAngle']);
       let startAngle = element.startAngle,
@@ -1085,8 +1085,8 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       tooltipPosition = (0 <= angle && angle < Math.PI) ? 'bottom' : 'top';
       tooltipDirection = (-Math.PI / 2 <= angle && angle < Math.PI / 2) ? 'right' : 'left';
     } else if (config.type === Chart.Type.RADAR) {
-      let element = (chart.getDatasetMeta(datasetIndex).data[dataIndex] as unknown as RadarPointElement).getProps(['angle']);
-      let angle = element.angle;
+      let element = (chart.getDatasetMeta(datasetIndex).data[dataIndex] as unknown as PointElement).getProps(['angle']);
+      let angle = element.angle as number;
       tooltipPosition = (0 <= angle && angle < Math.PI) ? 'bottom' : 'top';
       tooltipDirection = (-Math.PI / 2 <= angle && angle < Math.PI / 2) ? 'right' : 'left';
     } else if (scout.isOneOf(config.type, Chart.Type.BUBBLE, Chart.Type.SCATTER)) {
@@ -1229,9 +1229,11 @@ export class ChartJsRenderer extends AbstractChartRenderer {
         beginAtZero: this._isHorizontalBar(config),
         offset: type === Chart.Type.BUBBLE,
         grid: {
-          drawBorder: false,
           drawTicks: false
         },
+        border: {
+          display: false
+        },
         ticks: {
           padding: 5
         }
@@ -1240,8 +1242,10 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       scales.x = $.extend(true, {}, {
         offset: true,
         grid: {
-          display: false,
-          drawBorder: false
+          display: false
+        },
+        border: {
+          display: false
         }
       }, scales.x);
     }
@@ -1266,17 +1270,21 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     if (this._isHorizontalBar(config)) {
       scales.y = $.extend(true, {}, {
         grid: {
-          display: false,
-          drawBorder: false
+          display: false
+        },
+        border: {
+          display: false
         }
       }, scales.y);
     } else {
       scales.y = $.extend(true, {}, {
         beginAtZero: !scout.isOneOf(type, Chart.Type.BUBBLE, Chart.Type.SCATTER),
         grid: {
-          drawBorder: false,
           drawTicks: false
         },
+        border: {
+          display: false
+        },
         ticks: {
           padding: 5
         }
@@ -2749,9 +2757,9 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       yAxisDiffType.grid.drawOnChartArea = false;
     }
 
-    yAxis.grid.drawBorder = true;
+    yAxis.border.display = true;
     yAxis.grid.drawTicks = true;
-    yAxisDiffType.grid.drawBorder = true;
+    yAxisDiffType.border.display = true;
     yAxisDiffType.grid.drawTicks = true;
 
     let yAxisType = (datasets[0].type || type),
@@ -2816,11 +2824,11 @@ export type LegendLabelGenerator = (chart: ChartJsChart) => LegendItem[];
 export type ChartEventHandler = (event: ChartEvent, items: ActiveElement[]) => void;
 export type LegendEventHandler = (e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>) => void;
 export type ResizeHandler = (chart: ChartJsChart | ChartJs, size: { width: number; height: number }) => void;
-export type TooltipTitleGenerator = (tooltipItems: TooltipItem<any>[]) => string | string[];
+export type TooltipTitleGenerator = (tooltipItems: TooltipItem<any>[]) => string | string[] | void;
 export type TooltipItemsGenerator = (tooltipItems: TooltipItem<any>[], tooltipLabel: TooltipLabelGenerator, tooltipLabelValue: TooltipLabelValueGenerator, tooltipColor: TooltipLabelColorGenerator) => string;
-export type TooltipLabelGenerator = (tooltipItem: TooltipItem<any>) => string | string[];
+export type TooltipLabelGenerator = (tooltipItem: TooltipItem<any>) => string | string[] | void;
 export type TooltipLabelValueGenerator = (tooltipItem: TooltipItem<any>) => string | { x: string; y: string };
-export type TooltipLabelColorGenerator = (tooltipItem: TooltipItem<any>) => TooltipLabelStyle;
+export type TooltipLabelColorGenerator = (tooltipItem: TooltipItem<any>) => TooltipLabelStyle | void;
 export type TooltipRenderer = (context: { chart: ChartJs; tooltip: TooltipModel<any> }) => void;
 
 export type DatasetColors = {
@@ -2886,11 +2894,3 @@ declare module 'chart.js' {
     labelValue: TooltipLabelValueGenerator;
   }
 }
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface RadarPointElement<T extends RadarProps = RadarProps, O extends PointOptions = PointOptions> extends PointElement<T, O> {
-}
-
-export interface RadarProps extends PointProps {
-  angle: number;
-}

package/src/chart/FulfillmentChartRenderer.ts

@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {arrays, objects, scout} from '@eclipse-scout/core';
+import {aria, arrays, objects, scout} from '@eclipse-scout/core';
 import {AbstractSvgChartRenderer, Chart} from '../index';
 import $ from 'jquery';
 import {UpdateChartOptions} from './Chart';
@@ -124,6 +124,8 @@ export class FulfillmentChartRenderer extends AbstractSvgChartRenderer {
     } else {
       $arc.attr('d', this.pathSegment(0, end));
     }
+
+    aria.description(this.$svg, this.session.text('ui.FulfillmentChartAriaDescription', percentage));
   }
 
   pathSegment(start: number, end: number): string {

package/src/chart/SpeedoChartRenderer.ts

@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {EnumObject, numbers, RoundingMode} from '@eclipse-scout/core';
+import {aria, EnumObject, numbers, RoundingMode} from '@eclipse-scout/core';
 import {AbstractSvgChartRenderer, Chart} from '../index';
 
 export class SpeedoChartRenderer extends AbstractSvgChartRenderer {
@@ -263,6 +263,7 @@ export class SpeedoChartRenderer extends AbstractSvgChartRenderer {
         .addClass('speedo-chart-label')
         .attr('style', 'font-size: ' + this.scaleWeight * 1.55 + 'px;');
     }
+    aria.description(this.$svg, this.session.text('ui.SpeedoChartAriaDescription', legendValue, minLegendValue, maxLegendValue));
   }
 
   /**

package/src/form/fields/chartfield/ChartField.ts

@@ -41,4 +41,8 @@ export class ChartField extends FormField implements ChartFieldModel {
     this.chart.remove();
     this._removeField();
   }
+
+  protected override _linkWithLabel($element: JQuery) {
+    // nop, the chart renderers will take care of labeling and describing the chart
+  }
 }

package/src/table/controls/ChartTableControl.ts

@@ -966,30 +966,32 @@ export class ChartTableControl extends TableControl implements ChartTableControl
     }
   }
 
-  protected _formatLabel(label: number | string, axis: TableMatrixKeyAxis): string {
-    if (axis) {
-      if (axis.column instanceof DateColumn) {
-        label = label as number + axis.min;
-        if (label !== parseInt('' + label) || (axis.length < 2 && (label < axis.min || label > axis.max))) {
-          return null;
-        }
+  protected _formatLabel(label: number, axis: TableMatrixKeyAxis): string {
+    if (!axis) {
+      return '' + label;
+    }
+
+    if (axis.column instanceof DateColumn) {
+      label = label + axis.min;
+      if (label !== parseInt('' + label) || (axis.length < 2 && (label < axis.min || label > axis.max))) {
+        return null;
       }
-      if (axis.indexOf(null) !== -1) {
-        if (label === axis.max) {
-          label = null;
-        } else if (label > axis.max) {
-          return null;
-        }
+    }
+    if (axis.indexOf(null) !== -1) {
+      if (label === axis.max) {
+        label = null;
+      } else if (label > axis.max) {
+        return null;
       }
-      label = axis.format(label as number);
-      if (axis.isIcon) {
-        let icon = icons.parseIconId(label);
-        if (icon && icon.isFontIcon()) {
-          label = icon.iconCharacter;
-        }
+    }
+    let formatted = axis.format(label);
+    if (axis.isIcon) {
+      let icon = icons.parseIconId(formatted);
+      if (icon && icon.isFontIcon()) {
+        formatted = icon.iconCharacter;
       }
     }
-    return '' + label;
+    return formatted;
   }
 
   protected _adjustConfig(config: ChartConfig) {