@tetacom/svg-charts 1.2.27 → 1.2.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/chart/chart-container/series/linear-series-base.d.ts +0 -2
- package/esm2020/chart/chart-container/plotband/plot-band.component.mjs +4 -2
- package/esm2020/chart/chart-container/series/line/line-series.component.mjs +22 -6
- package/esm2020/chart/chart-container/series/linear-series-base.mjs +4 -5
- package/esm2020/chart/directives/draggable-point.directive.mjs +2 -1
- package/fesm2015/tetacom-svg-charts.mjs +28 -10
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +28 -10
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1023,7 +1023,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1023
1023
|
}
|
|
1024
1024
|
set series(series) {
|
|
1025
1025
|
this.__series = series;
|
|
1026
|
-
this.markers = this.__series.data?.filter((_) => _?.marker);
|
|
1026
|
+
this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined);
|
|
1027
1027
|
}
|
|
1028
1028
|
get series() {
|
|
1029
1029
|
return this.__series;
|
|
@@ -1060,7 +1060,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1060
1060
|
return this.getTransform(event, x.get(this.series.xAxisIndex).scale, y.get(this.series.yAxisIndex).scale);
|
|
1061
1061
|
}), tap(() => setTimeout(() => this.cdr.detectChanges())));
|
|
1062
1062
|
this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
|
|
1063
|
-
// console.log(data);
|
|
1064
1063
|
const { x, y } = data;
|
|
1065
1064
|
this.x = x.get(this.series.xAxisIndex)?.scale;
|
|
1066
1065
|
this.y = y.get(this.series.yAxisIndex)?.scale;
|
|
@@ -1205,7 +1204,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1205
1204
|
}
|
|
1206
1205
|
const rightId = bisect(this.series.data, x0);
|
|
1207
1206
|
const range = scaleY.range();
|
|
1208
|
-
const intersect = lineIntersection(pointer, range[0], pointer,
|
|
1207
|
+
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));
|
|
1209
1208
|
const x = scaleX.invert(intersect.x);
|
|
1210
1209
|
const y = scaleY.invert(intersect.y);
|
|
1211
1210
|
if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
|
|
@@ -1233,7 +1232,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1233
1232
|
}
|
|
1234
1233
|
const rightId = bisect(this.series.data, y0);
|
|
1235
1234
|
const range = scaleX.range();
|
|
1236
|
-
const intersect = lineIntersection(range[0], mouse[1],
|
|
1235
|
+
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));
|
|
1237
1236
|
const x = scaleX.invert(intersect.x);
|
|
1238
1237
|
const y = scaleY.invert(intersect.y);
|
|
1239
1238
|
if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
|
|
@@ -1308,6 +1307,7 @@ class DraggablePointDirective {
|
|
|
1308
1307
|
deltaX,
|
|
1309
1308
|
deltaY
|
|
1310
1309
|
})) {
|
|
1310
|
+
this.startPosition = null;
|
|
1311
1311
|
return;
|
|
1312
1312
|
}
|
|
1313
1313
|
if (this.transformCache) {
|
|
@@ -1426,7 +1426,7 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1426
1426
|
}
|
|
1427
1427
|
}
|
|
1428
1428
|
if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
|
|
1429
|
-
if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.
|
|
1429
|
+
if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
|
|
1430
1430
|
return false;
|
|
1431
1431
|
}
|
|
1432
1432
|
}
|
|
@@ -1451,16 +1451,32 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1451
1451
|
point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
|
|
1452
1452
|
point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
|
|
1453
1453
|
this._update.next();
|
|
1454
|
+
const emitEvent = {
|
|
1455
|
+
type: 'end',
|
|
1456
|
+
sourceEvent: event
|
|
1457
|
+
};
|
|
1454
1458
|
this.svc.emitPoint({
|
|
1455
|
-
target:
|
|
1459
|
+
target: {
|
|
1460
|
+
series: this.series,
|
|
1461
|
+
point: point,
|
|
1462
|
+
},
|
|
1463
|
+
event: emitEvent,
|
|
1456
1464
|
});
|
|
1457
1465
|
}
|
|
1458
1466
|
moveProcess(event, point) {
|
|
1459
1467
|
point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
|
|
1460
1468
|
point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
|
|
1461
1469
|
this._update.next();
|
|
1470
|
+
const emitEvent = {
|
|
1471
|
+
type: 'drag',
|
|
1472
|
+
sourceEvent: event
|
|
1473
|
+
};
|
|
1462
1474
|
this.svc.emitPoint({
|
|
1463
|
-
target:
|
|
1475
|
+
target: {
|
|
1476
|
+
series: this.series,
|
|
1477
|
+
point: point,
|
|
1478
|
+
},
|
|
1479
|
+
event: emitEvent,
|
|
1464
1480
|
});
|
|
1465
1481
|
}
|
|
1466
1482
|
startLabel(event, label) {
|
|
@@ -1472,10 +1488,10 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1472
1488
|
}
|
|
1473
1489
|
}
|
|
1474
1490
|
LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1475
|
-
LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n class=\"line\"\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 fill=\"none\">\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:g\n
|
|
1491
|
+
LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n class=\"line\"\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 fill=\"none\">\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 <ng-container *ngIf=\"x && y\">\n <svg:g\n *ngFor=\"let point of draggablePoints\"\n [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n [dragDirection]=\"point.marker.dragType\"\n [allowDrag]=\"allowDrag(point)\"\n #dragPoint=\"tetaDraggablePoint\"\n (moveStart)=\"moveStart($event, point)\"\n (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n [class.draggable-marker]=\"point?.marker?.draggable\">\n <svg:circle\n class=\"marker\"\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]=\"0\"\n [attr.cy]=\"0\">\n </svg:circle>\n <ng-container *ngIf=\"point.marker.label?.text\">\n <svg:line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"point.marker.label?.dx\"\n [attr.y2]=\"point.marker.label?.dy\"\n [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n </svg:line>\n <svg:foreignObject\n [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n [dragDirection]=\"point.marker.label.dragType\"\n #labelPoint=\"tetaDraggablePoint\"\n (moveStart)=\"startLabel($event, point.marker.label)\"\n (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n (moveEnd)=\"labelPoint.resetTransform();\"\n [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n [attr.x]=\"point.marker.label?.dx\"\n [attr.y]=\"point.marker.label?.dy\"\n class=\"position-absolute\">\n <div\n #annotationNode\n class=\"shadow-2 padding-2\"\n [style.color]=\"'var(--color-text-90)'\"\n [style.background-color]=\"'var(--color-background-50)'\"\n [style.cursor]=\"'move'\"\n style=\"border-radius: 2px; display: inline-block;\">\n {{point.marker.label?.text}}\n </div>\n </svg:foreignObject>\n </ng-container>\n </svg:g>\n </svg:g>\n </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1476
1492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
|
|
1477
1493
|
type: Component,
|
|
1478
|
-
args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n class=\"line\"\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 fill=\"none\">\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:g\n
|
|
1494
|
+
args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n class=\"line\"\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 fill=\"none\">\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 <ng-container *ngIf=\"x && y\">\n <svg:g\n *ngFor=\"let point of draggablePoints\"\n [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n [dragDirection]=\"point.marker.dragType\"\n [allowDrag]=\"allowDrag(point)\"\n #dragPoint=\"tetaDraggablePoint\"\n (moveStart)=\"moveStart($event, point)\"\n (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n [class.draggable-marker]=\"point?.marker?.draggable\">\n <svg:circle\n class=\"marker\"\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]=\"0\"\n [attr.cy]=\"0\">\n </svg:circle>\n <ng-container *ngIf=\"point.marker.label?.text\">\n <svg:line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"point.marker.label?.dx\"\n [attr.y2]=\"point.marker.label?.dy\"\n [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n </svg:line>\n <svg:foreignObject\n [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n [dragDirection]=\"point.marker.label.dragType\"\n #labelPoint=\"tetaDraggablePoint\"\n (moveStart)=\"startLabel($event, point.marker.label)\"\n (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n (moveEnd)=\"labelPoint.resetTransform();\"\n [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n [attr.x]=\"point.marker.label?.dx\"\n [attr.y]=\"point.marker.label?.dy\"\n class=\"position-absolute\">\n <div\n #annotationNode\n class=\"shadow-2 padding-2\"\n [style.color]=\"'var(--color-text-90)'\"\n [style.background-color]=\"'var(--color-background-50)'\"\n [style.cursor]=\"'move'\"\n style=\"border-radius: 2px; display: inline-block;\">\n {{point.marker.label?.text}}\n </div>\n </svg:foreignObject>\n </ng-container>\n </svg:g>\n </svg:g>\n </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
|
|
1479
1495
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1480
1496
|
|
|
1481
1497
|
class BarSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1944,7 +1960,9 @@ class PlotBandComponent {
|
|
|
1944
1960
|
this.element = element;
|
|
1945
1961
|
this.orientation = AxisOrientation;
|
|
1946
1962
|
this.getTextPosition = () => {
|
|
1947
|
-
|
|
1963
|
+
let [min, max] = this.scale.domain();
|
|
1964
|
+
min = min instanceof Date ? min.getTime() : min;
|
|
1965
|
+
max = max instanceof Date ? max.getTime() : max;
|
|
1948
1966
|
const position = ((this.plotBand.from <= min ? min : this.plotBand.from) + (this.plotBand.to >= max ? max : this.plotBand.to)) / 2;
|
|
1949
1967
|
return this.scale(position);
|
|
1950
1968
|
};
|