@eclipse-scout/chart 24.1.6 → 24.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/chart",
-  "version": "24.1.6",
+  "version": "24.1.12",
   "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.6",
+    "@eclipse-scout/cli": "24.1.12",
     "@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.6",
+    "@eclipse-scout/core": "24.1.12",
     "jquery": "3.7.1",
     "chart.js": "4.4.0",
     "chartjs-plugin-datalabels": "2.2.0"

package/src/chart/Chart.ts

@@ -10,7 +10,7 @@
 import {AbstractChartRenderer, ChartEventMap, ChartJsRenderer, ChartLayout, ChartModel, FulfillmentChartRenderer, SalesfunnelChartRenderer, SpeedoChartRenderer, VennChartRenderer} from '../index';
 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 {CategoryScaleOptions, ChartConfiguration, ChartOptions, LinearScaleOptions, LogarithmicScaleOptions, RadialLinearScaleOptions, ScaleType, TimeScaleOptions as ChartJsTimeScaleOptions} from 'chart.js';
 import $ from 'jquery';
 
 export class Chart extends Widget implements ChartModel {
@@ -414,60 +414,72 @@ export type ChartValueGroup = {
   cssClass?: string;
 };
 
-export type ChartConfig = Partial<Omit<ChartConfiguration, 'type'>> & {
+export type ChartConfig = Partial<Omit<ChartConfiguration, 'type' | 'options'>> & {
   type: ChartType;
-  options?: {
-    autoColor?: boolean;
-    colorScheme?: ColorScheme | string;
-    transparent?: boolean;
-    maxSegments?: number;
-    otherSegmentClickable?: boolean;
-    adjustGridMaxMin?: boolean;
-    clickable?: boolean;
-    checkable?: boolean;
-    scaleLabelByTypeMap?: Record<ChartType, Record<string, string>>;
-    numberFormatter?: NumberFormatter;
-    reformatLabels?: boolean;
-    handleResize?: boolean;
-    animation?: {
-      duration?: number;
-    };
-    scales?: {
-      x?: LinearScaleOptions & {
-        minSpaceBetweenTicks?: number;
-      };
-      y?: LinearScaleOptions & {
-        minSpaceBetweenTicks?: number;
-      };
-      yDiffType?: LinearScaleOptions;
-      r?: RadialLinearScaleOptions & {
-        minSpaceBetweenTicks?: number;
-      };
-    };
-    bubble?: {
-      sizeOfLargestBubble?: number;
-      minBubbleSize?: number;
-    };
-    fulfillment?: {
-      startValue?: number;
-    };
-    salesfunnel?: {
-      normalized?: boolean;
-      calcConversionRate?: boolean;
-    };
-    speedo?: {
-      greenAreaPosition?: GreenAreaPosition;
-    };
-    venn?: {
-      numberOfCircles?: 1 | 2 | 3;
-    };
-    plugins?: {
-      legend?: {
-        clickable?: boolean;
-      };
+  options?: ChartConfigOptions;
+};
+
+export type ChartConfigOptions = Omit<ChartOptions, 'scales'> & {
+  autoColor?: boolean;
+  colorScheme?: ColorScheme | string;
+  transparent?: boolean;
+  maxSegments?: number;
+  otherSegmentClickable?: boolean;
+  adjustGridMaxMin?: boolean;
+  clickable?: boolean;
+  checkable?: boolean;
+  scaleLabelByTypeMap?: Record<ChartType, Record<string, string>>;
+  numberFormatter?: NumberFormatter;
+  reformatLabels?: boolean;
+  handleResize?: boolean;
+  animation?: {
+    duration?: number;
+  };
+  scales?: {
+    x?: CartesianChartScale;
+    y?: CartesianChartScale;
+    yDiffType?: CartesianChartScale;
+    r?: RadialChartScale;
+  };
+  bubble?: {
+    sizeOfLargestBubble?: number;
+    minBubbleSize?: number;
+  };
+  fulfillment?: {
+    startValue?: number;
+  };
+  salesfunnel?: {
+    normalized?: boolean;
+    calcConversionRate?: boolean;
+  };
+  speedo?: {
+    greenAreaPosition?: GreenAreaPosition;
+  };
+  venn?: {
+    numberOfCircles?: 1 | 2 | 3;
+  };
+  plugins?: {
+    legend?: {
+      clickable?: boolean;
     };
   };
 };
+
+export type RadialChartScale = DeepPartial<RadialLinearScaleOptions> & {
+  type?: ScaleType;
+  minSpaceBetweenTicks?: number;
+};
+
+export type CartesianChartScale = DeepPartial<LinearScaleOptions | CategoryScaleOptions | TimeScaleOptions | LogarithmicScaleOptions> & {
+  type?: ScaleType;
+  minSpaceBetweenTicks?: number;
+};
+
+export type TimeScaleOptions = Omit<ChartJsTimeScaleOptions, 'min' | 'max'> & {
+  min?: string | number | Date | (() => string | number | Date);
+  max?: string | number | Date | (() => string | number | Date);
+};
+
 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;
@@ -498,3 +510,7 @@ export type UpdateChartOptions = {
   onlyRefresh?: boolean;
   enforceRerender?: boolean;
 };
+
+type DeepPartial<T> = T extends object ? {
+  [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/src/chart/ChartJsRenderer.ts

@@ -7,10 +7,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {AbstractChartRenderer, Chart, chartJsDateAdapter} from '../index';
+import {AbstractChartRenderer, CartesianChartScale, Chart, chartJsDateAdapter, 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, TooltipCallbacks, TooltipItem, TooltipLabelStyle, TooltipModel, TooltipOptions
+  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';
@@ -2802,7 +2803,7 @@ export class ChartJsRenderer extends AbstractChartRenderer {
     });
   }
 
-  protected _adjustAxisMaxMin(axis: LinearScaleOptions | RadialLinearScaleOptions, maxTicks: number, maxMinValue: Boundary) {
+  protected _adjustAxisMaxMin(axis: AxisWithMaxMin, maxTicks: number, maxMinValue: Boundary) {
     if (!axis) {
       return;
     }
@@ -2865,6 +2866,12 @@ export type DatasetColors = {
 
 export type Boundary = { maxValue: number; minValue: number };
 
+export type AxisWithMaxMin = (CartesianChartScale | RadialChartScale) & {
+  ticks?: (CartesianChartScale | RadialChartScale)['ticks'] & {
+    stepSize?: number;
+  };
+};
+
 // extend chart.js
 
 export type ChartJsChart = Omit<ChartJs, 'config'> & {
@@ -2881,10 +2888,10 @@ declare module 'chart.js' {
     datasetId?: string;
     yAxisID?: 'y' | 'yDiffType';
 
-    pointBackgroundColor?: Color;
-    pointHoverBackgroundColor?: Color;
-    pointRadius?: number;
-    legendColor?: Color;
+    pointBackgroundColor?: Scriptable<Color, ScriptableContext<TType>>;
+    pointHoverBackgroundColor?: Scriptable<Color, ScriptableContext<TType>>;
+    pointRadius?: Scriptable<number, ScriptableContext<TType>>;
+    legendColor?: Scriptable<Color, number>;
 
     checkedBackgroundColor?: Color;
     checkedHoverBackgroundColor?: Color;