@tetacom/svg-charts 1.7.11 → 1.7.13
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.
|
@@ -3,12 +3,12 @@ import { ZoomService } from '../service/zoom.service';
|
|
|
3
3
|
import { IChartConfig } from '../model/i-chart-config';
|
|
4
4
|
import { Axis } from '../core/axis/axis';
|
|
5
5
|
import { D3ZoomEvent } from 'd3';
|
|
6
|
-
import {
|
|
6
|
+
import { ScaleService } from '../service/scale.service';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
export declare class ZoomableDirective implements OnDestroy, AfterViewInit {
|
|
9
9
|
private elementRef;
|
|
10
10
|
private zoomService;
|
|
11
|
-
private
|
|
11
|
+
private scaleService;
|
|
12
12
|
private zone;
|
|
13
13
|
config: IChartConfig;
|
|
14
14
|
axis: Axis;
|
|
@@ -21,7 +21,7 @@ export declare class ZoomableDirective implements OnDestroy, AfterViewInit {
|
|
|
21
21
|
mouseenter(): void;
|
|
22
22
|
mouseleave(): void;
|
|
23
23
|
private currentTransform;
|
|
24
|
-
constructor(elementRef: ElementRef, zoomService: ZoomService,
|
|
24
|
+
constructor(elementRef: ElementRef, zoomService: ZoomService, scaleService: ScaleService, zone: NgZone);
|
|
25
25
|
ngOnInit(): void;
|
|
26
26
|
ngAfterViewInit(): void;
|
|
27
27
|
ngOnDestroy(): void;
|
|
@@ -7,9 +7,10 @@ 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, 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, InputComponent } from '@tetacom/ng-components';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
12
|
import { FormsModule } from '@angular/forms';
|
|
13
|
+
import { TranslocoPipe } from '@jsverse/transloco';
|
|
13
14
|
|
|
14
15
|
class BroadcastService {
|
|
15
16
|
constructor() {
|
|
@@ -1231,7 +1232,6 @@ class ZoomableDirective {
|
|
|
1231
1232
|
mouseenter() {
|
|
1232
1233
|
this.zoom?.on('start zoom end', this.zoomed);
|
|
1233
1234
|
this._element?.call(this.zoom).on('dblclick.zoom', null);
|
|
1234
|
-
// Run wheel event listener
|
|
1235
1235
|
if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
|
|
1236
1236
|
this.runWheelTranslate();
|
|
1237
1237
|
}
|
|
@@ -1240,10 +1240,10 @@ class ZoomableDirective {
|
|
|
1240
1240
|
this.zoom?.on('start zoom end', null);
|
|
1241
1241
|
this._element?.on('wheel', null);
|
|
1242
1242
|
}
|
|
1243
|
-
constructor(elementRef, zoomService,
|
|
1243
|
+
constructor(elementRef, zoomService, scaleService, zone) {
|
|
1244
1244
|
this.elementRef = elementRef;
|
|
1245
1245
|
this.zoomService = zoomService;
|
|
1246
|
-
this.
|
|
1246
|
+
this.scaleService = scaleService;
|
|
1247
1247
|
this.zone = zone;
|
|
1248
1248
|
this.zoomable = false;
|
|
1249
1249
|
this.crosshair = false;
|
|
@@ -1301,20 +1301,21 @@ class ZoomableDirective {
|
|
|
1301
1301
|
this.alive = false;
|
|
1302
1302
|
}
|
|
1303
1303
|
initZoomSync() {
|
|
1304
|
-
this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((
|
|
1304
|
+
combineLatest([this.scaleService.scales, this.zoomService.zoomed]).pipe(takeWhile(() => this.alive)).subscribe((data) => {
|
|
1305
|
+
const [scales, zoomed] = data;
|
|
1305
1306
|
if (this._element &&
|
|
1306
|
-
this.elementRef !== zoomed?.element &&
|
|
1307
1307
|
zoomed?.axis?.index === this.axis.index &&
|
|
1308
1308
|
zoomed?.axis?.orientation === this.axis.orientation) {
|
|
1309
|
-
const
|
|
1309
|
+
const axis = this.axis.orientation === AxisOrientation.x ? scales.x.get(this.axis.index) : scales.y.get(this.axis.index);
|
|
1310
|
+
const scale = axis.scale.copy().domain(this.axis.originDomain);
|
|
1310
1311
|
let transform;
|
|
1311
1312
|
if (zoomed.domain === null) {
|
|
1312
1313
|
transform = zoomIdentity;
|
|
1313
1314
|
}
|
|
1314
1315
|
else {
|
|
1315
|
-
transform = this.zoomService.getD3Transform(zoomed.domain,
|
|
1316
|
+
transform = this.zoomService.getD3Transform(zoomed.domain, axis.originDomain, scale, axis.orientation, axis.options.inverted);
|
|
1316
1317
|
}
|
|
1317
|
-
this.
|
|
1318
|
+
this.elementRef.nativeElement.__zoom = transform;
|
|
1318
1319
|
this.currentTransform = transform;
|
|
1319
1320
|
}
|
|
1320
1321
|
});
|
|
@@ -1408,7 +1409,7 @@ class ZoomableDirective {
|
|
|
1408
1409
|
domain,
|
|
1409
1410
|
chartId: this.config.id,
|
|
1410
1411
|
});
|
|
1411
|
-
this.
|
|
1412
|
+
this.elementRef.nativeElement.__zoom = transform;
|
|
1412
1413
|
this.zoomService.fireZoom(message);
|
|
1413
1414
|
this.zoomService.broadcastZoom(message);
|
|
1414
1415
|
this.currentTransform = transform;
|
|
@@ -1429,7 +1430,7 @@ class ZoomableDirective {
|
|
|
1429
1430
|
});
|
|
1430
1431
|
});
|
|
1431
1432
|
}
|
|
1432
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token:
|
|
1433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ScaleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1433
1434
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ZoomableDirective, isStandalone: true, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 }); }
|
|
1434
1435
|
}
|
|
1435
1436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomableDirective, decorators: [{
|
|
@@ -1438,7 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1438
1439
|
selector: '[tetaZoomable]',
|
|
1439
1440
|
standalone: true,
|
|
1440
1441
|
}]
|
|
1441
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZoomService }, { type:
|
|
1442
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZoomService }, { type: ScaleService }, { type: i0.NgZone }], propDecorators: { config: [{
|
|
1442
1443
|
type: Input
|
|
1443
1444
|
}], axis: [{
|
|
1444
1445
|
type: Input
|
|
@@ -2662,7 +2663,7 @@ class SeriesControlsComponent {
|
|
|
2662
2663
|
this.chartService.clearSeriesSettings();
|
|
2663
2664
|
}
|
|
2664
2665
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2665
|
-
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
|
|
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-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-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: 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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2666
2667
|
}
|
|
2667
2668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
|
|
2668
2669
|
type: Component,
|
|
@@ -2683,7 +2684,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2683
2684
|
SelectOptionDirective,
|
|
2684
2685
|
SelectValueDirective,
|
|
2685
2686
|
ScrollableComponent,
|
|
2686
|
-
|
|
2687
|
+
TranslocoPipe,
|
|
2688
|
+
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-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-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" }]
|
|
2687
2690
|
}] });
|
|
2688
2691
|
|
|
2689
2692
|
class ChartContainerComponent {
|