@tetacom/svg-charts 1.7.3 → 1.7.4
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.
- package/chart/chart-container/chart-container.component.d.ts +2 -3
- package/chart/chart-container/series-controls/series-controls.component.d.ts +12 -1
- package/chart/chart-container/series-host/series-host.component.d.ts +3 -4
- package/chart/service/chart.service.d.ts +2 -0
- package/fesm2022/tetacom-svg-charts.mjs +61 -37
- package/fesm2022/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AfterViewInit, ElementRef,
|
|
1
|
+
import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
|
|
2
2
|
import { Observable } from 'rxjs';
|
|
3
3
|
import { Axis } from '../core/axis/axis';
|
|
4
4
|
import { ZoomType } from '../model/enum/zoom-type';
|
|
@@ -16,7 +16,6 @@ export declare class ChartContainerComponent implements AfterViewInit, OnDestroy
|
|
|
16
16
|
private _svc;
|
|
17
17
|
private _scaleService;
|
|
18
18
|
private _elementRef;
|
|
19
|
-
private _zone;
|
|
20
19
|
config: Observable<IChartConfig>;
|
|
21
20
|
scales: Observable<IScalesMap>;
|
|
22
21
|
size: Observable<DOMRect>;
|
|
@@ -26,7 +25,7 @@ export declare class ChartContainerComponent implements AfterViewInit, OnDestroy
|
|
|
26
25
|
plotBands: Observable<DisplayPlotBand[]>;
|
|
27
26
|
private _observer;
|
|
28
27
|
private filterPositionMap;
|
|
29
|
-
constructor(_svc: ChartService, _scaleService: ScaleService, _elementRef: ElementRef
|
|
28
|
+
constructor(_svc: ChartService, _scaleService: ScaleService, _elementRef: ElementRef);
|
|
30
29
|
ngAfterViewInit(): void;
|
|
31
30
|
ngOnDestroy(): void;
|
|
32
31
|
private sumSize;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { Align } from '@tetacom/ng-components';
|
|
1
|
+
import { Align, TetaSize } from '@tetacom/ng-components';
|
|
2
2
|
import { Series } from '../../model/series';
|
|
3
3
|
import { BasePoint } from '../../model/base-point';
|
|
4
|
+
import { SeriesType } from '../../model/enum/series-type';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
export declare class SeriesControlsComponent {
|
|
6
7
|
private chartService;
|
|
7
8
|
protected readonly Align: typeof Align;
|
|
8
9
|
series: import("@angular/core").InputSignal<Series<BasePoint>[]>;
|
|
10
|
+
enabledSeries: import("@angular/core").Signal<Series<BasePoint>[]>;
|
|
11
|
+
disabledSeries: import("@angular/core").Signal<Series<BasePoint>[]>;
|
|
9
12
|
strokeWidth: {
|
|
10
13
|
id: number;
|
|
11
14
|
value: number;
|
|
@@ -14,10 +17,18 @@ export declare class SeriesControlsComponent {
|
|
|
14
17
|
id: string;
|
|
15
18
|
value: string;
|
|
16
19
|
}[];
|
|
20
|
+
seriesType: {
|
|
21
|
+
id: SeriesType;
|
|
22
|
+
value: string;
|
|
23
|
+
}[];
|
|
17
24
|
setSeriesEnabled(series: Series<BasePoint>, value: boolean): void;
|
|
18
25
|
setSeriesColor(series: Series<BasePoint>, value: string): void;
|
|
19
26
|
setSeriesStrokeWidth(series: Series<BasePoint>, value: number): void;
|
|
20
27
|
setSeriesStrokeDasharray(series: Series<BasePoint>, value: string): void;
|
|
28
|
+
setSeriesType(series: Series<BasePoint>, value: SeriesType): void;
|
|
29
|
+
clear(): void;
|
|
30
|
+
protected readonly TetaSize: typeof TetaSize;
|
|
31
|
+
protected readonly SeriesType: typeof SeriesType;
|
|
21
32
|
static ɵfac: i0.ɵɵFactoryDeclaration<SeriesControlsComponent, never>;
|
|
22
33
|
static ɵcmp: i0.ɵɵComponentDeclaration<SeriesControlsComponent, "teta-series-controls", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
23
34
|
}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import { OnDestroy
|
|
1
|
+
import { OnDestroy } from '@angular/core';
|
|
2
2
|
import { Series } from '../../model/series';
|
|
3
3
|
import { BasePoint } from '../../model/base-point';
|
|
4
4
|
import { IChartConfig } from '../../model/i-chart-config';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class SeriesHostComponent<T extends BasePoint> implements
|
|
6
|
+
export declare class SeriesHostComponent<T extends BasePoint> implements OnDestroy {
|
|
7
7
|
private viewContainerRef;
|
|
8
8
|
config: import("@angular/core").InputSignal<IChartConfig>;
|
|
9
9
|
series: import("@angular/core").InputSignal<Series<T>>;
|
|
10
|
-
private _init;
|
|
11
10
|
private _componentRef;
|
|
11
|
+
private count;
|
|
12
12
|
constructor();
|
|
13
|
-
ngOnInit(): void;
|
|
14
13
|
ngOnDestroy(): void;
|
|
15
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<SeriesHostComponent<any>, never>;
|
|
16
15
|
static ɵcmp: i0.ɵɵComponentDeclaration<SeriesHostComponent<any>, "[teta-series-host]", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
@@ -12,6 +12,7 @@ import * as i0 from "@angular/core";
|
|
|
12
12
|
export declare class ChartService {
|
|
13
13
|
id: Observable<string>;
|
|
14
14
|
config: Observable<IChartConfig>;
|
|
15
|
+
initialConfig: Observable<IChartConfig>;
|
|
15
16
|
size: Observable<DOMRect>;
|
|
16
17
|
pointerMove: Observable<PointerEvent>;
|
|
17
18
|
tooltips: Observable<Map<Series<BasePoint>, IDisplayTooltip>>;
|
|
@@ -45,6 +46,7 @@ export declare class ChartService {
|
|
|
45
46
|
setTooltip(tooltip: IDisplayTooltip): void;
|
|
46
47
|
clearTooltips(): void;
|
|
47
48
|
updateSeries(series: Series<BasePoint>, visible?: boolean): Promise<void>;
|
|
49
|
+
clearSeriesSettings(): Promise<void>;
|
|
48
50
|
emitMoveAnnotation(event: IChartEvent<Annotation>): void;
|
|
49
51
|
emitAnnotation(event: IChartEvent<Annotation>): void;
|
|
50
52
|
emitPlotBand(event: IChartEvent<PlotBand>): void;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, input, inject, ChangeDetectorRef, ElementRef, computed, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostBinding, HostListener, signal, EventEmitter, Output, ViewContainerRef, effect } from '@angular/core';
|
|
3
|
-
import { ReplaySubject, filter, BehaviorSubject, Subject, of, withLatestFrom, map,
|
|
3
|
+
import { ReplaySubject, filter, BehaviorSubject, Subject, of, shareReplay, withLatestFrom, map, merge, lastValueFrom, take, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
|
|
4
4
|
import * as d3 from 'd3';
|
|
5
5
|
import { zoomIdentity } from 'd3';
|
|
6
6
|
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, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, CheckboxComponent, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent } from '@tetacom/ng-components';
|
|
10
|
+
import { Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, CheckboxComponent, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent } from '@tetacom/ng-components';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
12
|
import { FormsModule } from '@angular/forms';
|
|
13
13
|
|
|
@@ -172,7 +172,7 @@ const defaultSeriesConfig = () => ({
|
|
|
172
172
|
type: SeriesType.line,
|
|
173
173
|
xAxisIndex: 0,
|
|
174
174
|
yAxisIndex: 0,
|
|
175
|
-
fillType: FillType.
|
|
175
|
+
fillType: FillType.gradient,
|
|
176
176
|
color: 'coral',
|
|
177
177
|
visible: true,
|
|
178
178
|
enabled: true,
|
|
@@ -195,7 +195,11 @@ class ChartService {
|
|
|
195
195
|
this.annotationEvent$ = new Subject();
|
|
196
196
|
this.annotationMove$ = new Subject();
|
|
197
197
|
this.id = of((Date.now() + Math.random()).toString(36));
|
|
198
|
-
|
|
198
|
+
this.initialConfig = this.config$.asObservable().pipe(shareReplay({
|
|
199
|
+
bufferSize: 1,
|
|
200
|
+
refCount: true,
|
|
201
|
+
}));
|
|
202
|
+
const initialConfig = this.initialConfig.pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
|
|
199
203
|
bufferSize: 1,
|
|
200
204
|
refCount: true,
|
|
201
205
|
}));
|
|
@@ -248,11 +252,9 @@ class ChartService {
|
|
|
248
252
|
if (currentSeriesIndex === -1) {
|
|
249
253
|
return;
|
|
250
254
|
}
|
|
251
|
-
currentConfig.series =
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
// ).length;
|
|
255
|
-
// currentConfig.yAxis[currentConfig.series[currentSeriesIndex].yAxisIndex].visible = seriesLinkCount !== 0;
|
|
255
|
+
currentConfig.series = currentConfig.series.map((seriesItem) => {
|
|
256
|
+
return { ...seriesItem };
|
|
257
|
+
});
|
|
256
258
|
try {
|
|
257
259
|
this.saveCookie(currentConfig);
|
|
258
260
|
}
|
|
@@ -260,6 +262,13 @@ class ChartService {
|
|
|
260
262
|
this.configUpdates$.next({ ...currentConfig });
|
|
261
263
|
}
|
|
262
264
|
}
|
|
265
|
+
async clearSeriesSettings() {
|
|
266
|
+
const config = await lastValueFrom(this.initialConfig.pipe(take(1)));
|
|
267
|
+
if (!config.name)
|
|
268
|
+
return;
|
|
269
|
+
localStorage.removeItem(`${config.name}_${ChartService._hiddenSeriesPostfix}`);
|
|
270
|
+
this.config$.next({ ...config });
|
|
271
|
+
}
|
|
263
272
|
emitMoveAnnotation(event) {
|
|
264
273
|
this.annotationMove$.next(event);
|
|
265
274
|
}
|
|
@@ -290,6 +299,7 @@ class ChartService {
|
|
|
290
299
|
visible: _.visible,
|
|
291
300
|
enabled: _.enabled,
|
|
292
301
|
color: _.color,
|
|
302
|
+
type: _.type,
|
|
293
303
|
strokeDasharray: _.style?.strokeDasharray,
|
|
294
304
|
strokeWidth: _.style?.strokeWidth,
|
|
295
305
|
};
|
|
@@ -308,22 +318,13 @@ class ChartService {
|
|
|
308
318
|
serie.visible = found.visible ?? serie.visible;
|
|
309
319
|
serie.enabled = found.enabled ?? serie.enabled;
|
|
310
320
|
serie.color = found.color ?? serie.color;
|
|
321
|
+
serie.type = parseInt(found.type, 10) ?? serie.type;
|
|
311
322
|
if (!serie.style) {
|
|
312
323
|
serie.style = {};
|
|
313
324
|
}
|
|
314
325
|
serie.style.strokeWidth = found.strokeWidth ?? serie.style.strokeWidth;
|
|
315
326
|
serie.style.strokeDasharray = found.strokeDasharray ?? serie.style.strokeDasharray;
|
|
316
327
|
}
|
|
317
|
-
// const currentSerieIndex = config.series.findIndex((_) => _.id === serie.id);
|
|
318
|
-
// if (currentSerieIndex !== -1) {
|
|
319
|
-
// const seriesLinkCount = config.series.filter(
|
|
320
|
-
// (_) => _.yAxisIndex === config.series[currentSerieIndex].yAxisIndex && _.visible === true,
|
|
321
|
-
// ).length;
|
|
322
|
-
// const yAxis = config.yAxis[config.series[currentSerieIndex].yAxisIndex];
|
|
323
|
-
// if (yAxis) {
|
|
324
|
-
// yAxis.visible = seriesLinkCount !== 0;
|
|
325
|
-
// }
|
|
326
|
-
// }
|
|
327
328
|
return serie;
|
|
328
329
|
});
|
|
329
330
|
return config;
|
|
@@ -2232,22 +2233,22 @@ class SeriesHostComponent {
|
|
|
2232
2233
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
2233
2234
|
this.config = input();
|
|
2234
2235
|
this.series = input();
|
|
2235
|
-
this.
|
|
2236
|
-
effect(() => {
|
|
2237
|
-
this._componentRef.setInput('config', this.config());
|
|
2238
|
-
});
|
|
2236
|
+
this.count = 0;
|
|
2239
2237
|
effect(() => {
|
|
2240
|
-
|
|
2238
|
+
if (this.series()) {
|
|
2239
|
+
this.viewContainerRef.clear();
|
|
2240
|
+
this._componentRef?.destroy();
|
|
2241
|
+
if (!Object.prototype.isPrototypeOf.call(SeriesBaseComponent, this.series().component)) {
|
|
2242
|
+
this.series().component = defaultSeriesTypeMapping.get(this.series().type) || LineSeriesComponent;
|
|
2243
|
+
}
|
|
2244
|
+
this._componentRef = this.viewContainerRef.createComponent(this.series().component);
|
|
2245
|
+
this._componentRef?.setInput('config', this.config());
|
|
2246
|
+
this._componentRef?.setInput('series', this.series());
|
|
2247
|
+
}
|
|
2241
2248
|
});
|
|
2242
2249
|
}
|
|
2243
|
-
ngOnInit() {
|
|
2244
|
-
if (!Object.prototype.isPrototypeOf.call(SeriesBaseComponent, this.series().component)) {
|
|
2245
|
-
this.series().component = defaultSeriesTypeMapping.get(this.series().type) || LineSeriesComponent;
|
|
2246
|
-
}
|
|
2247
|
-
this._componentRef = this.viewContainerRef.createComponent(this.series().component);
|
|
2248
|
-
}
|
|
2249
2250
|
ngOnDestroy() {
|
|
2250
|
-
this._componentRef
|
|
2251
|
+
this._componentRef?.destroy();
|
|
2251
2252
|
}
|
|
2252
2253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2253
2254
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SeriesHostComponent, isStandalone: true, selector: "[teta-series-host]", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -2593,6 +2594,12 @@ class SeriesControlsComponent {
|
|
|
2593
2594
|
this.chartService = inject(ChartService);
|
|
2594
2595
|
this.Align = Align$1;
|
|
2595
2596
|
this.series = input();
|
|
2597
|
+
this.enabledSeries = computed(() => {
|
|
2598
|
+
return this.series()?.filter((item) => item.enabled) ?? [];
|
|
2599
|
+
});
|
|
2600
|
+
this.disabledSeries = computed(() => {
|
|
2601
|
+
return this.series()?.filter((item) => !item.enabled) ?? [];
|
|
2602
|
+
});
|
|
2596
2603
|
this.strokeWidth = [
|
|
2597
2604
|
{ id: 1, value: 1 },
|
|
2598
2605
|
{ id: 2, value: 2 },
|
|
@@ -2605,6 +2612,16 @@ class SeriesControlsComponent {
|
|
|
2605
2612
|
{ id: '4, 8', value: 'dashed' },
|
|
2606
2613
|
{ id: '2, 2', value: 'dotted' },
|
|
2607
2614
|
];
|
|
2615
|
+
this.seriesType = [
|
|
2616
|
+
{ id: SeriesType.line, value: 'Line' },
|
|
2617
|
+
{ id: SeriesType.area, value: 'Area' },
|
|
2618
|
+
{ id: SeriesType.scatter, value: 'Scatter' },
|
|
2619
|
+
{ id: SeriesType.block, value: 'Block' },
|
|
2620
|
+
{ id: SeriesType.blockArea, value: 'BlockArea' },
|
|
2621
|
+
{ id: SeriesType.bar, value: 'Bar' },
|
|
2622
|
+
];
|
|
2623
|
+
this.TetaSize = TetaSize;
|
|
2624
|
+
this.SeriesType = SeriesType;
|
|
2608
2625
|
}
|
|
2609
2626
|
setSeriesEnabled(series, value) {
|
|
2610
2627
|
series.enabled = value;
|
|
@@ -2628,8 +2645,16 @@ class SeriesControlsComponent {
|
|
|
2628
2645
|
series.style.strokeDasharray = value;
|
|
2629
2646
|
this.chartService.updateSeries(series);
|
|
2630
2647
|
}
|
|
2648
|
+
setSeriesType(series, value) {
|
|
2649
|
+
series.type = value;
|
|
2650
|
+
series.component = defaultSeriesTypeMapping.get(series.type) || LineSeriesComponent;
|
|
2651
|
+
this.chartService.updateSeries(series);
|
|
2652
|
+
}
|
|
2653
|
+
clear() {
|
|
2654
|
+
this.chartService.clearSeriesSettings();
|
|
2655
|
+
}
|
|
2631
2656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2632
|
-
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 </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of
|
|
2657
|
+
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 </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row justify-content-end padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [square]=\"true\"\n [size]=\"TetaSize.S\"\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\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-checkbox [ngModel]=\"seriesItem.enabled\"\n (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n [binary]=\"true\"></teta-checkbox>\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-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-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-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 </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3 justify-content-end\">\n <button teta-button\n [square]=\"true\"\n [size]=\"TetaSize.S\"\n [palette]=\"'red'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'delete'\"></teta-icon>\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: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2633
2658
|
}
|
|
2634
2659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
|
|
2635
2660
|
type: Component,
|
|
@@ -2650,15 +2675,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2650
2675
|
SelectOptionDirective,
|
|
2651
2676
|
SelectValueDirective,
|
|
2652
2677
|
ScrollableComponent,
|
|
2653
|
-
], 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 </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of
|
|
2678
|
+
], 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 </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row justify-content-end padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [square]=\"true\"\n [size]=\"TetaSize.S\"\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\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-checkbox [ngModel]=\"seriesItem.enabled\"\n (ngModelChange)=\"setSeriesEnabled(seriesItem, $event)\"\n [binary]=\"true\"></teta-checkbox>\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-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-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-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 </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3 justify-content-end\">\n <button teta-button\n [square]=\"true\"\n [size]=\"TetaSize.S\"\n [palette]=\"'red'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'delete'\"></teta-icon>\n </button>\n </div>\n </div>\n</teta-dropdown>\n" }]
|
|
2654
2679
|
}] });
|
|
2655
2680
|
|
|
2656
2681
|
class ChartContainerComponent {
|
|
2657
|
-
constructor(_svc, _scaleService, _elementRef
|
|
2682
|
+
constructor(_svc, _scaleService, _elementRef) {
|
|
2658
2683
|
this._svc = _svc;
|
|
2659
2684
|
this._scaleService = _scaleService;
|
|
2660
2685
|
this._elementRef = _elementRef;
|
|
2661
|
-
this._zone = _zone;
|
|
2662
2686
|
this.zoomType = ZoomType;
|
|
2663
2687
|
this.filterPositionMap = new Map()
|
|
2664
2688
|
.set(true, (axis) => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
|
|
@@ -2796,7 +2820,7 @@ class ChartContainerComponent {
|
|
|
2796
2820
|
mouseLeave(event) {
|
|
2797
2821
|
this._svc.setPointerMove(event);
|
|
2798
2822
|
}
|
|
2799
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }
|
|
2823
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2800
2824
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n size: size | async,\n config: config | async,\n scales: scales | async,\n plotBands: plotBands | async,\n visibleRect: visibleRect | async,\n};\n as data) {\n @if (data.config?.tooltip?.enable) {\n <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n @for (item of data.scales.y | keyvalue; track item.value.index) {\n @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-y-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n [attr.y]=\"0\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.width]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n <g class=\"x-axis-container\">\n @for (item of data.scales.x | keyvalue; track item.value.index) {\n @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-x-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"0\"\n [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n </svg>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg\n tetaZoomable\n tetaBrushable\n class=\"position-absolute\"\n [size]=\"data.visibleRect\"\n [config]=\"data.config\"\n [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n (click)=\"click($event, data.scales.x, data.scales.y)\"\n (mouseleave)=\"mouseLeave($event)\"\n (mousemove)=\"mouseMove($event)\">\n @if (data.config.gridLines?.enable !== false) {\n <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n }\n <g class=\"x-axis-plotband-container\">\n @for (plotBand of data.plotBands; track $index) {\n <g teta-plot-band\n [plotBand]=\"plotBand.plotBand\"\n [scale]=\"plotBand.axis.scale\"\n [size]=\"data.visibleRect\"\n [axis]=\"plotBand.axis\"></g>\n }\n </g>\n <g class=\"series-container\">\n @for (series of data.config.series; track series) {\n @if (series.visible && series.enabled) {\n <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n }\n }\n </g>\n <g class=\"x-axis-plotline-container\">\n @for (axis of data.config.xAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.get(i)\"></g>\n }\n }\n </g>\n <g class=\"y-axis-plotline-container\">\n @for (axis of data.config.yAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.y.get(i)\"></g>\n }\n }\n </g>\n <g class=\"annotations\">\n @for (annotation of data.config.annotations; track annotation) {\n <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n }\n </g>\n @if (data.config.tooltip?.showCrosshair) {\n <g class=\"crosshair\">\n <g teta-crosshair [size]=\"data.visibleRect\"></g>\n </g>\n }\n </svg>\n @if (data.config.controls?.enable) {\n <teta-series-controls [series]=\"data.config.series\"\n class=\"position-absolute\"\n style=\"transform: translateX(-100%)\"\n [style.top.px]=\"data.visibleRect.y + 12\"\n [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n </teta-series-controls>\n }\n }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: SeriesControlsComponent, selector: "teta-series-controls", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2801
2825
|
}
|
|
2802
2826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, decorators: [{
|
|
@@ -2817,7 +2841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2817
2841
|
BrushableDirective,
|
|
2818
2842
|
SeriesControlsComponent,
|
|
2819
2843
|
], template: "@if ({\n size: size | async,\n config: config | async,\n scales: scales | async,\n plotBands: plotBands | async,\n visibleRect: visibleRect | async,\n};\n as data) {\n @if (data.config?.tooltip?.enable) {\n <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n @for (item of data.scales.y | keyvalue; track item.value.index) {\n @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-y-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n [attr.y]=\"0\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.width]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n <g class=\"x-axis-container\">\n @for (item of data.scales.x | keyvalue; track item.value.index) {\n @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-x-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"0\"\n [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n </svg>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg\n tetaZoomable\n tetaBrushable\n class=\"position-absolute\"\n [size]=\"data.visibleRect\"\n [config]=\"data.config\"\n [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n (click)=\"click($event, data.scales.x, data.scales.y)\"\n (mouseleave)=\"mouseLeave($event)\"\n (mousemove)=\"mouseMove($event)\">\n @if (data.config.gridLines?.enable !== false) {\n <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n }\n <g class=\"x-axis-plotband-container\">\n @for (plotBand of data.plotBands; track $index) {\n <g teta-plot-band\n [plotBand]=\"plotBand.plotBand\"\n [scale]=\"plotBand.axis.scale\"\n [size]=\"data.visibleRect\"\n [axis]=\"plotBand.axis\"></g>\n }\n </g>\n <g class=\"series-container\">\n @for (series of data.config.series; track series) {\n @if (series.visible && series.enabled) {\n <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n }\n }\n </g>\n <g class=\"x-axis-plotline-container\">\n @for (axis of data.config.xAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.get(i)\"></g>\n }\n }\n </g>\n <g class=\"y-axis-plotline-container\">\n @for (axis of data.config.yAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.y.get(i)\"></g>\n }\n }\n </g>\n <g class=\"annotations\">\n @for (annotation of data.config.annotations; track annotation) {\n <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n }\n </g>\n @if (data.config.tooltip?.showCrosshair) {\n <g class=\"crosshair\">\n <g teta-crosshair [size]=\"data.visibleRect\"></g>\n </g>\n }\n </svg>\n @if (data.config.controls?.enable) {\n <teta-series-controls [series]=\"data.config.series\"\n class=\"position-absolute\"\n style=\"transform: translateX(-100%)\"\n [style.top.px]=\"data.visibleRect.y + 12\"\n [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n </teta-series-controls>\n }\n }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
|
|
2820
|
-
}], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }
|
|
2844
|
+
}], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }] });
|
|
2821
2845
|
|
|
2822
2846
|
class LegendComponent {
|
|
2823
2847
|
constructor(chartService) {
|