@eclipse-scout/chart 22.0.41 → 23.1.1

package/dist/file-list

@@ -1,12 +1,15 @@
-eclipse-scout-chart-8eb9461c14872058f638.min.js
-eclipse-scout-chart-8eb9461c14872058f638.min.js.LICENSE.txt
-eclipse-scout-chart-8eb9461c14872058f638.min.js.map
-eclipse-scout-chart-theme-79622289bda68b525e3e.min.css
-eclipse-scout-chart-theme-dark-1de09c03e3dc40a9529a.min.css
+eclipse-scout-chart-fae6f958a044232e659c.min.js
+eclipse-scout-chart-fae6f958a044232e659c.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-2119cfea86a9d6f34a35.min.js
+eclipse-scout-chart.esm-2119cfea86a9d6f34a35.min.js.map
+eclipse-scout-chart.esm.js
+eclipse-scout-chart.esm.js.map
 eclipse-scout-chart.js
 eclipse-scout-chart.js.map
 file-list

package/dist/texts.json

@@ -33,23 +33,6 @@
     "ui.groupedByYear": "groupé par an",
     "ui.line": "Ligne"
   },
-  "it": {
-    "ui.Bio": "Bio",
-    "ui.Brd": "Brd",
-    "ui.Chart": "Diagramma",
-    "ui.Mio": "Mio",
-    "ui.Mrd": "Mrd",
-    "ui.TooMuchData": "Troppi dati",
-    "ui.Trd": "Trd",
-    "ui.Tri": "Tri",
-    "ui.Value": "Valore",
-    "ui.bar": "barra",
-    "ui.groupedByDate": "raggruppato per data",
-    "ui.groupedByMonth": "raggruppato per mese",
-    "ui.groupedByWeekday": "raggruppato per giorno della settimana",
-    "ui.groupedByYear": "raggruppato per anno",
-    "ui.line": "Linea"
-  },
   "de": {
     "ui.Bio": "Bio.",
     "ui.Brd": "Brd.",
@@ -66,5 +49,22 @@
     "ui.groupedByWeekday": "gruppiert nach Wochentag",
     "ui.groupedByYear": "gruppiert nach Jahr",
     "ui.line": "Linie"
+  },
+  "it": {
+    "ui.Bio": "Bio",
+    "ui.Brd": "Brd",
+    "ui.Chart": "Diagramma",
+    "ui.Mio": "Mio",
+    "ui.Mrd": "Mrd",
+    "ui.TooMuchData": "Troppi dati",
+    "ui.Trd": "Trd",
+    "ui.Tri": "Tri",
+    "ui.Value": "Valore",
+    "ui.bar": "barra",
+    "ui.groupedByDate": "raggruppato per data",
+    "ui.groupedByMonth": "raggruppato per mese",
+    "ui.groupedByWeekday": "raggruppato per giorno della settimana",
+    "ui.groupedByYear": "raggruppato per anno",
+    "ui.line": "Linea"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/chart",
-  "version": "22.0.41",
+  "version": "23.1.1",
   "description": "Eclipse Scout chart",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -8,46 +8,52 @@
     "type": "git",
     "url": "https://github.com/eclipse-scout/scout.rt.git"
   },
-  "license": "EPL-1.0",
+  "license": "EPL-2.0",
   "engines": {
-    "node": ">=16.13.0",
-    "npm": ">=8.1.0",
-    "pnpm": ">=6.22.2"
+    "node": ">=18.12.1",
+    "npm": ">=9.1.1",
+    "pnpm": ">=7.16.0"
   },
   "keywords": [
     "scout",
     "eclipse-scout",
     "chart"
   ],
-  "main": "./src/index.js",
+  "main": "./dist/eclipse-scout-chart.esm.js",
+  "module": "./dist/eclipse-scout-chart.esm.js",
   "files": [
     "dist",
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "22.0.41",
+    "@eclipse-scout/cli": "23.1.1",
     "@eclipse-scout/releng": "^22.0.0",
-    "jasmine-core": "3.10.1",
-    "karma": "6.3.20"
+    "jasmine-core": "4.5.0",
+    "jasmine-jquery": "2.1.1",
+    "karma": "6.4.1",
+    "@types/jquery": "3.5.14",
+    "@types/jasmine": "4.3.0",
+    "@types/jasmine-jquery": "1.5.34"
   },
   "dependencies": {
-    "@eclipse-scout/core": "22.0.41",
+    "@eclipse-scout/core": "23.1.1",
     "jquery": "3.6.0",
-    "chart.js": "3.7.0",
-    "chartjs-plugin-datalabels": "2.0.0"
+    "chart.js": "3.9.1",
+    "chartjs-plugin-datalabels": "2.1.0"
   },
   "scripts": {
     "testserver:start": "scout-scripts test-server:start",
     "testserver:stop": "scout-scripts test-server:stop",
     "test:ci": "scout-scripts test:ci",
-    "build:dev": "scout-scripts build:dev",
-    "build:prod": "scout-scripts build:prod",
-    "build:all": "scout-scripts build:dev && scout-scripts build:prod",
+    "build:dev": "scout-scripts build:dev --run default global",
+    "build:prod": "scout-scripts build:prod --run default global",
+    "build:all": "npm run build:dev && npm run build:prod",
     "build:dev:watch": "scout-scripts build:dev:watch",
     "cleanup:snapshots": "releng-scripts cleanup:snapshots",
     "version:snapshot:dependencies": "releng-scripts version:snapshot:dependencies",
     "version:snapshot": "releng-scripts version:snapshot",
     "version:release:dependencies": "releng-scripts version:release:dependencies",
     "version:release": "releng-scripts version:release"
-  }
+  },
+  "types": "./dist/d.ts/index.d.ts"
 }

package/src/chart/{AbstractChartRenderer.js → AbstractChartRenderer.ts}

@@ -1,34 +1,39 @@
 /*
- * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
  *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
  */
 
-export default class AbstractChartRenderer {
+import {Chart} from '../index';
+import {Session} from '@eclipse-scout/core';
+import {UpdateChartOptions} from './Chart';
 
-  /**
-   * @param {Chart} chart
-   */
-  constructor(chart) {
+export class AbstractChartRenderer {
+  chart: Chart;
+  session: Session;
+
+  /** true while this.render() is executing */
+  rendering: boolean;
+  rendered: boolean;
 
-    /**
-     * @property {Chart} chart
-     */
+  /** set by render() and remove(), makes it unnecessary to carry an argument through all method calls */
+  animationDuration: number;
+  firstOpaqueBackgroundColor: string;
+
+  constructor(chart: Chart) {
     this.chart = chart;
     this.session = chart.session;
-    this.rendering = false; // true while this.render() is executing
+    this.rendering = false;
     this.rendered = false;
-    this.animationDuration = 0; // set by render() and remove(), makes it unnecessary to carry an argument through all method calls
-
+    this.animationDuration = 0;
     this.firstOpaqueBackgroundColor = '';
   }
 
-  validate() {
+  validate(): boolean {
     if (!this._validateChartData()) {
       return false;
     }
@@ -36,7 +41,7 @@ export default class AbstractChartRenderer {
     return this._validate();
   }
 
-  _validateChartData() {
+  protected _validateChartData(): boolean {
     let chartData = this.chart && this.chart.data;
     if (!chartData || !chartData.chartValueGroups || chartData.chartValueGroups.length === 0) {
       return false;
@@ -71,7 +76,7 @@ export default class AbstractChartRenderer {
     return true;
   }
 
-  _validate() {
+  protected _validate(): boolean {
     // Override in subclasses
     return true;
   }
@@ -81,7 +86,7 @@ export default class AbstractChartRenderer {
    *          Whether animations should be used while rendering the chart. Note that his
    *          property is ignored when chart.config.options.animation.duration is <code>0</code>!
    */
-  render(requestAnimation) {
+  render(requestAnimation: boolean) {
     this.animationDuration = requestAnimation ? this.chart.config.options.animation.duration : 0;
     if (!this.validate() || !this.chart.rendered) {
       return;
@@ -92,7 +97,7 @@ export default class AbstractChartRenderer {
     this.rendered = true;
   }
 
-  _render() {
+  protected _render() {
     // Override in subclasses
   }
 
@@ -102,7 +107,7 @@ export default class AbstractChartRenderer {
     }
   }
 
-  _renderCheckedItems() {
+  protected _renderCheckedItems() {
     // nop
   }
 
@@ -111,7 +116,7 @@ export default class AbstractChartRenderer {
    *          Whether animations should be used while updating the chart. Note that his
    *          property is ignored when chart.config.options.animation.duration is <code>0</code>!
    */
-  updateData(requestAnimation) {
+  updateData(requestAnimation: boolean) {
     if (!this.rendered) {
       this.render(requestAnimation);
       return;
@@ -123,11 +128,11 @@ export default class AbstractChartRenderer {
     this._updateData();
   }
 
-  _updateData() {
+  protected _updateData() {
     // Override in subclasses
   }
 
-  isDataUpdatable() {
+  isDataUpdatable(): boolean {
     return false;
   }
 
@@ -143,7 +148,7 @@ export default class AbstractChartRenderer {
    *          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, afterRemoveFunc) {
+  remove(requestAnimation = false, afterRemoveFunc?: (chartAnimationStopping?: boolean) => void) {
     this.animationDuration = requestAnimation && this.chart.config.options.animation.duration;
     if (this.animationDuration && this.rendered) {
       this._removeAnimated(afterRemoveFunc);
@@ -152,12 +157,12 @@ export default class AbstractChartRenderer {
     }
   }
 
-  _remove(afterRemoveFunc) {
+  protected _remove(afterRemoveFunc: (chartAnimationStopping?: boolean) => void) {
     this.rendered = false;
     afterRemoveFunc && afterRemoveFunc();
   }
 
-  _removeAnimated(afterRemoveFunc) {
+  protected _removeAnimated(afterRemoveFunc: (chartAnimationStopping?: boolean) => void) {
     // Override in subclasses
     this._remove(afterRemoveFunc);
   }
@@ -165,7 +170,7 @@ export default class AbstractChartRenderer {
   /**
    * Controls if the animation of the chart is shown when chart data has been updated.
    */
-  shouldAnimateRemoveOnUpdate(opts) {
+  shouldAnimateRemoveOnUpdate(opts: UpdateChartOptions): boolean {
     return opts.requestAnimation;
   }
 }

package/src/chart/{AbstractSvgChartRenderer.js → AbstractSvgChartRenderer.ts}

@@ -1,25 +1,34 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
  *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
  */
 import {ObjectFactory, strings, styles} from '@eclipse-scout/core';
 import $ from 'jquery';
 import {AbstractChartRenderer, Chart} from '../index';
+import {ClickObject} from './Chart';
+
+export class AbstractSvgChartRenderer extends AbstractChartRenderer {
+  chartBox: ChartBox;
+
+  /** Clipping and masking */
+  clipId: string;
+  maskId: string;
+  suppressLegendBox: boolean;
+  height: number;
+  width: number;
+  chartAnimationStopping: boolean;
 
-export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
+  $svg: JQuery<SVGElement>;
 
-  constructor(chart) {
+  constructor(chart: Chart) {
     super(chart);
-    this.chartBox = {};
-    this.labelBox = {};
+    this.chartBox = null;
 
-    // Clipping and masking
     this.clipId = 'Clip-' + ObjectFactory.get().createUniqueId();
     this.maskId = 'Mask-' + ObjectFactory.get().createUniqueId();
 
@@ -31,16 +40,14 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
   static FONT_SIZE_MIDDLE = 'middleFont';
   static FONT_SIZE_BIG = 'bigFont';
 
-  _render() {
+  protected override _render() {
     if (!this.$svg) {
       this.$svg = this.chart.$container.appendSVG('svg', 'chart-svg');
     }
     this.firstOpaqueBackgroundColor = styles.getFirstOpaqueBackgroundColor(this.$svg);
-    this.svgHeight = this.$svg.height();
-    this.svgWidth = this.$svg.width();
     // This works, because CSS specifies 100% width/height
-    this.height = this.svgHeight;
-    this.width = this.svgWidth;
+    this.height = this.$svg.height();
+    this.width = this.$svg.width();
     this._initChartBox();
     if (this._useFontSizeBig()) {
       this.$svg.addClass(AbstractSvgChartRenderer.FONT_SIZE_BIG);
@@ -58,27 +65,27 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     this._renderInternal();
   }
 
-  _renderInternal() {
+  protected _renderInternal() {
     // Override in subclasses
   }
 
-  _useFontSizeBig() {
+  protected _useFontSizeBig(): boolean {
     return false;
   }
 
-  _useFontSizeMiddle() {
+  protected _useFontSizeMiddle(): boolean {
     return false;
   }
 
-  _useFontSizeSmall() {
+  protected _useFontSizeSmall(): boolean {
     return false;
   }
 
-  _useFontSizeSmallest() {
+  protected _useFontSizeSmallest(): boolean {
     return false;
   }
 
-  remove(requestAnimation, afterRemoveFunc) {
+  override remove(requestAnimation = false, afterRemoveFunc?: (chartAnimationStopping?: boolean) => void) {
     if (this.rendered && !this.chartAnimationStopping) {
       this.chartAnimationStopping = true;
       this.$svg.children().stop(true, false);
@@ -87,7 +94,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     super.remove(requestAnimation, afterRemoveFunc);
   }
 
-  _remove(afterRemoveFunc) {
+  protected override _remove(afterRemoveFunc: (chartAnimationStopping?: boolean) => void) {
     // this function is called directly from renderers after all removal animations are done
     // however, other animations may have been queued in the meantime (e.g. in case the chart was removed, then added (+animation queued), and then removed again)
     if (this.rendered) {
@@ -104,11 +111,8 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
 
   /**
    * For all parameters: use null when parameter is not used or set by a chart type.
-   *
-   * @param xIndex number
-   * @param datasetIndex number
    */
-  _createClickObject(xIndex, datasetIndex) {
+  protected _createClickObject(xIndex: number, datasetIndex: number): ClickObject {
     return {
       xIndex: xIndex,
       dataIndex: xIndex,
@@ -116,15 +120,15 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     };
   }
 
-  _measureText(text, legendLabelClass) {
+  protected _measureText(text: string, legendLabelClass?: string): { height: number; width: number } {
     let $label = this.$svg.appendSVG('text', legendLabelClass)
       .attr('x', 0)
       .attr('y', 0)
       .attr('visibility', 'hidden')
-      .text(text);
+      .text(text) as JQuery<SVGGraphicsElement>;
     let textBounds;
     try {
-      // Firefox throws error when node is not in dom(already removed by navigating away). all other browser returns a boundingbox with 0
+      // Firefox throws error when node is not in dom(already removed by navigating away). all other browser returns a bounding box with 0
       textBounds = $label[0].getBBox();
     } catch (e) {
       return {
@@ -137,7 +141,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     return textBounds;
   }
 
-  _renderLine(x1, y1, x2, y2, lineClass) {
+  protected _renderLine(x1: number, y1: number, x2: number, y2: number, lineClass: string): JQuery<SVGElement> {
     let $line = this.$svg.appendSVG('line', lineClass)
       .attr('x1', x1).attr('y1', y1)
       .attr('x2', x2).attr('y2', y2);
@@ -149,7 +153,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     return $line;
   }
 
-  _renderLineLabel(x, y, label, labelClass, drawBackground) {
+  protected _renderLineLabel(x: number, y: number, label: string, labelClass: string, drawBackground: boolean): JQuery<SVGElement> {
     let $label = this.$svg.appendSVG('text', labelClass ? labelClass : 'line-label')
       .attr('x', x).attr('y', y)
       .text(label);
@@ -179,7 +183,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     return $label;
   }
 
-  _initChartBox() {
+  protected _initChartBox() {
     this.chartBox = {
       width: this.width,
       height: this.height,
@@ -194,7 +198,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     };
   }
 
-  _createAnimationObjectWithTabIndexRemoval(animationFunc, duration) {
+  protected _createAnimationObjectWithTabIndexRemoval<T>(animationFunc: (now: number, tween: JQuery.Tween<T>) => void, duration?: number): JQuery.EffectsOptions<T> {
     return {
       step: function(now, fx) {
         try {
@@ -212,7 +216,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     };
   }
 
-  _addClipping(cssClass) {
+  protected _addClipping(cssClass: string) {
     // add clip and mask paths for all relevant objects
     let $clip = this.$svg
       .appendSVG('clipPath');
@@ -234,19 +238,22 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     });
   }
 
-  _renderWireLegend(text, legendPositions, className, drawBackgroundBox) {
-    let legend = {
-      detachFunc: () => {
-      },
-      attachFunc: () => {
-      },
-      removeFunc: () => {
-      }
-    };
+  protected _renderWireLegend(text: string, legendPositions: LegendPositions, className: string, drawBackgroundBox?: boolean): Legend {
     if (!this.chart.config.options.plugins.tooltip.enabled) {
-      return legend;
+      return {
+        detachFunc: () => {
+          // nop
+        },
+        attachFunc: () => {
+          // nop
+        },
+        removeFunc: () => {
+          // nop
+        }
+      };
     }
-    let padding = 5,
+    let legend = {} as Legend,
+      padding = 5,
       $background,
       backgroundWidth = 0,
       lineHeight = 17,
@@ -274,7 +281,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
       for (let i = 0; i < text.length; i++) {
         let posIndex = text.length - i - 1;
         let yPos = positions.y2 + positions.v * padding - lineHeight * posIndex - padding * posIndex;
-        let $line = this._renderLineLabel(positions.x2 + padding, yPos, strings.truncateText(text[i], horizontalSpace, this._measureText.bind(this)), '', drawBackgroundBox);
+        let $line = this._renderLineLabel(positions.x2 + padding, yPos, strings.truncateText(text[i], horizontalSpace, this._measureText.bind(this)), '', drawBackgroundBox) as JQuery<SVGTextContentElement>;
         $line.addClass(className);
         lengthLegend = Math.max(lengthLegend, $line[0].getComputedTextLength());
         if (i === 0) {
@@ -417,3 +424,30 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
     return legend;
   }
 }
+
+export type ChartBox = {
+  width: number;
+  height: number;
+  xOffset: number;
+  yOffset: number;
+  mX: () => number;
+  mY: () => number;
+};
+
+export type Legend = {
+  $field?: JQuery;
+  detachFunc: () => void;
+  attachFunc: () => void;
+  removeFunc: () => void;
+};
+
+export type LegendPositions = {
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+  v: number;
+  h: number;
+  autoPosition: boolean;
+  posFunc: (labelWidth: number, labelHeight: number) => LegendPositions;
+};

package/src/chart/Chart.less

@@ -1,12 +1,11 @@
 /*
- * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * https://www.eclipse.org/legal/epl-v10.html
+ * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
  *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
  */
 #scout {
   /* Mixin to use the correct tile background color for the given attribute (use 'fill' or 'stroke') */
@@ -467,7 +466,8 @@
   & > .elements {
     #scout.chart-label-grid-colors();
 
-    & > .grid {
+    & > .grid,
+    & > .scale-ticks {
       fill: darken(@chart-axis-line-color, 15);
 
       .inverted > & {