@tetacom/svg-charts 1.2.16 → 1.2.19
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/esm2020/chart/chart-container/annotation/annotation.component.mjs +5 -5
- package/esm2020/chart/chart-container/chart-container.component.mjs +5 -5
- package/esm2020/chart/chart-container/plotband/plot-band.component.mjs +3 -3
- package/esm2020/chart/chart-container/series/area-series/area-series.component.mjs +6 -3
- package/esm2020/chart/chart-container/series/bar/bar-series.component.mjs +6 -6
- package/esm2020/chart/chart-container/series/block-area-series/block-area-series.component.mjs +5 -5
- package/esm2020/chart/chart-container/series/block-series/block-series.component.mjs +7 -8
- package/esm2020/chart/chart-container/series/linear-series-base.mjs +6 -3
- package/esm2020/chart/chart-container/series/scatter-series/scatter-series.component.mjs +5 -5
- package/esm2020/chart/legend/legend.component.mjs +3 -3
- package/fesm2015/tetacom-svg-charts.mjs +44 -34
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +39 -34
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1059,8 +1059,11 @@ class LinearSeriesBase extends SeriesBaseComponent {
|
|
|
1059
1059
|
}), tap(() => setTimeout(() => this.cdr.detectChanges())));
|
|
1060
1060
|
this.path = this.scaleService.scales.pipe(map((data) => {
|
|
1061
1061
|
const { x, y } = data;
|
|
1062
|
-
this.x = x.get(this.series.xAxisIndex)
|
|
1063
|
-
this.y = y.get(this.series.yAxisIndex)
|
|
1062
|
+
this.x = x.get(this.series.xAxisIndex)?.scale;
|
|
1063
|
+
this.y = y.get(this.series.yAxisIndex)?.scale;
|
|
1064
|
+
if (!this.x || !this.y) {
|
|
1065
|
+
return '';
|
|
1066
|
+
}
|
|
1064
1067
|
const filter = this.defaultClipPointsMapping.get(this.series.clipPointsDirection);
|
|
1065
1068
|
const line = d3
|
|
1066
1069
|
.line()
|
|
@@ -1266,7 +1269,7 @@ class BarSeriesComponent extends SeriesBaseComponent {
|
|
|
1266
1269
|
return count.length;
|
|
1267
1270
|
}));
|
|
1268
1271
|
this.x1 = this.scaleService.scales.pipe(map((_) => {
|
|
1269
|
-
const x = _.x.get(this.series.xAxisIndex)
|
|
1272
|
+
const x = _.x.get(this.series.xAxisIndex)?.scale;
|
|
1270
1273
|
const range = x.range();
|
|
1271
1274
|
const domain = this.series.data.map((_) => _.x);
|
|
1272
1275
|
return d3
|
|
@@ -1275,8 +1278,8 @@ class BarSeriesComponent extends SeriesBaseComponent {
|
|
|
1275
1278
|
.domain(domain)
|
|
1276
1279
|
.padding(0.1);
|
|
1277
1280
|
}));
|
|
1278
|
-
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)
|
|
1279
|
-
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)
|
|
1281
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
|
|
1282
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
|
|
1280
1283
|
}
|
|
1281
1284
|
mouseenter(point) {
|
|
1282
1285
|
this.svc.setTooltip({
|
|
@@ -1293,10 +1296,10 @@ class BarSeriesComponent extends SeriesBaseComponent {
|
|
|
1293
1296
|
ngOnChanges(changes) { }
|
|
1294
1297
|
}
|
|
1295
1298
|
BarSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1296
|
-
BarSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n x: x | async,\n x1: x1 | async,\n y: y | async,\n barSeriesCount: barSeriesCount | async\n} as data\">\n <ng-container *ngIf=\"data.barSeriesCount > 1\">\n
|
|
1299
|
+
BarSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n x: x | async,\n x1: x1 | async,\n y: y | async,\n barSeriesCount: barSeriesCount | async\n} as data\">\n <ng-container *ngIf=\"data.x && data.y\">\n <ng-container *ngIf=\"data.barSeriesCount > 1\">\n <svg:rect\n *ngFor=\"let point of series.data\"\n (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\"\n [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n [attr.fill]=\"series.color\"\n ></svg:rect>\n </ng-container>\n <ng-container *ngIf=\"data.barSeriesCount === 1\">\n <svg:rect\n *ngFor=\"let point of series.data\"\n (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\"\n [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n [attr.width]=\"data.x1.bandwidth()\"\n [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n [attr.fill]=\"point.color ?? series.color\"\n ></svg:rect>\n </ng-container>\n </ng-container>\n</ng-container>\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 });
|
|
1297
1300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, decorators: [{
|
|
1298
1301
|
type: Component,
|
|
1299
|
-
args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n x: x | async,\n x1: x1 | async,\n y: y | async,\n barSeriesCount: barSeriesCount | async\n} as data\">\n <ng-container *ngIf=\"data.barSeriesCount > 1\">\n
|
|
1302
|
+
args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n x: x | async,\n x1: x1 | async,\n y: y | async,\n barSeriesCount: barSeriesCount | async\n} as data\">\n <ng-container *ngIf=\"data.x && data.y\">\n <ng-container *ngIf=\"data.barSeriesCount > 1\">\n <svg:rect\n *ngFor=\"let point of series.data\"\n (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\"\n [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n [attr.fill]=\"series.color\"\n ></svg:rect>\n </ng-container>\n <ng-container *ngIf=\"data.barSeriesCount === 1\">\n <svg:rect\n *ngFor=\"let point of series.data\"\n (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\"\n [attr.x]=\"data.x(point.x)\"\n [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n [attr.width]=\"data.x1.bandwidth()\"\n [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n [attr.fill]=\"point.color ?? series.color\"\n ></svg:rect>\n </ng-container>\n </ng-container>\n</ng-container>\n\n" }]
|
|
1300
1303
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1301
1304
|
|
|
1302
1305
|
class ScatterSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1309,8 +1312,8 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
|
|
|
1309
1312
|
this.element = element;
|
|
1310
1313
|
}
|
|
1311
1314
|
ngOnInit() {
|
|
1312
|
-
this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)
|
|
1313
|
-
this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)
|
|
1315
|
+
this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
|
|
1316
|
+
this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
|
|
1314
1317
|
}
|
|
1315
1318
|
ngAfterViewInit() {
|
|
1316
1319
|
}
|
|
@@ -1328,10 +1331,10 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
|
|
|
1328
1331
|
}
|
|
1329
1332
|
}
|
|
1330
1333
|
ScatterSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1331
|
-
ScatterSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async\n} as scales\">\n <svg:circle\n
|
|
1334
|
+
ScatterSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async\n} as scales\">\n <ng-container *ngIf=\"scales.x && scales.y\">\n <svg:circle\n class=\"line\"\n *ngFor=\"let point of series.data\"\n (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\"\n [attr.cx]=\"scales.x(point.x)\"\n [attr.cy]=\"scales.y(point.y)\"\n [attr.r]=\"series.style?.radius ?? 1\"\n [attr.stroke]=\"point.color ?? series.color\"\n [attr.fill]=\"point.color ?? series.color\"\n [attr.stroke-width]=\"series.style?.strokeWidth\">\n </svg:circle>\n </ng-container>\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: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1332
1335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
|
|
1333
1336
|
type: Component,
|
|
1334
|
-
args: [{ selector: 'svg:svg[teta-scatter-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async\n} as scales\">\n <svg:circle\n
|
|
1337
|
+
args: [{ selector: 'svg:svg[teta-scatter-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n y: y | async,\n x: x | async\n} as scales\">\n <ng-container *ngIf=\"scales.x && scales.y\">\n <svg:circle\n class=\"line\"\n *ngFor=\"let point of series.data\"\n (mouseenter)=\"mouseenter(point)\"\n (mouseleave)=\"mouseleave(point)\"\n [attr.cx]=\"scales.x(point.x)\"\n [attr.cy]=\"scales.y(point.y)\"\n [attr.r]=\"series.style?.radius ?? 1\"\n [attr.stroke]=\"point.color ?? series.color\"\n [attr.fill]=\"point.color ?? series.color\"\n [attr.stroke-width]=\"series.style?.strokeWidth\">\n </svg:circle>\n </ng-container>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
|
|
1335
1338
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1336
1339
|
|
|
1337
1340
|
class BlockSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1347,10 +1350,9 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1347
1350
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1348
1351
|
}
|
|
1349
1352
|
ngOnInit() {
|
|
1350
|
-
|
|
1351
|
-
this.
|
|
1352
|
-
this.
|
|
1353
|
-
this.displayPoints = this.y.pipe(map((y) => {
|
|
1353
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
|
|
1354
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
|
|
1355
|
+
this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
|
|
1354
1356
|
return this.series.data.filter((point, index, arr) => {
|
|
1355
1357
|
const [min, max] = y.domain();
|
|
1356
1358
|
return (point.y >= min ||
|
|
@@ -1380,10 +1382,10 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1380
1382
|
}
|
|
1381
1383
|
}
|
|
1382
1384
|
BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
-
BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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
|
|
1385
|
+
BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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 *ngIf=\"data.x && data.y\">\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 </ng-container>\n</ng-container>\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 });
|
|
1384
1386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, decorators: [{
|
|
1385
1387
|
type: Component,
|
|
1386
|
-
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
|
|
1388
|
+
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 *ngIf=\"data.x && data.y\">\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 </ng-container>\n</ng-container>\n" }]
|
|
1387
1389
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1388
1390
|
|
|
1389
1391
|
class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
@@ -1401,7 +1403,7 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1401
1403
|
ngOnInit() {
|
|
1402
1404
|
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
|
|
1403
1405
|
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
|
|
1404
|
-
this.displayPoints = this.y.pipe(map((y) => {
|
|
1406
|
+
this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
|
|
1405
1407
|
return this.series.data.filter((point, index, arr) => {
|
|
1406
1408
|
const [min, max] = y.domain();
|
|
1407
1409
|
return (point.y >= min ||
|
|
@@ -1431,10 +1433,10 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1431
1433
|
}
|
|
1432
1434
|
}
|
|
1433
1435
|
BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1434
|
-
BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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
|
|
1436
|
+
BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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 *ngIf=\"data.x && data.y\">\n\n\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 </ng-container>\n</ng-container>\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 });
|
|
1435
1437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
|
|
1436
1438
|
type: Component,
|
|
1437
|
-
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
|
|
1439
|
+
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 *ngIf=\"data.x && data.y\">\n\n\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 </ng-container>\n</ng-container>\n" }]
|
|
1438
1440
|
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
|
|
1439
1441
|
|
|
1440
1442
|
class AreaSeriesComponent extends LinearSeriesBase {
|
|
@@ -1453,8 +1455,11 @@ class AreaSeriesComponent extends LinearSeriesBase {
|
|
|
1453
1455
|
super.ngOnInit();
|
|
1454
1456
|
this.areaPath = this.scaleService.scales.pipe(map((data) => {
|
|
1455
1457
|
const { x, y } = data;
|
|
1456
|
-
this.x = x.get(this.series.xAxisIndex)
|
|
1457
|
-
this.y = y.get(this.series.yAxisIndex)
|
|
1458
|
+
this.x = x.get(this.series.xAxisIndex)?.scale;
|
|
1459
|
+
this.y = y.get(this.series.yAxisIndex)?.scale;
|
|
1460
|
+
if (!this.x || !this.y) {
|
|
1461
|
+
return '';
|
|
1462
|
+
}
|
|
1458
1463
|
const area = d3
|
|
1459
1464
|
.area()
|
|
1460
1465
|
.defined((point) => point.x !== null &&
|
|
@@ -1832,10 +1837,10 @@ class PlotBandComponent {
|
|
|
1832
1837
|
}
|
|
1833
1838
|
}
|
|
1834
1839
|
PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1835
|
-
PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-
|
|
1840
|
+
PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-caption fill-text-90\"\n [attr.x]=\"getTextCenter()\"\n [attr.transform]=\"'rotate(-90, '+ getTextCenter() +',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.y\"\n text-anchor=\"middle\"\n class=\"label font-caption fill-text-90\"\n dominant-baseline=\"central\"\n [attr.x]=\"getTextCenter()\"\n [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1836
1841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, decorators: [{
|
|
1837
1842
|
type: Component,
|
|
1838
|
-
args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-
|
|
1843
|
+
args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n [class.draggable]=\"plotBand?.draggable === true\"\n [attr.fill]=\"getFill(plotBand)\"\n [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.x\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"label font-caption fill-text-90\"\n [attr.x]=\"getTextCenter()\"\n [attr.transform]=\"'rotate(-90, '+ getTextCenter() +',' + height / 2 + ')'\"\n [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n *ngIf=\"axis.orientation === orientation.y\"\n text-anchor=\"middle\"\n class=\"label font-caption fill-text-90\"\n dominant-baseline=\"central\"\n [attr.x]=\"getTextCenter()\"\n [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n [attr.data-grabber]=\"'from'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n *ngIf=\"plotBand.resizable\"\n [class.x-grabber]=\"axis.orientation === orientation.x\"\n [class.y-grabber]=\"axis.orientation === orientation.y\"\n [class.resizeable]=\"plotBand?.resizable\"\n [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n [attr.stroke-width]=\"8\"\n [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n [attr.data-grabber]=\"'to'\"\n [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
|
|
1839
1844
|
}], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
|
|
1840
1845
|
type: Input
|
|
1841
1846
|
}], axis: [{
|
|
@@ -2263,8 +2268,8 @@ class AnnotationComponent {
|
|
|
2263
2268
|
this.scaleService = scaleService;
|
|
2264
2269
|
this.cdr = cdr;
|
|
2265
2270
|
this.chartService = chartService;
|
|
2266
|
-
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.annotation.xAxisIndex ?? 0)
|
|
2267
|
-
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.annotation.yAxisIndex ?? 0)
|
|
2271
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.annotation.xAxisIndex ?? 0)?.scale));
|
|
2272
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.annotation.yAxisIndex ?? 0)?.scale));
|
|
2268
2273
|
this.drag = d3.drag();
|
|
2269
2274
|
}
|
|
2270
2275
|
set annotation(annotation) {
|
|
@@ -2313,10 +2318,10 @@ class AnnotationComponent {
|
|
|
2313
2318
|
}
|
|
2314
2319
|
}
|
|
2315
2320
|
AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2316
|
-
AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n x: x | async,\n y: y | async\n } as data\">\n <svg:circle\n
|
|
2321
|
+
AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n x: x | async,\n y: y | async\n } as data\">\n <ng-container *ngIf=\"data.x && data.y\">\n\n\n <svg:circle\n [attr.r]=\"annotation.style?.radius ?? 5\"\n [attr.cx]=\"data.x(annotation.point.x)\"\n [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n [attr.cy]=\"data.y(annotation.point.y)\">\n </svg:circle>\n <svg:line\n [attr.x1]=\"data.x(annotation.point.x)\"\n [attr.y1]=\"data.y(annotation.point.y)\"\n [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n >\n </svg:line>\n <svg:foreignObject\n class=\"position-absolute\"\n [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n <div\n #annotationNode\n [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n style=\"border-radius: 2px; display: inline-block;\">\n <ng-container *ngIf=\"annotation.template;else default\">\n <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n </ng-container>\n </div>\n </svg:foreignObject>\n </ng-container>\n</ng-container>\n<ng-template #default>\n {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2317
2322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, decorators: [{
|
|
2318
2323
|
type: Component,
|
|
2319
|
-
args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n x: x | async,\n y: y | async\n } as data\">\n <svg:circle\n
|
|
2324
|
+
args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n x: x | async,\n y: y | async\n } as data\">\n <ng-container *ngIf=\"data.x && data.y\">\n\n\n <svg:circle\n [attr.r]=\"annotation.style?.radius ?? 5\"\n [attr.cx]=\"data.x(annotation.point.x)\"\n [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n [attr.cy]=\"data.y(annotation.point.y)\">\n </svg:circle>\n <svg:line\n [attr.x1]=\"data.x(annotation.point.x)\"\n [attr.y1]=\"data.y(annotation.point.y)\"\n [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n >\n </svg:line>\n <svg:foreignObject\n class=\"position-absolute\"\n [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n <div\n #annotationNode\n [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n style=\"border-radius: 2px; display: inline-block;\">\n <ng-container *ngIf=\"annotation.template;else default\">\n <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n </ng-container>\n </div>\n </svg:foreignObject>\n </ng-container>\n</ng-container>\n<ng-template #default>\n {{ annotation.note?.label}}\n</ng-template>\n" }]
|
|
2320
2325
|
}], ctorParameters: function () { return [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }]; }, propDecorators: { annotation: [{
|
|
2321
2326
|
type: Input
|
|
2322
2327
|
}], node: [{
|
|
@@ -2481,8 +2486,8 @@ class ChartContainerComponent {
|
|
|
2481
2486
|
return item.value.index;
|
|
2482
2487
|
}
|
|
2483
2488
|
click(event, xScales, yScales) {
|
|
2484
|
-
const x = xScales.get(0)
|
|
2485
|
-
const y = yScales.get(0)
|
|
2489
|
+
const x = xScales.get(0)?.scale;
|
|
2490
|
+
const y = yScales.get(0)?.scale;
|
|
2486
2491
|
this._svc.emitChartClick({
|
|
2487
2492
|
event: event,
|
|
2488
2493
|
target: {
|
|
@@ -2492,8 +2497,8 @@ class ChartContainerComponent {
|
|
|
2492
2497
|
});
|
|
2493
2498
|
}
|
|
2494
2499
|
contextMenu(event, xScales, yScales) {
|
|
2495
|
-
const x = xScales.get(0)
|
|
2496
|
-
const y = yScales.get(0)
|
|
2500
|
+
const x = xScales.get(0)?.scale;
|
|
2501
|
+
const y = yScales.get(0)?.scale;
|
|
2497
2502
|
this._svc.emitChartContextMenu({
|
|
2498
2503
|
event: event,
|
|
2499
2504
|
target: {
|
|
@@ -2536,10 +2541,10 @@ class LegendComponent {
|
|
|
2536
2541
|
}
|
|
2537
2542
|
}
|
|
2538
2543
|
LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2539
|
-
LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n <div *ngIf=\"serie?.showInLegend !== false\">\n <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n <div class=\"legend-icon-form\"
|
|
2544
|
+
LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n <div *ngIf=\"serie?.showInLegend !== false\">\n <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(serie)\"\n [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n </div>\n </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2540
2545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, decorators: [{
|
|
2541
2546
|
type: Component,
|
|
2542
|
-
args: [{ selector: 'teta-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n <div *ngIf=\"serie?.showInLegend !== false\">\n <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n <div class=\"legend-icon-form\"
|
|
2547
|
+
args: [{ selector: 'teta-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n <div *ngIf=\"serie?.showInLegend !== false\">\n <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(serie)\"\n [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n </div>\n </div>\n</ng-container>\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
|
|
2543
2548
|
}], ctorParameters: function () { return [{ type: ChartService }]; }, propDecorators: { series: [{
|
|
2544
2549
|
type: Input
|
|
2545
2550
|
}], classLegend: [{
|