@acorex/charts 21.0.0-next.2 → 21.0.0-next.21
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 +67 -7
- package/donut-chart/index.d.ts +46 -8
- package/fesm2022/acorex-charts-bar-chart.mjs +342 -124
- 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 +298 -200
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-gauge-chart.mjs +93 -68
- 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 +295 -153
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts.mjs +93 -7
- package/fesm2022/acorex-charts.mjs.map +1 -1
- package/gauge-chart/index.d.ts +10 -7
- package/hierarchy-chart/index.d.ts +4 -5
- package/index.d.ts +43 -4
- package/line-chart/index.d.ts +70 -7
- package/package.json +1 -3
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AXPanViewDirective } from '@acorex/cdk/pan-view';
|
|
1
|
+
import { AXChartComponent } from '@acorex/charts';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken,
|
|
5
|
-
import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
|
|
6
|
-
import { set } from 'lodash-es';
|
|
3
|
+
import { InjectionToken, viewChild, contentChild, inject, NgZone, ViewContainerRef, signal, input, output, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
7
4
|
|
|
8
5
|
const AXHierarchyChartDefaultConfig = {
|
|
9
6
|
direction: 'vertical',
|
|
@@ -29,11 +26,7 @@ const AXHierarchyChartDefaultConfig = {
|
|
|
29
26
|
};
|
|
30
27
|
const AX_HIERARCHY_CHART_CONFIG = new InjectionToken('AX_HIERARCHY_CHART_CONFIG', {
|
|
31
28
|
providedIn: 'root',
|
|
32
|
-
factory: () =>
|
|
33
|
-
const global = inject(AX_GLOBAL_CONFIG);
|
|
34
|
-
set(global, 'chart.hierarchyChart', AXHierarchyChartDefaultConfig);
|
|
35
|
-
return AXHierarchyChartDefaultConfig;
|
|
36
|
-
},
|
|
29
|
+
factory: () => AXHierarchyChartDefaultConfig,
|
|
37
30
|
});
|
|
38
31
|
function hierarchyChartConfig(config = {}) {
|
|
39
32
|
const result = {
|
|
@@ -52,7 +45,7 @@ function hierarchyChartConfig(config = {}) {
|
|
|
52
45
|
*
|
|
53
46
|
* Supports both default node styling and custom node templates.
|
|
54
47
|
*/
|
|
55
|
-
class AXHierarchyChartComponent extends
|
|
48
|
+
class AXHierarchyChartComponent extends AXChartComponent {
|
|
56
49
|
// Chart container reference
|
|
57
50
|
chartContainer = viewChild.required('chartContainer');
|
|
58
51
|
// Custom node template provided by the user
|
|
@@ -274,6 +267,19 @@ class AXHierarchyChartComponent extends NXComponent {
|
|
|
274
267
|
.attr('transform', isHorizontal
|
|
275
268
|
? `translate(${margin.left}, ${height / 2 - centerX})`
|
|
276
269
|
: `translate(${width / 2}, ${margin.top})`);
|
|
270
|
+
// Add zoom and pan behavior (replaces AXPanViewDirective)
|
|
271
|
+
const zoom = this.d3
|
|
272
|
+
.zoom()
|
|
273
|
+
.scaleExtent([0.1, 3]) // Min zoom: 10%, Max zoom: 300%
|
|
274
|
+
.on('zoom', (event) => {
|
|
275
|
+
g.attr('transform', event.transform);
|
|
276
|
+
});
|
|
277
|
+
// Apply zoom behavior to SVG
|
|
278
|
+
svg.call(zoom);
|
|
279
|
+
// Set initial transform to match the centering
|
|
280
|
+
const initialTransform = this.d3.zoomIdentity
|
|
281
|
+
.translate(isHorizontal ? margin.left : width / 2, isHorizontal ? height / 2 - centerX : margin.top);
|
|
282
|
+
svg.call(zoom.transform, initialTransform);
|
|
277
283
|
// Draw links between nodes
|
|
278
284
|
const links = g
|
|
279
285
|
.selectAll('.link')
|
|
@@ -704,13 +710,13 @@ class AXHierarchyChartComponent extends NXComponent {
|
|
|
704
710
|
.style('opacity', '0.6')
|
|
705
711
|
.text(this.effectiveMessages().noDataHelp);
|
|
706
712
|
}
|
|
707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
713
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
714
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: AXHierarchyChartComponent, isStandalone: true, selector: "ax-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", nodeToggle: "nodeToggle" }, queries: [{ propertyName: "customNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
709
715
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
|
|
711
717
|
type: Component,
|
|
712
|
-
args: [{ selector: 'ax-hierarchy-chart', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
713
|
-
}], ctorParameters: () => [] });
|
|
718
|
+
args: [{ selector: 'ax-hierarchy-chart', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
|
|
719
|
+
}], ctorParameters: () => [], propDecorators: { chartContainer: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }], customNodeTemplate: [{ type: i0.ContentChild, args: ['nodeTemplate', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }] } });
|
|
714
720
|
|
|
715
721
|
/**
|
|
716
722
|
* Generated bundle index. Do not edit.
|