@tetacom/svg-charts 1.7.28 → 1.7.30

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/README.md CHANGED
@@ -1,7 +1,3 @@
1
1
  # chart
2
2
 
3
3
  This library was generated with [Nx](https://nx.dev).
4
-
5
- ## Running unit tests
6
-
7
- Run `nx test chart` to execute the unit tests.
@@ -1261,11 +1261,11 @@ class XAxisComponent {
1261
1261
  });
1262
1262
  }
1263
1263
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1264
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ({\n x: x(),\n ticks: ticks(),\n axis: axis()\n}; as data) {\n @for (tick of data.ticks; track $index) {\n <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n <text\n fill=\"var(--color-text-70)\"\n [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n >\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.axis.options.opposite ? -6 : 6\"></line>\n </svg:g>\n }\n <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1264
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: XAxisComponent, isStandalone: true, selector: "[teta-x-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (\n {\n x: x(),\n ticks: ticks(),\n axis: axis(),\n };\n as data\n) {\n @for (tick of data.ticks; track $index) {\n <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n <text\n fill=\"var(--color-text-70)\"\n [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n >\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.axis.options.opposite ? -6 : 6\"></line>\n </svg:g>\n }\n <svg:g class=\"font-caption\" style=\"fill: var(--color-text-70)\" [attr.transform]=\"getLabelTransform()\">\n <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1265
1265
  }
1266
1266
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: XAxisComponent, decorators: [{
1267
1267
  type: Component,
1268
- args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n x: x(),\n ticks: ticks(),\n axis: axis()\n}; as data) {\n @for (tick of data.ticks; track $index) {\n <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n <text\n fill=\"var(--color-text-70)\"\n [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n >\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.axis.options.opposite ? -6 : 6\"></line>\n </svg:g>\n }\n <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
1268
+ args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\n {\n x: x(),\n ticks: ticks(),\n axis: axis(),\n };\n as data\n) {\n @for (tick of data.ticks; track $index) {\n <svg:g text-anchor=\"middle\" [attr.transform]=\"'translate(' + data.x(tick) + ', 0)'\">\n <text\n fill=\"var(--color-text-70)\"\n [attr.dy]=\"data.axis.options.opposite ? '-0.71em' : '0.71em'\"\n [attr.y]=\"data.axis.options.opposite ? 0 : 9\"\n >\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.y2]=\"data.axis.options.opposite ? -6 : 6\"></line>\n </svg:g>\n }\n <svg:g class=\"font-caption\" style=\"fill: var(--color-text-70)\" [attr.transform]=\"getLabelTransform()\">\n <text fill=\"var(--color-text-70)\" text-anchor=\"middle\" dominant-baseline=\"middle\">\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
1269
1269
  }] });
1270
1270
 
1271
1271
  class ZoomableDirective {
@@ -1516,11 +1516,11 @@ class YAxisComponent {
1516
1516
  });
1517
1517
  }
1518
1518
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1519
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ({\n y: y(),\n axis: axis()\n}; as data) {\n @for (tick of data.y.ticks(); track $index) {\n <svg:g\n [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n >\n <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n </svg:g>\n }\n <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n <text\n [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n text-anchor=\"middle\"\n [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n >\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1519
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: YAxisComponent, isStandalone: true, selector: "[teta-y-axis]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (\n {\n y: y(),\n axis: axis(),\n };\n as data\n) {\n @for (tick of data.y.ticks(); track $index) {\n <svg:g\n [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n >\n <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n </svg:g>\n }\n <svg:g class=\"font-caption\" style=\"fill: var(--color-text-70)\" [attr.transform]=\"getLabelTransform()\">\n <text\n [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n text-anchor=\"middle\"\n [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n >\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1520
1520
  }
1521
1521
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: YAxisComponent, decorators: [{
1522
1522
  type: Component,
1523
- args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ({\n y: y(),\n axis: axis()\n}; as data) {\n @for (tick of data.y.ticks(); track $index) {\n <svg:g\n [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n >\n <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n </svg:g>\n }\n <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n <text\n [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n text-anchor=\"middle\"\n [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n >\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
1523
+ args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (\n {\n y: y(),\n axis: axis(),\n };\n as data\n) {\n @for (tick of data.y.ticks(); track $index) {\n <svg:g\n [attr.text-anchor]=\"data.axis.options.opposite ? 'start' : 'end'\"\n [attr.transform]=\"'translate(0, ' + data.y(tick) + ')'\"\n >\n <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"data.axis.options.opposite ? 10 : -9\">\n {{ data.axis.options.tickFormat ? data.axis.options.tickFormat(tick) : data.axis.defaultFormatter()(tick) }}\n </text>\n <line stroke=\"var(--color-text-30)\" [attr.x2]=\"data.axis.options.opposite ? 6 : -6\"></line>\n </svg:g>\n }\n <svg:g class=\"font-caption\" style=\"fill: var(--color-text-70)\" [attr.transform]=\"getLabelTransform()\">\n <text\n [attr.dy]=\"data.axis.options.opposite ? '-4px' : '4px'\"\n text-anchor=\"middle\"\n [attr.dominant-baseline]=\"data.axis.options.opposite ? 'auto' : 'hanging'\"\n >\n {{ data.axis.options.title }}\n </text>\n </svg:g>\n}\n", styles: [":host{shape-rendering:crispEdges}\n"] }]
1524
1524
  }] });
1525
1525
 
1526
1526
  class PlotBandComponent {
@@ -1840,6 +1840,7 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
1840
1840
  return rV;
1841
1841
  };
1842
1842
  if (tooltipTracking === TooltipTracking.x) {
1843
+ const sortedData = [...this.series().data].sort((a, b) => a.x - b.x);
1843
1844
  const bisect = d3.bisector((_) => _.x).right;
1844
1845
  const pointer = mouse[0];
1845
1846
  let x0 = scaleX.invert(pointer);
@@ -1848,7 +1849,7 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
1848
1849
  }
1849
1850
  const rightId = bisect([...this.series().data].sort((a, b) => a.x - b.x), x0);
1850
1851
  const range = scaleY.range();
1851
- const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(this.series().data[rightId - 1]?.x), scaleY(this.series().data[rightId - 1]?.y), scaleX(this.series().data[rightId]?.x), scaleY(this.series().data[rightId]?.y));
1852
+ const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX(sortedData[rightId - 1]?.x), scaleY(sortedData[rightId - 1]?.y), scaleX(sortedData[rightId]?.x), scaleY(sortedData[rightId]?.y));
1852
1853
  const x = scaleX.invert(intersect.x);
1853
1854
  const y = scaleY.invert(intersect.y);
1854
1855
  if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
@@ -1872,14 +1873,15 @@ class LinearSeriesBaseComponent extends SeriesBaseComponent {
1872
1873
  };
1873
1874
  }
1874
1875
  if (tooltipTracking === TooltipTracking.y) {
1876
+ const sortedData = [...this.series().data].sort((a, b) => a.y - b.y);
1875
1877
  const bisect = d3.bisector((_) => _.y).right;
1876
1878
  let y0 = scaleY.invert(mouse[1]);
1877
1879
  if (y0 instanceof Date) {
1878
1880
  y0 = y0.getTime();
1879
1881
  }
1880
- const rightId = bisect([...this.series().data].sort((a, b) => a.y - b.y), y0);
1882
+ const rightId = bisect(sortedData, y0);
1881
1883
  const range = scaleX.range();
1882
- const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(this.series().data[rightId - 1]?.x), scaleY(this.series().data[rightId - 1]?.y), scaleX(this.series().data[rightId]?.x), scaleY(this.series().data[rightId]?.y));
1884
+ const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX(sortedData[rightId - 1]?.x), scaleY(sortedData[rightId - 1]?.y), scaleX(sortedData[rightId]?.x), scaleY(sortedData[rightId]?.y));
1883
1885
  const x = scaleX.invert(intersect.x);
1884
1886
  const y = scaleY.invert(intersect.y);
1885
1887
  if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {