@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
|
@@ -1026,7 +1026,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1026
1026
|
set series(series) {
|
|
1027
1027
|
var _a;
|
|
1028
1028
|
this.__series = series;
|
|
1029
|
-
this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => _ === null || _ === void 0 ? void 0 : _.marker);
|
|
1029
|
+
this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => (_ === null || _ === void 0 ? void 0 : _.marker) && (_ === null || _ === void 0 ? void 0 : _.x) !== undefined && (_ === null || _ === void 0 ? void 0 : _.y) !== undefined);
|
|
1030
1030
|
}
|
|
1031
1031
|
get series() {
|
|
1032
1032
|
return this.__series;
|
|
@@ -1064,7 +1064,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1064
1064
|
}), tap(() => setTimeout(() => this.cdr.detectChanges())));
|
|
1065
1065
|
this.path = combineLatest([this.scaleService.scales, this._update]).pipe(map(([data]) => {
|
|
1066
1066
|
var _a, _b;
|
|
1067
|
-
// console.log(data);
|
|
1068
1067
|
const { x, y } = data;
|
|
1069
1068
|
this.x = (_a = x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale;
|
|
1070
1069
|
this.y = (_b = y.get(this.series.yAxisIndex)) === null || _b === void 0 ? void 0 : _b.scale;
|
|
@@ -1211,7 +1210,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1211
1210
|
}
|
|
1212
1211
|
const rightId = bisect(this.series.data, x0);
|
|
1213
1212
|
const range = scaleY.range();
|
|
1214
|
-
const intersect = lineIntersection(pointer, range[0], pointer,
|
|
1213
|
+
const intersect = lineIntersection(pointer, range[0], pointer, Number.MAX_SAFE_INTEGER, scaleX((_c = this.series.data[rightId - 1]) === null || _c === void 0 ? void 0 : _c.x), scaleY((_d = this.series.data[rightId - 1]) === null || _d === void 0 ? void 0 : _d.y), scaleX((_e = this.series.data[rightId]) === null || _e === void 0 ? void 0 : _e.x), scaleY((_f = this.series.data[rightId]) === null || _f === void 0 ? void 0 : _f.y));
|
|
1215
1214
|
const x = scaleX.invert(intersect.x);
|
|
1216
1215
|
const y = scaleY.invert(intersect.y);
|
|
1217
1216
|
if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
|
|
@@ -1239,7 +1238,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1239
1238
|
}
|
|
1240
1239
|
const rightId = bisect(this.series.data, y0);
|
|
1241
1240
|
const range = scaleX.range();
|
|
1242
|
-
const intersect = lineIntersection(range[0], mouse[1],
|
|
1241
|
+
const intersect = lineIntersection(range[0], mouse[1], Number.MAX_SAFE_INTEGER, mouse[1], scaleX((_g = this.series.data[rightId - 1]) === null || _g === void 0 ? void 0 : _g.x), scaleY((_h = this.series.data[rightId - 1]) === null || _h === void 0 ? void 0 : _h.y), scaleX((_j = this.series.data[rightId]) === null || _j === void 0 ? void 0 : _j.x), scaleY((_k = this.series.data[rightId]) === null || _k === void 0 ? void 0 : _k.y));
|
|
1243
1242
|
const x = scaleX.invert(intersect.x);
|
|
1244
1243
|
const y = scaleY.invert(intersect.y);
|
|
1245
1244
|
if (x !== null && x !== undefined && !isNaN(x) && y !== null && y !== undefined && !isNaN(y)) {
|
|
@@ -1314,6 +1313,7 @@ class DraggablePointDirective {
|
|
|
1314
1313
|
deltaX,
|
|
1315
1314
|
deltaY
|
|
1316
1315
|
})) {
|
|
1316
|
+
this.startPosition = null;
|
|
1317
1317
|
return;
|
|
1318
1318
|
}
|
|
1319
1319
|
if (this.transformCache) {
|
|
@@ -1432,7 +1432,7 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1432
1432
|
}
|
|
1433
1433
|
}
|
|
1434
1434
|
if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
|
|
1435
|
-
if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.
|
|
1435
|
+
if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
|
|
1436
1436
|
return false;
|
|
1437
1437
|
}
|
|
1438
1438
|
}
|
|
@@ -1457,16 +1457,32 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1457
1457
|
point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
|
|
1458
1458
|
point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
|
|
1459
1459
|
this._update.next();
|
|
1460
|
+
const emitEvent = {
|
|
1461
|
+
type: 'end',
|
|
1462
|
+
sourceEvent: event
|
|
1463
|
+
};
|
|
1460
1464
|
this.svc.emitPoint({
|
|
1461
|
-
target:
|
|
1465
|
+
target: {
|
|
1466
|
+
series: this.series,
|
|
1467
|
+
point: point,
|
|
1468
|
+
},
|
|
1469
|
+
event: emitEvent,
|
|
1462
1470
|
});
|
|
1463
1471
|
}
|
|
1464
1472
|
moveProcess(event, point) {
|
|
1465
1473
|
point.x = this.x.invert(this.x(this.start.x) + event.deltaX);
|
|
1466
1474
|
point.y = this.y.invert(this.y(this.start.y) + event.deltaY);
|
|
1467
1475
|
this._update.next();
|
|
1476
|
+
const emitEvent = {
|
|
1477
|
+
type: 'drag',
|
|
1478
|
+
sourceEvent: event
|
|
1479
|
+
};
|
|
1468
1480
|
this.svc.emitPoint({
|
|
1469
|
-
target:
|
|
1481
|
+
target: {
|
|
1482
|
+
series: this.series,
|
|
1483
|
+
point: point,
|
|
1484
|
+
},
|
|
1485
|
+
event: emitEvent,
|
|
1470
1486
|
});
|
|
1471
1487
|
}
|
|
1472
1488
|
startLabel(event, label) {
|
|
@@ -1478,10 +1494,10 @@ class LineSeriesComponent extends LinearSeriesBase {
|
|
|
1478
1494
|
}
|
|
1479
1495
|
}
|
|
1480
1496
|
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 });
|
|
1481
|
-
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
|
|
1497
|
+
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 });
|
|
1482
1498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
|
|
1483
1499
|
type: Component,
|
|
1484
|
-
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
|
|
1500
|
+
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"] }]
|
|
1485
1501
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1486
1502
|
|
|
1487
1503
|
class BarSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1958,7 +1974,9 @@ class PlotBandComponent {
|
|
|
1958
1974
|
this.element = element;
|
|
1959
1975
|
this.orientation = AxisOrientation;
|
|
1960
1976
|
this.getTextPosition = () => {
|
|
1961
|
-
|
|
1977
|
+
let [min, max] = this.scale.domain();
|
|
1978
|
+
min = min instanceof Date ? min.getTime() : min;
|
|
1979
|
+
max = max instanceof Date ? max.getTime() : max;
|
|
1962
1980
|
const position = ((this.plotBand.from <= min ? min : this.plotBand.from) + (this.plotBand.to >= max ? max : this.plotBand.to)) / 2;
|
|
1963
1981
|
return this.scale(position);
|
|
1964
1982
|
};
|