@tetacom/svg-charts 1.7.14 → 1.7.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -32,6 +32,7 @@ export declare class ChartComponent implements OnInit, OnDestroy {
|
|
|
32
32
|
annotationMove: EventEmitter<IChartEvent<Annotation>>;
|
|
33
33
|
zoomServiceInstance: EventEmitter<ZoomService>;
|
|
34
34
|
brushServiceInstance: EventEmitter<BrushService>;
|
|
35
|
+
configUpdated: EventEmitter<string>;
|
|
35
36
|
set config(config: IChartConfig);
|
|
36
37
|
private _alive;
|
|
37
38
|
constructor(chartService: ChartService, zoomService: ZoomService, brushService: BrushService, scaleService: ScaleService);
|
|
@@ -39,5 +40,5 @@ export declare class ChartComponent implements OnInit, OnDestroy {
|
|
|
39
40
|
ngOnInit(): void;
|
|
40
41
|
ngOnDestroy(): void;
|
|
41
42
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
|
|
42
|
-
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>;
|
|
43
|
+
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>;
|
|
43
44
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const chartConfigPostfix = "series_config";
|
|
@@ -26,6 +26,7 @@ export declare class ChartService {
|
|
|
26
26
|
annotationContextMenu: Observable<IChartEvent<Annotation>>;
|
|
27
27
|
chartClick: Observable<IChartEvent<BasePoint>>;
|
|
28
28
|
chartContextMenu: Observable<IChartEvent<BasePoint>>;
|
|
29
|
+
configUpdated: Observable<string>;
|
|
29
30
|
private config$;
|
|
30
31
|
private configUpdates$;
|
|
31
32
|
private size$;
|
|
@@ -38,7 +39,6 @@ export declare class ChartService {
|
|
|
38
39
|
private chartContextMenu$;
|
|
39
40
|
private annotationEvent$;
|
|
40
41
|
private annotationMove$;
|
|
41
|
-
private static _hiddenSeriesPostfix;
|
|
42
42
|
constructor();
|
|
43
43
|
setConfig(config: IChartConfig): void;
|
|
44
44
|
setSize(size: DOMRect): void;
|
|
@@ -55,6 +55,7 @@ export declare class ChartService {
|
|
|
55
55
|
emitChartClick(event: IChartEvent<BasePoint>): void;
|
|
56
56
|
emitChartContextMenu(event: IChartEvent<BasePoint>): void;
|
|
57
57
|
private saveCookie;
|
|
58
|
+
private getConfigString;
|
|
58
59
|
private restoreLocalStorage;
|
|
59
60
|
private setDefaults;
|
|
60
61
|
private setPreparationData;
|
|
@@ -7,11 +7,13 @@ import { maxIndex } from 'd3-array';
|
|
|
7
7
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
8
8
|
import * as i3 from '@angular/platform-browser';
|
|
9
9
|
import { AsyncPipe, NgTemplateOutlet, KeyValuePipe, NgStyle } from '@angular/common';
|
|
10
|
-
import { Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective,
|
|
10
|
+
import { Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent, InputComponent, CheckboxComponent } from '@tetacom/ng-components';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
12
|
import { FormsModule } from '@angular/forms';
|
|
13
13
|
import { TranslocoPipe } from '@jsverse/transloco';
|
|
14
14
|
|
|
15
|
+
const chartConfigPostfix = 'series_config';
|
|
16
|
+
|
|
15
17
|
class BroadcastService {
|
|
16
18
|
constructor() {
|
|
17
19
|
this.zoomEmitter = new ReplaySubject(1);
|
|
@@ -181,7 +183,6 @@ const defaultSeriesConfig = () => ({
|
|
|
181
183
|
});
|
|
182
184
|
|
|
183
185
|
class ChartService {
|
|
184
|
-
static { this._hiddenSeriesPostfix = 'series_config'; }
|
|
185
186
|
constructor() {
|
|
186
187
|
this.config$ = new BehaviorSubject(defaultChartConfig());
|
|
187
188
|
this.configUpdates$ = new Subject();
|
|
@@ -204,7 +205,7 @@ class ChartService {
|
|
|
204
205
|
bufferSize: 1,
|
|
205
206
|
refCount: true,
|
|
206
207
|
}));
|
|
207
|
-
this.config = merge(initialConfig, this.configUpdates$).pipe(shareReplay({
|
|
208
|
+
this.config = merge(initialConfig, this.configUpdates$).pipe(filter((_) => _ !== null), shareReplay({
|
|
208
209
|
bufferSize: 1,
|
|
209
210
|
refCount: true,
|
|
210
211
|
}));
|
|
@@ -223,6 +224,9 @@ class ChartService {
|
|
|
223
224
|
this.annotationMove = this.annotationMove$.asObservable();
|
|
224
225
|
this.plotBandClick = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
|
|
225
226
|
this.plotBandContextMenu = this.plotBandEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'contextmenu'));
|
|
227
|
+
this.configUpdated = this.configUpdates$.asObservable().pipe(map((config) => {
|
|
228
|
+
return this.getConfigString(config);
|
|
229
|
+
}));
|
|
226
230
|
}
|
|
227
231
|
setConfig(config) {
|
|
228
232
|
this.clearTooltips();
|
|
@@ -267,7 +271,8 @@ class ChartService {
|
|
|
267
271
|
const config = await lastValueFrom(this.initialConfig.pipe(take(1)));
|
|
268
272
|
if (!config.name)
|
|
269
273
|
return;
|
|
270
|
-
localStorage.removeItem(`${config.name}_${
|
|
274
|
+
localStorage.removeItem(`${config.name}_${chartConfigPostfix}`);
|
|
275
|
+
this.configUpdates$.next(null);
|
|
271
276
|
this.config$.next({ ...config });
|
|
272
277
|
}
|
|
273
278
|
emitMoveAnnotation(event) {
|
|
@@ -294,7 +299,11 @@ class ChartService {
|
|
|
294
299
|
saveCookie(config) {
|
|
295
300
|
if (!config.name)
|
|
296
301
|
return;
|
|
297
|
-
const
|
|
302
|
+
const seriesConfig = this.getConfigString(config);
|
|
303
|
+
localStorage.setItem(`${config.name}_${chartConfigPostfix}`, seriesConfig);
|
|
304
|
+
}
|
|
305
|
+
getConfigString(config) {
|
|
306
|
+
const series = config?.series?.map((_) => {
|
|
298
307
|
return {
|
|
299
308
|
id: _.id,
|
|
300
309
|
visible: _.visible,
|
|
@@ -305,12 +314,12 @@ class ChartService {
|
|
|
305
314
|
strokeWidth: _.style?.strokeWidth,
|
|
306
315
|
};
|
|
307
316
|
});
|
|
308
|
-
|
|
317
|
+
return JSON.stringify(series ?? null);
|
|
309
318
|
}
|
|
310
319
|
restoreLocalStorage(config) {
|
|
311
320
|
if (!config.name)
|
|
312
321
|
return config;
|
|
313
|
-
const seriesConfig = localStorage.getItem(`${config.name}_${
|
|
322
|
+
const seriesConfig = localStorage.getItem(`${config.name}_${chartConfigPostfix}`);
|
|
314
323
|
if (seriesConfig) {
|
|
315
324
|
const json = JSON.parse(seriesConfig);
|
|
316
325
|
config.series = config.series.map((serie, index) => {
|
|
@@ -2611,6 +2620,7 @@ class SeriesControlsComponent {
|
|
|
2611
2620
|
});
|
|
2612
2621
|
this.strokeWidth = [
|
|
2613
2622
|
{ id: 1, value: 1 },
|
|
2623
|
+
{ id: 1.5, value: 1.5 },
|
|
2614
2624
|
{ id: 2, value: 2 },
|
|
2615
2625
|
{ id: 3, value: 3 },
|
|
2616
2626
|
{ id: 4, value: 4 },
|
|
@@ -2618,7 +2628,7 @@ class SeriesControlsComponent {
|
|
|
2618
2628
|
];
|
|
2619
2629
|
this.strokeArray = [
|
|
2620
2630
|
{ id: '', value: 'solid' },
|
|
2621
|
-
{ id: '4,
|
|
2631
|
+
{ id: '4, 4', value: 'dashed' },
|
|
2622
2632
|
{ id: '2, 2', value: 'dotted' },
|
|
2623
2633
|
];
|
|
2624
2634
|
this.seriesType = [
|
|
@@ -2663,7 +2673,7 @@ class SeriesControlsComponent {
|
|
|
2663
2673
|
this.chartService.clearSeriesSettings();
|
|
2664
2674
|
}
|
|
2665
2675
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2666
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n <teta-
|
|
2676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2667
2677
|
}
|
|
2668
2678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
|
|
2669
2679
|
type: Component,
|
|
@@ -2686,7 +2696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2686
2696
|
ScrollableComponent,
|
|
2687
2697
|
TranslocoPipe,
|
|
2688
2698
|
InputComponent,
|
|
2689
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n <teta-
|
|
2699
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n" }]
|
|
2690
2700
|
}] });
|
|
2691
2701
|
|
|
2692
2702
|
class ChartContainerComponent {
|
|
@@ -2875,11 +2885,11 @@ class LegendComponent {
|
|
|
2875
2885
|
this.chartService.updateSeries(series);
|
|
2876
2886
|
}
|
|
2877
2887
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2888
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label font-caption\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2879
2889
|
}
|
|
2880
2890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LegendComponent, decorators: [{
|
|
2881
2891
|
type: Component,
|
|
2882
|
-
args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
|
|
2892
|
+
args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label font-caption\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
|
|
2883
2893
|
}], ctorParameters: () => [{ type: ChartService }], propDecorators: { classLegend: [{
|
|
2884
2894
|
type: HostBinding,
|
|
2885
2895
|
args: ['class.padding-bottom-4']
|
|
@@ -2908,6 +2918,7 @@ class ChartComponent {
|
|
|
2908
2918
|
this.annotationMove = new EventEmitter();
|
|
2909
2919
|
this.zoomServiceInstance = new EventEmitter();
|
|
2910
2920
|
this.brushServiceInstance = new EventEmitter();
|
|
2921
|
+
this.configUpdated = new EventEmitter();
|
|
2911
2922
|
this._alive = true;
|
|
2912
2923
|
this.svcConfig = this.chartService.config;
|
|
2913
2924
|
this.hasSeriesData = this.svcConfig.pipe(map((_) => _.series?.length > 0 && _.series?.some((_) => _.data?.length > 0)));
|
|
@@ -2980,12 +2991,15 @@ class ChartComponent {
|
|
|
2980
2991
|
this.chartService.annotationMove.pipe(takeWhile(() => this._alive)).subscribe((_) => {
|
|
2981
2992
|
this.annotationMove.emit(_);
|
|
2982
2993
|
});
|
|
2994
|
+
this.chartService.configUpdated.pipe(takeWhile(() => this._alive)).subscribe((_) => {
|
|
2995
|
+
this.configUpdated.emit(_);
|
|
2996
|
+
});
|
|
2983
2997
|
}
|
|
2984
2998
|
ngOnDestroy() {
|
|
2985
2999
|
this._alive = false;
|
|
2986
3000
|
}
|
|
2987
3001
|
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 }); }
|
|
2988
|
-
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 }); }
|
|
3002
|
+
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 }); }
|
|
2989
3003
|
}
|
|
2990
3004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartComponent, decorators: [{
|
|
2991
3005
|
type: Component,
|
|
@@ -3016,6 +3030,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3016
3030
|
type: Output
|
|
3017
3031
|
}], brushServiceInstance: [{
|
|
3018
3032
|
type: Output
|
|
3033
|
+
}], configUpdated: [{
|
|
3034
|
+
type: Output
|
|
3019
3035
|
}], config: [{
|
|
3020
3036
|
type: Input
|
|
3021
3037
|
}] } });
|
|
@@ -3067,5 +3083,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3067
3083
|
* Generated bundle index. Do not edit.
|
|
3068
3084
|
*/
|
|
3069
3085
|
|
|
3070
|
-
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 };
|
|
3086
|
+
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 };
|
|
3071
3087
|
//# sourceMappingURL=tetacom-svg-charts.mjs.map
|