@foxeltech/angular-ui 0.3.1 → 0.7.44

package/fesm2022/foxeltech-angular-ui-chart.mjs

@@ -0,0 +1,560 @@
+import * as i0 from '@angular/core';
+import { input, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FxUtils, InputComponent } from '@foxeltech/angular-ui';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+
+class ChartComponent {
+    ref;
+    cdr;
+    /* ================= INPUTS ================= */
+    type = input('auto', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    palette = input(...(ngDevMode ? [undefined, { debugName: "palette" }] : /* istanbul ignore next */ []));
+    height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    // pie controls
+    pieLegendAlign = input('10%', ...(ngDevMode ? [{ debugName: "pieLegendAlign" }] : /* istanbul ignore next */ []));
+    pieLegendPosition = input('middle', ...(ngDevMode ? [{ debugName: "pieLegendPosition" }] : /* istanbul ignore next */ []));
+    showPieLabel = input(true, ...(ngDevMode ? [{ debugName: "showPieLabel" }] : /* istanbul ignore next */ []));
+    /** Hide the built-in legend (panels that render their own legend beside the
+        donut); the donut then centres in the container. */
+    showPieLegend = input(true, ...(ngDevMode ? [{ debugName: "showPieLegend" }] : /* istanbul ignore next */ []));
+    /** Caption under the donut's centre total (design: "42 / confirmed"). */
+    pieCenterLabel = input('', ...(ngDevMode ? [{ debugName: "pieCenterLabel" }] : /* istanbul ignore next */ []));
+    mobileWidth = input(350, ...(ngDevMode ? [{ debugName: "mobileWidth" }] : /* istanbul ignore next */ []));
+    /** Override font for canvas text; empty = follow the theme's --og-font-figure. */
+    labelFontFamily = input('', ...(ngDevMode ? [{ debugName: "labelFontFamily" }] : /* istanbul ignore next */ []));
+    emptyText = input('No data available', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /* ================= OUTPUTS ================= */
+    chartClick = output();
+    chartInit = output();
+    /* ================= INTERNAL ================= */
+    chartOptions = {};
+    isEmpty = false;
+    labelFontSize = 12;
+    chartInstance;
+    resizeObserver;
+    intersectionObserver;
+    canInit = false;
+    isMobile = false;
+    containerWidth = 0;
+    constructor(ref, cdr) {
+        this.ref = ref;
+        this.cdr = cdr;
+    }
+    /* ================= LIFECYCLE ================= */
+    ngAfterViewInit() {
+        // Only initialize when visible (tab-safe)
+        this.intersectionObserver = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting && !this.canInit) {
+                this.canInit = true;
+                this.updateResponsiveState();
+                this.rebuildChart();
+                this.cdr.detectChanges();
+            }
+        }, { threshold: 0.1 });
+        this.intersectionObserver.observe(this.ref.nativeElement);
+        // Resize-safe (tabs, flex, async layout)
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.canInit)
+                return;
+            this.updateResponsiveState();
+            this.forceMediaRecalc();
+        });
+        this.resizeObserver.observe(this.ref.nativeElement);
+    }
+    ngOnChanges() {
+        if (this.canInit) {
+            this.updateResponsiveState();
+            this.rebuildChart();
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+    }
+    onThemeChange() {
+        if (!this.canInit)
+            return;
+        requestAnimationFrame(() => this.rebuildChart());
+    }
+    /* ================= EVENTS ================= */
+    onChartClick(event) {
+        this.chartClick.emit(event);
+    }
+    onChartInit(chart) {
+        this.chartInstance = chart;
+        this.chartInit.emit(chart);
+        requestAnimationFrame(() => this.forceMediaRecalc());
+    }
+    /* ================= CORE FIX ================= */
+    updateResponsiveState() {
+        const { width } = this.ref.nativeElement.getBoundingClientRect();
+        if (width > 0) {
+            this.containerWidth = width;
+            this.isMobile = width < this.mobileWidth();
+        }
+    }
+    forceMediaRecalc(retry = 0) {
+        if (!this.chartInstance)
+            return;
+        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
+        if ((width === 0 || height === 0) && retry < 10) {
+            requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
+            return;
+        }
+        this.rebuildChart();
+        this.chartInstance.resize();
+    }
+    rebuildChart() {
+        this.isEmpty = this.checkEmpty();
+        if (this.isEmpty) {
+            if (this.chartInstance) {
+                this.chartInstance.clear();
+            }
+            return;
+        }
+        this.chartOptions = this.buildOptions();
+        if (this.chartInstance) {
+            this.chartInstance.clear();
+            this.chartInstance.setOption(this.chartOptions, true);
+        }
+    }
+    checkEmpty() {
+        const type = this.detectType();
+        if (type === 'bar') {
+            const data = this.data();
+            const categories = data?.categories;
+            const values = data?.values;
+            return !categories?.length || !values?.length;
+        }
+        if (type === 'line') {
+            const data = this.data();
+            return !data?.categories?.length || !data?.values?.length;
+        }
+        if (type === 'area-trend') {
+            const data = this.data();
+            return !data?.categories?.length || !data?.current?.length;
+        }
+        if (type === 'pie') {
+            const data = this.data();
+            if (!Array.isArray(data) || data.length === 0)
+                return true;
+            const total = data.reduce((sum, d) => sum + (d.value || 0), 0);
+            return total === 0;
+        }
+        return false;
+    }
+    /* ================= REGISTRY ================= */
+    registry = {
+        bar: (data, colors) => ({
+            color: colors,
+            tooltip: { trigger: 'axis' },
+            grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },
+            xAxis: {
+                type: 'category',
+                data: data?.categories || [],
+                axisLabel: {
+                    interval: 0,
+                    width: 80,
+                    overflow: 'truncate',
+                    ellipsis: '…',
+                    fontFamily: this.resolvedFontFamily(),
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
+                },
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    fontFamily: this.resolvedFontFamily(),
+                    fontSize: this.labelFontSize,
+                    color: FxUtils.convertColorFromVariable('--text-secondary'),
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-strong'),
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: FxUtils.convertColorFromVariable('--border-default'),
+                    },
+                },
+            },
+            series: [
+                {
+                    type: 'bar',
+                    data: data?.values || [],
+                    barMaxWidth: 70,
+                    itemStyle: {
+                        color: (p) => colors[p.dataIndex % colors.length],
+                    },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        fontFamily: this.resolvedFontFamily(),
+                        fontSize: this.labelFontSize,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                    },
+                },
+            ],
+        }),
+        pie: (data, colors) => {
+            const total = data.reduce((sum, d) => sum + d.value, 0);
+            const layout = this.calcPieLayout(data);
+            return {
+                color: colors,
+                tooltip: { trigger: 'item' },
+                legend: {
+                    show: this.showPieLegend(),
+                    type: 'scroll',
+                    orient: layout.legendOrient,
+                    icon: 'circle',
+                    itemGap: 12,
+                    right: layout.legendRight,
+                    top: layout.legendTop,
+                    left: layout.legendLeft,
+                    bottom: layout.legendBottom,
+                    width: layout.legendWidth,
+                    formatter: (name) => {
+                        const item = data.find((d) => d.name === name);
+                        return item ? `${name}: ${item.value}` : name;
+                    },
+                    textStyle: {
+                        fontFamily: this.resolvedFontFamily(),
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        overflow: 'truncate',
+                    },
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['40%', '70%'],
+                        center: layout.pieCenter,
+                        data,
+                        label: {
+                            show: this.showPieLabel(),
+                            position: 'outside',
+                            formatter: '{d}%',
+                            fontSize: this.labelFontSize,
+                            fontFamily: this.resolvedFontFamily(),
+                            color: FxUtils.convertColorFromVariable('--text-primary'),
+                            textBorderWidth: 0,
+                            textBorderColor: 'transparent',
+                        },
+                        labelLine: {
+                            show: this.showPieLabel(),
+                            length: 7,
+                            length2: 7,
+                        },
+                    },
+                ],
+                // Centre figure: positioned by x/y in pixels — graphic left/top
+                // percentages place the element's bounding-box EDGE, which shifted the
+                // total right/down by half its own size (mis-centred, caption clipped).
+                graphic: (() => {
+                    const cx = (this.containerWidth || 400) * (parseFloat(layout.pieCenter[0]) / 100);
+                    const ch = this.ref.nativeElement.clientHeight || 300;
+                    const cy = ch * (parseFloat(layout.pieCenter[1]) / 100);
+                    return [
+                        {
+                            type: 'text',
+                            // Shift the total up when a caption sits under it.
+                            x: cx,
+                            y: cy + (this.pieCenterLabel() ? -9 : 0),
+                            style: {
+                                text: total.toString(),
+                                fontSize: 24,
+                                fontWeight: 600,
+                                fontFamily: this.resolvedFontFamily(),
+                                fill: FxUtils.convertColorFromVariable('--text-primary'),
+                                align: 'center',
+                                verticalAlign: 'middle',
+                            },
+                        },
+                        ...(this.pieCenterLabel()
+                            ? [
+                                {
+                                    type: 'text',
+                                    x: cx,
+                                    y: cy + 12,
+                                    style: {
+                                        text: this.pieCenterLabel(),
+                                        fontSize: 11,
+                                        fontFamily: this.resolvedFontFamily(),
+                                        fill: FxUtils.convertColorFromVariable('--text-secondary'),
+                                        align: 'center',
+                                        verticalAlign: 'middle',
+                                    },
+                                },
+                            ]
+                            : []),
+                    ];
+                })(),
+            };
+        },
+        // V2 preset: single line, accent-coloured — "risk score by release".
+        line: (data) => ({
+            tooltip: { trigger: 'axis' },
+            grid: { left: '3%', right: '4%', bottom: '8%', top: '8%', containLabel: true },
+            xAxis: this.categoryAxis(data?.categories || []),
+            yAxis: this.valueAxis(),
+            series: [
+                {
+                    type: 'line',
+                    data: data?.values || [],
+                    smooth: false,
+                    symbol: 'circle',
+                    symbolSize: 7,
+                    lineStyle: { width: 2, color: FxUtils.convertColorFromVariable('--og-accent', 1, { legacyCommaSyntax: true }) },
+                    itemStyle: { color: FxUtils.convertColorFromVariable('--og-accent', 1, { legacyCommaSyntax: true }) },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        fontFamily: this.resolvedFontFamily(),
+                        fontSize: this.labelFontSize,
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                    },
+                },
+            ],
+        }),
+        // V2 preset: weekly trend — accent gradient fill + gray comparison line.
+        // data: { categories: string[], current: number[], previous?: number[] }
+        'area-trend': (data) => {
+            // legacyCommaSyntax: zrender's colour parser chokes on CSS4 space syntax.
+            const accent = FxUtils.convertColorFromVariable('--og-accent', 1, { legacyCommaSyntax: true });
+            const accentSoft = FxUtils.convertColorFromVariable('--og-accent', 0.25, { legacyCommaSyntax: true });
+            const accentFade = FxUtils.convertColorFromVariable('--og-accent', 0.02, { legacyCommaSyntax: true });
+            const series = [
+                {
+                    type: 'line',
+                    name: data?.currentLabel || 'Current',
+                    data: data?.current || [],
+                    smooth: true,
+                    symbol: 'none',
+                    lineStyle: { width: 2, color: accent },
+                    itemStyle: { color: accent },
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1,
+                            colorStops: [
+                                { offset: 0, color: accentSoft },
+                                { offset: 1, color: accentFade },
+                            ],
+                        },
+                    },
+                },
+            ];
+            if (data?.previous?.length) {
+                series.push({
+                    type: 'line',
+                    name: data?.previousLabel || 'Previous',
+                    data: data.previous,
+                    smooth: true,
+                    symbol: 'none',
+                    lineStyle: {
+                        width: 1.5,
+                        type: 'dashed',
+                        color: FxUtils.convertColorFromVariable('--text-placeholder', 1, { legacyCommaSyntax: true }),
+                    },
+                    itemStyle: { color: FxUtils.convertColorFromVariable('--text-placeholder', 1, { legacyCommaSyntax: true }) },
+                });
+            }
+            return {
+                tooltip: { trigger: 'axis' },
+                grid: { left: '3%', right: '4%', bottom: '8%', top: '10%', containLabel: true },
+                xAxis: { ...this.categoryAxis(data?.categories || []), boundaryGap: false },
+                yAxis: this.valueAxis(),
+                series,
+            };
+        },
+        sunburst: (data, colors) => ({
+            color: colors,
+            series: [
+                {
+                    type: 'sunburst',
+                    data,
+                    radius: ['15%', '90%'],
+                    itemStyle: {
+                        borderWidth: 1,
+                        borderColor: FxUtils.convertColorFromVariable('--border-default'),
+                    },
+                    label: {
+                        rotate: 'tangential',
+                        fontSize: this.labelFontSize,
+                        fontFamily: this.resolvedFontFamily(),
+                        color: FxUtils.convertColorFromVariable('--text-primary'),
+                        textBorderWidth: 0,
+                        textBorderColor: 'transparent',
+                    },
+                },
+            ],
+        }),
+    };
+    /* ================= PIE LAYOUT ================= */
+    calcPieLayout(data) {
+        const cw = this.containerWidth || 400;
+        if (!this.showPieLegend()) {
+            return {
+                legendOrient: 'vertical',
+                legendLeft: undefined,
+                legendRight: undefined,
+                legendTop: undefined,
+                legendBottom: undefined,
+                legendWidth: undefined,
+                pieCenter: ['50%', '50%'],
+                graphicLeft: '50%',
+                graphicTop: '50%',
+            };
+        }
+        if (this.isMobile) {
+            return {
+                legendOrient: 'horizontal',
+                legendLeft: 'center',
+                legendRight: undefined,
+                legendTop: undefined,
+                legendBottom: 0,
+                legendWidth: undefined,
+                pieCenter: ['50%', '40%'],
+                graphicLeft: '50%',
+                graphicTop: '40%',
+            };
+        }
+        // Estimate legend pixel width from longest formatted label
+        const CHAR_WIDTH = 7.5; // approx px per char at fontSize 13
+        const ICON_GAP = 30; // legend icon + padding
+        const longestLabel = data.reduce((max, d) => {
+            return Math.max(max, `${d.name}: ${d.value}`.length);
+        }, 0);
+        const rawLegendPx = longestLabel * CHAR_WIDTH + ICON_GAP;
+        // Clamp: min 100px, max 45% of container
+        const legendPx = Math.max(100, Math.min(rawLegendPx, cw * 0.45));
+        const legendPct = (legendPx / cw) * 100;
+        // Pie center: middle of the remaining space after legend
+        const pieCenterX = Math.round((100 - legendPct) / 2);
+        return {
+            legendOrient: 'vertical',
+            legendLeft: undefined,
+            legendRight: '2%',
+            legendTop: 'middle',
+            legendBottom: undefined,
+            legendWidth: Math.round(legendPx),
+            pieCenter: [`${pieCenterX}%`, '50%'],
+            graphicLeft: `${pieCenterX}%`,
+            graphicTop: '50%',
+        };
+    }
+    /* ================= BUILD ================= */
+    detectType() {
+        const type = this.type();
+        if (type !== 'auto')
+            return type;
+        const data = this.data();
+        if (data?.children)
+            return 'sunburst';
+        if (data?.categories && data?.values)
+            return 'bar';
+        if (Array.isArray(data))
+            return 'pie';
+        return 'bar';
+    }
+    buildOptions() {
+        const type = this.detectType();
+        const palette = this.resolvePalette();
+        const base = this.registry[type]?.(this.data(), palette) || {};
+        return {
+            ...base,
+            ...this.options(),
+        };
+    }
+    categoryAxis(categories) {
+        return {
+            type: 'category',
+            data: categories,
+            axisLabel: {
+                fontFamily: this.resolvedFontFamily(),
+                fontSize: this.labelFontSize,
+                color: FxUtils.convertColorFromVariable('--text-secondary'),
+            },
+            axisLine: {
+                lineStyle: { color: FxUtils.convertColorFromVariable('--border-strong') },
+            },
+        };
+    }
+    valueAxis() {
+        return {
+            type: 'value',
+            axisLabel: {
+                fontFamily: this.resolvedFontFamily(),
+                fontSize: this.labelFontSize,
+                color: FxUtils.convertColorFromVariable('--text-secondary'),
+            },
+            splitLine: {
+                lineStyle: { color: FxUtils.convertColorFromVariable('--border-default') },
+            },
+        };
+    }
+    /** Canvas không ăn var() — resolve font stack thật tại render; chart đã
+        rebuild theo event theme-changed nên tự đổi font khi đổi theme
+        (blueprint/terminal dùng mono qua --og-font-figure). */
+    resolvedFontFamily() {
+        const override = this.labelFontFamily();
+        if (override)
+            return override;
+        // Dev-mode CSS pretty-printer bẻ dòng giá trị dài — normalize whitespace
+        // trước khi chuỗi này vào ctx.font của canvas.
+        const figure = getComputedStyle(document.body)
+            .getPropertyValue('--og-font-figure')
+            .replace(/\s+/g, ' ')
+            .trim();
+        return figure || 'Archivo, system-ui, sans-serif';
+    }
+    resolvePalette() {
+        const defaults = [
+            'rgba(var(--success) / 1)',
+            'rgba(var(--information) / 1)',
+            'rgba(var(--critical) / 1)',
+            'rgba(var(--danger) / 1)',
+            'rgba(var(--warning) / 1)',
+            'rgba(var(--discovery) / 1)',
+        ];
+        const paletteValue = this.palette();
+        const palette = paletteValue?.length ? paletteValue : defaults;
+        return palette.map((raw) => {
+            if (!raw.includes('var('))
+                return raw;
+            const cssVar = raw.match(/var\((.*?)\)/)?.[1];
+            const rgb = getComputedStyle(document.body)
+                .getPropertyValue(cssVar || '')
+                .trim()
+                .replace(/\s+/g, ',');
+            return `rgba(${rgb},1)`;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartComponent, isStandalone: true, selector: "fx-ui-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pieLegendAlign: { classPropertyName: "pieLegendAlign", publicName: "pieLegendAlign", isSignal: true, isRequired: false, transformFunction: null }, pieLegendPosition: { classPropertyName: "pieLegendPosition", publicName: "pieLegendPosition", isSignal: true, isRequired: false, transformFunction: null }, showPieLabel: { classPropertyName: "showPieLabel", publicName: "showPieLabel", isSignal: true, isRequired: false, transformFunction: null }, showPieLegend: { classPropertyName: "showPieLegend", publicName: "showPieLegend", isSignal: true, isRequired: false, transformFunction: null }, pieCenterLabel: { classPropertyName: "pieCenterLabel", publicName: "pieCenterLabel", isSignal: true, isRequired: false, transformFunction: null }, mobileWidth: { classPropertyName: "mobileWidth", publicName: "mobileWidth", isSignal: true, isRequired: false, transformFunction: null }, labelFontFamily: { classPropertyName: "labelFontFamily", publicName: "labelFontFamily", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, providers: [provideEchartsCore({ echarts: () => import('echarts') })], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxEchartsDirective, InputComponent], providers: [provideEchartsCore({ echarts: () => import('echarts') })], template: "<div class=\"chart-wrapper\" [style.height]=\"height()\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText() }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pieLegendAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendAlign", required: false }] }], pieLegendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieLegendPosition", required: false }] }], showPieLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLabel", required: false }] }], showPieLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPieLegend", required: false }] }], pieCenterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieCenterLabel", required: false }] }], mobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileWidth", required: false }] }], labelFontFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFontFamily", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }], onThemeChange: [{
+                type: HostListener,
+                args: ['window:theme-changed']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartComponent };
+//# sourceMappingURL=foxeltech-angular-ui-chart.mjs.map