@acorex/charts 21.0.0-next.1 → 21.0.0-next.11
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/bar-chart/index.d.ts +9 -5
- package/donut-chart/index.d.ts +4 -5
- package/fesm2022/acorex-charts-bar-chart.mjs +99 -20
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-legend.mjs +4 -4
- package/fesm2022/acorex-charts-chart-legend.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-tooltip.mjs +4 -4
- package/fesm2022/acorex-charts-chart-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +9 -14
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-gauge-chart.mjs +16 -15
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-hierarchy-chart.mjs +22 -16
- package/fesm2022/acorex-charts-hierarchy-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-line-chart.mjs +10 -20
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts.mjs +71 -7
- package/fesm2022/acorex-charts.mjs.map +1 -1
- package/gauge-chart/index.d.ts +6 -6
- package/hierarchy-chart/index.d.ts +4 -5
- package/index.d.ts +39 -4
- package/line-chart/index.d.ts +4 -6
- package/package.json +1 -3
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { getEasingFunction, computeTooltipPosition } from '@acorex/charts';
|
|
1
|
+
import { AXChartComponent, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
|
|
2
2
|
import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { InjectionToken, inject, ChangeDetectorRef, input, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
5
|
-
import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
|
|
6
|
-
import { set } from 'lodash-es';
|
|
7
5
|
|
|
8
6
|
const AXGaugeChartDefaultConfig = {
|
|
9
7
|
minValue: 0,
|
|
@@ -22,11 +20,7 @@ const AXGaugeChartDefaultConfig = {
|
|
|
22
20
|
};
|
|
23
21
|
const AX_GAUGE_CHART_CONFIG = new InjectionToken('AX_GAUGE_CHART_CONFIG', {
|
|
24
22
|
providedIn: 'root',
|
|
25
|
-
factory: () =>
|
|
26
|
-
const global = inject(AX_GLOBAL_CONFIG);
|
|
27
|
-
set(global, 'chart.gaugeChart', AXGaugeChartDefaultConfig);
|
|
28
|
-
return AXGaugeChartDefaultConfig;
|
|
29
|
-
},
|
|
23
|
+
factory: () => AXGaugeChartDefaultConfig,
|
|
30
24
|
});
|
|
31
25
|
function gaugeChartConfig(config = {}) {
|
|
32
26
|
const result = {
|
|
@@ -40,7 +34,7 @@ function gaugeChartConfig(config = {}) {
|
|
|
40
34
|
* Gauge Chart Component
|
|
41
35
|
* Renders a semi-circular gauge chart with animated needle and thresholds
|
|
42
36
|
*/
|
|
43
|
-
class AXGaugeChartComponent {
|
|
37
|
+
class AXGaugeChartComponent extends AXChartComponent {
|
|
44
38
|
// Inject ChangeDetectorRef
|
|
45
39
|
cdr = inject(ChangeDetectorRef);
|
|
46
40
|
// Inputs
|
|
@@ -83,6 +77,7 @@ class AXGaugeChartComponent {
|
|
|
83
77
|
// Tooltip gap in pixels for precise spacing
|
|
84
78
|
TOOLTIP_GAP = 10;
|
|
85
79
|
constructor() {
|
|
80
|
+
super();
|
|
86
81
|
// Dynamically load D3 and initialize the chart when the component is ready
|
|
87
82
|
afterNextRender(() => {
|
|
88
83
|
this._initialized.set(true);
|
|
@@ -390,6 +385,7 @@ class AXGaugeChartComponent {
|
|
|
390
385
|
}
|
|
391
386
|
/**
|
|
392
387
|
* Updates the tooltip position based on the mouse event
|
|
388
|
+
* For gauge charts, we need simpler coordinate handling since D3 events are already in container coordinates
|
|
393
389
|
*/
|
|
394
390
|
updateTooltipPosition(event) {
|
|
395
391
|
const containerEl = this.chartContainerEl()?.nativeElement;
|
|
@@ -398,7 +394,12 @@ class AXGaugeChartComponent {
|
|
|
398
394
|
const rect = containerEl.getBoundingClientRect();
|
|
399
395
|
const tooltipEl = containerEl.querySelector('.chart-tooltip');
|
|
400
396
|
const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
|
|
401
|
-
|
|
397
|
+
// For gauge charts, the mouse event coordinates are already in the correct coordinate system
|
|
398
|
+
// relative to the container, but we need to position the tooltip appropriately for the semi-circular layout
|
|
399
|
+
// Position the tooltip slightly above and to the right of the cursor for better visibility
|
|
400
|
+
const tooltipX = event.clientX + 10;
|
|
401
|
+
const tooltipY = event.clientY - 10;
|
|
402
|
+
const pos = computeTooltipPosition(rect, tooltipRect, tooltipX, tooltipY, this.TOOLTIP_GAP);
|
|
402
403
|
this._tooltipPosition.set(pos);
|
|
403
404
|
this.cdr.detectChanges();
|
|
404
405
|
}
|
|
@@ -637,13 +638,13 @@ class AXGaugeChartComponent {
|
|
|
637
638
|
radiansToDegrees(radians) {
|
|
638
639
|
return radians * (180 / Math.PI);
|
|
639
640
|
}
|
|
640
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
641
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
641
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-gauge-chart .ax-gauge-chart svg g:has(text){font-family:inherit}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
642
643
|
}
|
|
643
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
644
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
|
|
644
645
|
type: Component,
|
|
645
|
-
args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
|
|
646
|
-
}], ctorParameters: () => [] });
|
|
646
|
+
args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-gauge-chart .ax-gauge-chart svg g:has(text){font-family:inherit}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"] }]
|
|
647
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
|
|
647
648
|
|
|
648
649
|
/**
|
|
649
650
|
* Generated bundle index. Do not edit.
|