@acorex/charts 20.6.30 → 20.6.32

package/fesm2022/acorex-charts-funnel-chart.mjs

@@ -1,20 +1,18 @@
-import { AXChartComponent, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
+import { AXChartComponent, getEasingFunction, resolveCssColorInContext, computeTooltipPosition } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
-import { AXPlatform } from '@acorex/core/platform';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { map } from 'rxjs';
 
 const AXFunnelChartDefaultConfig = {
-    margin: { top: 20, right: 160, bottom: 20, left: 160 },
+    margin: { top: 16, right: 16, bottom: 16, left: 16 },
     neckWidth: 0.3,
     showLabels: true,
+    showSegmentValues: true,
     labelOffset: 24,
     showTooltip: true,
     animationDuration: 1000,
     animationEasing: 'cubic-out',
-    startColor: 'rgb(var(--ax-sys-color-primary-50))',
-    endColor: 'rgb(var(--ax-sys-color-primary-950))',
+    color: 'rgb(var(--ax-sys-color-primary-500))',
     messages: {
         noData: 'No funnel data available',
         noDataIcon: 'fa-light fa-filter-list',
@@ -38,9 +36,8 @@ class AXFunnelChartComponent extends AXChartComponent {
     d3;
     _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
     _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
-    platformService = inject(AXPlatform);
-    isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    directionSub;
+    resizeObserver = null;
+    resizeDebounceId = null;
     // Tooltip Signals
     _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
     _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
@@ -59,14 +56,7 @@ class AXFunnelChartComponent extends AXChartComponent {
         afterNextRender(() => {
             this._initialized.set(true);
             this.loadD3();
-            this.directionSub = this.platformService.directionChange
-                .pipe(map((i) => i.data === 'rtl'))
-                .subscribe((isRtl) => {
-                this.isRtl.set(isRtl);
-                if (this._rendered()) {
-                    this.updateChart();
-                }
-            });
+            this.attachResizeObserver();
         });
         effect(() => {
             // Trigger update on data or option change
@@ -78,9 +68,34 @@ class AXFunnelChartComponent extends AXChartComponent {
         });
     }
     ngOnDestroy() {
-        this.directionSub?.unsubscribe();
+        this.detachResizeObserver();
         this.cleanupChart();
     }
+    attachResizeObserver() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const el = this.chartContainerEl().nativeElement;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.resizeDebounceId !== null) {
+                clearTimeout(this.resizeDebounceId);
+            }
+            this.resizeDebounceId = window.setTimeout(() => {
+                this.resizeDebounceId = null;
+                if (this._rendered() && this.d3) {
+                    this.updateChart();
+                }
+            }, 80);
+        });
+        this.resizeObserver.observe(el);
+    }
+    detachResizeObserver() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.resizeDebounceId !== null) {
+            clearTimeout(this.resizeDebounceId);
+            this.resizeDebounceId = null;
+        }
+    }
     async loadD3() {
         if (this.d3)
             return;
@@ -104,27 +119,34 @@ class AXFunnelChartComponent extends AXChartComponent {
             return;
         }
         const container = this.chartContainerEl().nativeElement;
-        const width = container.clientWidth;
-        const height = container.clientHeight;
+        const width = Math.max(0, container.clientWidth);
+        const height = Math.max(0, container.clientHeight);
+        if (width < 2 || height < 2) {
+            return;
+        }
         const opt = this.effectiveOptions();
         const margin = opt.margin;
-        const isRtl = this.isRtl();
-        const labelOffset = opt.labelOffset ?? 24;
+        const easing = getEasingFunction(this.d3, opt.animationEasing);
+        const resolvedBaseForIntensity = this.resolveCssColor(opt.color ?? 'rgb(99, 102, 241)');
         this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         const svg = this.d3
             .select(this.svgElement)
             .attr('width', '100%')
             .attr('height', '100%')
             .attr('viewBox', `0 0 ${width} ${height}`)
-            .attr('preserveAspectRatio', 'xMidYMid meet');
+            .attr('preserveAspectRatio', 'xMidYMid meet')
+            .attr('class', 'ax-funnel-svg');
         container.appendChild(this.svgElement);
         const innerWidth = width - margin.left - margin.right;
         const innerHeight = height - margin.top - margin.bottom;
+        if (innerWidth < 2 || innerHeight < 2) {
+            return;
+        }
         const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
         const sliceHeight = innerHeight / data.length;
         const maxValue = data[0].value;
         const minValue = data[data.length - 1]?.value ?? maxValue;
-        const easing = getEasingFunction(this.d3, opt.animationEasing);
+        const showSegmentValues = opt.showSegmentValues !== false;
         data.forEach((d, i) => {
             const topVal = d.value;
             const bottomVal = data[i + 1]?.value ?? d.value * opt.neckWidth;
@@ -136,7 +158,7 @@ class AXFunnelChartComponent extends AXChartComponent {
             const yBottom = (i + 1) * sliceHeight;
             const pathData = `M ${xTop},${yTop} L ${xTop + topW},${yTop} L ${xBottom + bottomW},${yBottom} L ${xBottom},${yBottom} Z`;
             const sliceGroup = g.append('g').attr('class', 'funnel-slice-container');
-            const computedColor = this.resolveSliceColor(d, i, opt, minValue, maxValue);
+            const computedColor = this.resolveSliceColor(d, i, opt, minValue, maxValue, resolvedBaseForIntensity);
             const path = sliceGroup
                 .append('path')
                 .attr('class', 'funnel-slice')
@@ -161,27 +183,49 @@ class AXFunnelChartComponent extends AXChartComponent {
                 .delay(i * 80)
                 .ease(easing)
                 .style('opacity', 1);
+            sliceGroup
+                .append('title')
+                .text(`${d.name}: ${d.value.toLocaleString()}`);
             if (opt.showLabels) {
+                const { cx, cy, width: midW } = this.trapezoidInteriorMetrics(xTop, topW, xBottom, bottomW, yTop, yBottom);
+                const { nameSize, valueSize, showValueLine, displayName } = this.computeSegmentLabelTypography(sliceHeight, midW, d.name, showSegmentValues);
+                const { primary, secondary } = this.pickOnSliceTextColors(computedColor);
                 const labelGroup = sliceGroup.append('g').attr('class', 'funnel-label-group').style('opacity', 0);
-                const labelX = isRtl ? innerWidth / 2 - topW / 2 - labelOffset : innerWidth / 2 + topW / 2 + labelOffset;
-                // In RTL documents, SVG `text-anchor: end` can expand *into* the plot area because "end"
-                // becomes the logical left edge. Using `start` makes the label expand away from the slice
-                // on both LTR (to the right) and RTL (to the left).
-                const anchor = 'start';
-                labelGroup
-                    .append('text')
-                    .attr('class', 'funnel-label-name')
-                    .attr('x', labelX)
-                    .attr('y', yTop + sliceHeight / 2 - 5)
-                    .attr('text-anchor', anchor)
-                    .text(d.name);
-                labelGroup
-                    .append('text')
-                    .attr('class', 'funnel-label-value')
-                    .attr('x', labelX)
-                    .attr('y', yTop + sliceHeight / 2 + 15)
-                    .attr('text-anchor', anchor)
-                    .text(d.value.toLocaleString());
+                const lineGap = Math.max(2, sliceHeight * 0.06);
+                if (showValueLine && valueSize > 0) {
+                    labelGroup
+                        .append('text')
+                        .attr('class', 'funnel-label-name')
+                        .attr('x', cx)
+                        .attr('y', cy - (valueSize * 0.55 + lineGap * 0.5))
+                        .attr('text-anchor', 'middle')
+                        .attr('dominant-baseline', 'middle')
+                        .style('font-size', `${nameSize}px`)
+                        .style('fill', primary)
+                        .text(displayName);
+                    labelGroup
+                        .append('text')
+                        .attr('class', 'funnel-label-value')
+                        .attr('x', cx)
+                        .attr('y', cy + (nameSize * 0.55 + lineGap * 0.5))
+                        .attr('text-anchor', 'middle')
+                        .attr('dominant-baseline', 'middle')
+                        .style('font-size', `${valueSize}px`)
+                        .style('fill', secondary)
+                        .text(d.value.toLocaleString());
+                }
+                else {
+                    labelGroup
+                        .append('text')
+                        .attr('class', 'funnel-label-name funnel-label-name--single')
+                        .attr('x', cx)
+                        .attr('y', cy)
+                        .attr('text-anchor', 'middle')
+                        .attr('dominant-baseline', 'middle')
+                        .style('font-size', `${nameSize}px`)
+                        .style('fill', primary)
+                        .text(displayName);
+                }
                 labelGroup
                     .transition()
                     .duration(600)
@@ -190,23 +234,106 @@ class AXFunnelChartComponent extends AXChartComponent {
             }
         });
     }
-    resolveSliceColor(item, index, opt, minValue, maxValue) {
+    trapezoidInteriorMetrics(xTop, topW, xBottom, bottomW, yTop, yBottom) {
+        const cy = (yTop + yBottom) / 2;
+        const denom = yBottom - yTop || 1;
+        const t = (cy - yTop) / denom;
+        const xL = xTop + t * (xBottom - xTop);
+        const xR = xTop + topW + t * (xBottom + bottomW - (xTop + topW));
+        return { cx: (xL + xR) / 2, cy, width: Math.max(0, xR - xL) };
+    }
+    computeSegmentLabelTypography(sliceHeight, segmentInnerWidth, name, wantValue) {
+        const charFactor = 0.52;
+        const minFont = 6.5;
+        const maxName = 15;
+        const innerW = Math.max(segmentInnerWidth, 8);
+        let showValueLine = wantValue && sliceHeight >= 17 && innerW >= 38;
+        const fitNameOnly = () => {
+            const raw = Math.min(maxName + 2, sliceHeight * 0.42, innerW / Math.max(name.length * charFactor, 2.5));
+            return Math.max(minFont, raw);
+        };
+        const fitBoth = () => {
+            const vBudget = sliceHeight * 0.76;
+            let nameSize = Math.min(maxName, vBudget / 2.45, innerW / Math.max(name.length * charFactor, 2.5));
+            nameSize = Math.max(minFont, nameSize);
+            let valueSize = Math.max(minFont, Math.min(nameSize * 0.88, vBudget / 2.45));
+            const stackH = nameSize * 1.18 + valueSize * 1.08 + sliceHeight * 0.05;
+            if (stackH > sliceHeight * 0.88) {
+                const scale = (sliceHeight * 0.88) / stackH;
+                nameSize = Math.max(minFont, nameSize * scale);
+                valueSize = Math.max(minFont, valueSize * scale);
+            }
+            return { nameSize, valueSize };
+        };
+        let nameSize;
+        let valueSize = 0;
+        if (showValueLine) {
+            const both = fitBoth();
+            nameSize = both.nameSize;
+            valueSize = both.valueSize;
+            if (nameSize * 1.2 + valueSize * 1.05 > sliceHeight * 0.9) {
+                showValueLine = false;
+            }
+        }
+        if (!showValueLine) {
+            nameSize = fitNameOnly();
+        }
+        const maxChars = Math.max(2, Math.floor(innerW / (nameSize * charFactor)));
+        const displayName = this.truncateLabel(name, maxChars);
+        return { nameSize, valueSize, showValueLine, displayName };
+    }
+    truncateLabel(name, maxChars) {
+        if (name.length <= maxChars)
+            return name;
+        if (maxChars <= 1)
+            return '…';
+        return `${name.slice(0, maxChars - 1)}…`;
+    }
+    pickOnSliceTextColors(sliceColorCss) {
+        const resolved = this.resolveCssColor(sliceColorCss);
+        const c = this.d3.color(resolved);
+        if (!c) {
+            return { primary: 'rgba(255,255,255,0.95)', secondary: 'rgba(255,255,255,0.78)' };
+        }
+        const rgb = this.d3.rgb(c);
+        const a = Math.max(0, Math.min(1, rgb.opacity));
+        // Blend slice color over white (typical card/surface) so low-alpha intensity ramps read correctly.
+        const br = (rgb.r / 255) * a + (1 - a);
+        const bg = (rgb.g / 255) * a + (1 - a);
+        const bb = (rgb.b / 255) * a + (1 - a);
+        const lum = 0.2126 * br + 0.7152 * bg + 0.0722 * bb;
+        if (lum > 0.62) {
+            return { primary: 'rgba(15,23,42,0.92)', secondary: 'rgba(15,23,42,0.72)' };
+        }
+        return { primary: 'rgba(255,255,255,0.96)', secondary: 'rgba(255,255,255,0.78)' };
+    }
+    resolveSliceColor(item, index, opt, minValue, maxValue, resolvedBaseRgb) {
         if (item.color)
-            return item.color;
+            return this.resolveCssColor(item.color);
         const palette = opt.colors?.filter(Boolean) ?? [];
         if (palette.length > 0) {
             const key = String(item.id ?? item.name ?? index);
             const idx = this.hashStringToUint32(key) % palette.length;
-            return palette[idx] ?? opt.startColor ?? '#1e1b4b';
+            const raw = palette[idx] ?? opt.color ?? 'rgb(99, 102, 241)';
+            return this.resolveCssColor(raw);
         }
-        const startColor = opt.startColor ?? '#1e1b4b';
-        const endColor = opt.endColor ?? '#818cf8';
-        const resolvedStartColor = this.resolveCssColor(startColor);
-        const resolvedEndColor = this.resolveCssColor(endColor);
-        const range = maxValue - minValue;
-        const t = range === 0 ? 1 : (item.value - minValue) / range;
+        const rangeMin = opt.valueRange?.min ?? minValue;
+        const rangeMax = opt.valueRange?.max ?? maxValue;
+        const span = rangeMax - rangeMin;
+        const t = span === 0 ? 1 : (item.value - rangeMin) / span;
+        const clamped = Math.max(0, Math.min(1, t));
+        return this.applyIntensityToResolvedRgb(resolvedBaseRgb, clamped);
+    }
+    /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColor}). */
+    applyIntensityToResolvedRgb(resolvedRgb, t) {
         const clamped = Math.max(0, Math.min(1, t));
-        return this.d3.interpolateRgb(resolvedStartColor, resolvedEndColor)(clamped);
+        const parsed = this.d3.color(resolvedRgb);
+        if (!parsed)
+            return resolvedRgb;
+        const rgb = this.d3.rgb(parsed);
+        const minOpacity = 0.12;
+        const opacity = minOpacity + clamped * (1 - minOpacity);
+        return `rgba(${Math.round(rgb.r)},${Math.round(rgb.g)},${Math.round(rgb.b)},${opacity})`;
     }
     hashStringToUint32(input) {
         let hash = 5381;
@@ -216,16 +343,7 @@ class AXFunnelChartComponent extends AXChartComponent {
         return hash >>> 0;
     }
     resolveCssColor(color) {
-        const container = this.chartContainerEl().nativeElement;
-        const probe = document.createElement('span');
-        probe.style.color = color;
-        probe.style.position = 'absolute';
-        probe.style.left = '-9999px';
-        probe.style.top = '-9999px';
-        container.appendChild(probe);
-        const computed = getComputedStyle(probe).color;
-        probe.remove();
-        return computed || color;
+        return resolveCssColorInContext(this.chartContainerEl().nativeElement, color);
     }
     updateChart() {
         this.createChart();
@@ -260,11 +378,11 @@ class AXFunnelChartComponent extends AXChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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:clamp(220px,42vmin,520px);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:inherit;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%;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}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-name--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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFunnelChartComponent, decorators: [{
             type: Component,
-            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"] }]
+            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:clamp(220px,42vmin,520px);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:inherit;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%;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}ax-funnel-chart .ax-funnel-chart-container svg .funnel-label-group .funnel-label-name--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"] }]
         }], ctorParameters: () => [] });
 
 /**