@tetacom/svg-charts 1.2.14 → 1.2.17
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/gridlines/gridlines.component.mjs +7 -7
- package/esm2020/chart/chart-container/series/block-area-series/block-area-series.component.mjs +5 -6
- package/esm2020/chart/chart-container/series/block-series/block-series.component.mjs +5 -6
- package/esm2020/chart/chart-container/x-axis/x-axis.component.mjs +5 -4
- package/esm2020/chart/legend/legend.component.mjs +3 -3
- package/fesm2015/tetacom-svg-charts.mjs +20 -19
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +18 -19
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1347,10 +1347,9 @@ class BlockSeriesComponent extends SeriesBaseComponent {
|
|
|
1347
1347
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1348
1348
|
}
|
|
1349
1349
|
ngOnInit() {
|
|
1350
|
-
|
|
1351
|
-
this.
|
|
1352
|
-
this.
|
|
1353
|
-
this.displayPoints = this.y.pipe(map((y) => {
|
|
1350
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
|
|
1351
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
|
|
1352
|
+
this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
|
|
1354
1353
|
return this.series.data.filter((point, index, arr) => {
|
|
1355
1354
|
const [min, max] = y.domain();
|
|
1356
1355
|
return (point.y >= min ||
|
|
@@ -1399,10 +1398,9 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
|
|
|
1399
1398
|
this.id = (Date.now() + Math.random()).toString(36);
|
|
1400
1399
|
}
|
|
1401
1400
|
ngOnInit() {
|
|
1402
|
-
|
|
1403
|
-
this.
|
|
1404
|
-
this.
|
|
1405
|
-
this.displayPoints = this.y.pipe(map((y) => {
|
|
1401
|
+
this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex)?.scale));
|
|
1402
|
+
this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex)?.scale));
|
|
1403
|
+
this.displayPoints = this.y.pipe(filter((y) => y), map((y) => {
|
|
1406
1404
|
return this.series.data.filter((point, index, arr) => {
|
|
1407
1405
|
const [min, max] = y.domain();
|
|
1408
1406
|
return (point.y >= min ||
|
|
@@ -1547,23 +1545,23 @@ class GridlinesComponent {
|
|
|
1547
1545
|
this.config = this.chartService.config;
|
|
1548
1546
|
this.tickYValues = this.svc.scales.pipe(map((_) => {
|
|
1549
1547
|
const ratio = this.size.height / 40;
|
|
1550
|
-
return _.y.get(0)
|
|
1548
|
+
return _.y.get(0)?.scale.ticks(ratio);
|
|
1551
1549
|
}));
|
|
1552
1550
|
this.tickXValues = this.svc.scales.pipe(map((_) => {
|
|
1553
1551
|
const ratio = this.size.width / 40;
|
|
1554
|
-
return _.x.get(0)
|
|
1552
|
+
return _.x.get(0)?.scale.ticks(ratio);
|
|
1555
1553
|
}));
|
|
1556
|
-
this.y = this.svc.scales.pipe(map((_) => _.y.get(0)
|
|
1557
|
-
this.x = this.svc.scales.pipe(map((_) => _.x.get(0)
|
|
1554
|
+
this.y = this.svc.scales.pipe(map((_) => _.y.get(0)?.scale));
|
|
1555
|
+
this.x = this.svc.scales.pipe(map((_) => _.x.get(0)?.scale));
|
|
1558
1556
|
}
|
|
1559
1557
|
ngAfterViewInit() {
|
|
1560
1558
|
}
|
|
1561
1559
|
}
|
|
1562
1560
|
GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1563
|
-
GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\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 });
|
|
1561
|
+
GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\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 });
|
|
1564
1562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, decorators: [{
|
|
1565
1563
|
type: Component,
|
|
1566
|
-
args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
|
|
1564
|
+
args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
|
|
1567
1565
|
}], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
|
|
1568
1566
|
type: Input
|
|
1569
1567
|
}] } });
|
|
@@ -1578,14 +1576,15 @@ class XAxisComponent {
|
|
|
1578
1576
|
}));
|
|
1579
1577
|
this.ticks = this.x.pipe(withLatestFrom(this._svc.size), map((_) => {
|
|
1580
1578
|
const [x, size] = _;
|
|
1581
|
-
const
|
|
1582
|
-
return x.ticks(size.width / (
|
|
1579
|
+
const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
|
|
1580
|
+
return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 2);
|
|
1583
1581
|
}));
|
|
1584
1582
|
}
|
|
1585
1583
|
getLabelTransform() {
|
|
1586
1584
|
return `translate(${this.size.width / 2}, ${this.axis.options.opposite ? -32 : 32})`;
|
|
1587
1585
|
}
|
|
1588
|
-
ngOnInit() {
|
|
1586
|
+
ngOnInit() {
|
|
1587
|
+
}
|
|
1589
1588
|
ngOnDestroy() {
|
|
1590
1589
|
this._alive = false;
|
|
1591
1590
|
}
|
|
@@ -2536,10 +2535,10 @@ class LegendComponent {
|
|
|
2536
2535
|
}
|
|
2537
2536
|
}
|
|
2538
2537
|
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\"
|
|
2538
|
+
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
2539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, decorators: [{
|
|
2541
2540
|
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\"
|
|
2541
|
+
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
2542
|
}], ctorParameters: function () { return [{ type: ChartService }]; }, propDecorators: { series: [{
|
|
2544
2543
|
type: Input
|
|
2545
2544
|
}], classLegend: [{
|