@eclipse-scout/chart 23.1.12 → 23.1.15

package/dist/file-list

@@ -1,13 +1,13 @@
-eclipse-scout-chart-dee874ed46aaa3d247de.min.js
-eclipse-scout-chart-dee874ed46aaa3d247de.min.js.map
+eclipse-scout-chart-c0371fbf62b6717784f4.min.js
+eclipse-scout-chart-c0371fbf62b6717784f4.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-558d382efe651ca2215b.min.js
-eclipse-scout-chart.esm-558d382efe651ca2215b.min.js.map
+eclipse-scout-chart.esm-a918cb3af9403c83adfe.min.js
+eclipse-scout-chart.esm-a918cb3af9403c83adfe.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.12",
+  "version": "23.1.15",
   "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": "23.1.12",
+    "@eclipse-scout/cli": "23.1.15",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "4.5.0",
     "jasmine-jquery": "2.1.1",
@@ -36,7 +36,7 @@
     "@types/jasmine-jquery": "1.5.34"
   },
   "dependencies": {
-    "@eclipse-scout/core": "23.1.12",
+    "@eclipse-scout/core": "23.1.15",
     "jquery": "3.6.0",
     "chart.js": "3.9.1",
     "chartjs-plugin-datalabels": "2.1.0"

package/src/chart/ChartJsRenderer.ts

@@ -7,13 +7,14 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {AbstractChartRenderer, Chart} from '../index';
+import {AbstractChartRenderer, Chart, chartJsDateAdapter} from '../index';
 import {
-  ActiveElement, ArcElement, BarElement, BubbleDataPoint, CartesianScaleOptions, Chart as ChartJs, ChartArea, ChartConfiguration, ChartDataset, ChartEvent, ChartType as ChartJsType, Color, DefaultDataPoint, FontSpec, LegendElement,
+  _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
 } from 'chart.js';
 import 'chart.js/auto'; // Import from auto to register charts
-import {arrays, colorSchemes, graphics, numbers, objects, scout, strings, styles, Tooltip, tooltips} from '@eclipse-scout/core';
+import {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';
@@ -235,6 +236,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     this.firstOpaqueBackgroundColor = styles.getFirstOpaqueBackgroundColor(this.$canvas);
     if (!chartJsGlobalsInitialized) {
       ChartJs.defaults.font.family = this.$canvas.css('font-family');
+      chartJsAdapters._date.override(chartJsDateAdapter.getAdapter(this.chart.session));
       chartJsGlobalsInitialized = true;
     }
     let config = $.extend(true, {}, this.chart.config);
@@ -962,6 +964,10 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     if (isTooltipShowing) {
       this._renderTooltipLater(context);
     } else {
+      // clear timeout before creating a new handler.
+      // Otherwise, changing the context within the tooltip delay time creates a second handler
+      // and the first one will always be executed, since the tooltipTimoutId reference to it is lost
+      clearTimeout(this._tooltipTimeoutId);
       this._tooltipTimeoutId = setTimeout(() => this._renderTooltipLater(context), tooltips.DEFAULT_TOOLTIP_DELAY);
     }
   }
@@ -1001,11 +1007,8 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       tooltipText += arrays.ensure(tooltipItems(dataPoints, tooltipLabel, tooltipLabelValue, tooltipColor)).join('');
     }
 
-    let positionAndOffset = this._computeTooltipPositionAndOffset(firstDataPoint),
-      origin = graphics.offsetBounds(this.$canvas);
-    origin.x += tooltip.caretX + positionAndOffset.offsetX;
-    origin.y += tooltip.caretY + positionAndOffset.offsetY;
-    origin.height = positionAndOffset.height;
+    let positionAndOffset = this._computeTooltipPositionAndOffset(firstDataPoint);
+    let offset = new Point(tooltip.caretX + positionAndOffset.offsetX, tooltip.caretY + positionAndOffset.offsetY);
 
     this._tooltip = scout.create({
       objectType: Tooltip,
@@ -1016,7 +1019,12 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       cssClass: strings.join(' ', 'chart-tooltip', tooltipOptions.cssClass),
       tooltipPosition: positionAndOffset.tooltipPosition,
       tooltipDirection: positionAndOffset.tooltipDirection,
-      origin: origin
+      originProducer: $anchor => {
+        const origin = graphics.offsetBounds($anchor);
+        origin.height = positionAndOffset.height;
+        return origin;
+      },
+      offsetProducer: origin => offset
     });
     this._tooltip.render();
 
@@ -1428,7 +1436,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
       return labelMap[label];
     }
     // @ts-expect-error
-    if (isNaN(label)) {
+    if (isNaN(label) || typeof label === 'string') {
       return '' + label;
     }
     if (numberFormatter) {

package/src/chart/chartJsDateAdapter.ts

@@ -0,0 +1,188 @@
+/*
+ * Copyright (c) 2010-2023 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
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+import {DateAdapter, TimeUnit} from 'chart.js';
+import {DateFormat, dates, Locale, objects, Session, strings} from '@eclipse-scout/core';
+
+export const chartJsDateAdapter = {
+  getAdapter(session: Session): Partial<DateAdapter> {
+    return {
+      formats: (): { [key: string]: string } => _getFormats(session.locale),
+
+      parse: (value: unknown, format?: TimeUnit): number | null => {
+        if (objects.isNullOrUndefined(value)) {
+          return null;
+        }
+        if (value instanceof Date) {
+          return value.getTime();
+        }
+        if (objects.isString(value)) {
+          if (objects.isString(format) && strings.hasText(format)) {
+            let dateFormat = new DateFormat(session.locale, format);
+            value = dateFormat.parse(value);
+            return value instanceof Date ? value.getTime() : null;
+          }
+          value = dates.parseJsonDate(value);
+          return value instanceof Date ? value.getTime() : null;
+        }
+        return null;
+      },
+
+      format: (timestamp: number, format: TimeUnit): string => {
+        if (format === 'quarter') {
+          // Quarters are not supported by DateFormat, but Chart.js anyway never uses this time unit for formatting by default, because it is not very common.
+          // See the function "determineUnitForFormatting" in scale.time.js for more details. Therefore, we refrain from supporting this here.
+          throw new Error('The time unit "quarter" is not supported for formatting.');
+        }
+        return dates.format(new Date(timestamp), session.locale, format);
+      },
+
+      add: (timestamp: number, amount: number, unit: TimeUnit): number => {
+        let date = new Date(timestamp);
+        switch (unit) {
+          case 'millisecond':
+            return dates.shiftTime(date, 0, 0, 0, amount).getTime();
+          case 'second':
+            return dates.shiftTime(date, 0, 0, amount, 0).getTime();
+          case 'minute':
+            return dates.shiftTime(date, 0, amount, 0, 0).getTime();
+          case 'hour':
+            return dates.shiftTime(date, amount, 0, 0, 0).getTime();
+          case 'day':
+            return dates.shift(date, 0, 0, amount).getTime();
+          case 'week':
+            return dates.shift(date, 0, 0, amount * 7).getTime();
+          case 'month':
+            return dates.shift(date, 0, amount, 0).getTime();
+          case 'quarter':
+            return dates.shift(date, 0, amount * 3, 0).getTime();
+          case 'year':
+            return dates.shift(date, amount, 0, 0).getTime();
+          default:
+            return timestamp;
+        }
+      },
+
+      diff: (a: number, b: number, unit: TimeUnit): number => {
+        switch (unit) {
+          case 'millisecond':
+            return a - b;
+          case 'second':
+            return (a - b) / 1000;
+          case 'minute':
+            return (a - b) / 1000 / 60;
+          case 'hour':
+            return (a - b) / 1000 / 60 / 60;
+          case 'day':
+            return dates.compareDays(new Date(a), new Date(b));
+          case 'week':
+            return dates.compareDays(new Date(a), new Date(b)) / 7;
+          case 'month':
+            return dates.compareMonths(new Date(a), new Date(b));
+          case 'quarter':
+            return dates.compareMonths(new Date(a), new Date(b)) / 3;
+          case 'year':
+            return new Date(a).getFullYear() - new Date(b).getFullYear();
+          default:
+            return 0;
+        }
+      },
+
+      startOf: (timestamp: number, unit: TimeUnit | 'isoWeek', weekday?: number): number => {
+        let date = new Date(timestamp);
+        switch (unit) {
+          case 'second':
+            return date.setMilliseconds(0);
+          case 'minute':
+            return date.setSeconds(0, 0);
+          case 'hour':
+            return date.setMinutes(0, 0, 0);
+          case 'day':
+            return date.setHours(0, 0, 0, 0);
+          case 'week':
+            return dates.firstDayOfWeek(date, 0).getTime();
+          case 'isoWeek':
+            return dates.firstDayOfWeek(date, weekday).getTime();
+          case 'month':
+            return dates.trunc(date).setDate(0);
+          case 'quarter':
+            return dates.trunc(date).setMonth(date.getMonth() % 4, 1);
+          case 'year':
+            return dates.trunc(date).setMonth(0, 1);
+          default:
+            return timestamp;
+        }
+      },
+
+      endOf: (timestamp: number, unit: TimeUnit | 'isoWeek'): number => {
+        let date = new Date(timestamp);
+        switch (unit) {
+          case 'second':
+            return date.setMilliseconds(999);
+          case 'minute':
+            return date.setSeconds(59, 999);
+          case 'hour':
+            return date.setMinutes(59, 59, 999);
+          case 'day':
+            return date.setHours(23, 59, 59, 999);
+          case 'week': {
+            date.setHours(23, 59, 59, 999);
+            let firstDayOfWeek = dates.firstDayOfWeek(date, 0);
+            return firstDayOfWeek.setDate(firstDayOfWeek.getDate() + 7);
+          }
+          case 'month': {
+            date.setHours(23, 59, 59, 999);
+            return date.setDate(_getNumberOfDays(date.getMonth(), date.getFullYear()));
+          }
+          case 'quarter': {
+            date.setHours(23, 59, 59, 999);
+            let endOfQuarterMonth = date.getMonth() % 4 + 2;
+            return date.setMonth(endOfQuarterMonth, _getNumberOfDays(endOfQuarterMonth, date.getFullYear()));
+          }
+          case 'year': {
+            date.setHours(23, 59, 59, 999);
+            return date.setMonth(11, 31);
+          }
+          default:
+            return timestamp;
+        }
+      }
+    };
+  }
+};
+
+function _getFormats(locale: Locale) {
+  return {
+    datetime: locale.dateFormatPatternDefault + ' ' + locale.timeFormatPatternDefault,
+    millisecond: 'HH:mm:ss.SSS',
+    second: 'HH:mm:ss',
+    minute: locale.timeFormatPatternDefault,
+    hour: locale.timeFormatPatternDefault,
+    day: locale.dateFormatPatternDefault,
+    week: 'ww',
+    month: 'MMM yyyy',
+    quarter: 'qqq - yyyy',
+    year: 'yyyy'
+  };
+}
+
+/**
+ * @param month 0 = january, 11 = december
+ * @returns the number of days in the given month and year.
+ */
+function _getNumberOfDays(month: number, year: number): number {
+  if (month in [3, 5, 8, 10]) { // april, june, september, november
+    return 30;
+  } else if (month === 1) { // february
+    return dates.isLeapYear(year) ? 29 : 28;
+  }
+  // january, march, may, july, august, october, december
+  return 31;
+}

package/src/index.ts

@@ -16,6 +16,7 @@ export * from './chart/ChartLayout';
 export * from './chart/ChartModel';
 export * from './chart/AbstractChartRenderer';
 export * from './chart/AbstractSvgChartRenderer';
+export * from './chart/chartJsDateAdapter';
 export * from './chart/ChartJsRenderer';
 export * from './chart/FulfillmentChartRenderer';
 export * from './chart/SpeedoChartRenderer';