@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
|
@@ -373,7 +373,7 @@ class Axis {
|
|
|
373
373
|
this._extremes = [0, 0];
|
|
374
374
|
this.defaultFormatters = new Map()
|
|
375
375
|
.set(ScaleType.linear, d3.format(',.2f'))
|
|
376
|
-
.set(ScaleType.time, d3.timeFormat('%
|
|
376
|
+
.set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
|
|
377
377
|
.set(ScaleType.log, d3.format(',.2f'))
|
|
378
378
|
.set(ScaleType.pow, d3.format(',.2f'))
|
|
379
379
|
.set(ScaleType.sqrt, d3.format(',.2f'));
|
|
@@ -833,12 +833,17 @@ class TooltipComponent {
|
|
|
833
833
|
};
|
|
834
834
|
const defaultFormatter = (tooltips) => {
|
|
835
835
|
let html = '';
|
|
836
|
+
const format = d3.timeFormat('%d.%m.%Y');
|
|
836
837
|
tooltips.forEach((_) => {
|
|
837
838
|
var _a, _b, _c;
|
|
838
839
|
const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${(_a = _ === null || _ === void 0 ? void 0 : _.series) === null || _a === void 0 ? void 0 : _a.color}`;
|
|
839
840
|
html += `<div class="display-flex align-center"><span class="margin-right-1" style="${indicatorStyle}"></span>
|
|
840
841
|
<span class="font-title-3">${_.series.name}
|
|
841
|
-
|
|
842
|
+
<span class="font-body-3">
|
|
843
|
+
x: ${_.point.x instanceof Date ? format(_.point.x) : (_b = _.point.x) === null || _b === void 0 ? void 0 : _b.toFixed(2)}
|
|
844
|
+
y: ${_.point.y instanceof Date ? format(_.point.y) : (_c = _.point.y) === null || _c === void 0 ? void 0 : _c.toFixed(2)}
|
|
845
|
+
</span>
|
|
846
|
+
</span></div>`;
|
|
842
847
|
});
|
|
843
848
|
return transformHtml(html);
|
|
844
849
|
};
|
|
@@ -1576,6 +1581,7 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1576
1581
|
this.zoomService = zoomService;
|
|
1577
1582
|
this.element = element;
|
|
1578
1583
|
this.fillType = FillType;
|
|
1584
|
+
this.Math = Math;
|
|
1579
1585
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1580
1586
|
}
|
|
1581
1587
|
ngOnInit() {
|
|
@@ -1585,18 +1591,15 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1585
1591
|
this.displayPoints = this.y.pipe(map((y) => {
|
|
1586
1592
|
return this.series.data.filter((point, index, arr) => {
|
|
1587
1593
|
var _a, _b, _c, _d;
|
|
1588
|
-
const height = Math.abs(y(point.y1) - y(point.y));
|
|
1589
1594
|
const [min, max] = y.domain();
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
|
|
1595
|
+
return (point.y >= min ||
|
|
1596
|
+
point.y1 >= min ||
|
|
1597
|
+
((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
|
|
1598
|
+
((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
|
|
1595
1599
|
(point.y <= max ||
|
|
1596
1600
|
point.y1 <= max ||
|
|
1597
1601
|
((_c = arr[index - 1]) === null || _c === void 0 ? void 0 : _c.y) <= max ||
|
|
1598
1602
|
((_d = arr[index - 1]) === null || _d === void 0 ? void 0 : _d.y1) <= max);
|
|
1599
|
-
return visibleCondition;
|
|
1600
1603
|
});
|
|
1601
1604
|
}));
|
|
1602
1605
|
}
|
|
@@ -1616,10 +1619,10 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1616
1619
|
}
|
|
1617
1620
|
}
|
|
1618
1621
|
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 });
|
|
1619
|
-
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 });
|
|
1622
|
+
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 });
|
|
1620
1623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockSeriesComponent, decorators: [{
|
|
1621
1624
|
type: Component,
|
|
1622
|
-
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: [""] }]
|
|
1625
|
+
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: [""] }]
|
|
1623
1626
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1624
1627
|
|
|
1625
1628
|
class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1631,27 +1634,25 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1631
1634
|
this.zoomService = zoomService;
|
|
1632
1635
|
this.element = element;
|
|
1633
1636
|
this.fillType = FillType;
|
|
1637
|
+
this.Math = Math;
|
|
1634
1638
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1635
1639
|
}
|
|
1636
1640
|
ngOnInit() {
|
|
1637
|
-
const defaultVisiblePixels =
|
|
1641
|
+
const defaultVisiblePixels = 0;
|
|
1638
1642
|
this.x = this.scaleService.xScaleMap.pipe(map((_) => _.get(this.series.xAxisIndex)));
|
|
1639
1643
|
this.y = this.scaleService.yScaleMap.pipe(map((_) => _.get(this.series.yAxisIndex)));
|
|
1640
1644
|
this.displayPoints = this.y.pipe(map((y) => {
|
|
1641
1645
|
return this.series.data.filter((point, index, arr) => {
|
|
1642
1646
|
var _a, _b, _c, _d;
|
|
1643
|
-
const height = Math.abs(y(point.y1) - y(point.y));
|
|
1644
1647
|
const [min, max] = y.domain();
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
|
|
1648
|
+
return (point.y >= min ||
|
|
1649
|
+
point.y1 >= min ||
|
|
1650
|
+
((_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.y) >= min ||
|
|
1651
|
+
((_b = arr[index + 1]) === null || _b === void 0 ? void 0 : _b.y1) >= min) &&
|
|
1650
1652
|
(point.y <= max ||
|
|
1651
1653
|
point.y1 <= max ||
|
|
1652
1654
|
((_c = arr[index - 1]) === null || _c === void 0 ? void 0 : _c.y) <= max ||
|
|
1653
1655
|
((_d = arr[index - 1]) === null || _d === void 0 ? void 0 : _d.y1) <= max);
|
|
1654
|
-
return visibleCondition;
|
|
1655
1656
|
});
|
|
1656
1657
|
}));
|
|
1657
1658
|
}
|
|
@@ -1671,10 +1672,10 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1671
1672
|
}
|
|
1672
1673
|
}
|
|
1673
1674
|
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 });
|
|
1674
|
-
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 });
|
|
1675
|
+
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 });
|
|
1675
1676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
|
|
1676
1677
|
type: Component,
|
|
1677
|
-
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: [""] }]
|
|
1678
|
+
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: [""] }]
|
|
1678
1679
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1679
1680
|
|
|
1680
1681
|
class AreaSeriesComponent extends LinearSeriesBase {
|
|
@@ -2272,10 +2273,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
2272
2273
|
}] } });
|
|
2273
2274
|
|
|
2274
2275
|
class ChartComponent {
|
|
2275
|
-
constructor(chartService,
|
|
2276
|
+
constructor(chartService, zoomService, scaleService) {
|
|
2276
2277
|
this.chartService = chartService;
|
|
2277
|
-
this.
|
|
2278
|
-
this.
|
|
2278
|
+
this.zoomService = zoomService;
|
|
2279
|
+
this.scaleService = scaleService;
|
|
2279
2280
|
this.pointerMove = new EventEmitter();
|
|
2280
2281
|
this.plotBandsMove = new EventEmitter();
|
|
2281
2282
|
this.plotBandClick = new EventEmitter();
|
|
@@ -2298,7 +2299,7 @@ class ChartComponent {
|
|
|
2298
2299
|
}
|
|
2299
2300
|
ngOnInit() {
|
|
2300
2301
|
this.chartService.pointerMove
|
|
2301
|
-
.pipe(takeWhile(() => this._alive), withLatestFrom(this.
|
|
2302
|
+
.pipe(takeWhile(() => this._alive), withLatestFrom(this.scaleService.xScaleMap, this.scaleService.yScaleMap, this.chartService.config))
|
|
2302
2303
|
.subscribe((data) => {
|
|
2303
2304
|
var _a;
|
|
2304
2305
|
const [event, x, y, config] = data;
|
|
@@ -2374,7 +2375,7 @@ class ChartComponent {
|
|
|
2374
2375
|
ngOnDestroy() {
|
|
2375
2376
|
var _a;
|
|
2376
2377
|
this._alive = false;
|
|
2377
|
-
(_a = this.
|
|
2378
|
+
(_a = this.zoomService.broadcastSubscription) === null || _a === void 0 ? void 0 : _a.forEach((sub) => {
|
|
2378
2379
|
sub.unsubscribe();
|
|
2379
2380
|
});
|
|
2380
2381
|
}
|