@tetacom/svg-charts 1.7.20 → 1.7.22
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.
|
@@ -750,15 +750,33 @@ class ScaleService {
|
|
|
750
750
|
.set(ScaleType.pow, d3.scalePow)
|
|
751
751
|
.set(ScaleType.sqrt, d3.scaleSqrt)
|
|
752
752
|
.set(ScaleType.band, d3.scaleBand);
|
|
753
|
-
this.scales = combineLatest([this.chartService.size, this.chartService.config, this.zoomService.zoomed]).pipe(map((
|
|
754
|
-
|
|
753
|
+
this.scales = combineLatest([this.chartService.size, this.chartService.config, this.zoomService.zoomed]).pipe(map(([size, config, zoom]) => {
|
|
754
|
+
config = { ...config };
|
|
755
|
+
config.xAxis = config.xAxis.map((_) => ({ ..._ }));
|
|
756
|
+
config.yAxis = config.yAxis.map((_) => ({ ..._ }));
|
|
755
757
|
const xAxisMap = new Map();
|
|
756
758
|
const yAxisMap = new Map();
|
|
757
|
-
config.yAxis.
|
|
758
|
-
|
|
759
|
+
config.yAxis.forEach((axis, index) => {
|
|
760
|
+
const newAxis = Axis.createAxis(AxisOrientation.y, config, index);
|
|
761
|
+
if (newAxis.options.visible &&
|
|
762
|
+
config.series.some((serie) => serie.yAxisIndex === index && serie.enabled && serie.data?.length > 0)) {
|
|
763
|
+
newAxis.options.visible = true;
|
|
764
|
+
}
|
|
765
|
+
else {
|
|
766
|
+
newAxis.options.visible = false;
|
|
767
|
+
}
|
|
768
|
+
yAxisMap.set(index, newAxis);
|
|
759
769
|
});
|
|
760
|
-
config.xAxis.
|
|
761
|
-
|
|
770
|
+
config.xAxis.forEach((axis, index) => {
|
|
771
|
+
const newAxis = Axis.createAxis(AxisOrientation.x, config, index);
|
|
772
|
+
if (newAxis.options.visible &&
|
|
773
|
+
config.series.some((serie) => serie.xAxisIndex === index && serie.enabled && serie.data?.length > 0)) {
|
|
774
|
+
newAxis.options.visible = true;
|
|
775
|
+
}
|
|
776
|
+
else {
|
|
777
|
+
newAxis.options.visible = false;
|
|
778
|
+
}
|
|
779
|
+
xAxisMap.set(index, newAxis);
|
|
762
780
|
});
|
|
763
781
|
// Generate x scales
|
|
764
782
|
const left = Array.from(yAxisMap.values())
|
|
@@ -2850,7 +2868,7 @@ class ChartContainerComponent {
|
|
|
2850
2868
|
this._svc.setPointerMove(event);
|
|
2851
2869
|
}
|
|
2852
2870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: ScaleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n size: size | async,\n config: config | async,\n scales: scales | async,\n plotBands: plotBands | async,\n visibleRect: visibleRect | async,\n}
|
|
2871
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ChartContainerComponent, isStandalone: true, selector: "teta-chart-container", ngImport: i0, template: "@if ({\n size: size | async,\n config: config | async,\n scales: scales | async,\n plotBands: plotBands | async,\n visibleRect: visibleRect | async,\n}; as data) {\n @if (data.config?.tooltip?.enable) {\n <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n @for (item of data.scales.y | keyvalue; track item.value.index) {\n @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-y-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n [attr.y]=\"0\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.width]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n <g class=\"x-axis-container\">\n @for (item of data.scales.x | keyvalue; track item.value.index) {\n @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-x-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"0\"\n [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n </svg>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg\n tetaZoomable\n tetaBrushable\n class=\"position-absolute\"\n [size]=\"data.visibleRect\"\n [config]=\"data.config\"\n [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n (click)=\"click($event, data.scales.x, data.scales.y)\"\n (mouseleave)=\"mouseLeave($event)\"\n (mousemove)=\"mouseMove($event)\">\n @if (data.config.gridLines?.enable !== false) {\n <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n }\n <g class=\"x-axis-plotband-container\">\n @for (plotBand of data.plotBands; track $index) {\n <g teta-plot-band\n [plotBand]=\"plotBand.plotBand\"\n [scale]=\"plotBand.axis.scale\"\n [size]=\"data.visibleRect\"\n [axis]=\"plotBand.axis\"></g>\n }\n </g>\n <g class=\"series-container\">\n @for (series of data.config.series; track $index) {\n @if (series.visible && series.enabled) {\n <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n }\n }\n </g>\n <g class=\"x-axis-plotline-container\">\n @for (axis of data.config.xAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.get(i)\"></g>\n }\n }\n </g>\n <g class=\"y-axis-plotline-container\">\n @for (axis of data.config.yAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.y.get(i)\"></g>\n }\n }\n </g>\n <g class=\"annotations\">\n @for (annotation of data.config.annotations; track annotation) {\n <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n }\n </g>\n @if (data.config.tooltip?.showCrosshair) {\n <g class=\"crosshair\">\n <g teta-crosshair [size]=\"data.visibleRect\"></g>\n </g>\n }\n </svg>\n @if (data.config.controls?.enable) {\n <teta-series-controls [series]=\"data.config.series\"\n class=\"position-absolute\"\n style=\"transform: translateX(-100%)\"\n [style.top.px]=\"data.visibleRect.y + 12\"\n [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n </teta-series-controls>\n }\n }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: SeriesControlsComponent, selector: "teta-series-controls", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2854
2872
|
}
|
|
2855
2873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ChartContainerComponent, decorators: [{
|
|
2856
2874
|
type: Component,
|
|
@@ -2869,7 +2887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2869
2887
|
CrosshairComponent,
|
|
2870
2888
|
BrushableDirective,
|
|
2871
2889
|
SeriesControlsComponent,
|
|
2872
|
-
], template: "@if ({\n size: size | async,\n config: config | async,\n scales: scales | async,\n plotBands: plotBands | async,\n visibleRect: visibleRect | async,\n}
|
|
2890
|
+
], template: "@if ({\n size: size | async,\n config: config | async,\n scales: scales | async,\n plotBands: plotBands | async,\n visibleRect: visibleRect | async,\n}; as data) {\n @if (data.config?.tooltip?.enable) {\n <teta-tooltip [size]=\"data.size\" [config]=\"data.config\"></teta-tooltip>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n <g class=\"y-axis-container\">\n @for (item of data.scales.y | keyvalue; track item.value.index) {\n @if (item.value.selfSize > 0 && item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-y-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n [attr.y]=\"0\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.width]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n <g class=\"x-axis-container\">\n @for (item of data.scales.x | keyvalue; track item.value.index) {\n @if (item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0) {\n <g teta-x-axis\n [axis]=\"item.value\"\n [size]=\"data.visibleRect\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n <rect tetaZoomable\n fill-opacity=\"0\"\n [axis]=\"item.value\"\n [config]=\"data.config\"\n [size]=\"data.visibleRect\"\n [attr.x]=\"0\"\n [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"item.value.selfSize\"\n [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n }\n }\n </g>\n </svg>\n }\n @if (data.size?.height > 0 &&\n data.size?.width > 0 &&\n data.visibleRect?.height > 0 &&\n data.visibleRect?.width > 0 &&\n data.scales?.x.size === data.config.xAxis.length &&\n data.scales?.y.size === data.config.yAxis.length) {\n <svg\n tetaZoomable\n tetaBrushable\n class=\"position-absolute\"\n [size]=\"data.visibleRect\"\n [config]=\"data.config\"\n [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n [attr.width]=\"data.visibleRect.width\"\n [attr.height]=\"data.visibleRect.height\"\n [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n [style.transform]=\"'translate(' + data.visibleRect.x + 'px, ' + data.visibleRect.y + 'px)'\"\n (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n (click)=\"click($event, data.scales.x, data.scales.y)\"\n (mouseleave)=\"mouseLeave($event)\"\n (mousemove)=\"mouseMove($event)\">\n @if (data.config.gridLines?.enable !== false) {\n <g class=\"gridlines\" teta-gridlines [size]=\"data.size\"></g>\n }\n <g class=\"x-axis-plotband-container\">\n @for (plotBand of data.plotBands; track $index) {\n <g teta-plot-band\n [plotBand]=\"plotBand.plotBand\"\n [scale]=\"plotBand.axis.scale\"\n [size]=\"data.visibleRect\"\n [axis]=\"plotBand.axis\"></g>\n }\n </g>\n <g class=\"series-container\">\n @for (series of data.config.series; track $index) {\n @if (series.visible && series.enabled) {\n <g teta-series-host [config]=\"data.config\" [series]=\"series\"></g>\n }\n }\n </g>\n <g class=\"x-axis-plotline-container\">\n @for (axis of data.config.xAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.x.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.x.get(i)\"></g>\n }\n }\n </g>\n <g class=\"y-axis-plotline-container\">\n @for (axis of data.config.yAxis; let i = $index; track axis) {\n @for (plotLine of axis.plotLines; track $index) {\n <g teta-plot-line\n [plotLine]=\"plotLine\"\n [scale]=\"data.scales.y.get(i).scale\"\n [size]=\"data.size\"\n [axis]=\"data.scales.y.get(i)\"></g>\n }\n }\n </g>\n <g class=\"annotations\">\n @for (annotation of data.config.annotations; track annotation) {\n <g teta-annotation [visibleRect]=\"data.visibleRect\" [annotation]=\"annotation\"></g>\n }\n </g>\n @if (data.config.tooltip?.showCrosshair) {\n <g class=\"crosshair\">\n <g teta-crosshair [size]=\"data.visibleRect\"></g>\n </g>\n }\n </svg>\n @if (data.config.controls?.enable) {\n <teta-series-controls [series]=\"data.config.series\"\n class=\"position-absolute\"\n style=\"transform: translateX(-100%)\"\n [style.top.px]=\"data.visibleRect.y + 12\"\n [style.left.px]=\"data.visibleRect.width + data.visibleRect.x -12\">\n </teta-series-controls>\n }\n }\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
|
|
2873
2891
|
}], ctorParameters: () => [{ type: ChartService }, { type: ScaleService }, { type: i0.ElementRef }] });
|
|
2874
2892
|
|
|
2875
2893
|
class LegendComponent {
|