@tetacom/svg-charts 1.2.4 → 1.2.7
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 +4 -4
- package/chart/model/i-scales-map.d.ts +5 -0
- package/chart/model/public-api.d.ts +1 -0
- package/chart/service/scale.service.d.ts +2 -7
- package/esm2020/chart/chart/chart.component.mjs +5 -5
- package/esm2020/chart/chart-container/annotation/annotation.component.mjs +3 -3
- package/esm2020/chart/chart-container/chart-container.component.mjs +19 -26
- package/esm2020/chart/chart-container/gridlines/gridlines.component.mjs +7 -7
- package/esm2020/chart/chart-container/plotband/plot-band.component.mjs +3 -3
- package/esm2020/chart/chart-container/series/area-series/area-series.component.mjs +4 -7
- package/esm2020/chart/chart-container/series/bar/bar-series.component.mjs +5 -5
- package/esm2020/chart/chart-container/series/block-area-series/block-area-series.component.mjs +3 -3
- package/esm2020/chart/chart-container/series/block-series/block-series.component.mjs +3 -3
- package/esm2020/chart/chart-container/series/linear-series-base.mjs +6 -9
- package/esm2020/chart/chart-container/series/scatter-series/scatter-series.component.mjs +3 -3
- package/esm2020/chart/chart-container/x-axis/x-axis.component.mjs +3 -3
- package/esm2020/chart/chart-container/y-axis/y-axis.component.mjs +3 -3
- package/esm2020/chart/directives/brushable.directive.mjs +1 -1
- package/esm2020/chart/model/i-scales-map.mjs +2 -0
- package/esm2020/chart/model/public-api.mjs +2 -1
- package/esm2020/chart/service/scale.service.mjs +9 -170
- package/fesm2015/tetacom-svg-charts.mjs +62 -241
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +58 -232
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -628,98 +628,12 @@ class ScaleService {
|
|
|
628
628
|
.set(ScaleType.symlog, d3.scaleSymlog)
|
|
629
629
|
.set(ScaleType.pow, d3.scalePow)
|
|
630
630
|
.set(ScaleType.sqrt, d3.scaleSqrt);
|
|
631
|
-
this.
|
|
632
|
-
this.chartService.size,
|
|
633
|
-
this.chartService.config,
|
|
634
|
-
]).pipe(map((data) => {
|
|
635
|
-
const [, config] = data;
|
|
636
|
-
const map = new Map();
|
|
637
|
-
config.xAxis.map((_, index) => {
|
|
638
|
-
map.set(index, Axis.createAxis(AxisOrientation.x, config, index));
|
|
639
|
-
});
|
|
640
|
-
return map;
|
|
641
|
-
}), shareReplay({
|
|
642
|
-
bufferSize: 1,
|
|
643
|
-
refCount: true,
|
|
644
|
-
}));
|
|
645
|
-
this.yAxisMap = combineLatest([
|
|
646
|
-
this.chartService.size,
|
|
647
|
-
this.chartService.config,
|
|
648
|
-
]).pipe(map((data) => {
|
|
649
|
-
const [, config] = data;
|
|
650
|
-
const map = new Map();
|
|
651
|
-
config.yAxis.map((_, index) => {
|
|
652
|
-
map.set(index, Axis.createAxis(AxisOrientation.y, config, index));
|
|
653
|
-
});
|
|
654
|
-
return map;
|
|
655
|
-
}), shareReplay({
|
|
656
|
-
bufferSize: 1,
|
|
657
|
-
refCount: true,
|
|
658
|
-
}));
|
|
659
|
-
this.xScaleMap = combineLatest([
|
|
660
|
-
this.chartService.size,
|
|
661
|
-
this.chartService.config,
|
|
662
|
-
this.zoomService.zoomed,
|
|
663
|
-
]).pipe(withLatestFrom(this.yAxisMap, this.xAxisMap), map((data) => {
|
|
664
|
-
var _a;
|
|
665
|
-
const [[size, config, zoom], yAxes, xAxes] = data;
|
|
666
|
-
const map = new Map();
|
|
667
|
-
const left = [...yAxes.values()]
|
|
668
|
-
.filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
|
|
669
|
-
.reduce((acc, cur) => acc + cur.selfSize, 0);
|
|
670
|
-
const right = [...yAxes.values()]
|
|
671
|
-
.filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite) !== true; })
|
|
672
|
-
.reduce((acc, cur) => acc + cur.selfSize, 0);
|
|
673
|
-
const finalWidth = (size.width || 0) - left - right;
|
|
674
|
-
xAxes.forEach((axis) => {
|
|
675
|
-
var _a, _b;
|
|
676
|
-
let domain = axis.extremes;
|
|
677
|
-
if (axis === null || axis === void 0 ? void 0 : axis.options.inverted) {
|
|
678
|
-
domain = [...axis.extremes].reverse();
|
|
679
|
-
}
|
|
680
|
-
let scale = this.scaleMapping
|
|
681
|
-
.get(axis.options.scaleType.type)()
|
|
682
|
-
.domain(domain)
|
|
683
|
-
.range([0, finalWidth - config.bounds.right]);
|
|
684
|
-
if (axis.options.niceTicks) {
|
|
685
|
-
scale.nice();
|
|
686
|
-
}
|
|
687
|
-
if (axis.options.scaleType.type === ScaleType.log) {
|
|
688
|
-
scale.base(axis.options.scaleType.base);
|
|
689
|
-
}
|
|
690
|
-
map.set(axis.index, scale);
|
|
691
|
-
axis.setOriginDomain(scale.domain());
|
|
692
|
-
const hasCache = this.transformCacheX.has(axis.index);
|
|
693
|
-
const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.x ||
|
|
694
|
-
((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
|
|
695
|
-
if (hasCache && shouldRestore) {
|
|
696
|
-
const restoredTransform = this.transformCacheX.get(axis.index);
|
|
697
|
-
map.set(axis.index, restoredTransform.rescaleX(scale));
|
|
698
|
-
}
|
|
699
|
-
});
|
|
700
|
-
if (zoom) {
|
|
701
|
-
const event = zoom.event;
|
|
702
|
-
if (((_a = zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) === AxisOrientation.x) {
|
|
703
|
-
if (map.has(zoom.target.index)) {
|
|
704
|
-
const currentScale = map.get(zoom.target.index);
|
|
705
|
-
const rescaled = event.transform.rescaleX(currentScale);
|
|
706
|
-
map.set(zoom.target.index, rescaled);
|
|
707
|
-
const axis = xAxes.get(zoom.target.index);
|
|
708
|
-
this.transformCacheX.set(axis.index, event.transform);
|
|
709
|
-
}
|
|
710
|
-
}
|
|
711
|
-
}
|
|
712
|
-
return map;
|
|
713
|
-
}), shareReplay({
|
|
714
|
-
bufferSize: 1,
|
|
715
|
-
refCount: true,
|
|
716
|
-
}));
|
|
717
|
-
this.xMap = combineLatest([
|
|
631
|
+
this.scales = combineLatest([
|
|
718
632
|
this.chartService.size,
|
|
719
633
|
this.chartService.config,
|
|
720
634
|
this.zoomService.zoomed,
|
|
721
635
|
]).pipe(map((data) => {
|
|
722
|
-
var _a;
|
|
636
|
+
var _a, _b, _c, _d;
|
|
723
637
|
const [size, config, zoom] = data;
|
|
724
638
|
const xAxisMap = new Map();
|
|
725
639
|
const yAxisMap = new Map();
|
|
@@ -729,6 +643,7 @@ class ScaleService {
|
|
|
729
643
|
config.xAxis.map((_, index) => {
|
|
730
644
|
xAxisMap.set(index, Axis.createAxis(AxisOrientation.x, config, index));
|
|
731
645
|
});
|
|
646
|
+
// Generate x scales
|
|
732
647
|
const left = Array.from(yAxisMap.values())
|
|
733
648
|
.filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
|
|
734
649
|
.reduce((acc, cur) => acc + cur.selfSize, 0);
|
|
@@ -774,26 +689,7 @@ class ScaleService {
|
|
|
774
689
|
}
|
|
775
690
|
}
|
|
776
691
|
}
|
|
777
|
-
|
|
778
|
-
}), shareReplay({
|
|
779
|
-
bufferSize: 1,
|
|
780
|
-
refCount: true,
|
|
781
|
-
}));
|
|
782
|
-
this.yMap = combineLatest([
|
|
783
|
-
this.chartService.size,
|
|
784
|
-
this.chartService.config,
|
|
785
|
-
this.zoomService.zoomed,
|
|
786
|
-
]).pipe(map((data) => {
|
|
787
|
-
var _a, _b, _c;
|
|
788
|
-
const [size, config, zoom] = data;
|
|
789
|
-
const xAxisMap = new Map();
|
|
790
|
-
const yAxisMap = new Map();
|
|
791
|
-
config.yAxis.map((_, index) => {
|
|
792
|
-
yAxisMap.set(index, Axis.createAxis(AxisOrientation.y, config, index));
|
|
793
|
-
});
|
|
794
|
-
config.xAxis.map((_, index) => {
|
|
795
|
-
xAxisMap.set(index, Axis.createAxis(AxisOrientation.x, config, index));
|
|
796
|
-
});
|
|
692
|
+
// Generate y axis
|
|
797
693
|
const top = Array.from(xAxisMap.values())
|
|
798
694
|
.filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
|
|
799
695
|
.reduce((acc, cur) => acc + cur.selfSize, 0);
|
|
@@ -803,8 +699,8 @@ class ScaleService {
|
|
|
803
699
|
const finalHeight = (size.height || 0) -
|
|
804
700
|
top -
|
|
805
701
|
bottom -
|
|
806
|
-
((
|
|
807
|
-
((
|
|
702
|
+
((_b = config === null || config === void 0 ? void 0 : config.bounds) === null || _b === void 0 ? void 0 : _b.top) -
|
|
703
|
+
((_c = config.bounds) === null || _c === void 0 ? void 0 : _c.bottom);
|
|
808
704
|
yAxisMap.forEach((axis) => {
|
|
809
705
|
var _a, _b;
|
|
810
706
|
let domain = axis.extremes;
|
|
@@ -836,7 +732,7 @@ class ScaleService {
|
|
|
836
732
|
});
|
|
837
733
|
if (zoom) {
|
|
838
734
|
const event = zoom.event;
|
|
839
|
-
if (((
|
|
735
|
+
if (((_d = zoom.target) === null || _d === void 0 ? void 0 : _d.orientation) === AxisOrientation.y) {
|
|
840
736
|
if (yAxisMap.has(zoom.target.index)) {
|
|
841
737
|
const y = yAxisMap.get(zoom.target.index);
|
|
842
738
|
const rescaled = event.transform.rescaleY(y.scale);
|
|
@@ -846,72 +742,10 @@ class ScaleService {
|
|
|
846
742
|
}
|
|
847
743
|
}
|
|
848
744
|
}
|
|
849
|
-
return
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
}));
|
|
854
|
-
this.yScaleMap = combineLatest([
|
|
855
|
-
this.chartService.size,
|
|
856
|
-
this.chartService.config,
|
|
857
|
-
this.zoomService.zoomed,
|
|
858
|
-
]).pipe(withLatestFrom(this.yAxisMap, this.xAxisMap), map((data) => {
|
|
859
|
-
var _a, _b, _c;
|
|
860
|
-
const [[size, config, zoom], yAxes, xAxes] = data;
|
|
861
|
-
const map = new Map();
|
|
862
|
-
const top = [...xAxes.values()]
|
|
863
|
-
.filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite); })
|
|
864
|
-
.reduce((acc, cur) => acc + cur.selfSize, 0);
|
|
865
|
-
const bottom = [...xAxes.values()]
|
|
866
|
-
.filter((_) => { var _a, _b; return ((_a = _.options) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = _.options) === null || _b === void 0 ? void 0 : _b.opposite) !== true; })
|
|
867
|
-
.reduce((acc, cur) => acc + cur.selfSize, 0);
|
|
868
|
-
const finalHeight = (size.height || 0) -
|
|
869
|
-
top -
|
|
870
|
-
bottom -
|
|
871
|
-
((_a = config === null || config === void 0 ? void 0 : config.bounds) === null || _a === void 0 ? void 0 : _a.top) -
|
|
872
|
-
((_b = config.bounds) === null || _b === void 0 ? void 0 : _b.bottom);
|
|
873
|
-
yAxes.forEach((axis) => {
|
|
874
|
-
var _a, _b;
|
|
875
|
-
let domain = axis.extremes;
|
|
876
|
-
if (axis.orientation === AxisOrientation.y) {
|
|
877
|
-
domain = [...axis.extremes].reverse();
|
|
878
|
-
}
|
|
879
|
-
if (axis === null || axis === void 0 ? void 0 : axis.options.inverted) {
|
|
880
|
-
domain = domain.reverse();
|
|
881
|
-
}
|
|
882
|
-
const scale = this.scaleMapping
|
|
883
|
-
.get(axis.options.scaleType.type)()
|
|
884
|
-
.domain(domain)
|
|
885
|
-
.range([config.bounds.top, finalHeight]);
|
|
886
|
-
if (axis.options.niceTicks) {
|
|
887
|
-
scale.nice();
|
|
888
|
-
}
|
|
889
|
-
if (axis.options.scaleType.type === ScaleType.log) {
|
|
890
|
-
scale.base(axis.options.scaleType.base);
|
|
891
|
-
}
|
|
892
|
-
map.set(axis.index, scale);
|
|
893
|
-
axis.setOriginDomain(scale.domain());
|
|
894
|
-
const hasCache = this.transformCacheY.has(axis.index);
|
|
895
|
-
const shouldRestore = ((_a = zoom === null || zoom === void 0 ? void 0 : zoom.target) === null || _a === void 0 ? void 0 : _a.orientation) !== AxisOrientation.y ||
|
|
896
|
-
((_b = zoom.target) === null || _b === void 0 ? void 0 : _b.index) !== axis.index;
|
|
897
|
-
if (hasCache && shouldRestore) {
|
|
898
|
-
const restoredTransform = this.transformCacheY.get(axis.index);
|
|
899
|
-
map.set(axis.index, restoredTransform.rescaleY(scale));
|
|
900
|
-
}
|
|
901
|
-
});
|
|
902
|
-
if (zoom) {
|
|
903
|
-
const event = zoom.event;
|
|
904
|
-
if (((_c = zoom.target) === null || _c === void 0 ? void 0 : _c.orientation) === AxisOrientation.y) {
|
|
905
|
-
if (map.has(zoom.target.index)) {
|
|
906
|
-
const currentScale = map.get(zoom.target.index);
|
|
907
|
-
const rescaled = event.transform.rescaleY(currentScale);
|
|
908
|
-
map.set(zoom.target.index, rescaled);
|
|
909
|
-
const axis = yAxes.get(zoom.target.index);
|
|
910
|
-
this.transformCacheY.set(axis.index, event.transform);
|
|
911
|
-
}
|
|
912
|
-
}
|
|
913
|
-
}
|
|
914
|
-
return map;
|
|
745
|
+
return {
|
|
746
|
+
x: xAxisMap,
|
|
747
|
+
y: yAxisMap
|
|
748
|
+
};
|
|
915
749
|
}), shareReplay({
|
|
916
750
|
bufferSize: 1,
|
|
917
751
|
refCount: true,
|
|
@@ -1220,15 +1054,12 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1220
1054
|
};
|
|
1221
1055
|
this.defaultClipPointsMapping.set(ClipPointsDirection.x, filterX);
|
|
1222
1056
|
this.defaultClipPointsMapping.set(ClipPointsDirection.y, filterY);
|
|
1223
|
-
this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.
|
|
1224
|
-
const [event, x, y] = data;
|
|
1057
|
+
this.transform = this.svc.pointerMove.pipe(withLatestFrom(this.scaleService.scales), map((data) => {
|
|
1058
|
+
const [event, { x, y }] = data;
|
|
1225
1059
|
return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
|
|
1226
1060
|
}), tap(() => setTimeout(() => this.cdr.detectChanges())));
|
|
1227
|
-
this.path =
|
|
1228
|
-
|
|
1229
|
-
this.scaleService.yMap,
|
|
1230
|
-
]).pipe(map((data) => {
|
|
1231
|
-
const [x, y] = data;
|
|
1061
|
+
this.path = this.scaleService.scales.pipe(map((data) => {
|
|
1062
|
+
const { x, y } = data;
|
|
1232
1063
|
this.x = x.get(this.series.xAxisIndex).scale;
|
|
1233
1064
|
this.y = y.get(this.series.yAxisIndex).scale;
|
|
1234
1065
|
const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
|
|
@@ -1440,8 +1271,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
|
|
|
1440
1271
|
const count = _.series.filter((_) => _.type === SeriesType.bar && _.xAxisIndex === this.series.xAxisIndex);
|
|
1441
1272
|
return count.length;
|
|
1442
1273
|
}));
|
|
1443
|
-
this.x1 = this.scaleService.
|
|
1444
|
-
const x = _.get(this.series.xAxisIndex).scale;
|
|
1274
|
+
this.x1 = this.scaleService.scales.pipe(map((_) => {
|
|
1275
|
+
const x = _.x.get(this.series.xAxisIndex).scale;
|
|
1445
1276
|
const range = x.range();
|
|
1446
1277
|
const domain = this.series.data.map((_) => _.x);
|
|
1447
1278
|
return d3
|
|
@@ -1450,8 +1281,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
|
|
|
1450
1281
|
.domain(domain)
|
|
1451
1282
|
.padding(0.1);
|
|
1452
1283
|
}));
|
|
1453
|
-
this.x = this.scaleService.
|
|
1454
|
-
this.y = this.scaleService.
|
|
1284
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
|
|
1285
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
|
|
1455
1286
|
}
|
|
1456
1287
|
mouseenter(point) {
|
|
1457
1288
|
this.svc.setTooltip({
|
|
@@ -1484,8 +1315,8 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
|
|
|
1484
1315
|
this.element = element;
|
|
1485
1316
|
}
|
|
1486
1317
|
ngOnInit() {
|
|
1487
|
-
this.x = this.scaleService.
|
|
1488
|
-
this.y = this.scaleService.
|
|
1318
|
+
this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex).scale));
|
|
1319
|
+
this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex).scale));
|
|
1489
1320
|
}
|
|
1490
1321
|
ngAfterViewInit() {
|
|
1491
1322
|
}
|
|
@@ -1523,8 +1354,8 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1523
1354
|
}
|
|
1524
1355
|
ngOnInit() {
|
|
1525
1356
|
const defaultVisiblePixels = 0;
|
|
1526
|
-
this.x = this.scaleService.
|
|
1527
|
-
this.y = this.scaleService.
|
|
1357
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
|
|
1358
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
|
|
1528
1359
|
this.displayPoints = this.y.pipe(map((y) => {
|
|
1529
1360
|
return this.series.data.filter((point, index, arr) => {
|
|
1530
1361
|
var _a, _b, _c, _d;
|
|
@@ -1576,8 +1407,8 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1576
1407
|
}
|
|
1577
1408
|
ngOnInit() {
|
|
1578
1409
|
const defaultVisiblePixels = 0;
|
|
1579
|
-
this.x = this.scaleService.
|
|
1580
|
-
this.y = this.scaleService.
|
|
1410
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
|
|
1411
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
|
|
1581
1412
|
this.displayPoints = this.y.pipe(map((y) => {
|
|
1582
1413
|
return this.series.data.filter((point, index, arr) => {
|
|
1583
1414
|
var _a, _b, _c, _d;
|
|
@@ -1629,11 +1460,8 @@ class AreaSeriesComponent extends LinearSeriesBase {
|
|
|
1629
1460
|
}
|
|
1630
1461
|
ngOnInit() {
|
|
1631
1462
|
super.ngOnInit();
|
|
1632
|
-
this.areaPath =
|
|
1633
|
-
|
|
1634
|
-
this.scaleService.yMap,
|
|
1635
|
-
]).pipe(map((data) => {
|
|
1636
|
-
const [x, y] = data;
|
|
1463
|
+
this.areaPath = this.scaleService.scales.pipe(map((data) => {
|
|
1464
|
+
const { x, y } = data;
|
|
1637
1465
|
this.x = x.get(this.series.xAxisIndex).scale;
|
|
1638
1466
|
this.y = y.get(this.series.yAxisIndex).scale;
|
|
1639
1467
|
const area = d3
|
|
@@ -1725,16 +1553,16 @@ class GridlinesComponent {
|
|
|
1725
1553
|
this.svc = svc;
|
|
1726
1554
|
this.chartService = chartService;
|
|
1727
1555
|
this.config = this.chartService.config;
|
|
1728
|
-
this.tickYValues = this.svc.
|
|
1556
|
+
this.tickYValues = this.svc.scales.pipe(map((_) => {
|
|
1729
1557
|
const ratio = this.size.height / 40;
|
|
1730
|
-
return _.get(0).scale.ticks(ratio);
|
|
1558
|
+
return _.y.get(0).scale.ticks(ratio);
|
|
1731
1559
|
}));
|
|
1732
|
-
this.tickXValues = this.svc.
|
|
1560
|
+
this.tickXValues = this.svc.scales.pipe(map((_) => {
|
|
1733
1561
|
const ratio = this.size.width / 40;
|
|
1734
|
-
return _.get(0).scale.ticks(ratio);
|
|
1562
|
+
return _.x.get(0).scale.ticks(ratio);
|
|
1735
1563
|
}));
|
|
1736
|
-
this.y = this.svc.
|
|
1737
|
-
this.x = this.svc.
|
|
1564
|
+
this.y = this.svc.scales.pipe(map((_) => _.y.get(0).scale));
|
|
1565
|
+
this.x = this.svc.scales.pipe(map((_) => _.x.get(0).scale));
|
|
1738
1566
|
}
|
|
1739
1567
|
ngAfterViewInit() {
|
|
1740
1568
|
}
|
|
@@ -1752,9 +1580,9 @@ class XAxisComponent {
|
|
|
1752
1580
|
constructor(scaleService) {
|
|
1753
1581
|
this.scaleService = scaleService;
|
|
1754
1582
|
this._alive = true;
|
|
1755
|
-
this.x = this.scaleService.
|
|
1583
|
+
this.x = this.scaleService.scales.pipe(map((_) => {
|
|
1756
1584
|
var _a;
|
|
1757
|
-
return (_a = _.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
|
|
1585
|
+
return (_a = _.x.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
|
|
1758
1586
|
}));
|
|
1759
1587
|
}
|
|
1760
1588
|
getLabelTransform() {
|
|
@@ -1780,9 +1608,9 @@ class YAxisComponent {
|
|
|
1780
1608
|
constructor(scaleService) {
|
|
1781
1609
|
this.scaleService = scaleService;
|
|
1782
1610
|
this._alive = true;
|
|
1783
|
-
this.y = this.scaleService.
|
|
1611
|
+
this.y = this.scaleService.scales.pipe(map((_) => {
|
|
1784
1612
|
var _a;
|
|
1785
|
-
return (_a = _.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
|
|
1613
|
+
return (_a = _.y.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
|
|
1786
1614
|
}));
|
|
1787
1615
|
}
|
|
1788
1616
|
ngOnInit() { }
|
|
@@ -2010,10 +1838,10 @@ class PlotBandComponent {
|
|
|
2010
1838
|
}
|
|
2011
1839
|
}
|
|
2012
1840
|
PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2013
|
-
PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-
|
|
1841
|
+
PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-body-3 fill-text-70\"\n [attr.x]=\"getTextCenter()\"\n [attr.transform]=\"'rotate(-90, '+ getTextCenter() +',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.y\"\n text-anchor=\"middle\"\n class=\"label font-body-3 fill-text-70\"\n dominant-baseline=\"central\"\n [attr.x]=\"getTextCenter()\"\n [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2014
1842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, decorators: [{
|
|
2015
1843
|
type: Component,
|
|
2016
|
-
args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-
|
|
1844
|
+
args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-body-3 fill-text-70\"\n [attr.x]=\"getTextCenter()\"\n [attr.transform]=\"'rotate(-90, '+ getTextCenter() +',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.y\"\n text-anchor=\"middle\"\n class=\"label font-body-3 fill-text-70\"\n dominant-baseline=\"central\"\n [attr.x]=\"getTextCenter()\"\n [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
|
|
2017
1845
|
}], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
|
|
2018
1846
|
type: Input
|
|
2019
1847
|
}], axis: [{
|
|
@@ -2453,8 +2281,8 @@ class AnnotationComponent {
|
|
|
2453
2281
|
this.scaleService = scaleService;
|
|
2454
2282
|
this.cdr = cdr;
|
|
2455
2283
|
this.chartService = chartService;
|
|
2456
|
-
this.x = this.scaleService.
|
|
2457
|
-
this.y = this.scaleService.
|
|
2284
|
+
this.x = this.scaleService.scales.pipe(map((_) => { var _a; return _.x.get((_a = this.annotation.xAxisIndex) !== null && _a !== void 0 ? _a : 0).scale; }));
|
|
2285
|
+
this.y = this.scaleService.scales.pipe(map((_) => { var _a; return _.y.get((_a = this.annotation.yAxisIndex) !== null && _a !== void 0 ? _a : 0).scale; }));
|
|
2458
2286
|
this.drag = d3.drag();
|
|
2459
2287
|
}
|
|
2460
2288
|
set annotation(annotation) {
|
|
@@ -2568,30 +2396,23 @@ class ChartContainerComponent {
|
|
|
2568
2396
|
this.sumSize = (acc, curr) => acc + curr.selfSize;
|
|
2569
2397
|
this.config = this._svc.config;
|
|
2570
2398
|
this.size = this._svc.size;
|
|
2571
|
-
this.
|
|
2572
|
-
bufferSize: 1,
|
|
2573
|
-
refCount: true,
|
|
2574
|
-
}));
|
|
2575
|
-
this.xMap = this._scaleService.xMap.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
|
|
2399
|
+
this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
|
|
2576
2400
|
bufferSize: 1,
|
|
2577
2401
|
refCount: true,
|
|
2578
2402
|
}));
|
|
2579
|
-
this.brushScale =
|
|
2580
|
-
this._scaleService.xMap,
|
|
2581
|
-
this._scaleService.yMap,
|
|
2582
|
-
]).pipe(withLatestFrom(this.config), map((data) => {
|
|
2403
|
+
this.brushScale = this._scaleService.scales.pipe(withLatestFrom(this.config), map((data) => {
|
|
2583
2404
|
var _a, _b;
|
|
2584
|
-
const [
|
|
2405
|
+
const [{ x, y }, config] = data;
|
|
2585
2406
|
return ((_a = config.brush) === null || _a === void 0 ? void 0 : _a.type) === BrushType.x || ((_b = config === null || config === void 0 ? void 0 : config.zoom) === null || _b === void 0 ? void 0 : _b.type) === ZoomType.x ? x.get(0).scale : y.get(0).scale;
|
|
2586
2407
|
}), shareReplay({
|
|
2587
2408
|
bufferSize: 1,
|
|
2588
2409
|
refCount: true,
|
|
2589
2410
|
}));
|
|
2590
|
-
this.visibleRect = this.size.pipe(combineLatestWith(this.
|
|
2411
|
+
this.visibleRect = this.size.pipe(combineLatestWith(this.scales)).pipe(withLatestFrom(this.config), map((data) => {
|
|
2591
2412
|
var _a, _b, _c, _d, _e, _f;
|
|
2592
|
-
const [[size, x, y], config] = data;
|
|
2593
|
-
const yAxesArray =
|
|
2594
|
-
const xAxesArray =
|
|
2413
|
+
const [[size, { x, y }], config] = data;
|
|
2414
|
+
const yAxesArray = Array.from(y.values());
|
|
2415
|
+
const xAxesArray = Array.from(x.values());
|
|
2595
2416
|
const left = yAxesArray
|
|
2596
2417
|
.filter((_) => _.options.opposite !== true && _.options.visible)
|
|
2597
2418
|
.reduce(this.sumSize, 0);
|
|
@@ -2643,11 +2464,11 @@ class ChartContainerComponent {
|
|
|
2643
2464
|
this._observer.disconnect();
|
|
2644
2465
|
}
|
|
2645
2466
|
getTranslate(axis, size) {
|
|
2646
|
-
return
|
|
2467
|
+
return this.scales.pipe(withLatestFrom(this.config), map((data) => {
|
|
2647
2468
|
var _a, _b;
|
|
2648
|
-
const [
|
|
2649
|
-
const xAxesArray =
|
|
2650
|
-
const yAxesArray =
|
|
2469
|
+
const [{ x, y }, config] = data;
|
|
2470
|
+
const xAxesArray = Array.from(x.values());
|
|
2471
|
+
const yAxesArray = Array.from(y.values());
|
|
2651
2472
|
const oppositeFilter = this.filterPositionMap.get(true);
|
|
2652
2473
|
const nonOppositeFilter = this.filterPositionMap.get(false);
|
|
2653
2474
|
const oppositeOffsetY = yAxesArray.filter(oppositeFilter(axis));
|
|
@@ -2681,8 +2502,8 @@ class ChartContainerComponent {
|
|
|
2681
2502
|
return item.value.index;
|
|
2682
2503
|
}
|
|
2683
2504
|
click(event, xScales, yScales) {
|
|
2684
|
-
const x = xScales.get(0);
|
|
2685
|
-
const y = yScales.get(0);
|
|
2505
|
+
const x = xScales.get(0).scale;
|
|
2506
|
+
const y = yScales.get(0).scale;
|
|
2686
2507
|
this._svc.emitChartClick({
|
|
2687
2508
|
event: event,
|
|
2688
2509
|
target: {
|
|
@@ -2692,8 +2513,8 @@ class ChartContainerComponent {
|
|
|
2692
2513
|
});
|
|
2693
2514
|
}
|
|
2694
2515
|
contextMenu(event, xScales, yScales) {
|
|
2695
|
-
const x = xScales.get(0);
|
|
2696
|
-
const y = yScales.get(0);
|
|
2516
|
+
const x = xScales.get(0).scale;
|
|
2517
|
+
const y = yScales.get(0).scale;
|
|
2697
2518
|
this._svc.emitChartContextMenu({
|
|
2698
2519
|
event: event,
|
|
2699
2520
|
target: {
|
|
@@ -2710,10 +2531,10 @@ class ChartContainerComponent {
|
|
|
2710
2531
|
}
|
|
2711
2532
|
}
|
|
2712
2533
|
ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2713
|
-
ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n
|
|
2534
|
+
ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n scales: scales | 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.scales.x && data.scales.y\">\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n <ng-container *ngIf=\"item.value.options.visible\">\n <g\n teta-y-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [scale]=\"data.scales.y.get(item.key).scale\"\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 </ng-container>\n\n </ng-container>\n </g>\n <g class=\"x-axis-container\">\n <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n <ng-container *ngIf=\"item.value.options.visible && data.scales.x && data.scales.y\">\n <g\n teta-x-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [scale]=\"data.scales.x.get(item.key).scale\"\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 </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.scales.x && data.scales.y\">\n <svg\n tetaBrushable\n tetaZoomable\n class=\"position-absolute\"\n [size]=\"data.visibleRect\"\n [brushScale]=\"data.brushScale\"\n [scale]=\"data.brushScale\"\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\n <g class=\"gridlines\"\n teta-gridlines\n *ngIf=\"data.config.gridLines?.enable !== false\"\n [size]=\"data.size\"></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.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"series-container\">\n <ng-container *ngFor=\"let series of data.config.series\">\n <g teta-series-host\n *ngIf=\"series.visible\"\n [config]=\"data.config\"\n [series]=\"series\"></g>\n </ng-container>\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 <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size", "brushScale", "scale"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "brushScale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2714
2535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, decorators: [{
|
|
2715
2536
|
type: Component,
|
|
2716
|
-
args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n
|
|
2537
|
+
args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n size: size | async,\n config: config | async,\n scales: scales | 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.scales.x && data.scales.y\">\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n <ng-container *ngIf=\"item.value.options.visible\">\n <g\n teta-y-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [scale]=\"data.scales.y.get(item.key).scale\"\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 </ng-container>\n\n </ng-container>\n </g>\n <g class=\"x-axis-container\">\n <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n <ng-container *ngIf=\"item.value.options.visible && data.scales.x && data.scales.y\">\n <g\n teta-x-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect\n tetaZoomable\n fill-opacity=\"0\"\n [brushScale]=\"data.brushScale\"\n [scale]=\"data.scales.x.get(item.key).scale\"\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 </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.scales.x && data.scales.y\">\n <svg\n tetaBrushable\n tetaZoomable\n class=\"position-absolute\"\n [size]=\"data.visibleRect\"\n [brushScale]=\"data.brushScale\"\n [scale]=\"data.brushScale\"\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\n <g class=\"gridlines\"\n teta-gridlines\n *ngIf=\"data.config.gridLines?.enable !== false\"\n [size]=\"data.size\"></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.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.y.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.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.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.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.get(i)\"></g>\n </ng-container>\n </g>\n <g class=\"series-container\">\n <ng-container *ngFor=\"let series of data.config.series\">\n <g teta-series-host\n *ngIf=\"series.visible\"\n [config]=\"data.config\"\n [series]=\"series\"></g>\n </ng-container>\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 <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n <g teta-crosshair [size]=\"data.visibleRect\"></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}:host .crosshair{cursor:crosshair}\n"] }]
|
|
2717
2538
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
|
|
2718
2539
|
|
|
2719
2540
|
class LegendComponent {
|
|
@@ -2776,15 +2597,15 @@ class ChartComponent {
|
|
|
2776
2597
|
}
|
|
2777
2598
|
ngOnInit() {
|
|
2778
2599
|
this.chartService.pointerMove
|
|
2779
|
-
.pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.
|
|
2600
|
+
.pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.scales, this.chartService.config))
|
|
2780
2601
|
.subscribe((data) => {
|
|
2781
2602
|
var _a;
|
|
2782
|
-
const [event, x, y, config] = data;
|
|
2603
|
+
const [event, { x, y }, config] = data;
|
|
2783
2604
|
const tooltipTracking = (_a = config === null || config === void 0 ? void 0 : config.tooltip) === null || _a === void 0 ? void 0 : _a.tracking;
|
|
2784
2605
|
if (tooltipTracking === TooltipTracking.y) {
|
|
2785
2606
|
const result = new Map();
|
|
2786
2607
|
y.forEach((value, key) => {
|
|
2787
|
-
result.set(key, value.invert(event.offsetY));
|
|
2608
|
+
result.set(key, value.scale.invert(event.offsetY));
|
|
2788
2609
|
});
|
|
2789
2610
|
this.pointerMove.emit({
|
|
2790
2611
|
event: event,
|
|
@@ -2794,7 +2615,7 @@ class ChartComponent {
|
|
|
2794
2615
|
else {
|
|
2795
2616
|
const result = new Map();
|
|
2796
2617
|
x.forEach((value, key) => {
|
|
2797
|
-
result.set(key, value.invert(event.offsetX));
|
|
2618
|
+
result.set(key, value.scale.invert(event.offsetX));
|
|
2798
2619
|
});
|
|
2799
2620
|
this.pointerMove.emit({
|
|
2800
2621
|
event: event,
|