@acorex/charts 20.6.31 → 20.6.33

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

@@ -1,19 +1,18 @@
 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',
-    color: 'rgb(99, 102, 241)',
+    color: 'rgb(var(--ax-sys-color-primary-500))',
     messages: {
         noData: 'No funnel data available',
         noDataIcon: 'fa-light fa-filter-list',
@@ -25,6 +24,11 @@ const AX_FUNNEL_CHART_CONFIG = new InjectionToken('AX_FUNNEL_CHART_CONFIG', {
 });
 
 class AXFunnelChartComponent extends AXChartComponent {
+    /**
+     * Fixed SVG coordinate system; the graphic scales to the container via `width`/`height: 100%` + `viewBox`.
+     * Margins and geometry are expressed in these units (same numeric scale as a ~400px reference viewport).
+     */
+    static VIEW_BOX_SIZE = 400;
     // Inputs
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -37,9 +41,6 @@ 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;
     // Tooltip Signals
     _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
     _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
@@ -58,14 +59,6 @@ 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();
-                }
-            });
         });
         effect(() => {
             // Trigger update on data or option change
@@ -77,7 +70,6 @@ class AXFunnelChartComponent extends AXChartComponent {
         });
     }
     ngOnDestroy() {
-        this.directionSub?.unsubscribe();
         this.cleanupChart();
     }
     async loadD3() {
@@ -103,28 +95,32 @@ class AXFunnelChartComponent extends AXChartComponent {
             return;
         }
         const container = this.chartContainerEl().nativeElement;
-        const width = container.clientWidth;
-        const height = container.clientHeight;
+        const vb = AXFunnelChartComponent.VIEW_BOX_SIZE;
+        const width = vb;
+        const height = vb;
         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 < 1 || innerHeight < 1) {
+            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 resolvedBaseForIntensity = this.resolveCssColor(opt.color ?? 'rgb(99, 102, 241)');
+        const showSegmentValues = opt.showSegmentValues !== false;
         data.forEach((d, i) => {
             const topVal = d.value;
             const bottomVal = data[i + 1]?.value ?? d.value * opt.neckWidth;
@@ -161,27 +157,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}`)
+                        .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}`)
+                        .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}`)
+                        .style('fill', primary)
+                        .text(displayName);
+                }
                 labelGroup
                     .transition()
                     .duration(600)
@@ -190,6 +208,79 @@ class AXFunnelChartComponent extends AXChartComponent {
             }
         });
     }
+    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 this.resolveCssColor(item.color);
@@ -261,11 +352,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: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}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: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}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: () => [] });
 
 /**