@tetacom/svg-charts 1.7.13 → 1.7.15

package/chart/chart/chart.component.d.ts

@@ -32,6 +32,7 @@ export declare class ChartComponent implements OnInit, OnDestroy {
     annotationMove: EventEmitter<IChartEvent<Annotation>>;
     zoomServiceInstance: EventEmitter<ZoomService>;
     brushServiceInstance: EventEmitter<BrushService>;
+    configUpdated: EventEmitter<string>;
     set config(config: IChartConfig);
     private _alive;
     constructor(chartService: ChartService, zoomService: ZoomService, brushService: BrushService, scaleService: ScaleService);
@@ -39,5 +40,5 @@ export declare class ChartComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "teta-svg-chart", never, { "config": { "alias": "config"; "required": false; }; }, { "pointerMove": "pointerMove"; "plotBandsMove": "plotBandsMove"; "plotBandClick": "plotBandClick"; "plotBandContextMenu": "plotBandContextMenu"; "plotLinesMove": "plotLinesMove"; "pointMove": "pointMove"; "chartClick": "chartClick"; "chartContextMenu": "chartContextMenu"; "annotationContextMenu": "annotationContextMenu"; "annotationClick": "annotationClick"; "annotationMove": "annotationMove"; "zoomServiceInstance": "zoomServiceInstance"; "brushServiceInstance": "brushServiceInstance"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "teta-svg-chart", never, { "config": { "alias": "config"; "required": false; }; }, { "pointerMove": "pointerMove"; "plotBandsMove": "plotBandsMove"; "plotBandClick": "plotBandClick"; "plotBandContextMenu": "plotBandContextMenu"; "plotLinesMove": "plotLinesMove"; "pointMove": "pointMove"; "chartClick": "chartClick"; "chartContextMenu": "chartContextMenu"; "annotationContextMenu": "annotationContextMenu"; "annotationClick": "annotationClick"; "annotationMove": "annotationMove"; "zoomServiceInstance": "zoomServiceInstance"; "brushServiceInstance": "brushServiceInstance"; "configUpdated": "configUpdated"; }, never, ["*"], true, never>;
 }

package/chart/const/chart-config-postfix.d.ts

@@ -0,0 +1 @@
+export declare const chartConfigPostfix = "series_config";

package/chart/service/chart.service.d.ts

@@ -26,6 +26,7 @@ export declare class ChartService {
     annotationContextMenu: Observable<IChartEvent<Annotation>>;
     chartClick: Observable<IChartEvent<BasePoint>>;
     chartContextMenu: Observable<IChartEvent<BasePoint>>;
+    configUpdated: Observable<string>;
     private config$;
     private configUpdates$;
     private size$;
@@ -38,7 +39,6 @@ export declare class ChartService {
     private chartContextMenu$;
     private annotationEvent$;
     private annotationMove$;
-    private static _hiddenSeriesPostfix;
     constructor();
     setConfig(config: IChartConfig): void;
     setSize(size: DOMRect): void;
@@ -55,6 +55,7 @@ export declare class ChartService {
     emitChartClick(event: IChartEvent<BasePoint>): void;
     emitChartContextMenu(event: IChartEvent<BasePoint>): void;
     private saveCookie;
+    private getConfigString;
     private restoreLocalStorage;
     private setDefaults;
     private setPreparationData;

package/fesm2022/tetacom-svg-charts.mjs

@@ -12,6 +12,8 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { TranslocoPipe } from '@jsverse/transloco';
 
+const chartConfigPostfix = 'series_config';
+
 class BroadcastService {
     constructor() {
         this.zoomEmitter = new ReplaySubject(1);
@@ -174,14 +176,13 @@ const defaultSeriesConfig = () => ({
     xAxisIndex: 0,
     yAxisIndex: 0,
     fillType: FillType.default,
-    color: 'coral',
+    color: '#FF7F50',
     visible: true,
     enabled: true,
     clipPointsDirection: ClipPointsDirection.x,
 });
 
 class ChartService {
-    static { this._hiddenSeriesPostfix = 'series_config'; }
     constructor() {
         this.config$ = new BehaviorSubject(defaultChartConfig());
         this.configUpdates$ = new Subject();
@@ -204,7 +205,7 @@ class ChartService {
             bufferSize: 1,
             refCount: true,
         }));
-        this.config = merge(initialConfig, this.configUpdates$).pipe(shareReplay({
+        this.config = merge(initialConfig, this.configUpdates$).pipe(filter((_) => _ !== null), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));
@@ -223,6 +224,9 @@ class ChartService {
         this.annotationMove = this.annotationMove$.asObservable();
         this.plotBandClick = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
         this.plotBandContextMenu = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'contextmenu'));
+        this.configUpdated = this.configUpdates$.asObservable().pipe(map((config) => {
+            return this.getConfigString(config);
+        }));
     }
     setConfig(config) {
         this.clearTooltips();
@@ -267,7 +271,8 @@ class ChartService {
         const config = await lastValueFrom(this.initialConfig.pipe(take(1)));
         if (!config.name)
             return;
-        localStorage.removeItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
+        localStorage.removeItem(`${config.name}_${chartConfigPostfix}`);
+        this.configUpdates$.next(null);
         this.config$.next({ ...config });
     }
     emitMoveAnnotation(event) {
@@ -294,7 +299,11 @@ class ChartService {
     saveCookie(config) {
         if (!config.name)
             return;
-        const series = config.series?.map((_) => {
+        const seriesConfig = this.getConfigString(config);
+        localStorage.setItem(`${config.name}_${chartConfigPostfix}`, seriesConfig);
+    }
+    getConfigString(config) {
+        const series = config?.series?.map((_) => {
             return {
                 id: _.id,
                 visible: _.visible,
@@ -305,12 +314,12 @@ class ChartService {
                 strokeWidth: _.style?.strokeWidth,
             };
         });
-        localStorage.setItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`, JSON.stringify(series));
+        return JSON.stringify(series ?? null);
     }
     restoreLocalStorage(config) {
         if (!config.name)
             return config;
-        const seriesConfig = localStorage.getItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
+        const seriesConfig = localStorage.getItem(`${config.name}_${chartConfigPostfix}`);
         if (seriesConfig) {
             const json = JSON.parse(seriesConfig);
             config.series = config.series.map((serie, index) => {
@@ -2908,6 +2917,7 @@ class ChartComponent {
         this.annotationMove = new EventEmitter();
         this.zoomServiceInstance = new EventEmitter();
         this.brushServiceInstance = new EventEmitter();
+        this.configUpdated = new EventEmitter();
         this._alive = true;
         this.svcConfig = this.chartService.config;
         this.hasSeriesData = this.svcConfig.pipe(map((_) => _.series?.length > 0 && _.series?.some((_) => _.data?.length > 0)));
@@ -2980,12 +2990,15 @@ class ChartComponent {
         this.chartService.annotationMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
             this.annotationMove.emit(_);
         });
+        this.chartService.configUpdated.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+            this.configUpdated.emit(_);
+        });
     }
     ngOnDestroy() {
         this._alive = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartComponent, isStandalone: true, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], ngImport: i0, template: "@if ({ hasSeriesData: hasSeriesData | async, svcConfig: svcConfig | async }; as data) {\n  @if (data.hasSeriesData === true) {\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    @if (data.svcConfig.legend?.enable === true) {\n      <teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n    }\n  } @else {\n    <div class=\"column column_auto justify-content-center\">\n      <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n        <div #ref><ng-content></ng-content></div>\n        @if (!ref.hasChildNodes()) {\n          <span> No data </span>\n        }\n      </span>\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartComponent, isStandalone: true, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance", configUpdated: "configUpdated" }, providers: [ChartService, ZoomService, ScaleService, BrushService], ngImport: i0, template: "@if ({ hasSeriesData: hasSeriesData | async, svcConfig: svcConfig | async }; as data) {\n  @if (data.hasSeriesData === true) {\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    @if (data.svcConfig.legend?.enable === true) {\n      <teta-legend [series]=\"data.svcConfig.series\"></teta-legend>\n    }\n  } @else {\n    <div class=\"column column_auto justify-content-center\">\n      <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n        <div #ref><ng-content></ng-content></div>\n        @if (!ref.hasChildNodes()) {\n          <span> No data </span>\n        }\n      </span>\n    </div>\n  }\n}\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
@@ -3016,6 +3029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], brushServiceInstance: [{
                 type: Output
+            }], configUpdated: [{
+                type: Output
             }], config: [{
                 type: Input
             }] } });
@@ -3067,5 +3082,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockHorizontalSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, LinearSeriesBaseComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, generateTicks, getTextWidth };
+export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockHorizontalSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, LinearSeriesBaseComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, chartConfigPostfix, generateTicks, getTextWidth };
 //# sourceMappingURL=tetacom-svg-charts.mjs.map