@tetacom/svg-charts 1.1.13 → 1.1.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.
- package/chart/chart-container/chart-container.component.d.ts +0 -2
- package/chart/chart-container/gridlines/gridlines.component.d.ts +15 -11
- package/chart/chart.module.d.ts +2 -1
- package/chart/directives/brushable.directive.d.ts +2 -3
- package/chart/directives/zoomable.directive.d.ts +7 -5
- package/chart/model/enum/public-api.d.ts +1 -0
- package/chart/model/enum/zoom-behavior-type.d.ts +4 -0
- package/chart/model/i-broadcast-message.d.ts +4 -2
- package/chart/model/i-chart-config.d.ts +5 -0
- package/chart/model/tooltip-options.d.ts +4 -0
- package/chart/service/chart.service.d.ts +1 -0
- package/esm2020/chart/chart-container/chart-container.component.mjs +16 -16
- package/esm2020/chart/chart-container/gridlines/gridlines.component.mjs +18 -22
- package/esm2020/chart/chart-container/series/area-series/area-series.component.mjs +4 -3
- package/esm2020/chart/chart-container/series/line/line-series.component.mjs +5 -4
- package/esm2020/chart/chart-container/series/linear-series-base.mjs +5 -2
- package/esm2020/chart/chart-container/tooltip/tooltip.component.mjs +3 -3
- package/esm2020/chart/chart.module.mjs +5 -4
- package/esm2020/chart/default/default-chart-config.mjs +7 -1
- package/esm2020/chart/directives/brushable.directive.mjs +3 -5
- package/esm2020/chart/directives/zoomable.directive.mjs +92 -22
- package/esm2020/chart/legend/legend.component.mjs +2 -1
- package/esm2020/chart/model/chart-bounds.mjs +2 -2
- package/esm2020/chart/model/enum/public-api.mjs +2 -1
- package/esm2020/chart/model/enum/zoom-behavior-type.mjs +6 -0
- package/esm2020/chart/model/i-broadcast-message.mjs +2 -1
- package/esm2020/chart/model/i-chart-config.mjs +1 -1
- package/esm2020/chart/model/tooltip-options.mjs +1 -1
- package/esm2020/chart/service/brush.service.mjs +22 -19
- package/esm2020/chart/service/chart.service.mjs +7 -5
- package/esm2020/chart/service/scale.service.mjs +7 -1
- package/fesm2015/tetacom-svg-charts.mjs +189 -100
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +179 -93
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2,12 +2,14 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, HostListener, ChangeDetectorRef, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i4 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import { BehaviorSubject, Subject, map, shareReplay, filter, combineLatest,
|
|
5
|
+
import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, combineLatest, ReplaySubject, animationFrameScheduler, tap, takeWhile } from 'rxjs';
|
|
6
6
|
import * as d3 from 'd3';
|
|
7
7
|
import { zoomIdentity } from 'd3';
|
|
8
8
|
import { maxIndex } from 'd3-array';
|
|
9
|
-
import { throttleTime,
|
|
9
|
+
import { throttleTime, tap as tap$1, debounceTime } from 'rxjs/operators';
|
|
10
10
|
import * as i3 from '@angular/platform-browser';
|
|
11
|
+
import * as i4$1 from '@taiga-ui/cdk';
|
|
12
|
+
import { TuiLetModule } from '@taiga-ui/cdk';
|
|
11
13
|
|
|
12
14
|
var ZoomType;
|
|
13
15
|
(function (ZoomType) {
|
|
@@ -18,7 +20,7 @@ var ZoomType;
|
|
|
18
20
|
|
|
19
21
|
class ChartBounds {
|
|
20
22
|
constructor(options) {
|
|
21
|
-
this.top =
|
|
23
|
+
this.top = 30;
|
|
22
24
|
this.right = 30;
|
|
23
25
|
this.bottom = 0;
|
|
24
26
|
this.left = 0;
|
|
@@ -35,10 +37,17 @@ var TooltipTracking;
|
|
|
35
37
|
TooltipTracking[TooltipTracking["y"] = 1] = "y";
|
|
36
38
|
})(TooltipTracking || (TooltipTracking = {}));
|
|
37
39
|
|
|
40
|
+
var ZoomBehaviorType;
|
|
41
|
+
(function (ZoomBehaviorType) {
|
|
42
|
+
ZoomBehaviorType[ZoomBehaviorType["move"] = 0] = "move";
|
|
43
|
+
ZoomBehaviorType[ZoomBehaviorType["wheel"] = 1] = "wheel";
|
|
44
|
+
})(ZoomBehaviorType || (ZoomBehaviorType = {}));
|
|
45
|
+
|
|
38
46
|
const defaultChartConfig = () => ({
|
|
39
47
|
zoom: {
|
|
40
48
|
enable: true,
|
|
41
49
|
type: ZoomType.x,
|
|
50
|
+
zoomBehavior: ZoomBehaviorType.move
|
|
42
51
|
},
|
|
43
52
|
bounds: new ChartBounds(),
|
|
44
53
|
legend: {
|
|
@@ -48,6 +57,10 @@ const defaultChartConfig = () => ({
|
|
|
48
57
|
enable: true,
|
|
49
58
|
showMarkers: true,
|
|
50
59
|
tracking: TooltipTracking.x,
|
|
60
|
+
padding: {
|
|
61
|
+
x: 16,
|
|
62
|
+
y: 16
|
|
63
|
+
}
|
|
51
64
|
},
|
|
52
65
|
xAxis: [],
|
|
53
66
|
yAxis: [],
|
|
@@ -119,9 +132,10 @@ class ChartService {
|
|
|
119
132
|
this.chartContextMenu$ = new Subject();
|
|
120
133
|
this.annotationEvent$ = new Subject();
|
|
121
134
|
this.annotationMove$ = new Subject();
|
|
135
|
+
this.id = of((Date.now() + Math.random()).toString(36));
|
|
122
136
|
this.config = this.config$
|
|
123
137
|
.asObservable()
|
|
124
|
-
.pipe(map(this.setDefaults), map(this.setPreparationData), shareReplay({
|
|
138
|
+
.pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), shareReplay({
|
|
125
139
|
bufferSize: 1,
|
|
126
140
|
refCount: true
|
|
127
141
|
}));
|
|
@@ -187,14 +201,16 @@ class ChartService {
|
|
|
187
201
|
emitChartContextMenu(event) {
|
|
188
202
|
this.chartContextMenu$.next(event);
|
|
189
203
|
}
|
|
190
|
-
setDefaults(
|
|
204
|
+
setDefaults(data) {
|
|
191
205
|
var _a, _b;
|
|
206
|
+
let [config, id] = data;
|
|
192
207
|
const defaultConfig = (defaultConfig) => {
|
|
193
208
|
return (source) => {
|
|
194
209
|
return Object.assign({}, defaultConfig, source);
|
|
195
210
|
};
|
|
196
211
|
};
|
|
197
212
|
config = Object.assign({}, defaultChartConfig(), config);
|
|
213
|
+
config.id = id;
|
|
198
214
|
config.xAxis = config.xAxis.map(defaultConfig(defaultAxisConfig));
|
|
199
215
|
config.yAxis = config.yAxis.map(defaultConfig(defaultAxisConfig));
|
|
200
216
|
config.series = config.series.map(defaultConfig(defaultSeriesConfig()));
|
|
@@ -203,7 +219,6 @@ class ChartService {
|
|
|
203
219
|
return Object.assign(Object.assign({}, _), { id: (_a = _.id) !== null && _a !== void 0 ? _a : index });
|
|
204
220
|
});
|
|
205
221
|
config.tooltip = Object.assign({}, defaultChartConfig().tooltip, config.tooltip);
|
|
206
|
-
const id = (Date.now() + Math.random()).toString(36);
|
|
207
222
|
config.zoom.syncChannel = (_b = (_a = config.zoom) === null || _a === void 0 ? void 0 : _a.syncChannel) !== null && _b !== void 0 ? _b : id;
|
|
208
223
|
return config;
|
|
209
224
|
}
|
|
@@ -459,6 +474,9 @@ class ScaleService {
|
|
|
459
474
|
map.set(index, Axis.createAxis(AxisOrientation.x, config, index));
|
|
460
475
|
});
|
|
461
476
|
return map;
|
|
477
|
+
}), shareReplay({
|
|
478
|
+
bufferSize: 1,
|
|
479
|
+
refCount: true
|
|
462
480
|
}));
|
|
463
481
|
this.yAxisMap = combineLatest([
|
|
464
482
|
this.chartService.size,
|
|
@@ -470,6 +488,9 @@ class ScaleService {
|
|
|
470
488
|
map.set(index, Axis.createAxis(AxisOrientation.y, config, index));
|
|
471
489
|
});
|
|
472
490
|
return map;
|
|
491
|
+
}), shareReplay({
|
|
492
|
+
bufferSize: 1,
|
|
493
|
+
refCount: true
|
|
473
494
|
}));
|
|
474
495
|
this.xScaleMap = combineLatest([
|
|
475
496
|
this.chartService.size,
|
|
@@ -607,6 +628,7 @@ class ZoomMessage {
|
|
|
607
628
|
this.event = options === null || options === void 0 ? void 0 : options.event;
|
|
608
629
|
this.axis = options === null || options === void 0 ? void 0 : options.axis;
|
|
609
630
|
this.brushDomain = options.brushDomain;
|
|
631
|
+
this.chartId = options === null || options === void 0 ? void 0 : options.chartId;
|
|
610
632
|
}
|
|
611
633
|
}
|
|
612
634
|
class BrushMessage {
|
|
@@ -677,11 +699,11 @@ class BrushService {
|
|
|
677
699
|
const halfBrushHeight = (selection[1] - selection[0]) / 2;
|
|
678
700
|
const invertedSelection = [from - halfBrushHeight, to + halfBrushHeight].map(brushScale.invert);
|
|
679
701
|
if (invertedSelection[1] - invertedSelection[0] > ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.max)) {
|
|
680
|
-
container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + ((_f = config.brush) === null || _f === void 0 ? void 0 : _f.max)].map(brushScale));
|
|
702
|
+
container.call(this.brush.move, [Math.floor(invertedSelection[0]), Math.floor(invertedSelection[0] + ((_f = config.brush) === null || _f === void 0 ? void 0 : _f.max))].map(brushScale));
|
|
681
703
|
return;
|
|
682
704
|
}
|
|
683
705
|
if (invertedSelection[1] - invertedSelection[0] < ((_g = config.brush) === null || _g === void 0 ? void 0 : _g.min)) {
|
|
684
|
-
container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + ((_h = config.brush) === null || _h === void 0 ? void 0 : _h.min)].map(brushScale));
|
|
706
|
+
container.call(this.brush.move, [Math.floor(invertedSelection[0]), Math.ceil(invertedSelection[0] + ((_h = config.brush) === null || _h === void 0 ? void 0 : _h.min))].map(brushScale));
|
|
685
707
|
return;
|
|
686
708
|
}
|
|
687
709
|
container.call(this.brush.move, [from - halfBrushHeight, to + halfBrushHeight]);
|
|
@@ -727,25 +749,27 @@ class BrushService {
|
|
|
727
749
|
this.broadcastSubscribtion = this.broadcastService.subscribeToZoom((_f = config === null || config === void 0 ? void 0 : config.zoom) === null || _f === void 0 ? void 0 : _f.syncChannel).pipe(filter((m) => {
|
|
728
750
|
return m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent;
|
|
729
751
|
}), throttleTime(0, animationFrameScheduler, { trailing: true }), tap((m) => {
|
|
730
|
-
var _a, _b, _c;
|
|
752
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
731
753
|
const { message: { brushDomain } } = m;
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
754
|
+
if (((_a = m.message) === null || _a === void 0 ? void 0 : _a.axis.index) === 0 && ((_b = m.message) === null || _b === void 0 ? void 0 : _b.axis.orientation) === AxisOrientation.y && ((_c = config.brush) === null || _c === void 0 ? void 0 : _c.type) === BrushType.y || ((_d = m.message) === null || _d === void 0 ? void 0 : _d.axis.orientation) === AxisOrientation.x && ((_e = config.brush) === null || _e === void 0 ? void 0 : _e.type) === BrushType.x) {
|
|
755
|
+
container.call(this.brush.move, [
|
|
756
|
+
brushScale(brushDomain[0]),
|
|
757
|
+
brushScale(brushDomain[1]),
|
|
758
|
+
]);
|
|
759
|
+
if (m.message.event.type === 'end') {
|
|
760
|
+
const brushMessage = new BrushMessage({
|
|
761
|
+
event: null,
|
|
762
|
+
selection: brushDomain,
|
|
763
|
+
brushType: (_g = (_f = config === null || config === void 0 ? void 0 : config.brush) === null || _f === void 0 ? void 0 : _f.type) !== null && _g !== void 0 ? _g : BrushType.x,
|
|
764
|
+
brushScale,
|
|
765
|
+
});
|
|
766
|
+
this.broadcastService.broadcastBrush({
|
|
767
|
+
channel: (_h = config === null || config === void 0 ? void 0 : config.zoom) === null || _h === void 0 ? void 0 : _h.syncChannel,
|
|
768
|
+
message: brushMessage,
|
|
769
|
+
});
|
|
770
|
+
}
|
|
771
|
+
this.selection = brushDomain;
|
|
747
772
|
}
|
|
748
|
-
this.selection = brushDomain;
|
|
749
773
|
})).subscribe();
|
|
750
774
|
}
|
|
751
775
|
}
|
|
@@ -809,14 +833,15 @@ class TooltipComponent {
|
|
|
809
833
|
}));
|
|
810
834
|
}
|
|
811
835
|
getPosition(event) {
|
|
836
|
+
var _a, _b;
|
|
812
837
|
const centerX = this.size.width / 2;
|
|
813
838
|
const centerY = this.size.height / 2;
|
|
814
|
-
const padding =
|
|
839
|
+
const padding = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.padding;
|
|
815
840
|
const scene = {
|
|
816
841
|
left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
|
|
817
842
|
top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
|
|
818
843
|
bottom: event.pageY > centerY
|
|
819
|
-
? `${window.innerHeight - event.pageY}px`
|
|
844
|
+
? `${window.innerHeight - event.pageY + padding.y}px`
|
|
820
845
|
: 'initial',
|
|
821
846
|
right: event.pageX > centerX
|
|
822
847
|
? `${window.innerWidth - event.pageX + padding.x}px`
|
|
@@ -944,31 +969,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
944
969
|
}] } });
|
|
945
970
|
|
|
946
971
|
class GridlinesComponent {
|
|
947
|
-
constructor() {
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
this.
|
|
951
|
-
this.
|
|
972
|
+
constructor(svc, chartService) {
|
|
973
|
+
this.svc = svc;
|
|
974
|
+
this.chartService = chartService;
|
|
975
|
+
this.config = this.chartService.config;
|
|
976
|
+
this.tickYValues = this.svc.yScaleMap.pipe(map((_) => _.get(0).ticks()));
|
|
977
|
+
this.tickXValues = this.svc.xScaleMap.pipe(map((_) => _.get(0).ticks()));
|
|
978
|
+
this.y = this.svc.yScaleMap.pipe(map((_) => _.get(0)));
|
|
979
|
+
this.x = this.svc.xScaleMap.pipe(map((_) => _.get(0)));
|
|
952
980
|
}
|
|
953
|
-
|
|
954
|
-
if (changes.hasOwnProperty('xScaleMap') &&
|
|
955
|
-
changes.hasOwnProperty('yScaleMap')) {
|
|
956
|
-
this.draw();
|
|
957
|
-
}
|
|
981
|
+
ngAfterViewInit() {
|
|
958
982
|
}
|
|
959
983
|
}
|
|
960
|
-
GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
961
|
-
GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size",
|
|
984
|
+
GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
|
|
985
|
+
GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
962
986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: GridlinesComponent, decorators: [{
|
|
963
987
|
type: Component,
|
|
964
|
-
args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"config.gridLines?.showY !== false\"
|
|
965
|
-
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
966
|
-
type: Input
|
|
967
|
-
}], xScaleMap: [{
|
|
968
|
-
type: Input
|
|
969
|
-
}], yScaleMap: [{
|
|
970
|
-
type: Input
|
|
971
|
-
}], config: [{
|
|
988
|
+
args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke-dasharray:1,4;stroke:var(--color-text-20)}\n"] }]
|
|
989
|
+
}], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
|
|
972
990
|
type: Input
|
|
973
991
|
}] } });
|
|
974
992
|
|
|
@@ -1253,7 +1271,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1253
1271
|
this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap), map((data) => {
|
|
1254
1272
|
const [event, x, y] = data;
|
|
1255
1273
|
return this.getTransform(event, x, y);
|
|
1256
|
-
}), tap(() => this.cdr.detectChanges()));
|
|
1274
|
+
}), tap(() => setTimeout(() => this.cdr.detectChanges())));
|
|
1257
1275
|
this.path = combineLatest([
|
|
1258
1276
|
this.scaleService.xScaleMap,
|
|
1259
1277
|
this.scaleService.yScaleMap,
|
|
@@ -1330,6 +1348,9 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1330
1348
|
}
|
|
1331
1349
|
getTransform(event, scaleX, scaleY) {
|
|
1332
1350
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1351
|
+
if (event.type === 'mouseleave') {
|
|
1352
|
+
return null;
|
|
1353
|
+
}
|
|
1333
1354
|
const mouse = [event === null || event === void 0 ? void 0 : event.offsetX, event === null || event === void 0 ? void 0 : event.offsetY];
|
|
1334
1355
|
const foundX = scaleX.get(this.series.xAxisIndex);
|
|
1335
1356
|
const foundY = scaleY.get(this.series.yAxisIndex);
|
|
@@ -1434,10 +1455,10 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1434
1455
|
}
|
|
1435
1456
|
}
|
|
1436
1457
|
LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1437
|
-
LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n class=\"line\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n fill=\"none\">\n</svg:path>\n<ng-container *
|
|
1458
|
+
LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n class=\"line\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n fill=\"none\">\n</svg:path>\n<ng-container *tuiLet=\"transform | async as t\">\n <svg:circle\n *ngIf=\"t?.x !=null && t?.y!=null\"\n r=\"3\"\n [attr.fill]=\"series.color\"\n [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n >\n </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n <svg:circle\n class=\"marker\"\n *ngFor=\"let point of markers\"\n [class.draggable-marker]=\"point?.marker?.draggable\"\n [attr.r]=\"point.marker.style?.radius ?? 5\"\n [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n [attr.cx]=\"x(point.x)\"\n [attr.cy]=\"y(point.y)\"\n >\n </svg:circle>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], directives: [{ type: i4$1.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1438
1459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LineSeriesComponent, decorators: [{
|
|
1439
1460
|
type: Component,
|
|
1440
|
-
args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n class=\"line\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n fill=\"none\">\n</svg:path>\n<ng-container *
|
|
1461
|
+
args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n class=\"line\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n fill=\"none\">\n</svg:path>\n<ng-container *tuiLet=\"transform | async as t\">\n <svg:circle\n *ngIf=\"t?.x !=null && t?.y!=null\"\n r=\"3\"\n [attr.fill]=\"series.color\"\n [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n >\n </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n <svg:circle\n class=\"marker\"\n *ngFor=\"let point of markers\"\n [class.draggable-marker]=\"point?.marker?.draggable\"\n [attr.r]=\"point.marker.style?.radius ?? 5\"\n [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n [attr.cx]=\"x(point.x)\"\n [attr.cy]=\"y(point.y)\"\n >\n </svg:circle>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
|
|
1441
1462
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1442
1463
|
|
|
1443
1464
|
class BarSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1672,10 +1693,10 @@ class AreaSeriesComponent extends LinearSeriesBase {
|
|
|
1672
1693
|
}
|
|
1673
1694
|
}
|
|
1674
1695
|
AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1675
|
-
AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n </svg:linearGradient>\n</svg:defs>\n<svg:path\n class=\"area\"\n
|
|
1696
|
+
AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n </svg:linearGradient>\n</svg:defs>\n<svg:path\n class=\"area\"\n [attr.d]=\"areaPath | async\"\n [attr.stroke-width]=\"0\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<svg:path\n class=\"area\"\n fill=\"none\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *tuiLet=\"transform | async as t\">\n <svg:circle\n *ngIf=\"t?.x !=null && t?.y !=null\"\n r=\"3\"\n [attr.fill]=\"series.color\"\n [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n >\n </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n <svg:circle\n class=\"marker\"\n *ngFor=\"let point of markers\"\n [class.draggable-marker]=\"point?.marker?.draggable\"\n [attr.r]=\"point.marker.style?.radius ?? 5\"\n [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n [attr.cx]=\"x(point.x)\"\n [attr.cy]=\"y(point.y)\"\n >\n </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1676
1697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AreaSeriesComponent, decorators: [{
|
|
1677
1698
|
type: Component,
|
|
1678
|
-
args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n </svg:linearGradient>\n</svg:defs>\n<svg:path\n class=\"area\"\n
|
|
1699
|
+
args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n </svg:linearGradient>\n</svg:defs>\n<svg:path\n class=\"area\"\n [attr.d]=\"areaPath | async\"\n [attr.stroke-width]=\"0\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style.fill ?? series.color\">\n</svg:path>\n<svg:path\n class=\"area\"\n fill=\"none\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *tuiLet=\"transform | async as t\">\n <svg:circle\n *ngIf=\"t?.x !=null && t?.y !=null\"\n r=\"3\"\n [attr.fill]=\"series.color\"\n [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n >\n </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"getMarkers() as markers\">\n <svg:circle\n class=\"marker\"\n *ngFor=\"let point of markers\"\n [class.draggable-marker]=\"point?.marker?.draggable\"\n [attr.r]=\"point.marker.style?.radius ?? 5\"\n [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n [attr.cx]=\"x(point.x)\"\n [attr.cy]=\"y(point.y)\"\n >\n </svg:circle>\n</ng-container>\n\n\n\n", styles: [""] }]
|
|
1679
1700
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1680
1701
|
|
|
1681
1702
|
const defaultSeriesTypeMapping = new Map()
|
|
@@ -1800,10 +1821,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
1800
1821
|
}] } });
|
|
1801
1822
|
|
|
1802
1823
|
class ZoomableDirective {
|
|
1803
|
-
constructor(elementRef, zoomService, broadcastService, zone) {
|
|
1824
|
+
constructor(elementRef, zoomService, broadcastService, chartService, zone) {
|
|
1804
1825
|
this.elementRef = elementRef;
|
|
1805
1826
|
this.zoomService = zoomService;
|
|
1806
1827
|
this.broadcastService = broadcastService;
|
|
1828
|
+
this.chartService = chartService;
|
|
1807
1829
|
this.zone = zone;
|
|
1808
1830
|
this.zoomable = false;
|
|
1809
1831
|
this.alive = true;
|
|
@@ -1822,7 +1844,8 @@ class ZoomableDirective {
|
|
|
1822
1844
|
const message = new ZoomMessage({
|
|
1823
1845
|
event,
|
|
1824
1846
|
axis: this.zoomAxis,
|
|
1825
|
-
brushDomain: domain
|
|
1847
|
+
brushDomain: domain,
|
|
1848
|
+
chartId: this.config.id
|
|
1826
1849
|
});
|
|
1827
1850
|
this.broadcastService.broadcastZoom({
|
|
1828
1851
|
channel: (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.syncChannel,
|
|
@@ -1844,8 +1867,8 @@ class ZoomableDirective {
|
|
|
1844
1867
|
}
|
|
1845
1868
|
}
|
|
1846
1869
|
ngAfterViewInit() {
|
|
1847
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
1848
|
-
const enable = ((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) || ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.enable);
|
|
1870
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
1871
|
+
const enable = ((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) !== false || ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.enable);
|
|
1849
1872
|
if (!enable) {
|
|
1850
1873
|
return;
|
|
1851
1874
|
}
|
|
@@ -1856,46 +1879,114 @@ class ZoomableDirective {
|
|
|
1856
1879
|
[0, 0],
|
|
1857
1880
|
[this.size.width, this.size.height],
|
|
1858
1881
|
]);
|
|
1859
|
-
|
|
1860
|
-
|
|
1882
|
+
if ((_f = this.config.zoom) === null || _f === void 0 ? void 0 : _f.limitTranslateByData) {
|
|
1883
|
+
this.zoom.translateExtent([[0, 0], [this.size.width, this.size.height]]);
|
|
1884
|
+
}
|
|
1885
|
+
const commonZoomAxis = Axis.createAxis(((_g = this.config) === null || _g === void 0 ? void 0 : _g.zoom.type) === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
|
|
1886
|
+
this.zoomAxis = (_h = this.axis) !== null && _h !== void 0 ? _h : commonZoomAxis;
|
|
1861
1887
|
if (enable) {
|
|
1862
|
-
const maxZoom = ((
|
|
1863
|
-
const minZoom = ((
|
|
1888
|
+
const maxZoom = ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max) ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.max) : ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.limitZoomByData) ? 1 : 0;
|
|
1889
|
+
const minZoom = ((_m = this.config.zoom) === null || _m === void 0 ? void 0 : _m.min) ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.min) : Infinity;
|
|
1864
1890
|
this.zoom.scaleExtent([maxZoom, minZoom]);
|
|
1865
|
-
console.log(this.zoom.scaleExtent());
|
|
1866
1891
|
this.zoom.on('start zoom end', this.zoomed);
|
|
1867
|
-
this._element.call(this.zoom)
|
|
1892
|
+
this._element.call(this.zoom)
|
|
1893
|
+
.on('dblclick.zoom', null);
|
|
1894
|
+
if (((_q = (_p = this.config) === null || _p === void 0 ? void 0 : _p.zoom) === null || _q === void 0 ? void 0 : _q.zoomBehavior) === ZoomBehaviorType.wheel) {
|
|
1895
|
+
let wheeling;
|
|
1896
|
+
let type = 'start';
|
|
1897
|
+
this.zoom
|
|
1898
|
+
.filter((event) => event.ctrlKey)
|
|
1899
|
+
.wheelDelta((event) => {
|
|
1900
|
+
var _a;
|
|
1901
|
+
const delta = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom.type) === ZoomType.x ? -event.deltaX : -event.deltaY;
|
|
1902
|
+
return delta * 0.002;
|
|
1903
|
+
});
|
|
1904
|
+
this._element.on('wheel', (event) => {
|
|
1905
|
+
event.preventDefault();
|
|
1906
|
+
if (event.ctrlKey) {
|
|
1907
|
+
return;
|
|
1908
|
+
}
|
|
1909
|
+
const emit = (type) => {
|
|
1910
|
+
var _a, _b, _c, _d;
|
|
1911
|
+
let transform = zoomIdentity;
|
|
1912
|
+
const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
|
|
1913
|
+
if (((_a = this.config.zoom) === null || _a === void 0 ? void 0 : _a.type) === ZoomType.y) {
|
|
1914
|
+
transform = transform.translate(0, this.currentTransform.y - event.deltaY);
|
|
1915
|
+
}
|
|
1916
|
+
transform = transform.scale(this.currentTransform.k);
|
|
1917
|
+
let domain = ((_b = this.config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.y ?
|
|
1918
|
+
transform.rescaleY(origin).domain() :
|
|
1919
|
+
transform.rescaleX(origin).domain();
|
|
1920
|
+
const message = new ZoomMessage({
|
|
1921
|
+
event: {
|
|
1922
|
+
sourceEvent: event,
|
|
1923
|
+
transform,
|
|
1924
|
+
type
|
|
1925
|
+
},
|
|
1926
|
+
axis: this.zoomAxis,
|
|
1927
|
+
brushDomain: domain,
|
|
1928
|
+
chartId: this.config.id
|
|
1929
|
+
});
|
|
1930
|
+
this.zoomService.setZoom({
|
|
1931
|
+
event: {
|
|
1932
|
+
sourceEvent: event,
|
|
1933
|
+
transform,
|
|
1934
|
+
type
|
|
1935
|
+
},
|
|
1936
|
+
target: this.zoomAxis
|
|
1937
|
+
});
|
|
1938
|
+
this.broadcastService.broadcastZoom({
|
|
1939
|
+
channel: (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.zoom) === null || _d === void 0 ? void 0 : _d.syncChannel,
|
|
1940
|
+
message,
|
|
1941
|
+
});
|
|
1942
|
+
this._element.call(this.zoom.transform, transform);
|
|
1943
|
+
this.currentTransform = transform;
|
|
1944
|
+
};
|
|
1945
|
+
this.zone.runOutsideAngular(() => {
|
|
1946
|
+
clearTimeout(wheeling);
|
|
1947
|
+
emit(type);
|
|
1948
|
+
type = 'zoom';
|
|
1949
|
+
wheeling = setTimeout(() => {
|
|
1950
|
+
type = 'end';
|
|
1951
|
+
emit(type);
|
|
1952
|
+
type = 'start';
|
|
1953
|
+
}, 400);
|
|
1954
|
+
});
|
|
1955
|
+
});
|
|
1956
|
+
}
|
|
1868
1957
|
}
|
|
1869
1958
|
// Subscribe to zoom events
|
|
1870
|
-
this.broadcastService.subscribeToZoom((
|
|
1959
|
+
this.broadcastService.subscribeToZoom((_r = this.config) === null || _r === void 0 ? void 0 : _r.zoom.syncChannel).pipe(takeWhile((_) => this.alive), filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), filter((m) => {
|
|
1871
1960
|
var _a, _b, _c, _d;
|
|
1872
1961
|
return this.zoomAxis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) && this.zoomAxis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation);
|
|
1873
1962
|
}), tap$1((m) => {
|
|
1874
|
-
|
|
1875
|
-
if (currentTransform !== m.message.event.transform) {
|
|
1963
|
+
if (this.config.id !== m.message.chartId) {
|
|
1876
1964
|
this._element.call(this.zoom.transform, m.message.event.transform, null, {});
|
|
1877
1965
|
}
|
|
1878
|
-
|
|
1966
|
+
else {
|
|
1967
|
+
if (m.message.axis.isFake && !this.zoomAxis.isFake || !m.message.axis.isFake && this.zoomAxis.isFake) {
|
|
1968
|
+
this._element.call(this.zoom.transform, m.message.event.transform);
|
|
1969
|
+
}
|
|
1970
|
+
}
|
|
1971
|
+
})).subscribe();
|
|
1879
1972
|
// Subscribe to brush events x or y
|
|
1880
|
-
if ((((
|
|
1881
|
-
(((
|
|
1882
|
-
this.broadcastService.subscribeToBrush((
|
|
1883
|
-
const
|
|
1973
|
+
if ((((_s = this.config.brush) === null || _s === void 0 ? void 0 : _s.type) === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) ||
|
|
1974
|
+
(((_t = this.config.brush) === null || _t === void 0 ? void 0 : _t.type) === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
|
|
1975
|
+
combineLatest([this.broadcastService.subscribeToBrush((_u = this.config) === null || _u === void 0 ? void 0 : _u.zoom.syncChannel), this.chartService.size]).pipe(takeWhile((_) => this.alive), debounceTime(150), filter((data) => Boolean(data[0].message.selection)), tap$1((data) => {
|
|
1976
|
+
const [m] = data;
|
|
1977
|
+
const currentTransform = d3.zoomTransform(this._element.node());
|
|
1884
1978
|
if (!m.message.event && this.currentSelection && currentTransform.k !== 1) {
|
|
1885
1979
|
return;
|
|
1886
1980
|
}
|
|
1887
1981
|
this.currentSelection = m.message.selection;
|
|
1888
|
-
this.
|
|
1889
|
-
|
|
1890
|
-
this.updateZoom(m);
|
|
1891
|
-
}, 100);
|
|
1892
|
-
});
|
|
1893
|
-
}), takeWhile((_) => this.alive)).subscribe();
|
|
1982
|
+
this.updateZoom(m);
|
|
1983
|
+
})).subscribe();
|
|
1894
1984
|
}
|
|
1895
1985
|
}
|
|
1896
1986
|
ngOnDestroy() {
|
|
1897
1987
|
var _a;
|
|
1898
1988
|
(_a = this.zoom) === null || _a === void 0 ? void 0 : _a.on('start zoom end', null);
|
|
1989
|
+
this._element.on('wheel', null);
|
|
1899
1990
|
this.alive = false;
|
|
1900
1991
|
}
|
|
1901
1992
|
updateZoom(m) {
|
|
@@ -1914,14 +2005,14 @@ class ZoomableDirective {
|
|
|
1914
2005
|
this._element.transition().duration(150).call(this.zoom.transform, transform, null, {});
|
|
1915
2006
|
}
|
|
1916
2007
|
}
|
|
1917
|
-
ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2008
|
+
ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1918
2009
|
ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, ngImport: i0 });
|
|
1919
2010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, decorators: [{
|
|
1920
2011
|
type: Directive,
|
|
1921
2012
|
args: [{
|
|
1922
2013
|
selector: '[tetaZoomable]',
|
|
1923
2014
|
}]
|
|
1924
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
|
|
2015
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: BroadcastService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
|
|
1925
2016
|
type: Input
|
|
1926
2017
|
}], axis: [{
|
|
1927
2018
|
type: Input
|
|
@@ -1951,16 +2042,14 @@ class BrushableDirective {
|
|
|
1951
2042
|
}
|
|
1952
2043
|
}
|
|
1953
2044
|
BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1954
|
-
BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: BrushableDirective, selector: "
|
|
2045
|
+
BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", brushScale: "brushScale" }, usesOnChanges: true, ngImport: i0 });
|
|
1955
2046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BrushableDirective, decorators: [{
|
|
1956
2047
|
type: Directive,
|
|
1957
2048
|
args: [{
|
|
1958
|
-
selector: '
|
|
2049
|
+
selector: '[tetaBrushable]',
|
|
1959
2050
|
}]
|
|
1960
2051
|
}], ctorParameters: function () { return [{ type: BrushService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { config: [{
|
|
1961
2052
|
type: Input
|
|
1962
|
-
}], size: [{
|
|
1963
|
-
type: Input
|
|
1964
2053
|
}], brushScale: [{
|
|
1965
2054
|
type: Input
|
|
1966
2055
|
}] } });
|
|
@@ -1982,8 +2071,14 @@ class ChartContainerComponent {
|
|
|
1982
2071
|
this.size = this._svc.size;
|
|
1983
2072
|
this.yAxisMap = this._scaleService.yAxisMap;
|
|
1984
2073
|
this.xAxisMap = this._scaleService.xAxisMap;
|
|
1985
|
-
this.yScaleMap = this._scaleService.yScaleMap
|
|
1986
|
-
|
|
2074
|
+
this.yScaleMap = this._scaleService.yScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => this._cdr.detectChanges()), shareReplay({
|
|
2075
|
+
bufferSize: 1,
|
|
2076
|
+
refCount: true
|
|
2077
|
+
}));
|
|
2078
|
+
this.xScaleMap = this._scaleService.xScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => this._cdr.detectChanges()), shareReplay({
|
|
2079
|
+
bufferSize: 1,
|
|
2080
|
+
refCount: true
|
|
2081
|
+
}));
|
|
1987
2082
|
this.brushScale = combineLatest([
|
|
1988
2083
|
this._scaleService.xScaleMap,
|
|
1989
2084
|
this._scaleService.yScaleMap,
|
|
@@ -2000,9 +2095,8 @@ class ChartContainerComponent {
|
|
|
2000
2095
|
this.visibleRect = combineLatest([
|
|
2001
2096
|
this.size,
|
|
2002
2097
|
this.xAxisMap,
|
|
2003
|
-
this.yAxisMap
|
|
2004
|
-
|
|
2005
|
-
]).pipe(map((data) => {
|
|
2098
|
+
this.yAxisMap
|
|
2099
|
+
]).pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), map((data) => {
|
|
2006
2100
|
const [size, x, y] = data;
|
|
2007
2101
|
const yAxesArray = [...y.values()];
|
|
2008
2102
|
const xAxesArray = [...x.values()];
|
|
@@ -2024,12 +2118,9 @@ class ChartContainerComponent {
|
|
|
2024
2118
|
width: size.width - left - right,
|
|
2025
2119
|
height: size.height - top - bottom,
|
|
2026
2120
|
};
|
|
2027
|
-
}), tap((
|
|
2028
|
-
this._cdr.detectChanges();
|
|
2029
|
-
}));
|
|
2121
|
+
}), tap(() => setTimeout(() => this._cdr.detectChanges())));
|
|
2030
2122
|
}
|
|
2031
2123
|
ngOnInit() {
|
|
2032
|
-
this.uniqId = (Date.now() + Math.random()).toString(36);
|
|
2033
2124
|
this._observer = new ResizeObserver((entries) => {
|
|
2034
2125
|
requestAnimationFrame(() => {
|
|
2035
2126
|
if (!Array.isArray(entries) ||
|
|
@@ -2111,21 +2202,19 @@ class ChartContainerComponent {
|
|
|
2111
2202
|
mouseLeave(event) {
|
|
2112
2203
|
this._svc.setPointerMove(event);
|
|
2113
2204
|
}
|
|
2114
|
-
id() {
|
|
2115
|
-
return this.uniqId;
|
|
2116
|
-
}
|
|
2117
2205
|
}
|
|
2118
2206
|
ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2119
|
-
ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n xAxisMap: xAxisMap | async,\n yAxisMap: yAxisMap | async,\n xScaleMap: xScaleMap | async,\n yScaleMap: yScaleMap | async,\n visibleRect: visibleRect | async,\n brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n [size]=\"data.size\"\n [config]=\"data.config\"></teta-tooltip>\n\n
|
|
2207
|
+
ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n xAxisMap: xAxisMap | async,\n yAxisMap: yAxisMap | async,\n xScaleMap: xScaleMap | async,\n yScaleMap: yScaleMap | async,\n visibleRect: visibleRect | async,\n brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n [size]=\"data.size\"\n [config]=\"data.config\"></teta-tooltip>\n <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue;\">\n <ng-container *ngIf=\"item.value.options.visible\">\n <g\n teta-y-axis\n [axis]=\"item.value\"\n [scale]=\"data.yScaleMap.get(item.key)\"\n [size]=\"data.size\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.size\"\n [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n [attr.y]=\"0\"\n [attr.height]=\"data.size.height\"\n [attr.width]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n </ng-container>\n\n </ng-container>\n </g>\n <g class=\"x-axis-container\">\n <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue;\">\n <ng-container *ngIf=\"item.value.options.visible && data.xScaleMap && data.yScaleMap\">\n <g\n teta-x-axis\n [axis]=\"item.value\"\n [scale]=\"data.xScaleMap.get(item.key)\"\n [size]=\"data.size\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.size\"\n [attr.x]=\"0\"\n [attr.y]=\"0\"\n [attr.width]=\"data.size.width\"\n [attr.height]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n </ng-container>\n </ng-container>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\n <svg\n tetaBrushable\n tetaZoomable\n class=\"position-absolute\"\n [size]=\"data.size\"\n [brushScale]=\"data.brushScale\"\n [config]=\"data.config\"\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.xScaleMap, data.yScaleMap)\"\n (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n (mouseleave)=\"mouseLeave($event)\"\n (mousemove)=\"mouseMove($event)\">\n\n <g class=\"gridlines\"\n teta-gridlines\n *ngIf=\"data.config.gridLines?.enable !== false\"\n [size]=\"data.size\"\n [config]=\"data.config\"></g>\n\n <g class=\"x-axis-plotband-container\">\n <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n [plotBand]=\"plotBand\"\n [scale]=\"data.xScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.xAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"y-axis-plotband-container\">\n <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n [plotBand]=\"plotBand\"\n [scale]=\"data.yScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.yAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"x-axis-plotline-container\">\n <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n [plotLine]=\"plotLine\"\n [scale]=\"data.xScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.xAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"y-axis-plotline-container\">\n <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n [plotLine]=\"plotLine\"\n [scale]=\"data.yScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.yAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"series-container\">\n <g teta-series-host\n *ngFor=\"let series of data.config.series\"\n [config]=\"data.config\"\n [series]=\"series\"></g>\n </g>\n <g class=\"annotations\">\n <g teta-annotation\n *ngFor=\"let annotation of data.config.annotations\"\n [annotation]=\"annotation\"></g>\n </g>\n </svg>\n\n </ng-container>\n</ng-container>\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}\n"], components: [{ type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "scale", "size"] }, { type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "scale", "size"] }, { type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale"] }, { type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }], pipes: { "async": i4.AsyncPipe, "keyvalue": i4.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2120
2208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartContainerComponent, decorators: [{
|
|
2121
2209
|
type: Component,
|
|
2122
|
-
args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n xAxisMap: xAxisMap | async,\n yAxisMap: yAxisMap | async,\n xScaleMap: xScaleMap | async,\n yScaleMap: yScaleMap | async,\n visibleRect: visibleRect | async,\n brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n [size]=\"data.size\"\n [config]=\"data.config\"></teta-tooltip>\n\n
|
|
2210
|
+
args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n xAxisMap: xAxisMap | async,\n yAxisMap: yAxisMap | async,\n xScaleMap: xScaleMap | async,\n yScaleMap: yScaleMap | async,\n visibleRect: visibleRect | async,\n brushScale: brushScale | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n [size]=\"data.size\"\n [config]=\"data.config\"></teta-tooltip>\n <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n <ng-container *ngFor=\"let item of data.yAxisMap | keyvalue;\">\n <ng-container *ngIf=\"item.value.options.visible\">\n <g\n teta-y-axis\n [axis]=\"item.value\"\n [scale]=\"data.yScaleMap.get(item.key)\"\n [size]=\"data.size\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.size\"\n [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n [attr.y]=\"0\"\n [attr.height]=\"data.size.height\"\n [attr.width]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n </ng-container>\n\n </ng-container>\n </g>\n <g class=\"x-axis-container\">\n <ng-container *ngFor=\"let item of data.xAxisMap | keyvalue;\">\n <ng-container *ngIf=\"item.value.options.visible && data.xScaleMap && data.yScaleMap\">\n <g\n teta-x-axis\n [axis]=\"item.value\"\n [scale]=\"data.xScaleMap.get(item.key)\"\n [size]=\"data.size\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.size\"\n [attr.x]=\"0\"\n [attr.y]=\"0\"\n [attr.width]=\"data.size.width\"\n [attr.height]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n </ng-container>\n </ng-container>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngIf=\"data.visibleRect?.width > 0 && data.visibleRect?.height > 0 && data.xScaleMap && data.yScaleMap\">\n <svg\n tetaBrushable\n tetaZoomable\n class=\"position-absolute\"\n [size]=\"data.size\"\n [brushScale]=\"data.brushScale\"\n [config]=\"data.config\"\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.xScaleMap, data.yScaleMap)\"\n (click)=\"click($event, data.xScaleMap, data.yScaleMap)\"\n (mouseleave)=\"mouseLeave($event)\"\n (mousemove)=\"mouseMove($event)\">\n\n <g class=\"gridlines\"\n teta-gridlines\n *ngIf=\"data.config.gridLines?.enable !== false\"\n [size]=\"data.size\"\n [config]=\"data.config\"></g>\n\n <g class=\"x-axis-plotband-container\">\n <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n [plotBand]=\"plotBand\"\n [scale]=\"data.xScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.xAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"y-axis-plotband-container\">\n <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n [plotBand]=\"plotBand\"\n [scale]=\"data.yScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.yAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"x-axis-plotline-container\">\n <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n [plotLine]=\"plotLine\"\n [scale]=\"data.xScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.xAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"y-axis-plotline-container\">\n <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n [plotLine]=\"plotLine\"\n [scale]=\"data.yScaleMap.get(i)\"\n [size]=\"data.size\"\n [axis]=\"data.yAxisMap.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"series-container\">\n <g teta-series-host\n *ngFor=\"let series of data.config.series\"\n [config]=\"data.config\"\n [series]=\"series\"></g>\n </g>\n <g class=\"annotations\">\n <g teta-annotation\n *ngFor=\"let annotation of data.config.annotations\"\n [annotation]=\"annotation\"></g>\n </g>\n </svg>\n\n </ng-container>\n</ng-container>\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}\n"] }]
|
|
2123
2211
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
2124
2212
|
|
|
2125
2213
|
class LegendComponent {
|
|
2126
2214
|
constructor() {
|
|
2127
2215
|
this.sizeMapping = new Map()
|
|
2128
2216
|
.set(SeriesType.line, 2)
|
|
2217
|
+
.set(SeriesType.scatter, 12)
|
|
2129
2218
|
.set(SeriesType.bar, 12)
|
|
2130
2219
|
.set(SeriesType.area, 2)
|
|
2131
2220
|
.set(SeriesType.block, 12)
|
|
@@ -2311,7 +2400,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
2311
2400
|
ScatterSeriesComponent,
|
|
2312
2401
|
BlockSeriesComponent,
|
|
2313
2402
|
BlockAreaSeriesComponent,
|
|
2314
|
-
AnnotationComponent], imports: [CommonModule], exports: [ChartComponent,
|
|
2403
|
+
AnnotationComponent], imports: [CommonModule, TuiLetModule], exports: [ChartComponent,
|
|
2315
2404
|
LegendComponent,
|
|
2316
2405
|
SeriesBaseComponent,
|
|
2317
2406
|
LineSeriesComponent,
|
|
@@ -2320,7 +2409,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
2320
2409
|
AreaSeriesComponent,
|
|
2321
2410
|
BlockSeriesComponent,
|
|
2322
2411
|
BlockAreaSeriesComponent] });
|
|
2323
|
-
ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, imports: [[CommonModule]] });
|
|
2412
|
+
ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, imports: [[CommonModule, TuiLetModule]] });
|
|
2324
2413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartModule, decorators: [{
|
|
2325
2414
|
type: NgModule,
|
|
2326
2415
|
args: [{
|
|
@@ -2358,7 +2447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
2358
2447
|
BlockSeriesComponent,
|
|
2359
2448
|
BlockAreaSeriesComponent,
|
|
2360
2449
|
],
|
|
2361
|
-
imports: [CommonModule],
|
|
2450
|
+
imports: [CommonModule, TuiLetModule],
|
|
2362
2451
|
}]
|
|
2363
2452
|
}] });
|
|
2364
2453
|
|
|
@@ -2400,5 +2489,5 @@ class PlotLine {
|
|
|
2400
2489
|
* Generated bundle index. Do not edit.
|
|
2401
2490
|
*/
|
|
2402
2491
|
|
|
2403
|
-
export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomMessage, ZoomService, ZoomType };
|
|
2492
|
+
export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType };
|
|
2404
2493
|
//# sourceMappingURL=tetacom-svg-charts.mjs.map
|