@tetacom/svg-charts 1.1.21 → 1.1.22
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/chart.component.d.ts +3 -3
- package/chart/chart-container/series/block-area-series/block-area-series.component.d.ts +1 -0
- package/chart/chart-container/series/block-series/block-series.component.d.ts +1 -0
- package/esm2020/chart/chart/chart.component.mjs +6 -6
- package/esm2020/chart/chart-container/series/block-area-series/block-area-series.component.mjs +9 -11
- package/esm2020/chart/chart-container/series/block-series/block-series.component.mjs +8 -10
- package/esm2020/chart/chart-container/tooltip/tooltip.component.mjs +8 -2
- package/esm2020/chart/core/axis/axis.mjs +2 -2
- package/fesm2015/tetacom-svg-charts.mjs +27 -26
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +27 -26
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -381,7 +381,7 @@ class Axis {
|
|
|
381
381
|
this._extremes = [0, 0];
|
|
382
382
|
this.defaultFormatters = new Map()
|
|
383
383
|
.set(ScaleType.linear, d3.format(',.2f'))
|
|
384
|
-
.set(ScaleType.time, d3.timeFormat('%
|
|
384
|
+
.set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
|
|
385
385
|
.set(ScaleType.log, d3.format(',.2f'))
|
|
386
386
|
.set(ScaleType.pow, d3.format(',.2f'))
|
|
387
387
|
.set(ScaleType.sqrt, d3.format(',.2f'));
|
|
@@ -831,11 +831,16 @@ class TooltipComponent {
|
|
|
831
831
|
};
|
|
832
832
|
const defaultFormatter = (tooltips) => {
|
|
833
833
|
let html = '';
|
|
834
|
+
const format = d3.timeFormat('%d.%m.%Y');
|
|
834
835
|
tooltips.forEach((_) => {
|
|
835
836
|
const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${_?.series?.color}`;
|
|
836
837
|
html += `<div class="display-flex align-center"><span class="margin-right-1" style="${indicatorStyle}"></span>
|
|
837
838
|
<span class="font-title-3">${_.series.name}
|
|
838
|
-
|
|
839
|
+
<span class="font-body-3">
|
|
840
|
+
x: ${_.point.x instanceof Date ? format(_.point.x) : _.point.x?.toFixed(2)}
|
|
841
|
+
y: ${_.point.y instanceof Date ? format(_.point.y) : _.point.y?.toFixed(2)}
|
|
842
|
+
</span>
|
|
843
|
+
</span></div>`;
|
|
839
844
|
});
|
|
840
845
|
return transformHtml(html);
|
|
841
846
|
};
|
|
@@ -1563,6 +1568,7 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1563
1568
|
this.zoomService = zoomService;
|
|
1564
1569
|
this.element = element;
|
|
1565
1570
|
this.fillType = FillType;
|
|
1571
|
+
this.Math = Math;
|
|
1566
1572
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1567
1573
|
}
|
|
1568
1574
|
ngOnInit() {
|
|
@@ -1571,18 +1577,15 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1571
1577
|
this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
|
|
1572
1578
|
this.displayPoints = this.y.pipe(map((y) => {
|
|
1573
1579
|
return this.series.data.filter((point, index, arr) => {
|
|
1574
|
-
const height = Math.abs(y(point.y1) - y(point.y));
|
|
1575
1580
|
const [min, max] = y.domain();
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
arr[index + 1]?.y1 >= min) &&
|
|
1581
|
+
return (point.y >= min ||
|
|
1582
|
+
point.y1 >= min ||
|
|
1583
|
+
arr[index + 1]?.y >= min ||
|
|
1584
|
+
arr[index + 1]?.y1 >= min) &&
|
|
1581
1585
|
(point.y <= max ||
|
|
1582
1586
|
point.y1 <= max ||
|
|
1583
1587
|
arr[index - 1]?.y <= max ||
|
|
1584
1588
|
arr[index - 1]?.y1 <= max);
|
|
1585
|
-
return visibleCondition;
|
|
1586
1589
|
});
|
|
1587
1590
|
}));
|
|
1588
1591
|
}
|
|
@@ -1602,10 +1605,10 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1602
1605
|
}
|
|
1603
1606
|
}
|
|
1604
1607
|
BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1605
|
-
BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n x=\"0\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n width=\"100%\">\n </svg:rect>\n <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1608
|
+
BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n x=\"0\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n width=\"100%\">\n </svg:rect>\n <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1606
1609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockSeriesComponent, decorators: [{
|
|
1607
1610
|
type: Component,
|
|
1608
|
-
args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n x=\"0\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n width=\"100%\">\n </svg:rect>\n <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
|
|
1611
|
+
args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n x=\"0\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n width=\"100%\">\n </svg:rect>\n <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
|
|
1609
1612
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1610
1613
|
|
|
1611
1614
|
class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1617,26 +1620,24 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1617
1620
|
this.zoomService = zoomService;
|
|
1618
1621
|
this.element = element;
|
|
1619
1622
|
this.fillType = FillType;
|
|
1623
|
+
this.Math = Math;
|
|
1620
1624
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1621
1625
|
}
|
|
1622
1626
|
ngOnInit() {
|
|
1623
|
-
const defaultVisiblePixels =
|
|
1627
|
+
const defaultVisiblePixels = 0;
|
|
1624
1628
|
this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
|
|
1625
1629
|
this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
|
|
1626
1630
|
this.displayPoints = this.y.pipe(map((y) => {
|
|
1627
1631
|
return this.series.data.filter((point, index, arr) => {
|
|
1628
|
-
const height = Math.abs(y(point.y1) - y(point.y));
|
|
1629
1632
|
const [min, max] = y.domain();
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
arr[index + 1]?.y1 >= min) &&
|
|
1633
|
+
return (point.y >= min ||
|
|
1634
|
+
point.y1 >= min ||
|
|
1635
|
+
arr[index + 1]?.y >= min ||
|
|
1636
|
+
arr[index + 1]?.y1 >= min) &&
|
|
1635
1637
|
(point.y <= max ||
|
|
1636
1638
|
point.y1 <= max ||
|
|
1637
1639
|
arr[index - 1]?.y <= max ||
|
|
1638
1640
|
arr[index - 1]?.y1 <= max);
|
|
1639
|
-
return visibleCondition;
|
|
1640
1641
|
});
|
|
1641
1642
|
}));
|
|
1642
1643
|
}
|
|
@@ -1656,10 +1657,10 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1656
1657
|
}
|
|
1657
1658
|
}
|
|
1658
1659
|
BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1659
|
-
BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n *ngIf=\"!!config.inverted\"\n [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:rect\n *ngIf=\"!config.inverted\"\n [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"data.y(0)\"\n [attr.height]=\"data.y(0) - data.y(point.y)\"\n [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:text *ngIf=\"point.text\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1660
|
+
BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n *ngIf=\"!!config.inverted\"\n [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:rect\n *ngIf=\"!config.inverted\"\n [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"data.y(0)\"\n [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:text *ngIf=\"point.text\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1660
1661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
|
|
1661
1662
|
type: Component,
|
|
1662
|
-
args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n *ngIf=\"!!config.inverted\"\n [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"data.y(point.y1) - data.y(point.y)\"\n [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:rect\n *ngIf=\"!config.inverted\"\n [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"data.y(0)\"\n [attr.height]=\"data.y(0) - data.y(point.y)\"\n [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:text *ngIf=\"point.text\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
|
|
1663
|
+
args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async,\n points: displayPoints | async\n} as data\">\n <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n y2=\"0%\">\n <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.9\"></svg:stop>\n </svg:linearGradient>\n </svg:defs>\n <ng-container *ngFor=\"let point of data.points\">\n <svg:g (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\">\n <svg:rect\n *ngIf=\"!!config.inverted\"\n [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n [attr.y]=\"data.y(point.y)\"\n [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:rect\n *ngIf=\"!config.inverted\"\n [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"data.y(0)\"\n [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\">\n </svg:rect>\n <svg:text *ngIf=\"point.text\"\n x=\"50%\"\n [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n alignment-baseline=\"middle\"\n text-anchor=\"middle\">{{ point.text }}\n </svg:text>\n\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n <!-- <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n </svg:g>\n </ng-container>\n\n\n</ng-container>\n", styles: [""] }]
|
|
1663
1664
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1664
1665
|
|
|
1665
1666
|
class AreaSeriesComponent extends LinearSeriesBase {
|
|
@@ -2245,10 +2246,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
2245
2246
|
}] } });
|
|
2246
2247
|
|
|
2247
2248
|
class ChartComponent {
|
|
2248
|
-
constructor(chartService,
|
|
2249
|
+
constructor(chartService, zoomService, scaleService) {
|
|
2249
2250
|
this.chartService = chartService;
|
|
2250
|
-
this.
|
|
2251
|
-
this.
|
|
2251
|
+
this.zoomService = zoomService;
|
|
2252
|
+
this.scaleService = scaleService;
|
|
2252
2253
|
this.pointerMove = new EventEmitter();
|
|
2253
2254
|
this.plotBandsMove = new EventEmitter();
|
|
2254
2255
|
this.plotBandClick = new EventEmitter();
|
|
@@ -2271,7 +2272,7 @@ class ChartComponent {
|
|
|
2271
2272
|
}
|
|
2272
2273
|
ngOnInit() {
|
|
2273
2274
|
this.chartService.pointerMove
|
|
2274
|
-
.pipe(takeWhile(() => this._alive), withLatestFrom(this.
|
|
2275
|
+
.pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap, this.chartService.config))
|
|
2275
2276
|
.subscribe((data) => {
|
|
2276
2277
|
const [event, x, y, config] = data;
|
|
2277
2278
|
const tooltipTracking = config?.tooltip?.tracking;
|
|
@@ -2345,7 +2346,7 @@ class ChartComponent {
|
|
|
2345
2346
|
}
|
|
2346
2347
|
ngOnDestroy() {
|
|
2347
2348
|
this._alive = false;
|
|
2348
|
-
this.
|
|
2349
|
+
this.zoomService.broadcastSubscription?.forEach((sub) => {
|
|
2349
2350
|
sub.unsubscribe();
|
|
2350
2351
|
});
|
|
2351
2352
|
}
|