@tetacom/svg-charts 1.2.4 → 1.2.5

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.
Files changed (25) hide show
  1. package/chart/chart-container/chart-container.component.d.ts +2 -2
  2. package/chart/model/i-scales-map.d.ts +5 -0
  3. package/chart/model/public-api.d.ts +1 -0
  4. package/chart/service/scale.service.d.ts +2 -7
  5. package/esm2020/chart/chart/chart.component.mjs +5 -5
  6. package/esm2020/chart/chart-container/annotation/annotation.component.mjs +3 -3
  7. package/esm2020/chart/chart-container/chart-container.component.mjs +15 -22
  8. package/esm2020/chart/chart-container/gridlines/gridlines.component.mjs +7 -7
  9. package/esm2020/chart/chart-container/series/area-series/area-series.component.mjs +4 -7
  10. package/esm2020/chart/chart-container/series/bar/bar-series.component.mjs +5 -5
  11. package/esm2020/chart/chart-container/series/block-area-series/block-area-series.component.mjs +3 -3
  12. package/esm2020/chart/chart-container/series/block-series/block-series.component.mjs +3 -3
  13. package/esm2020/chart/chart-container/series/linear-series-base.mjs +6 -9
  14. package/esm2020/chart/chart-container/series/scatter-series/scatter-series.component.mjs +3 -3
  15. package/esm2020/chart/chart-container/x-axis/x-axis.component.mjs +3 -3
  16. package/esm2020/chart/chart-container/y-axis/y-axis.component.mjs +3 -3
  17. package/esm2020/chart/directives/brushable.directive.mjs +1 -1
  18. package/esm2020/chart/model/i-scales-map.mjs +2 -0
  19. package/esm2020/chart/model/public-api.mjs +2 -1
  20. package/esm2020/chart/service/scale.service.mjs +9 -170
  21. package/fesm2015/tetacom-svg-charts.mjs +56 -235
  22. package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
  23. package/fesm2020/tetacom-svg-charts.mjs +52 -226
  24. package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
  25. 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.xAxisMap = combineLatest([
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
- return xAxisMap;
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
- ((_a = config === null || config === void 0 ? void 0 : config.bounds) === null || _a === void 0 ? void 0 : _a.top) -
807
- ((_b = config.bounds) === null || _b === void 0 ? void 0 : _b.bottom);
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 (((_c = zoom.target) === null || _c === void 0 ? void 0 : _c.orientation) === AxisOrientation.y) {
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 yAxisMap;
850
- }), shareReplay({
851
- bufferSize: 1,
852
- refCount: true,
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.xMap, this.scaleService.yMap), map((data) => {
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 = combineLatest([
1228
- this.scaleService.xMap,
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.xMap.pipe(map((_) => {
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.xMap.pipe(map((_) => _.get(this.series.xAxisIndex).scale));
1454
- this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.series.yAxisIndex).scale));
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.xMap.pipe(map(_ => _.get(this.series.xAxisIndex).scale));
1488
- this.y = this.scaleService.yMap.pipe(map(_ => _.get(this.series.yAxisIndex).scale));
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.xMap.pipe(map((_) => _.get(this.series.xAxisIndex).scale));
1527
- this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.series.yAxisIndex).scale));
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.xMap.pipe(map((_) => _.get(this.series.xAxisIndex).scale));
1580
- this.y = this.scaleService.yMap.pipe(map((_) => _.get(this.series.yAxisIndex).scale));
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 = combineLatest([
1633
- this.scaleService.xMap,
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.yMap.pipe(map((_) => {
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.xMap.pipe(map((_) => {
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.yMap.pipe(map((_) => _.get(0).scale));
1737
- this.x = this.svc.xMap.pipe(map((_) => _.get(0).scale));
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.xMap.pipe(map((_) => {
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.yMap.pipe(map((_) => {
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() { }
@@ -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.xMap.pipe(map((_) => { var _a; return _.get((_a = this.annotation.xAxisIndex) !== null && _a !== void 0 ? _a : 0).scale; }));
2457
- this.y = this.scaleService.yMap.pipe(map((_) => { var _a; return _.get((_a = this.annotation.yAxisIndex) !== null && _a !== void 0 ? _a : 0).scale; }));
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.yMap = this._scaleService.yMap.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
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 = combineLatest([
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 [[x, y], config] = data;
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.xMap, this.yMap)).pipe(withLatestFrom(this.config), map((data) => {
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 = [...y.values()];
2594
- const xAxesArray = [...x.values()];
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 combineLatest([this.xMap, this.yMap]).pipe(withLatestFrom(this.config), map((data) => {
2467
+ return this.scales.pipe(withLatestFrom(this.config), map((data) => {
2647
2468
  var _a, _b;
2648
- const [[x, y], config] = data;
2649
- const xAxesArray = [...x.values()];
2650
- const yAxesArray = [...y.values()];
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));
@@ -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 yMap: yMap | async,\n xMap: xMap | 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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n <ng-container *ngFor=\"let item of data.yMap | 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.yMap.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.xMap | keyvalue; trackBy: identify\">\n <ng-container *ngIf=\"item.value.options.visible && data.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\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.xMap.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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\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.xMap.get(0) : data.yMap.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.xMap, data.yMap)\"\n (click)=\"click($event, data.xMap, data.yMap)\"\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.xMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.xMap.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.yMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.yMap.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.xMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.xMap.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.yMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.yMap.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 });
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 yMap: yMap | async,\n xMap: xMap | 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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n <ng-container *ngFor=\"let item of data.yMap | 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.yMap.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.xMap | keyvalue; trackBy: identify\">\n <ng-container *ngIf=\"item.value.options.visible && data.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\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.xMap.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.xMap.size === data.config?.xAxis?.length && data.yMap.size === data.config?.yAxis?.length\">\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.xMap.get(0) : data.yMap.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.xMap, data.yMap)\"\n (click)=\"click($event, data.xMap, data.yMap)\"\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.xMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.xMap.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.yMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.yMap.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.xMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.xMap.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.yMap.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.yMap.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"] }]
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.xScaleMap, this.scaleService.yScaleMap, this.chartService.config))
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,