@acorex/charts 21.0.1-next.83 → 21.0.1-next.85

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.
@@ -802,11 +802,11 @@ class AXDonutChartComponent extends AXChartComponent {
802
802
  }));
803
803
  }
804
804
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
805
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-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: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n <!-- Tooltip component -->\n <ax-chart-tooltip\n [visible]=\"tooltipVisible()\"\n [position]=\"tooltipPosition()\"\n [data]=\"tooltipData()\"\n [showPercentage]=\"true\"\n ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-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 });
805
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-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: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n <!-- Tooltip component -->\n <ax-chart-tooltip\n [visible]=\"tooltipVisible()\"\n [position]=\"tooltipPosition()\"\n [data]=\"tooltipData()\"\n [showPercentage]=\"true\"\n ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-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 });
806
806
  }
807
807
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDonutChartComponent, decorators: [{
808
808
  type: Component,
809
- args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n <!-- Tooltip component -->\n <ax-chart-tooltip\n [visible]=\"tooltipVisible()\"\n [position]=\"tooltipPosition()\"\n [data]=\"tooltipData()\"\n [showPercentage]=\"true\"\n ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
809
+ args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n <!-- Tooltip component -->\n <ax-chart-tooltip\n [visible]=\"tooltipVisible()\"\n [position]=\"tooltipPosition()\"\n [data]=\"tooltipData()\"\n [showPercentage]=\"true\"\n ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
810
810
  }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], segmentHover: [{ type: i0.Output, args: ["segmentHover"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
811
811
 
812
812
  /**
@@ -1,19 +1,18 @@
1
1
  import { AXChartComponent, getEasingFunction, resolveCssColorInContext, computeTooltipPosition } from '@acorex/charts';
2
2
  import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
3
- import { AXPlatform } from '@acorex/core/platform';
4
3
  import * as i0 from '@angular/core';
5
4
  import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
6
- import { map } from 'rxjs';
7
5
 
8
6
  const AXFunnelChartDefaultConfig = {
9
- margin: { top: 20, right: 160, bottom: 20, left: 160 },
7
+ margin: { top: 16, right: 16, bottom: 16, left: 16 },
10
8
  neckWidth: 0.3,
11
9
  showLabels: true,
10
+ showSegmentValues: true,
12
11
  labelOffset: 24,
13
12
  showTooltip: true,
14
13
  animationDuration: 1000,
15
14
  animationEasing: 'cubic-out',
16
- color: 'rgb(99, 102, 241)',
15
+ color: 'rgb(var(--ax-sys-color-primary-500))',
17
16
  messages: {
18
17
  noData: 'No funnel data available',
19
18
  noDataIcon: 'fa-light fa-filter-list',
@@ -25,6 +24,11 @@ const AX_FUNNEL_CHART_CONFIG = new InjectionToken('AX_FUNNEL_CHART_CONFIG', {
25
24
  });
26
25
 
27
26
  class AXFunnelChartComponent extends AXChartComponent {
27
+ /**
28
+ * Fixed SVG coordinate system; the graphic scales to the container via `width`/`height: 100%` + `viewBox`.
29
+ * Margins and geometry are expressed in these units (same numeric scale as a ~400px reference viewport).
30
+ */
31
+ static VIEW_BOX_SIZE = 400;
28
32
  // Inputs
29
33
  data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
30
34
  options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -37,9 +41,6 @@ class AXFunnelChartComponent extends AXChartComponent {
37
41
  d3;
38
42
  _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
39
43
  _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
40
- platformService = inject(AXPlatform);
41
- isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
42
- directionSub;
43
44
  // Tooltip Signals
44
45
  _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
45
46
  _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
@@ -58,12 +59,6 @@ class AXFunnelChartComponent extends AXChartComponent {
58
59
  afterNextRender(() => {
59
60
  this._initialized.set(true);
60
61
  this.loadD3();
61
- this.directionSub = this.platformService.directionChange.pipe(map((i) => i.data === 'rtl')).subscribe((isRtl) => {
62
- this.isRtl.set(isRtl);
63
- if (this._rendered()) {
64
- this.updateChart();
65
- }
66
- });
67
62
  });
68
63
  effect(() => {
69
64
  // Trigger update on data or option change
@@ -75,7 +70,6 @@ class AXFunnelChartComponent extends AXChartComponent {
75
70
  });
76
71
  }
77
72
  ngOnDestroy() {
78
- this.directionSub?.unsubscribe();
79
73
  this.cleanupChart();
80
74
  }
81
75
  async loadD3() {
@@ -101,28 +95,32 @@ class AXFunnelChartComponent extends AXChartComponent {
101
95
  return;
102
96
  }
103
97
  const container = this.chartContainerEl().nativeElement;
104
- const width = container.clientWidth;
105
- const height = container.clientHeight;
98
+ const vb = AXFunnelChartComponent.VIEW_BOX_SIZE;
99
+ const width = vb;
100
+ const height = vb;
106
101
  const opt = this.effectiveOptions();
107
102
  const margin = opt.margin;
108
- const isRtl = this.isRtl();
109
- const labelOffset = opt.labelOffset ?? 24;
103
+ const easing = getEasingFunction(this.d3, opt.animationEasing);
104
+ const resolvedBaseForIntensity = this.resolveCssColor(opt.color ?? 'rgb(99, 102, 241)');
110
105
  this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
111
106
  const svg = this.d3
112
107
  .select(this.svgElement)
113
108
  .attr('width', '100%')
114
109
  .attr('height', '100%')
115
110
  .attr('viewBox', `0 0 ${width} ${height}`)
116
- .attr('preserveAspectRatio', 'xMidYMid meet');
111
+ .attr('preserveAspectRatio', 'xMidYMid meet')
112
+ .attr('class', 'ax-funnel-svg');
117
113
  container.appendChild(this.svgElement);
118
114
  const innerWidth = width - margin.left - margin.right;
119
115
  const innerHeight = height - margin.top - margin.bottom;
116
+ if (innerWidth < 1 || innerHeight < 1) {
117
+ return;
118
+ }
120
119
  const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
121
120
  const sliceHeight = innerHeight / data.length;
122
121
  const maxValue = data[0].value;
123
122
  const minValue = data[data.length - 1]?.value ?? maxValue;
124
- const easing = getEasingFunction(this.d3, opt.animationEasing);
125
- const resolvedBaseForIntensity = this.resolveCssColor(opt.color ?? 'rgb(99, 102, 241)');
123
+ const showSegmentValues = opt.showSegmentValues !== false;
126
124
  data.forEach((d, i) => {
127
125
  const topVal = d.value;
128
126
  const bottomVal = data[i + 1]?.value ?? d.value * opt.neckWidth;
@@ -159,27 +157,47 @@ class AXFunnelChartComponent extends AXChartComponent {
159
157
  .delay(i * 80)
160
158
  .ease(easing)
161
159
  .style('opacity', 1);
160
+ sliceGroup.append('title').text(`${d.name}: ${d.value.toLocaleString()}`);
162
161
  if (opt.showLabels) {
162
+ const { cx, cy, width: midW } = this.trapezoidInteriorMetrics(xTop, topW, xBottom, bottomW, yTop, yBottom);
163
+ const { nameSize, valueSize, showValueLine, displayName } = this.computeSegmentLabelTypography(sliceHeight, midW, d.name, showSegmentValues);
164
+ const { primary, secondary } = this.pickOnSliceTextColors(computedColor);
163
165
  const labelGroup = sliceGroup.append('g').attr('class', 'funnel-label-group').style('opacity', 0);
164
- const labelX = isRtl ? innerWidth / 2 - topW / 2 - labelOffset : innerWidth / 2 + topW / 2 + labelOffset;
165
- // In RTL documents, SVG `text-anchor: end` can expand *into* the plot area because "end"
166
- // becomes the logical left edge. Using `start` makes the label expand away from the slice
167
- // on both LTR (to the right) and RTL (to the left).
168
- const anchor = 'start';
169
- labelGroup
170
- .append('text')
171
- .attr('class', 'funnel-label-name')
172
- .attr('x', labelX)
173
- .attr('y', yTop + sliceHeight / 2 - 5)
174
- .attr('text-anchor', anchor)
175
- .text(d.name);
176
- labelGroup
177
- .append('text')
178
- .attr('class', 'funnel-label-value')
179
- .attr('x', labelX)
180
- .attr('y', yTop + sliceHeight / 2 + 15)
181
- .attr('text-anchor', anchor)
182
- .text(d.value.toLocaleString());
166
+ const lineGap = Math.max(2, sliceHeight * 0.06);
167
+ if (showValueLine && valueSize > 0) {
168
+ labelGroup
169
+ .append('text')
170
+ .attr('class', 'funnel-label-name')
171
+ .attr('x', cx)
172
+ .attr('y', cy - (valueSize * 0.55 + lineGap * 0.5))
173
+ .attr('text-anchor', 'middle')
174
+ .attr('dominant-baseline', 'middle')
175
+ .style('font-size', `${nameSize}`)
176
+ .style('fill', primary)
177
+ .text(displayName);
178
+ labelGroup
179
+ .append('text')
180
+ .attr('class', 'funnel-label-value')
181
+ .attr('x', cx)
182
+ .attr('y', cy + (nameSize * 0.55 + lineGap * 0.5))
183
+ .attr('text-anchor', 'middle')
184
+ .attr('dominant-baseline', 'middle')
185
+ .style('font-size', `${valueSize}`)
186
+ .style('fill', secondary)
187
+ .text(d.value.toLocaleString());
188
+ }
189
+ else {
190
+ labelGroup
191
+ .append('text')
192
+ .attr('class', 'funnel-label-name funnel-label-name--single')
193
+ .attr('x', cx)
194
+ .attr('y', cy)
195
+ .attr('text-anchor', 'middle')
196
+ .attr('dominant-baseline', 'middle')
197
+ .style('font-size', `${nameSize}`)
198
+ .style('fill', primary)
199
+ .text(displayName);
200
+ }
183
201
  labelGroup
184
202
  .transition()
185
203
  .duration(600)
@@ -188,6 +206,79 @@ class AXFunnelChartComponent extends AXChartComponent {
188
206
  }
189
207
  });
190
208
  }
209
+ trapezoidInteriorMetrics(xTop, topW, xBottom, bottomW, yTop, yBottom) {
210
+ const cy = (yTop + yBottom) / 2;
211
+ const denom = yBottom - yTop || 1;
212
+ const t = (cy - yTop) / denom;
213
+ const xL = xTop + t * (xBottom - xTop);
214
+ const xR = xTop + topW + t * (xBottom + bottomW - (xTop + topW));
215
+ return { cx: (xL + xR) / 2, cy, width: Math.max(0, xR - xL) };
216
+ }
217
+ computeSegmentLabelTypography(sliceHeight, segmentInnerWidth, name, wantValue) {
218
+ const charFactor = 0.52;
219
+ const minFont = 6.5;
220
+ const maxName = 15;
221
+ const innerW = Math.max(segmentInnerWidth, 8);
222
+ let showValueLine = wantValue && sliceHeight >= 17 && innerW >= 38;
223
+ const fitNameOnly = () => {
224
+ const raw = Math.min(maxName + 2, sliceHeight * 0.42, innerW / Math.max(name.length * charFactor, 2.5));
225
+ return Math.max(minFont, raw);
226
+ };
227
+ const fitBoth = () => {
228
+ const vBudget = sliceHeight * 0.76;
229
+ let nameSize = Math.min(maxName, vBudget / 2.45, innerW / Math.max(name.length * charFactor, 2.5));
230
+ nameSize = Math.max(minFont, nameSize);
231
+ let valueSize = Math.max(minFont, Math.min(nameSize * 0.88, vBudget / 2.45));
232
+ const stackH = nameSize * 1.18 + valueSize * 1.08 + sliceHeight * 0.05;
233
+ if (stackH > sliceHeight * 0.88) {
234
+ const scale = (sliceHeight * 0.88) / stackH;
235
+ nameSize = Math.max(minFont, nameSize * scale);
236
+ valueSize = Math.max(minFont, valueSize * scale);
237
+ }
238
+ return { nameSize, valueSize };
239
+ };
240
+ let nameSize;
241
+ let valueSize = 0;
242
+ if (showValueLine) {
243
+ const both = fitBoth();
244
+ nameSize = both.nameSize;
245
+ valueSize = both.valueSize;
246
+ if (nameSize * 1.2 + valueSize * 1.05 > sliceHeight * 0.9) {
247
+ showValueLine = false;
248
+ }
249
+ }
250
+ if (!showValueLine) {
251
+ nameSize = fitNameOnly();
252
+ }
253
+ const maxChars = Math.max(2, Math.floor(innerW / (nameSize * charFactor)));
254
+ const displayName = this.truncateLabel(name, maxChars);
255
+ return { nameSize, valueSize, showValueLine, displayName };
256
+ }
257
+ truncateLabel(name, maxChars) {
258
+ if (name.length <= maxChars)
259
+ return name;
260
+ if (maxChars <= 1)
261
+ return '…';
262
+ return `${name.slice(0, maxChars - 1)}…`;
263
+ }
264
+ pickOnSliceTextColors(sliceColorCss) {
265
+ const resolved = this.resolveCssColor(sliceColorCss);
266
+ const c = this.d3.color(resolved);
267
+ if (!c) {
268
+ return { primary: 'rgba(255,255,255,0.95)', secondary: 'rgba(255,255,255,0.78)' };
269
+ }
270
+ const rgb = this.d3.rgb(c);
271
+ const a = Math.max(0, Math.min(1, rgb.opacity));
272
+ // Blend slice color over white (typical card/surface) so low-alpha intensity ramps read correctly.
273
+ const br = (rgb.r / 255) * a + (1 - a);
274
+ const bg = (rgb.g / 255) * a + (1 - a);
275
+ const bb = (rgb.b / 255) * a + (1 - a);
276
+ const lum = 0.2126 * br + 0.7152 * bg + 0.0722 * bb;
277
+ if (lum > 0.62) {
278
+ return { primary: 'rgba(15,23,42,0.92)', secondary: 'rgba(15,23,42,0.72)' };
279
+ }
280
+ return { primary: 'rgba(255,255,255,0.96)', secondary: 'rgba(255,255,255,0.78)' };
281
+ }
191
282
  resolveSliceColor(item, index, opt, minValue, maxValue, resolvedBaseRgb) {
192
283
  if (item.color)
193
284
  return this.resolveCssColor(item.color);
@@ -259,11 +350,11 @@ class AXFunnelChartComponent extends AXChartComponent {
259
350
  }
260
351
  }
261
352
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
262
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXFunnelChartComponent, isStandalone: true, selector: "ax-funnel-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: { segmentClick: "segmentClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-funnel-chart-container\" role=\"img\" #chartContainer>\n @if (data()?.length === 0) {\n <div class=\"ax-funnel-no-data\">\n <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n <p class=\"ax-funnel-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n </div>\n }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n", styles: ["ax-funnel-chart{display:block;width:100%;height:100%;min-height:350px;--ax-comp-funnel-bg: 0, 0, 0, 0;--ax-comp-funnel-text: var(--ax-sys-color-on-surface);--ax-comp-funnel-label-secondary: var(--ax-sys-color-on-surface-variant);--ax-comp-funnel-slice-opacity: .9;--ax-comp-funnel-dim-opacity: .25}ax-funnel-chart .ax-funnel-chart-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:rgba(var(--ax-comp-funnel-bg));padding:1rem}ax-funnel-chart .ax-funnel-chart-container svg{display:block;width:100%;height:100%;overflow:visible}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice{cursor:pointer;opacity:var(--ax-comp-funnel-slice-opacity);transition:opacity .3s cubic-bezier(.4,0,.2,1)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice.is-active{opacity:1;filter:saturate(1.2)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group{pointer-events:none}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-name{font-size:12px;font-weight:700;fill:rgb(var(--ax-comp-funnel-text));text-transform:uppercase;letter-spacing:.05em}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-value{font-size:13px;fill:rgb(var(--ax-comp-funnel-label-secondary));font-variant-numeric:tabular-nums;font-weight:500}ax-funnel-chart .ax-funnel-chart-container svg.is-dimmed .funnel-slice:not(.is-active){opacity:var(--ax-comp-funnel-dim-opacity)}ax-funnel-chart .ax-funnel-no-data{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(var(--ax-comp-funnel-text),.6)}ax-funnel-chart .ax-funnel-no-data i{font-size:2rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
353
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXFunnelChartComponent, isStandalone: true, selector: "ax-funnel-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: { segmentClick: "segmentClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-funnel-chart-container\" role=\"img\" #chartContainer>\n @if (data()?.length === 0) {\n <div class=\"ax-funnel-no-data\">\n <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n <p class=\"ax-funnel-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n </div>\n }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n", styles: ["ax-funnel-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;container-type:size;--ax-comp-funnel-bg: 0, 0, 0, 0;--ax-comp-funnel-text: var(--ax-sys-color-on-surface);--ax-comp-funnel-label-secondary: var(--ax-sys-color-on-surface-variant);--ax-comp-funnel-slice-opacity: 1;--ax-comp-funnel-dim-opacity: .22;--ax-comp-funnel-slice-stroke: rgba(255, 255, 255, .14);--ax-comp-funnel-slice-shadow: 0 10px 28px rgba(15, 23, 42, .12)}ax-funnel-chart .ax-funnel-chart-container{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:clamp(10px,2cqw,20px);background-color:rgba(var(--ax-comp-funnel-bg));padding:clamp(.5rem,2cqw,1.25rem);box-sizing:border-box}ax-funnel-chart .ax-funnel-chart-container svg{display:block;width:100%;height:100%;min-height:0;overflow:visible}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice{cursor:pointer;opacity:var(--ax-comp-funnel-slice-opacity);stroke:var(--ax-comp-funnel-slice-stroke);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(var(--ax-comp-funnel-slice-shadow));transition:filter .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice.is-active{opacity:1;filter:drop-shadow(var(--ax-comp-funnel-slice-shadow)) saturate(1.08) brightness(1.03)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group{pointer-events:none;font-family:inherit;font-synthesis:none;text-rendering:geometricPrecision}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-name{font-weight:650;letter-spacing:.02em;&--single{font-weight:680;letter-spacing:.015em}}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-value{font-weight:560;font-variant-numeric:tabular-nums;letter-spacing:.01em}ax-funnel-chart .ax-funnel-chart-container svg.is-dimmed .funnel-slice:not(.is-active){opacity:var(--ax-comp-funnel-dim-opacity)}ax-funnel-chart .ax-funnel-no-data{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(var(--ax-comp-funnel-text),.6)}ax-funnel-chart .ax-funnel-no-data i{font-size:clamp(1.5rem,4cqw,2rem);margin-bottom:.5rem}ax-funnel-chart .ax-funnel-no-data .ax-funnel-no-data-text{font-size:clamp(.875rem,2.5cqw,1rem)}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
263
354
  }
264
355
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFunnelChartComponent, decorators: [{
265
356
  type: Component,
266
- args: [{ selector: 'ax-funnel-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-funnel-chart-container\" role=\"img\" #chartContainer>\n @if (data()?.length === 0) {\n <div class=\"ax-funnel-no-data\">\n <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n <p class=\"ax-funnel-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n </div>\n }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n", styles: ["ax-funnel-chart{display:block;width:100%;height:100%;min-height:350px;--ax-comp-funnel-bg: 0, 0, 0, 0;--ax-comp-funnel-text: var(--ax-sys-color-on-surface);--ax-comp-funnel-label-secondary: var(--ax-sys-color-on-surface-variant);--ax-comp-funnel-slice-opacity: .9;--ax-comp-funnel-dim-opacity: .25}ax-funnel-chart .ax-funnel-chart-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:rgba(var(--ax-comp-funnel-bg));padding:1rem}ax-funnel-chart .ax-funnel-chart-container svg{display:block;width:100%;height:100%;overflow:visible}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice{cursor:pointer;opacity:var(--ax-comp-funnel-slice-opacity);transition:opacity .3s cubic-bezier(.4,0,.2,1)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice.is-active{opacity:1;filter:saturate(1.2)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group{pointer-events:none}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-name{font-size:12px;font-weight:700;fill:rgb(var(--ax-comp-funnel-text));text-transform:uppercase;letter-spacing:.05em}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-value{font-size:13px;fill:rgb(var(--ax-comp-funnel-label-secondary));font-variant-numeric:tabular-nums;font-weight:500}ax-funnel-chart .ax-funnel-chart-container svg.is-dimmed .funnel-slice:not(.is-active){opacity:var(--ax-comp-funnel-dim-opacity)}ax-funnel-chart .ax-funnel-no-data{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(var(--ax-comp-funnel-text),.6)}ax-funnel-chart .ax-funnel-no-data i{font-size:2rem;margin-bottom:.5rem}\n"] }]
357
+ args: [{ selector: 'ax-funnel-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-funnel-chart-container\" role=\"img\" #chartContainer>\n @if (data()?.length === 0) {\n <div class=\"ax-funnel-no-data\">\n <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n <p class=\"ax-funnel-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n </div>\n }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n", styles: ["ax-funnel-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;container-type:size;--ax-comp-funnel-bg: 0, 0, 0, 0;--ax-comp-funnel-text: var(--ax-sys-color-on-surface);--ax-comp-funnel-label-secondary: var(--ax-sys-color-on-surface-variant);--ax-comp-funnel-slice-opacity: 1;--ax-comp-funnel-dim-opacity: .22;--ax-comp-funnel-slice-stroke: rgba(255, 255, 255, .14);--ax-comp-funnel-slice-shadow: 0 10px 28px rgba(15, 23, 42, .12)}ax-funnel-chart .ax-funnel-chart-container{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:clamp(10px,2cqw,20px);background-color:rgba(var(--ax-comp-funnel-bg));padding:clamp(.5rem,2cqw,1.25rem);box-sizing:border-box}ax-funnel-chart .ax-funnel-chart-container svg{display:block;width:100%;height:100%;min-height:0;overflow:visible}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice{cursor:pointer;opacity:var(--ax-comp-funnel-slice-opacity);stroke:var(--ax-comp-funnel-slice-stroke);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(var(--ax-comp-funnel-slice-shadow));transition:filter .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-slice.is-active{opacity:1;filter:drop-shadow(var(--ax-comp-funnel-slice-shadow)) saturate(1.08) brightness(1.03)}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group{pointer-events:none;font-family:inherit;font-synthesis:none;text-rendering:geometricPrecision}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-name{font-weight:650;letter-spacing:.02em;&--single{font-weight:680;letter-spacing:.015em}}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-value{font-weight:560;font-variant-numeric:tabular-nums;letter-spacing:.01em}ax-funnel-chart .ax-funnel-chart-container svg.is-dimmed .funnel-slice:not(.is-active){opacity:var(--ax-comp-funnel-dim-opacity)}ax-funnel-chart .ax-funnel-no-data{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(var(--ax-comp-funnel-text),.6)}ax-funnel-chart .ax-funnel-no-data i{font-size:clamp(1.5rem,4cqw,2rem);margin-bottom:.5rem}ax-funnel-chart .ax-funnel-no-data .ax-funnel-no-data-text{font-size:clamp(.875rem,2.5cqw,1rem)}\n"] }]
267
358
  }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
268
359
 
269
360
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"acorex-charts-funnel-chart.mjs","sources":["../../../../packages/charts/funnel-chart/src/lib/funnel-chart.config.ts","../../../../packages/charts/funnel-chart/src/lib/funnel-chart.component.ts","../../../../packages/charts/funnel-chart/src/lib/funnel-chart.component.html","../../../../packages/charts/funnel-chart/src/acorex-charts-funnel-chart.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { AXFunnelChartOption } from './funnel-chart.type';\n\nexport const AXFunnelChartDefaultConfig: AXFunnelChartOption = {\n margin: { top: 20, right: 160, bottom: 20, left: 160 },\n neckWidth: 0.3,\n showLabels: true,\n labelOffset: 24,\n showTooltip: true,\n animationDuration: 1000,\n animationEasing: 'cubic-out',\n color: 'rgb(99, 102, 241)',\n messages: {\n noData: 'No funnel data available',\n noDataIcon: 'fa-light fa-filter-list',\n },\n};\n\nexport const AX_FUNNEL_CHART_CONFIG = new InjectionToken<AXFunnelChartOption>('AX_FUNNEL_CHART_CONFIG', {\n providedIn: 'root',\n factory: () => AXFunnelChartDefaultConfig,\n});\n","import {\n AXChartComponent,\n AXChartComponentBase,\n computeTooltipPosition,\n getEasingFunction,\n resolveCssColorInContext,\n} from '@acorex/charts';\nimport { AXChartTooltipComponent, AXChartTooltipData } from '@acorex/charts/chart-tooltip';\nimport { AXPlatform } from '@acorex/core/platform';\nimport {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n input,\n OnDestroy,\n output,\n signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { map, Subscription } from 'rxjs';\nimport { AX_FUNNEL_CHART_CONFIG } from './funnel-chart.config';\nimport { AXFunnelChartOption, AXFunnelData } from './funnel-chart.type';\n\n@Component({\n selector: 'ax-funnel-chart',\n templateUrl: './funnel-chart.component.html',\n styleUrls: ['./funnel-chart.component.css'],\n encapsulation: ViewEncapsulation.None,\n imports: [AXChartTooltipComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXFunnelChartComponent extends AXChartComponent implements OnDestroy, AXChartComponentBase {\n // Inputs\n data = input<AXFunnelData[]>([]);\n options = input<AXFunnelChartOption>({});\n\n // Outputs\n /** Emitted when a funnel segment is clicked */\n segmentClick = output<AXFunnelData>();\n\n private readonly chartContainerEl = viewChild.required<ElementRef<HTMLDivElement>>('chartContainer');\n\n // SVG State\n private svgElement: SVGSVGElement | null = null;\n protected d3!: typeof import('d3');\n private _initialized = signal(false);\n private _rendered = signal(false);\n private platformService = inject(AXPlatform);\n protected isRtl = signal(this.platformService.isRtl());\n private directionSub?: Subscription;\n\n // Tooltip Signals\n private _tooltipVisible = signal(false);\n private _tooltipPosition = signal({ x: 0, y: 0 });\n private _tooltipData = signal<AXChartTooltipData>({ title: '', value: '' });\n private _tooltipRafId: number | null = null;\n\n protected tooltipVisible = this._tooltipVisible.asReadonly();\n protected tooltipPosition = this._tooltipPosition.asReadonly();\n protected tooltipData = this._tooltipData.asReadonly();\n\n private configToken = inject(AX_FUNNEL_CHART_CONFIG);\n\n protected effectiveOptions = computed(() => ({\n ...this.configToken,\n ...this.options(),\n }));\n\n constructor() {\n super();\n\n afterNextRender(() => {\n this._initialized.set(true);\n this.loadD3();\n this.directionSub = this.platformService.directionChange.pipe(map((i) => i.data === 'rtl')).subscribe((isRtl) => {\n this.isRtl.set(isRtl);\n if (this._rendered()) {\n this.updateChart();\n }\n });\n });\n\n effect(() => {\n // Trigger update on data or option change\n this.data();\n this.effectiveOptions();\n if (this._rendered()) {\n this.updateChart();\n }\n });\n }\n\n ngOnDestroy(): void {\n this.directionSub?.unsubscribe();\n this.cleanupChart();\n }\n\n protected async loadD3(): Promise<void> {\n if (this.d3) return;\n try {\n this.d3 = await import('d3');\n if (this._initialized() && this.chartContainerEl()) {\n this.createChart();\n this._rendered.set(true);\n }\n } catch (error) {\n console.error('AXFunnelChart: Failed to load D3.js', error);\n }\n }\n\n public createChart(): void {\n if (this.svgElement) this.svgElement.remove();\n\n const data = [...this.data()].sort((a, b) => b.value - a.value);\n if (!data.length) {\n this.hideTooltip();\n return;\n }\n\n const container = this.chartContainerEl().nativeElement;\n const width = container.clientWidth;\n const height = container.clientHeight;\n const opt = this.effectiveOptions();\n const margin = opt.margin;\n const isRtl = this.isRtl();\n const labelOffset = opt.labelOffset ?? 24;\n\n this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n const svg = this.d3\n .select(this.svgElement)\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('viewBox', `0 0 ${width} ${height}`)\n .attr('preserveAspectRatio', 'xMidYMid meet');\n\n container.appendChild(this.svgElement);\n\n const innerWidth = width - margin.left - margin.right;\n const innerHeight = height - margin.top - margin.bottom;\n\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);\n\n const sliceHeight = innerHeight / data.length;\n const maxValue = data[0].value;\n const minValue = data[data.length - 1]?.value ?? maxValue;\n const easing = getEasingFunction(this.d3, opt.animationEasing);\n const resolvedBaseForIntensity = this.resolveCssColor(opt.color ?? 'rgb(99, 102, 241)');\n\n data.forEach((d, i) => {\n const topVal = d.value;\n const bottomVal = data[i + 1]?.value ?? d.value * opt.neckWidth;\n\n const topW = (topVal / maxValue) * innerWidth;\n const bottomW = (bottomVal / maxValue) * innerWidth;\n\n const xTop = (innerWidth - topW) / 2;\n const xBottom = (innerWidth - bottomW) / 2;\n const yTop = i * sliceHeight;\n const yBottom = (i + 1) * sliceHeight;\n\n const pathData = `M ${xTop},${yTop} L ${xTop + topW},${yTop} L ${xBottom + bottomW},${yBottom} L ${xBottom},${yBottom} Z`;\n\n const sliceGroup = g.append('g').attr('class', 'funnel-slice-container');\n\n const computedColor = this.resolveSliceColor(d, i, opt, minValue, maxValue, resolvedBaseForIntensity);\n const path = sliceGroup\n .append('path')\n .attr('class', 'funnel-slice')\n .attr('d', pathData)\n .attr('fill', computedColor)\n .style('opacity', 0)\n .on('mouseenter', (event) => {\n svg.classed('is-dimmed', true);\n this.d3.select(event.currentTarget).classed('is-active', true);\n this.showTooltip(event, d, computedColor);\n })\n .on('mousemove', (event) => this.updateTooltipPosition(event))\n .on('click', () => this.segmentClick.emit(d))\n .on('mouseleave', (event) => {\n svg.classed('is-dimmed', false);\n this.d3.select(event.currentTarget).classed('is-active', false);\n this.hideTooltip();\n });\n\n path\n .transition()\n .duration(opt.animationDuration)\n .delay(i * 80)\n .ease(easing)\n .style('opacity', 1);\n\n if (opt.showLabels) {\n const labelGroup = sliceGroup.append('g').attr('class', 'funnel-label-group').style('opacity', 0);\n const labelX = isRtl ? innerWidth / 2 - topW / 2 - labelOffset : innerWidth / 2 + topW / 2 + labelOffset;\n // In RTL documents, SVG `text-anchor: end` can expand *into* the plot area because \"end\"\n // becomes the logical left edge. Using `start` makes the label expand away from the slice\n // on both LTR (to the right) and RTL (to the left).\n const anchor = 'start';\n\n labelGroup\n .append('text')\n .attr('class', 'funnel-label-name')\n .attr('x', labelX)\n .attr('y', yTop + sliceHeight / 2 - 5)\n .attr('text-anchor', anchor)\n .text(d.name);\n\n labelGroup\n .append('text')\n .attr('class', 'funnel-label-value')\n .attr('x', labelX)\n .attr('y', yTop + sliceHeight / 2 + 15)\n .attr('text-anchor', anchor)\n .text(d.value.toLocaleString());\n\n labelGroup\n .transition()\n .duration(600)\n .delay(400 + i * 80)\n .style('opacity', 1);\n }\n });\n }\n\n private resolveSliceColor(\n item: AXFunnelData,\n index: number,\n opt: AXFunnelChartOption,\n minValue: number,\n maxValue: number,\n resolvedBaseRgb: string,\n ): string {\n if (item.color) return this.resolveCssColor(item.color);\n\n const palette = opt.colors?.filter(Boolean) ?? [];\n if (palette.length > 0) {\n const key = String(item.id ?? item.name ?? index);\n const idx = this.hashStringToUint32(key) % palette.length;\n const raw = palette[idx] ?? opt.color ?? 'rgb(99, 102, 241)';\n return this.resolveCssColor(raw);\n }\n\n const rangeMin = opt.valueRange?.min ?? minValue;\n const rangeMax = opt.valueRange?.max ?? maxValue;\n const span = rangeMax - rangeMin;\n const t = span === 0 ? 1 : (item.value - rangeMin) / span;\n const clamped = Math.max(0, Math.min(1, t));\n return this.applyIntensityToResolvedRgb(resolvedBaseRgb, clamped);\n }\n\n /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColor}). */\n private applyIntensityToResolvedRgb(resolvedRgb: string, t: number): string {\n const clamped = Math.max(0, Math.min(1, t));\n const parsed = this.d3.color(resolvedRgb);\n if (!parsed) return resolvedRgb;\n const rgb = this.d3.rgb(parsed);\n const minOpacity = 0.12;\n const opacity = minOpacity + clamped * (1 - minOpacity);\n return `rgba(${Math.round(rgb.r)},${Math.round(rgb.g)},${Math.round(rgb.b)},${opacity})`;\n }\n\n private hashStringToUint32(input: string): number {\n let hash = 5381;\n for (let i = 0; i < input.length; i++) {\n hash = (hash * 33) ^ input.charCodeAt(i);\n }\n return hash >>> 0;\n }\n\n private resolveCssColor(color: string): string {\n return resolveCssColorInContext(this.chartContainerEl().nativeElement, color);\n }\n\n public updateChart(): void {\n this.createChart();\n }\n\n private showTooltip(event: MouseEvent, item: AXFunnelData, color: string): void {\n if (!this.effectiveOptions().showTooltip) return;\n this._tooltipData.set({ title: item.name, value: item.value.toLocaleString(), color });\n this._tooltipVisible.set(true);\n this.updateTooltipPosition(event);\n }\n\n private updateTooltipPosition(event: MouseEvent): void {\n if (this._tooltipRafId) cancelAnimationFrame(this._tooltipRafId);\n this._tooltipRafId = requestAnimationFrame(() => {\n const containerEl = this.chartContainerEl().nativeElement;\n const rect = containerEl.getBoundingClientRect();\n const tooltipEl = containerEl.querySelector('.chart-tooltip') as HTMLElement;\n const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;\n this._tooltipPosition.set(computeTooltipPosition(rect, tooltipRect, event.clientX + 10, event.clientY - 10, 10));\n });\n }\n\n private hideTooltip(): void {\n this._tooltipVisible.set(false);\n }\n\n public cleanupChart(): void {\n if (this._tooltipRafId) cancelAnimationFrame(this._tooltipRafId);\n if (this.svgElement) {\n this.svgElement.remove();\n this.svgElement = null;\n }\n }\n}\n","<div class=\"ax-funnel-chart-container\" role=\"img\" #chartContainer>\n @if (data()?.length === 0) {\n <div class=\"ax-funnel-no-data\">\n <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n <p class=\"ax-funnel-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n </div>\n }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"acorex-charts-funnel-chart.mjs","sources":["../../../../packages/charts/funnel-chart/src/lib/funnel-chart.config.ts","../../../../packages/charts/funnel-chart/src/lib/funnel-chart.component.ts","../../../../packages/charts/funnel-chart/src/lib/funnel-chart.component.html","../../../../packages/charts/funnel-chart/src/acorex-charts-funnel-chart.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { AXFunnelChartOption } from './funnel-chart.type';\n\nexport const AXFunnelChartDefaultConfig: AXFunnelChartOption = {\n margin: { top: 16, right: 16, bottom: 16, left: 16 },\n neckWidth: 0.3,\n showLabels: true,\n showSegmentValues: true,\n labelOffset: 24,\n showTooltip: true,\n animationDuration: 1000,\n animationEasing: 'cubic-out',\n color: 'rgb(var(--ax-sys-color-primary-500))',\n messages: {\n noData: 'No funnel data available',\n noDataIcon: 'fa-light fa-filter-list',\n },\n};\n\nexport const AX_FUNNEL_CHART_CONFIG = new InjectionToken<AXFunnelChartOption>('AX_FUNNEL_CHART_CONFIG', {\n providedIn: 'root',\n factory: () => AXFunnelChartDefaultConfig,\n});\n","import {\n AXChartComponent,\n AXChartComponentBase,\n computeTooltipPosition,\n getEasingFunction,\n resolveCssColorInContext,\n} from '@acorex/charts';\nimport { AXChartTooltipComponent, AXChartTooltipData } from '@acorex/charts/chart-tooltip';\nimport {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n input,\n OnDestroy,\n output,\n signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AX_FUNNEL_CHART_CONFIG } from './funnel-chart.config';\nimport { AXFunnelChartOption, AXFunnelData } from './funnel-chart.type';\n\n@Component({\n selector: 'ax-funnel-chart',\n templateUrl: './funnel-chart.component.html',\n styleUrls: ['./funnel-chart.component.css'],\n encapsulation: ViewEncapsulation.None,\n imports: [AXChartTooltipComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXFunnelChartComponent extends AXChartComponent implements OnDestroy, AXChartComponentBase {\n /**\n * Fixed SVG coordinate system; the graphic scales to the container via `width`/`height: 100%` + `viewBox`.\n * Margins and geometry are expressed in these units (same numeric scale as a ~400px reference viewport).\n */\n private static readonly VIEW_BOX_SIZE = 400;\n\n // Inputs\n data = input<AXFunnelData[]>([]);\n options = input<AXFunnelChartOption>({});\n\n // Outputs\n /** Emitted when a funnel segment is clicked */\n segmentClick = output<AXFunnelData>();\n\n private readonly chartContainerEl = viewChild.required<ElementRef<HTMLDivElement>>('chartContainer');\n\n // SVG State\n private svgElement: SVGSVGElement | null = null;\n protected d3!: typeof import('d3');\n private _initialized = signal(false);\n private _rendered = signal(false);\n\n // Tooltip Signals\n private _tooltipVisible = signal(false);\n private _tooltipPosition = signal({ x: 0, y: 0 });\n private _tooltipData = signal<AXChartTooltipData>({ title: '', value: '' });\n private _tooltipRafId: number | null = null;\n\n protected tooltipVisible = this._tooltipVisible.asReadonly();\n protected tooltipPosition = this._tooltipPosition.asReadonly();\n protected tooltipData = this._tooltipData.asReadonly();\n\n private configToken = inject(AX_FUNNEL_CHART_CONFIG);\n\n protected effectiveOptions = computed(() => ({\n ...this.configToken,\n ...this.options(),\n }));\n\n constructor() {\n super();\n\n afterNextRender(() => {\n this._initialized.set(true);\n this.loadD3();\n });\n\n effect(() => {\n // Trigger update on data or option change\n this.data();\n this.effectiveOptions();\n if (this._rendered()) {\n this.updateChart();\n }\n });\n }\n\n ngOnDestroy(): void {\n this.cleanupChart();\n }\n\n protected async loadD3(): Promise<void> {\n if (this.d3) return;\n try {\n this.d3 = await import('d3');\n if (this._initialized() && this.chartContainerEl()) {\n this.createChart();\n this._rendered.set(true);\n }\n } catch (error) {\n console.error('AXFunnelChart: Failed to load D3.js', error);\n }\n }\n\n public createChart(): void {\n if (this.svgElement) this.svgElement.remove();\n\n const data = [...this.data()].sort((a, b) => b.value - a.value);\n if (!data.length) {\n this.hideTooltip();\n return;\n }\n\n const container = this.chartContainerEl().nativeElement;\n const vb = AXFunnelChartComponent.VIEW_BOX_SIZE;\n const width = vb;\n const height = vb;\n\n const opt = this.effectiveOptions();\n const margin = opt.margin;\n const easing = getEasingFunction(this.d3, opt.animationEasing);\n const resolvedBaseForIntensity = this.resolveCssColor(opt.color ?? 'rgb(99, 102, 241)');\n\n this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n const svg = this.d3\n .select(this.svgElement)\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('viewBox', `0 0 ${width} ${height}`)\n .attr('preserveAspectRatio', 'xMidYMid meet')\n .attr('class', 'ax-funnel-svg');\n\n container.appendChild(this.svgElement);\n\n const innerWidth = width - margin.left - margin.right;\n const innerHeight = height - margin.top - margin.bottom;\n if (innerWidth < 1 || innerHeight < 1) {\n return;\n }\n\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);\n\n const sliceHeight = innerHeight / data.length;\n const maxValue = data[0].value;\n const minValue = data[data.length - 1]?.value ?? maxValue;\n const showSegmentValues = opt.showSegmentValues !== false;\n\n data.forEach((d, i) => {\n const topVal = d.value;\n const bottomVal = data[i + 1]?.value ?? d.value * opt.neckWidth;\n\n const topW = (topVal / maxValue) * innerWidth;\n const bottomW = (bottomVal / maxValue) * innerWidth;\n\n const xTop = (innerWidth - topW) / 2;\n const xBottom = (innerWidth - bottomW) / 2;\n const yTop = i * sliceHeight;\n const yBottom = (i + 1) * sliceHeight;\n\n const pathData = `M ${xTop},${yTop} L ${xTop + topW},${yTop} L ${xBottom + bottomW},${yBottom} L ${xBottom},${yBottom} Z`;\n\n const sliceGroup = g.append('g').attr('class', 'funnel-slice-container');\n\n const computedColor = this.resolveSliceColor(d, i, opt, minValue, maxValue, resolvedBaseForIntensity);\n\n const path = sliceGroup\n .append('path')\n .attr('class', 'funnel-slice')\n .attr('d', pathData)\n .attr('fill', computedColor)\n .style('opacity', 0)\n .on('mouseenter', (event) => {\n svg.classed('is-dimmed', true);\n this.d3.select(event.currentTarget).classed('is-active', true);\n this.showTooltip(event, d, computedColor);\n })\n .on('mousemove', (event) => this.updateTooltipPosition(event))\n .on('click', () => this.segmentClick.emit(d))\n .on('mouseleave', (event) => {\n svg.classed('is-dimmed', false);\n this.d3.select(event.currentTarget).classed('is-active', false);\n this.hideTooltip();\n });\n\n path\n .transition()\n .duration(opt.animationDuration)\n .delay(i * 80)\n .ease(easing)\n .style('opacity', 1);\n\n sliceGroup.append('title').text(`${d.name}: ${d.value.toLocaleString()}`);\n\n if (opt.showLabels) {\n const { cx, cy, width: midW } = this.trapezoidInteriorMetrics(xTop, topW, xBottom, bottomW, yTop, yBottom);\n const { nameSize, valueSize, showValueLine, displayName } = this.computeSegmentLabelTypography(\n sliceHeight,\n midW,\n d.name,\n showSegmentValues,\n );\n const { primary, secondary } = this.pickOnSliceTextColors(computedColor);\n\n const labelGroup = sliceGroup.append('g').attr('class', 'funnel-label-group').style('opacity', 0);\n\n const lineGap = Math.max(2, sliceHeight * 0.06);\n if (showValueLine && valueSize > 0) {\n labelGroup\n .append('text')\n .attr('class', 'funnel-label-name')\n .attr('x', cx)\n .attr('y', cy - (valueSize * 0.55 + lineGap * 0.5))\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'middle')\n .style('font-size', `${nameSize}`)\n .style('fill', primary)\n .text(displayName);\n\n labelGroup\n .append('text')\n .attr('class', 'funnel-label-value')\n .attr('x', cx)\n .attr('y', cy + (nameSize * 0.55 + lineGap * 0.5))\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'middle')\n .style('font-size', `${valueSize}`)\n .style('fill', secondary)\n .text(d.value.toLocaleString());\n } else {\n labelGroup\n .append('text')\n .attr('class', 'funnel-label-name funnel-label-name--single')\n .attr('x', cx)\n .attr('y', cy)\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'middle')\n .style('font-size', `${nameSize}`)\n .style('fill', primary)\n .text(displayName);\n }\n\n labelGroup\n .transition()\n .duration(600)\n .delay(400 + i * 80)\n .style('opacity', 1);\n }\n });\n }\n\n private trapezoidInteriorMetrics(\n xTop: number,\n topW: number,\n xBottom: number,\n bottomW: number,\n yTop: number,\n yBottom: number,\n ): { cx: number; cy: number; width: number } {\n const cy = (yTop + yBottom) / 2;\n const denom = yBottom - yTop || 1;\n const t = (cy - yTop) / denom;\n const xL = xTop + t * (xBottom - xTop);\n const xR = xTop + topW + t * (xBottom + bottomW - (xTop + topW));\n return { cx: (xL + xR) / 2, cy, width: Math.max(0, xR - xL) };\n }\n\n private computeSegmentLabelTypography(\n sliceHeight: number,\n segmentInnerWidth: number,\n name: string,\n wantValue: boolean,\n ): {\n nameSize: number;\n valueSize: number;\n showValueLine: boolean;\n displayName: string;\n } {\n const charFactor = 0.52;\n const minFont = 6.5;\n const maxName = 15;\n\n const innerW = Math.max(segmentInnerWidth, 8);\n\n let showValueLine = wantValue && sliceHeight >= 17 && innerW >= 38;\n\n const fitNameOnly = (): number => {\n const raw = Math.min(maxName + 2, sliceHeight * 0.42, innerW / Math.max(name.length * charFactor, 2.5));\n return Math.max(minFont, raw);\n };\n\n const fitBoth = (): { nameSize: number; valueSize: number } => {\n const vBudget = sliceHeight * 0.76;\n let nameSize = Math.min(maxName, vBudget / 2.45, innerW / Math.max(name.length * charFactor, 2.5));\n nameSize = Math.max(minFont, nameSize);\n let valueSize = Math.max(minFont, Math.min(nameSize * 0.88, vBudget / 2.45));\n const stackH = nameSize * 1.18 + valueSize * 1.08 + sliceHeight * 0.05;\n if (stackH > sliceHeight * 0.88) {\n const scale = (sliceHeight * 0.88) / stackH;\n nameSize = Math.max(minFont, nameSize * scale);\n valueSize = Math.max(minFont, valueSize * scale);\n }\n return { nameSize, valueSize };\n };\n\n let nameSize: number;\n let valueSize = 0;\n\n if (showValueLine) {\n const both = fitBoth();\n nameSize = both.nameSize;\n valueSize = both.valueSize;\n if (nameSize * 1.2 + valueSize * 1.05 > sliceHeight * 0.9) {\n showValueLine = false;\n }\n }\n\n if (!showValueLine) {\n nameSize = fitNameOnly();\n }\n\n const maxChars = Math.max(2, Math.floor(innerW / (nameSize * charFactor)));\n const displayName = this.truncateLabel(name, maxChars);\n\n return { nameSize, valueSize, showValueLine, displayName };\n }\n\n private truncateLabel(name: string, maxChars: number): string {\n if (name.length <= maxChars) return name;\n if (maxChars <= 1) return '…';\n return `${name.slice(0, maxChars - 1)}…`;\n }\n\n private pickOnSliceTextColors(sliceColorCss: string): { primary: string; secondary: string } {\n const resolved = this.resolveCssColor(sliceColorCss);\n const c = this.d3.color(resolved);\n if (!c) {\n return { primary: 'rgba(255,255,255,0.95)', secondary: 'rgba(255,255,255,0.78)' };\n }\n const rgb = this.d3.rgb(c);\n const a = Math.max(0, Math.min(1, rgb.opacity));\n // Blend slice color over white (typical card/surface) so low-alpha intensity ramps read correctly.\n const br = (rgb.r / 255) * a + (1 - a);\n const bg = (rgb.g / 255) * a + (1 - a);\n const bb = (rgb.b / 255) * a + (1 - a);\n const lum = 0.2126 * br + 0.7152 * bg + 0.0722 * bb;\n if (lum > 0.62) {\n return { primary: 'rgba(15,23,42,0.92)', secondary: 'rgba(15,23,42,0.72)' };\n }\n return { primary: 'rgba(255,255,255,0.96)', secondary: 'rgba(255,255,255,0.78)' };\n }\n\n private resolveSliceColor(\n item: AXFunnelData,\n index: number,\n opt: AXFunnelChartOption,\n minValue: number,\n maxValue: number,\n resolvedBaseRgb: string,\n ): string {\n if (item.color) return this.resolveCssColor(item.color);\n\n const palette = opt.colors?.filter(Boolean) ?? [];\n if (palette.length > 0) {\n const key = String(item.id ?? item.name ?? index);\n const idx = this.hashStringToUint32(key) % palette.length;\n const raw = palette[idx] ?? opt.color ?? 'rgb(99, 102, 241)';\n return this.resolveCssColor(raw);\n }\n\n const rangeMin = opt.valueRange?.min ?? minValue;\n const rangeMax = opt.valueRange?.max ?? maxValue;\n const span = rangeMax - rangeMin;\n const t = span === 0 ? 1 : (item.value - rangeMin) / span;\n const clamped = Math.max(0, Math.min(1, t));\n return this.applyIntensityToResolvedRgb(resolvedBaseRgb, clamped);\n }\n\n /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColor}). */\n private applyIntensityToResolvedRgb(resolvedRgb: string, t: number): string {\n const clamped = Math.max(0, Math.min(1, t));\n const parsed = this.d3.color(resolvedRgb);\n if (!parsed) return resolvedRgb;\n const rgb = this.d3.rgb(parsed);\n const minOpacity = 0.12;\n const opacity = minOpacity + clamped * (1 - minOpacity);\n return `rgba(${Math.round(rgb.r)},${Math.round(rgb.g)},${Math.round(rgb.b)},${opacity})`;\n }\n\n private hashStringToUint32(input: string): number {\n let hash = 5381;\n for (let i = 0; i < input.length; i++) {\n hash = (hash * 33) ^ input.charCodeAt(i);\n }\n return hash >>> 0;\n }\n\n private resolveCssColor(color: string): string {\n return resolveCssColorInContext(this.chartContainerEl().nativeElement, color);\n }\n\n public updateChart(): void {\n this.createChart();\n }\n\n private showTooltip(event: MouseEvent, item: AXFunnelData, color: string): void {\n if (!this.effectiveOptions().showTooltip) return;\n this._tooltipData.set({ title: item.name, value: item.value.toLocaleString(), color });\n this._tooltipVisible.set(true);\n this.updateTooltipPosition(event);\n }\n\n private updateTooltipPosition(event: MouseEvent): void {\n if (this._tooltipRafId) cancelAnimationFrame(this._tooltipRafId);\n this._tooltipRafId = requestAnimationFrame(() => {\n const containerEl = this.chartContainerEl().nativeElement;\n const rect = containerEl.getBoundingClientRect();\n const tooltipEl = containerEl.querySelector('.chart-tooltip') as HTMLElement;\n const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;\n this._tooltipPosition.set(computeTooltipPosition(rect, tooltipRect, event.clientX + 10, event.clientY - 10, 10));\n });\n }\n\n private hideTooltip(): void {\n this._tooltipVisible.set(false);\n }\n\n public cleanupChart(): void {\n if (this._tooltipRafId) cancelAnimationFrame(this._tooltipRafId);\n if (this.svgElement) {\n this.svgElement.remove();\n this.svgElement = null;\n }\n }\n}\n","<div class=\"ax-funnel-chart-container\" role=\"img\" #chartContainer>\n @if (data()?.length === 0) {\n <div class=\"ax-funnel-no-data\">\n <i [class]=\"effectiveOptions().messages?.noDataIcon\"></i>\n <p class=\"ax-funnel-no-data-text\">{{ effectiveOptions().messages?.noData }}</p>\n </div>\n }\n</div>\n\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\">\n</ax-chart-tooltip>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -734,11 +734,11 @@ class AXGaugeChartComponent extends AXChartComponent {
734
734
  return radians * this.DEGREES_PER_RADIAN;
735
735
  }
736
736
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
737
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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:clamp(220px,38vw,360px);--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%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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 });
737
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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:0;box-sizing:border-box;--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%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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 });
738
738
  }
739
739
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
740
740
  type: Component,
741
- 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:clamp(220px,38vw,360px);--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%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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"] }]
741
+ 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:0;box-sizing:border-box;--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%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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"] }]
742
742
  }], 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 }] }] } });
743
743
 
744
744
  /**