@tetacom/svg-charts 1.4.25 → 1.4.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chart/chart-container/series/area-series/area-series.component.d.ts +3 -3
- package/chart/chart-container/series/linear-series-base.d.ts +4 -4
- package/chart/chart-container/series/public-api.d.ts +1 -0
- package/chart/chart-container/tooltip/tooltip.component.d.ts +3 -3
- package/esm2022/chart/chart-container/series/area-series/area-series.component.mjs +11 -11
- package/esm2022/chart/chart-container/series/linear-series-base.mjs +37 -18
- package/esm2022/chart/chart-container/series/public-api.mjs +2 -1
- package/esm2022/chart/chart-container/tooltip/tooltip.component.mjs +15 -11
- package/fesm2022/tetacom-svg-charts.mjs +53 -30
- package/fesm2022/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1005,7 +1005,11 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1005
1005
|
_update = new BehaviorSubject(null);
|
|
1006
1006
|
set series(series) {
|
|
1007
1007
|
this.__series = series;
|
|
1008
|
-
this.markers = this.__series.data?.filter(
|
|
1008
|
+
this.markers = this.__series.data?.filter(_ => _?.marker &&
|
|
1009
|
+
_?.x !== undefined &&
|
|
1010
|
+
_?.y !== undefined &&
|
|
1011
|
+
_?.x !== null &&
|
|
1012
|
+
_?.y !== null);
|
|
1009
1013
|
}
|
|
1010
1014
|
get series() {
|
|
1011
1015
|
return this.__series;
|
|
@@ -1022,26 +1026,26 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1022
1026
|
const filterX = (min, max) => (point, idx, arr) => {
|
|
1023
1027
|
const bigger = min > max ? min : max;
|
|
1024
1028
|
const smaller = min > max ? max : min;
|
|
1025
|
-
return (point.x <= bigger ||
|
|
1029
|
+
return ((point.x <= bigger ||
|
|
1026
1030
|
point.x1 <= bigger ||
|
|
1027
1031
|
(arr[idx - 1] && arr[idx - 1].x <= bigger) ||
|
|
1028
1032
|
(arr[idx - 1] && arr[idx - 1].x1 <= bigger)) &&
|
|
1029
1033
|
(point.x >= smaller ||
|
|
1030
1034
|
point.x1 >= smaller ||
|
|
1031
1035
|
(arr[idx + 1] && arr[idx + 1].x >= smaller) ||
|
|
1032
|
-
(arr[idx + 1] && arr[idx + 1].x1 >= smaller));
|
|
1036
|
+
(arr[idx + 1] && arr[idx + 1].x1 >= smaller)));
|
|
1033
1037
|
};
|
|
1034
1038
|
const filterY = (min, max) => (point, idx, arr) => {
|
|
1035
1039
|
const bigger = min > max ? min : max;
|
|
1036
1040
|
const smaller = min > max ? max : min;
|
|
1037
|
-
return (point.y <= bigger ||
|
|
1041
|
+
return ((point.y <= bigger ||
|
|
1038
1042
|
point.y1 <= bigger ||
|
|
1039
1043
|
(arr[idx - 1] && arr[idx - 1].y <= bigger) ||
|
|
1040
1044
|
(arr[idx - 1] && arr[idx - 1].y1 <= bigger)) &&
|
|
1041
1045
|
(point.y >= smaller ||
|
|
1042
1046
|
point.y1 >= smaller ||
|
|
1043
1047
|
(arr[idx + 1] && arr[idx + 1].y >= smaller) ||
|
|
1044
|
-
(arr[idx + 1] && arr[idx + 1].y1 >= smaller));
|
|
1048
|
+
(arr[idx + 1] && arr[idx + 1].y1 >= smaller)));
|
|
1045
1049
|
};
|
|
1046
1050
|
this.defaultClipPointsMapping.set(ClipPointsDirection.x, filterX);
|
|
1047
1051
|
this.defaultClipPointsMapping.set(ClipPointsDirection.y, filterY);
|
|
@@ -1059,14 +1063,14 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1059
1063
|
const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
|
|
1060
1064
|
const line = d3
|
|
1061
1065
|
.line()
|
|
1062
|
-
.defined(
|
|
1066
|
+
.defined(point => point.x !== null &&
|
|
1063
1067
|
point.y !== null &&
|
|
1064
1068
|
point.x !== undefined &&
|
|
1065
1069
|
point.y !== undefined &&
|
|
1066
1070
|
!isNaN(point.x) &&
|
|
1067
1071
|
!isNaN(point.y))
|
|
1068
|
-
.x(
|
|
1069
|
-
.y(
|
|
1072
|
+
.x(point => this.x(point.x))
|
|
1073
|
+
.y(point => this.y(point.y));
|
|
1070
1074
|
let filteredData = this.series.data;
|
|
1071
1075
|
if (this.series.clipPointsDirection === ClipPointsDirection.x) {
|
|
1072
1076
|
let [min, max] = this.x.domain();
|
|
@@ -1089,8 +1093,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1089
1093
|
series: this.series,
|
|
1090
1094
|
});
|
|
1091
1095
|
}
|
|
1092
|
-
ngAfterViewInit() {
|
|
1093
|
-
}
|
|
1096
|
+
ngAfterViewInit() { }
|
|
1094
1097
|
getTransform(event, scaleX, scaleY) {
|
|
1095
1098
|
if (event.type === 'mouseleave') {
|
|
1096
1099
|
return null;
|
|
@@ -1130,9 +1133,17 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1130
1133
|
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));
|
|
1131
1134
|
const x = scaleX.invert(intersect.x);
|
|
1132
1135
|
const y = scaleY.invert(intersect.y);
|
|
1133
|
-
if (x !== null &&
|
|
1136
|
+
if (x !== null &&
|
|
1137
|
+
x !== undefined &&
|
|
1138
|
+
!isNaN(x) &&
|
|
1139
|
+
y !== null &&
|
|
1140
|
+
y !== undefined &&
|
|
1141
|
+
!isNaN(y)) {
|
|
1134
1142
|
this.svc.setTooltip({
|
|
1135
|
-
point: {
|
|
1143
|
+
point: {
|
|
1144
|
+
x: scaleX.invert(intersect.x),
|
|
1145
|
+
y: scaleY.invert(intersect.y),
|
|
1146
|
+
},
|
|
1136
1147
|
series: this.series,
|
|
1137
1148
|
});
|
|
1138
1149
|
}
|
|
@@ -1158,9 +1169,17 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1158
1169
|
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));
|
|
1159
1170
|
const x = scaleX.invert(intersect.x);
|
|
1160
1171
|
const y = scaleY.invert(intersect.y);
|
|
1161
|
-
if (x !== null &&
|
|
1172
|
+
if (x !== null &&
|
|
1173
|
+
x !== undefined &&
|
|
1174
|
+
!isNaN(x) &&
|
|
1175
|
+
y !== null &&
|
|
1176
|
+
y !== undefined &&
|
|
1177
|
+
!isNaN(y)) {
|
|
1162
1178
|
this.svc.setTooltip({
|
|
1163
|
-
point: {
|
|
1179
|
+
point: {
|
|
1180
|
+
x: scaleX.invert(intersect.x),
|
|
1181
|
+
y: scaleY.invert(intersect.y),
|
|
1182
|
+
},
|
|
1164
1183
|
series: this.series,
|
|
1165
1184
|
});
|
|
1166
1185
|
}
|
|
@@ -1671,7 +1690,7 @@ class AreaSeriesComponent extends LinearSeriesBase {
|
|
|
1671
1690
|
}
|
|
1672
1691
|
ngOnInit() {
|
|
1673
1692
|
super.ngOnInit();
|
|
1674
|
-
this.areaPath = this.scaleService.scales.pipe(map(
|
|
1693
|
+
this.areaPath = this.scaleService.scales.pipe(map(data => {
|
|
1675
1694
|
const { x, y } = data;
|
|
1676
1695
|
this.x = x.get(this.series.xAxisIndex)?.scale;
|
|
1677
1696
|
this.y = y.get(this.series.yAxisIndex)?.scale;
|
|
@@ -1680,14 +1699,14 @@ class AreaSeriesComponent extends LinearSeriesBase {
|
|
|
1680
1699
|
}
|
|
1681
1700
|
const area = d3
|
|
1682
1701
|
.area()
|
|
1683
|
-
.defined(
|
|
1702
|
+
.defined(point => point.x !== null &&
|
|
1684
1703
|
point.y !== null &&
|
|
1685
1704
|
!isNaN(point.x) &&
|
|
1686
1705
|
!isNaN(point.y));
|
|
1687
1706
|
area
|
|
1688
|
-
.x1(
|
|
1689
|
-
.x0(
|
|
1690
|
-
.y(
|
|
1707
|
+
.x1(_ => _.x1 !== null && _.x1 !== undefined ? this.x(_.x1) : this.x(0))
|
|
1708
|
+
.x0(_ => this.x(_.x))
|
|
1709
|
+
.y(_ => this.y(_.y));
|
|
1691
1710
|
const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
|
|
1692
1711
|
let filteredData = this.series.data;
|
|
1693
1712
|
if (this.series.clipPointsDirection === ClipPointsDirection.x) {
|
|
@@ -1706,11 +1725,11 @@ class AreaSeriesComponent extends LinearSeriesBase {
|
|
|
1706
1725
|
}));
|
|
1707
1726
|
}
|
|
1708
1727
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1709
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-
|
|
1728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '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.8\"></svg:stop>\n </svg:linearGradient>\n</svg:defs>\n<svg:path\n class=\"area\"\n [attr.d]=\"areaPath | async\"\n [attr.stroke-width]=\"0\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n class=\"area\"\n fill=\"none\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n <svg:circle\n *ngIf=\"t?.x !=null && t?.y !=null\"\n r=\"3\"\n [attr.fill]=\"series.color\"\n [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n >\n </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n <svg:circle\n class=\"marker\"\n *ngFor=\"let point of draggablePoints\"\n [class.draggable-marker]=\"point?.marker?.draggable\"\n [attr.r]=\"point.marker.style?.radius ?? 5\"\n [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n [attr.cx]=\"x(point.x)\"\n [attr.cy]=\"y(point.y)\"\n >\n </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], 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: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1710
1729
|
}
|
|
1711
1730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AreaSeriesComponent, decorators: [{
|
|
1712
1731
|
type: Component,
|
|
1713
|
-
args: [{ selector: 'svg:svg[teta-area-
|
|
1732
|
+
args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n x1=\"0%\"\n [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '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.8\"></svg:stop>\n </svg:linearGradient>\n</svg:defs>\n<svg:path\n class=\"area\"\n [attr.d]=\"areaPath | async\"\n [attr.stroke-width]=\"0\"\n [attr.fill-opacity]=\"series.style?.fillOpacity\"\n [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n class=\"area\"\n fill=\"none\"\n [attr.d]=\"path | async\"\n [attr.stroke]=\"series.color\"\n [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n <svg:circle\n *ngIf=\"t?.x !=null && t?.y !=null\"\n r=\"3\"\n [attr.fill]=\"series.color\"\n [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n >\n </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n <svg:circle\n class=\"marker\"\n *ngFor=\"let point of draggablePoints\"\n [class.draggable-marker]=\"point?.marker?.draggable\"\n [attr.r]=\"point.marker.style?.radius ?? 5\"\n [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n [attr.cx]=\"x(point.x)\"\n [attr.cy]=\"y(point.y)\"\n >\n </svg:circle>\n</ng-container>\n\n\n\n" }]
|
|
1714
1733
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1715
1734
|
|
|
1716
1735
|
const defaultSeriesTypeMapping = new Map()
|
|
@@ -2157,7 +2176,7 @@ class TooltipComponent {
|
|
|
2157
2176
|
this.sanitizer = sanitizer;
|
|
2158
2177
|
this._zone = _zone;
|
|
2159
2178
|
this._elementRef = _elementRef;
|
|
2160
|
-
this.tooltips = this.svc.tooltips.pipe(map(
|
|
2179
|
+
this.tooltips = this.svc.tooltips.pipe(map(_ => [..._.values()]));
|
|
2161
2180
|
}
|
|
2162
2181
|
ngOnInit() {
|
|
2163
2182
|
this.display = this.svc.pointerMove.pipe(map((event) => {
|
|
@@ -2167,7 +2186,7 @@ class TooltipComponent {
|
|
|
2167
2186
|
this.cdr.detectChanges();
|
|
2168
2187
|
});
|
|
2169
2188
|
}));
|
|
2170
|
-
this.position = this.svc.pointerMove.pipe(filter(
|
|
2189
|
+
this.position = this.svc.pointerMove.pipe(filter(event => !!event), map(_ => {
|
|
2171
2190
|
return this.getPosition(_);
|
|
2172
2191
|
}), tap(() => this.cdr.detectChanges()));
|
|
2173
2192
|
const transformHtml = (html) => {
|
|
@@ -2176,13 +2195,17 @@ class TooltipComponent {
|
|
|
2176
2195
|
const defaultFormatter = (tooltips) => {
|
|
2177
2196
|
let html = '';
|
|
2178
2197
|
const format = d3.timeFormat('%d.%m.%Y');
|
|
2179
|
-
tooltips.forEach(
|
|
2198
|
+
tooltips.forEach(_ => {
|
|
2180
2199
|
const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${_?.series?.color}`;
|
|
2181
|
-
html += `<div class=
|
|
2182
|
-
<span class=
|
|
2183
|
-
<span class=
|
|
2184
|
-
x: ${_.point.x instanceof Date
|
|
2185
|
-
|
|
2200
|
+
html += `<div class='display-flex align-center'><span class='margin-right-1' style='${indicatorStyle}'></span>
|
|
2201
|
+
<span class='font-title-3'>${_.series.name}
|
|
2202
|
+
<span class='font-body-3'>
|
|
2203
|
+
x: ${_.point.x instanceof Date
|
|
2204
|
+
? format(_.point.x)
|
|
2205
|
+
: _.point.x?.toFixed(2)}
|
|
2206
|
+
y: ${_.point.y instanceof Date
|
|
2207
|
+
? format(_.point.y)
|
|
2208
|
+
: _.point.y?.toFixed(2)}
|
|
2186
2209
|
</span>
|
|
2187
2210
|
</span></div>`;
|
|
2188
2211
|
});
|
|
@@ -3397,5 +3420,5 @@ class PlotLine {
|
|
|
3397
3420
|
* Generated bundle index. Do not edit.
|
|
3398
3421
|
*/
|
|
3399
3422
|
|
|
3400
|
-
export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockHorizontalSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, generateTicks, getTextWidth };
|
|
3423
|
+
export { AreaSeriesComponent, Axis, AxisOrientation, BarSeriesComponent, BlockAreaSeriesComponent, BlockHorizontalSeriesComponent, BlockSeriesComponent, BroadcastService, BrushMessage, BrushService, BrushType, ChartBounds, ChartComponent, ChartModule, ChartService, ClipPointsDirection, DragPointType, FillDirection, FillType, LegendComponent, LineSeriesComponent, LinearSeriesBase, PlotBand, PlotLine, ScaleService, ScaleType, ScatterSeriesComponent, SeriesBaseComponent, SeriesType, TooltipTracking, ZoomBehaviorType, ZoomMessage, ZoomService, ZoomType, generateTicks, getTextWidth };
|
|
3401
3424
|
//# sourceMappingURL=tetacom-svg-charts.mjs.map
|