@acorex/charts 20.1.14 → 20.1.15
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/fesm2022/acorex-charts-bar-chart.mjs +12 -12
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-legend.mjs +10 -10
- package/fesm2022/acorex-charts-chart-legend.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-tooltip.mjs +8 -8
- package/fesm2022/acorex-charts-chart-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +14 -14
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-gauge-chart.mjs +12 -12
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-hierarchy-chart.mjs +16 -16
- package/fesm2022/acorex-charts-hierarchy-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-line-chart.mjs +12 -12
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -51,8 +51,8 @@ function lineChartConfig(config = {}) {
|
|
|
51
51
|
* Line Chart Component for rendering data as lines with interactive hover effects and animations
|
|
52
52
|
*/
|
|
53
53
|
class AXLineChartComponent extends NXComponent {
|
|
54
|
-
data = input([]);
|
|
55
|
-
options = input({});
|
|
54
|
+
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
55
|
+
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
56
56
|
pointClick = output();
|
|
57
57
|
chartContainerEl = viewChild.required('chartContainer');
|
|
58
58
|
d3;
|
|
@@ -65,16 +65,16 @@ class AXLineChartComponent extends NXComponent {
|
|
|
65
65
|
width;
|
|
66
66
|
height;
|
|
67
67
|
margin = { top: 20, right: 25, bottom: 40, left: 50 };
|
|
68
|
-
_tooltipVisible = signal(false);
|
|
69
|
-
_tooltipPosition = signal({ x: 0, y: 0 });
|
|
68
|
+
_tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
|
|
69
|
+
_tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
|
|
70
70
|
_tooltipData = signal({
|
|
71
71
|
title: '',
|
|
72
72
|
value: '0',
|
|
73
73
|
percentage: '0%',
|
|
74
74
|
color: '',
|
|
75
|
-
});
|
|
76
|
-
_initialized = signal(false);
|
|
77
|
-
_rendered = signal(false);
|
|
75
|
+
}, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
|
|
76
|
+
_initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
|
|
77
|
+
_rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
|
|
78
78
|
hiddenSeries = new Set();
|
|
79
79
|
_fullNormalizedData = [];
|
|
80
80
|
tooltipVisible = this._tooltipVisible.asReadonly();
|
|
@@ -91,7 +91,7 @@ class AXLineChartComponent extends NXComponent {
|
|
|
91
91
|
...this.configToken,
|
|
92
92
|
...this.options(),
|
|
93
93
|
};
|
|
94
|
-
});
|
|
94
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
|
|
95
95
|
ngOnInit() {
|
|
96
96
|
this.loadD3();
|
|
97
97
|
}
|
|
@@ -110,7 +110,7 @@ class AXLineChartComponent extends NXComponent {
|
|
|
110
110
|
if (this._rendered()) {
|
|
111
111
|
this.updateChart();
|
|
112
112
|
}
|
|
113
|
-
});
|
|
113
|
+
}, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
|
|
114
114
|
ngAfterViewInit() {
|
|
115
115
|
this._initialized.set(true);
|
|
116
116
|
if (this.d3 && this.chartContainerEl()) {
|
|
@@ -1001,10 +1001,10 @@ class AXLineChartComponent extends NXComponent {
|
|
|
1001
1001
|
return this.d3.easeCubicOut;
|
|
1002
1002
|
}
|
|
1003
1003
|
}
|
|
1004
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1005
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.
|
|
1004
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1005
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n <!-- Shared tooltip component -->\n <ax-chart-tooltip\n [visible]=\"tooltipVisible()\"\n [position]=\"tooltipPosition()\"\n [data]=\"tooltipData()\"\n [showPercentage]=\"false\"\n ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-line-chart .ax-line-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1006
1006
|
}
|
|
1007
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1007
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AXLineChartComponent, decorators: [{
|
|
1008
1008
|
type: Component,
|
|
1009
1009
|
args: [{ selector: 'ax-line-chart', standalone: true, encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-line-chart\" #chartContainer>\n <!-- Shared tooltip component -->\n <ax-chart-tooltip\n [visible]=\"tooltipVisible()\"\n [position]=\"tooltipPosition()\"\n [data]=\"tooltipData()\"\n [showPercentage]=\"false\"\n ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-line-chart .ax-line-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
|
|
1010
1010
|
}] });
|