@spike-rabbit/charts-ng 49.0.0 → 49.13.0

package/gauge/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/spike-rabbit-charts-ng-gauge.mjs",
+  "typings": "../types/spike-rabbit-charts-ng-gauge.d.ts"
+}

package/loading-spinner/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/spike-rabbit-charts-ng-loading-spinner.mjs",
+  "typings": "../types/spike-rabbit-charts-ng-loading-spinner.d.ts"
+}

package/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@spike-rabbit/charts-ng",
   "description": "Element Charts library.",
-  "version": "49.0.0",
+  "version": "49.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/siemens/element.git"
+    "url": "git+https://github.com/spike-rabbit/element.git"
   },
   "author": {
     "name": "Siemens AG",
     "email": "info@siemens.com"
   },
-  "homepage": "https://github.com/siemens/element",
-  "bugs": "https://github.com/siemens/element/issues/new",
+  "homepage": "https://github.com/spike-rabbit/element",
+  "bugs": "https://github.com/spike-rabbit/element/issues/new",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "../../dist/@spike-rabbit/charts-ng"
   },
   "type": "module",
   "peerDependencies": {
-    "@angular/common": "20",
-    "@angular/core": "20",
-    "echarts": "^5.6.0"
+    "@angular/common": "22",
+    "@angular/core": "22",
+    "echarts": "^6.0.0"
   },
   "exports": {
     "./docs.json": {
@@ -30,14 +31,59 @@
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/spike-rabbit-charts-ng.d.ts",
       "default": "./fesm2022/spike-rabbit-charts-ng.mjs"
+    },
+    "./cartesian": {
+      "types": "./types/spike-rabbit-charts-ng-cartesian.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-cartesian.mjs"
+    },
+    "./chart": {
+      "types": "./types/spike-rabbit-charts-ng-chart.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-chart.mjs"
+    },
+    "./circle": {
+      "types": "./types/spike-rabbit-charts-ng-circle.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-circle.mjs"
+    },
+    "./common": {
+      "types": "./types/spike-rabbit-charts-ng-common.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-common.mjs"
+    },
+    "./custom-legend": {
+      "types": "./types/spike-rabbit-charts-ng-custom-legend.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-custom-legend.mjs"
+    },
+    "./gauge": {
+      "types": "./types/spike-rabbit-charts-ng-gauge.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-gauge.mjs"
+    },
+    "./loading-spinner": {
+      "types": "./types/spike-rabbit-charts-ng-loading-spinner.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-loading-spinner.mjs"
+    },
+    "./progress": {
+      "types": "./types/spike-rabbit-charts-ng-progress.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-progress.mjs"
+    },
+    "./progress-bar": {
+      "types": "./types/spike-rabbit-charts-ng-progress-bar.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-progress-bar.mjs"
+    },
+    "./sankey": {
+      "types": "./types/spike-rabbit-charts-ng-sankey.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-sankey.mjs"
+    },
+    "./sunburst": {
+      "types": "./types/spike-rabbit-charts-ng-sunburst.d.ts",
+      "default": "./fesm2022/spike-rabbit-charts-ng-sunburst.mjs"
     }
   },
   "module": "fesm2022/spike-rabbit-charts-ng.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/spike-rabbit-charts-ng.d.ts",
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"
-  }
-}
+  },
+  "readme": "# Element Charts\n\nThe Element chart library for Angular based on ECharts. Going through the roof. Stoinks.\n\n## Usage\n\nTo use the Element Charts Angular components in your project, add them to your dependencies\nby executing:\n\n```sh\nnpm install --save @spike-rabbit/charts-ng\n```\n\nYou also have to install the peer dependencies of Element Charts.\n\n```sh\nnpm install echarts --save\n```\n\nImport the library to your Angular `AppModule`, mostly residing in your\n`src/app/app.modules.ts` file as follows:\n\n```ts\n// [...]\n\n// Import this library\nimport { SiChartsNgModule } from '@spike-rabbit/charts-ng';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, SiChartsNgModule],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nStarting with v49, Element Charts uses separate entry points for each component.\nImport components directly from their specific entry points:\n\n```ts\nimport { SiChartCartesianComponent } from '@spike-rabbit/charts-ng/cartesian';\nimport { SiChartCircleComponent } from '@spike-rabbit/charts-ng/circle';\nimport { SiChartGaugeComponent } from '@spike-rabbit/charts-ng/gauge';\n// ... and other components\n\n@Component({\n  imports: [SiChartCartesianComponent, ...]\n})\nexport class AppComponent {}\n```\n\n### Running unit tests\n\nRun `pnpm run charts:test` to perform the unit tests via [Vitest](https://main.vitest.dev/).\n\n## License\n\nThe following applies for code and documentation of the git repository,\nunless explicitly mentioned.\n\nCopyright (c) Siemens 2016 - 2026\n\nMIT, see [LICENSE.md](LICENSE.md).\n"
+}

package/progress/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/spike-rabbit-charts-ng-progress.mjs",
+  "typings": "../types/spike-rabbit-charts-ng-progress.d.ts"
+}

package/progress-bar/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/spike-rabbit-charts-ng-progress-bar.mjs",
+  "typings": "../types/spike-rabbit-charts-ng-progress-bar.d.ts"
+}

package/projects/charts-ng/README.md

@@ -35,16 +35,30 @@ import { SiChartsNgModule } from '@spike-rabbit/charts-ng';
 export class AppModule {}
 ```
 
+Starting with v49, Element Charts uses separate entry points for each component.
+Import components directly from their specific entry points:
+
+```ts
+import { SiChartCartesianComponent } from '@spike-rabbit/charts-ng/cartesian';
+import { SiChartCircleComponent } from '@spike-rabbit/charts-ng/circle';
+import { SiChartGaugeComponent } from '@spike-rabbit/charts-ng/gauge';
+// ... and other components
+
+@Component({
+  imports: [SiChartCartesianComponent, ...]
+})
+export class AppComponent {}
+```
+
 ### Running unit tests
 
-Run `yarn charts:test` to perform the unit tests via [Karma](https://karma-runner.github.io).
-You can set a seed for running the tests in a specific using an environment variable: `SEED=71384 yarn lib:test`
+Run `pnpm run charts:test` to perform the unit tests via [Vitest](https://main.vitest.dev/).
 
 ## License
 
 The following applies for code and documentation of the git repository,
 unless explicitly mentioned.
 
-Copyright (c) Siemens 2016 - 2025
+Copyright (c) Siemens 2016 - 2026
 
 MIT, see [LICENSE.md](LICENSE.md).

package/sankey/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/spike-rabbit-charts-ng-sankey.mjs",
+  "typings": "../types/spike-rabbit-charts-ng-sankey.d.ts"
+}

package/sunburst/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/spike-rabbit-charts-ng-sunburst.mjs",
+  "typings": "../types/spike-rabbit-charts-ng-sunburst.d.ts"
+}

package/types/spike-rabbit-charts-ng-cartesian.d.ts

@@ -0,0 +1,91 @@
+import * as echarts from 'echarts';
+import * as _angular_core from '@angular/core';
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { BarSeriesOption, CandlestickSeriesOption, LineSeriesOption, HeatmapSeriesOption, ScatterSeriesOption, SiSeriesOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, SiChartBaseComponent, ChartYAxis, ChartXAxis, DataZoomRange, SeriesUpdate } from '@spike-rabbit/charts-ng/common';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+type LineStepType = 'start' | 'middle' | 'end';
+type LineType = 'solid' | 'dashed' | 'dotted';
+interface SubchartGrid {
+    categoryId?: string;
+    top?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    right?: number | string;
+    height?: number | string;
+    containLabel?: boolean;
+}
+interface SiLineSeriesOption extends LineSeriesOption, SiSeriesOption {
+    area?: boolean;
+}
+type SiBarSeriesOption = BarSeriesOption & SiSeriesOption;
+type SiHeatmapSeriesOption = HeatmapSeriesOption & SiSeriesOption;
+type SiScatterSeriesOption = ScatterSeriesOption & SiSeriesOption;
+type SiCandlestickSeriesOption = CandlestickSeriesOption & SiSeriesOption;
+type LineSeriesData = NonNullable<LineSeriesOption['data']>;
+type BarSeriesData = NonNullable<BarSeriesOption['data']>;
+type HeatmapSeriesData = NonNullable<HeatmapSeriesOption['data']>;
+type ScatterSeriesData = NonNullable<Exclude<ScatterSeriesOption['data'], ArrayLike<number>>>;
+type CandlestickSeriesData = NonNullable<CandlestickSeriesOption['data']>;
+type CartesianDataNullable = LineSeriesData | BarSeriesData | HeatmapSeriesData | ScatterSeriesData | CandlestickSeriesData | never;
+type CartesianChartData = NonNullable<CartesianDataNullable>;
+type CartesianChartSeries = SiBarSeriesOption | SiLineSeriesOption | SiHeatmapSeriesOption | SiScatterSeriesOption | SiCandlestickSeriesOption | never;
+type MarkAreaData = NonNullable<MarkAreaComponentOption['data']>;
+type MarkPointData = NonNullable<MarkPointComponentOption['data']>;
+type MarkLineData = NonNullable<MarkLineComponentOption['data']>;
+
+declare class SiChartCartesianComponent extends SiChartBaseComponent implements OnChanges {
+    /** The series for the chart. */
+    readonly series: _angular_core.InputSignal<CartesianChartSeries[] | undefined>;
+    readonly subChartGrids: _angular_core.InputSignal<SubchartGrid[] | undefined>;
+    /** The y axis in cartesian(rectangular) coordinate. */
+    readonly yAxis: _angular_core.InputSignal<ChartYAxis | ChartYAxis[] | undefined>;
+    /** The x axis in cartesian(rectangular) coordinate. */
+    readonly xAxis: _angular_core.InputSignal<ChartXAxis | ChartXAxis[] | undefined>;
+    /** The content formatter of tooltip's floating layer which supports string template and callback function (see (see {@link https://echarts.apache.org/en/option.html#tooltip.formatter }). */
+    readonly tooltipFormatter: _angular_core.InputSignal<string | echarts.TooltipComponentFormatterCallback<echarts.TooltipComponentFormatterCallbackParams> | undefined>;
+    /**
+     * Used to display the chart as a stacked one.
+     *
+     * @defaultValue false
+     */
+    readonly stacked: _angular_core.InputSignal<boolean>;
+    /** Enable or disable brush zoom mode */
+    readonly zoomMode: _angular_core.InputSignal<boolean | undefined>;
+    ngOnChanges(changes: SimpleChanges<unknown>): void;
+    private formatTooltip;
+    /**
+     * Get the series marker svg by series name.
+     */
+    getSeriesMarkerSvg(seriesName: string): string;
+    /**
+     * Get the series marker by series name.
+     */
+    getSeriesMarker(seriesName: string): string;
+    protected afterChartInit(skipZoom?: boolean): void;
+    protected setZoomMode(): void;
+    protected getValidXAxis(): Set<number>;
+    protected applyOptions(): void;
+    private hasDifferentMarker;
+    private getGrid;
+    refreshSeries(isLive?: boolean, dzToSet?: DataZoomRange): void;
+    protected hasData(): boolean;
+    protected handleSelectionChanged(event: any): void;
+    /**
+     * Update single chart data entry.
+     */
+    addData(index: number, data: CartesianChartData): void;
+    /**
+     * Append charts data entries to the end of the series.
+     */
+    addDataMulti(series: SeriesUpdate<CartesianChartData>[]): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChartCartesianComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChartCartesianComponent, "si-chart-cartesian", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "subChartGrids": { "alias": "subChartGrids"; "required": false; "isSignal": true; }; "yAxis": { "alias": "yAxis"; "required": false; "isSignal": true; }; "xAxis": { "alias": "xAxis"; "required": false; "isSignal": true; }; "tooltipFormatter": { "alias": "tooltipFormatter"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "zoomMode": { "alias": "zoomMode"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=timeRangeBar]"], true, never>;
+}
+
+export { SiChartCartesianComponent };
+export type { BarSeriesData, CandlestickSeriesData, CartesianChartData, CartesianChartSeries, CartesianDataNullable, HeatmapSeriesData, LineSeriesData, LineStepType, LineType, MarkAreaData, MarkLineData, MarkPointData, ScatterSeriesData, SiBarSeriesOption, SiCandlestickSeriesOption, SiHeatmapSeriesOption, SiLineSeriesOption, SiScatterSeriesOption, SiBarSeriesOption as SimplBarSeriesOption, SiCandlestickSeriesOption as SimplCandlestickSeriesOption, SiHeatmapSeriesOption as SimplHeatmapSeriesOption, SiLineSeriesOption as SimplLineSeriesOption, SiScatterSeriesOption as SimplScatterSeriesOption, SubchartGrid };

package/types/spike-rabbit-charts-ng-chart.d.ts

@@ -0,0 +1,9 @@
+import { SiChartBaseComponent } from '@spike-rabbit/charts-ng/common';
+import * as i0 from '@angular/core';
+
+declare class SiChartComponent extends SiChartBaseComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiChartComponent, "si-chart", never, {}, {}, never, ["[slot=timeRangeBar]"], true, never>;
+}
+
+export { SiChartComponent };

package/types/spike-rabbit-charts-ng-circle.d.ts

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { SiChartBaseComponent } from '@spike-rabbit/charts-ng/common';
+import { PieSeriesOption } from 'echarts';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+interface CircleChartData {
+    value: number;
+    name?: string;
+    label?: {
+        color?: string;
+        [key: string]: any;
+    };
+    itemStyle?: {
+        color?: string;
+        [key: string]: any;
+    };
+}
+interface CircleChartSeries {
+    name: string;
+    radius?: string[];
+    data: CircleChartData[];
+    /**
+     * The start angle from which the circle should start, the range is [0, 360].
+     * @defaultValue 90
+     */
+    startAngle?: number;
+    /**
+     * The end angle where the circle should end.
+     *
+     * @defaultValue 'auto' - In this case the end Angle is calculated
+     * automatically based on startAngle to ensure it is a complete circle.
+     */
+    endAngle?: number;
+    label?: {
+        /**
+         * A custom label formatter based on echarts, some commonly used variations can be
+         * \{a\}: series name.
+         * \{b\}: the name of a data item.
+         * \{c\}: the value of a data item.
+         * \{d\}: the percent.
+         * See {@link https://echarts.apache.org/en/option.html#series-pie.label.formatter}
+         */
+        formatter?: NonNullable<PieSeriesOption['label']>['formatter'];
+    };
+}
+interface CircleValueUpdate {
+    seriesIndex: number;
+    valueIndex: number;
+    value: number;
+}
+
+declare class SiChartCircleComponent extends SiChartBaseComponent {
+    /** The series for the chart. */
+    readonly series: i0.InputSignal<CircleChartSeries[] | undefined>;
+    protected applyOptions(): void;
+    protected applyDataZoom(): void;
+    /**
+     * Update single value of the circle chart.
+     */
+    changeSingleValue(index: number, valueIndex: number, value: number): void;
+    /**
+     * Update multiple values of the circle chart.
+     */
+    changeMultiValues(updateValues: CircleValueUpdate[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiChartCircleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiChartCircleComponent, "si-chart-circle", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=timeRangeBar]"], true, never>;
+}
+
+export { SiChartCircleComponent };
+export type { CircleChartData, CircleChartSeries, CircleValueUpdate };