@foxeltech/angular-ui 0.4.0 → 0.7.75

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

@@ -17,8 +17,14 @@ class ChartComponent {
     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 */ []));
-    labelFontFamily = input('Roboto', ...(ngDevMode ? [{ debugName: "labelFontFamily" }] : /* 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();
@@ -26,11 +32,38 @@ class ChartComponent {
     /* ================= INTERNAL ================= */
     chartOptions = {};
     isEmpty = false;
+    /**
+     * ⚠️ Cổng cho `<div echarts>` trong template. Trước đây div render NGAY với
+     * `chartOptions = {}`, nên NgxEchartsDirective khởi tạo chart bằng options
+     * RỖNG; options thật gán vào giữa lúc `await createChart()` của lần đó ⇒
+     * onOptionsChange() thấy `chart == null` và createChart() LẦN HAI trên cùng
+     * DOM node ⇒ "[ECharts] There is a chart instance already initialized on the
+     * dom.". Chỉ dựng directive khi đã có options thật ⇒ đúng một lần init.
+     */
+    hasOptions = false;
     labelFontSize = 12;
     chartInstance;
     resizeObserver;
     intersectionObserver;
     canInit = false;
+    destroyed = false;
+    /**
+     * ⚠️ Đang chờ init đầu tiên của directive hoàn tất?
+     *
+     * NgxEchartsDirective đăng ký `changeFilter.notFirstAndEmpty('options', …)`:
+     * lần gán `options` ĐẦU bị bỏ qua (ngAfterViewInit lo), lần gán THỨ HAI gọi
+     * onOptionsChange(). Mà onOptionsChange() chỉ createChart() khi `this.chart`
+     * còn null — và nó null suốt thời gian `await createChart()` của lần đầu.
+     * Nên nếu ta gán `chartOptions` (object mới) trong khoảng await đó thì
+     * init() chạy HAI LẦN trên cùng DOM node ⇒
+     * "[ECharts] There is a chart instance already initialized on the dom."
+     *
+     * Cách chặn: trong khoảng chờ, giữ options ở `deferredOptions` chứ không đụng
+     * vào property đang bind; init xong thì áp một lần qua instance.
+     */
+    awaitingFirstInit = false;
+    deferredOptions;
+    pendingFrames = new Set();
     isMobile = false;
     containerWidth = 0;
     constructor(ref, cdr) {
@@ -41,7 +74,7 @@ class ChartComponent {
     ngAfterViewInit() {
         // Only initialize when visible (tab-safe)
         this.intersectionObserver = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting && !this.canInit) {
+            if (entry.isIntersecting && !this.canInit && !this.destroyed) {
                 this.canInit = true;
                 this.updateResponsiveState();
                 this.rebuildChart();
@@ -51,69 +84,215 @@ class ChartComponent {
         this.intersectionObserver.observe(this.ref.nativeElement);
         // Resize-safe (tabs, flex, async layout)
         this.resizeObserver = new ResizeObserver(() => {
-            if (!this.canInit)
+            if (!this.canInit || this.destroyed)
                 return;
-            this.updateResponsiveState();
+            // forceMediaRecalc tự đo lại và chỉ dựng lại khi kích thước đổi.
             this.forceMediaRecalc();
         });
         this.resizeObserver.observe(this.ref.nativeElement);
     }
     ngOnChanges() {
-        if (this.canInit) {
+        if (this.canInit && !this.destroyed) {
             this.updateResponsiveState();
             this.rebuildChart();
         }
     }
     ngOnDestroy() {
+        // NgxEchartsDirective tự dispose instance của nó, nên KHÔNG dispose ở đây
+        // (sẽ dispose trùng). Việc phải làm là ngắt mọi đường còn chạm được vào
+        // instance sau khi nó đã bị dispose: callback rAF đang chờ + tham chiếu
+        // `chartInstance` mà forceMediaRecalc/rebuildChart vẫn dùng.
+        this.destroyed = true;
+        for (const id of this.pendingFrames)
+            cancelAnimationFrame(id);
+        this.pendingFrames.clear();
         this.resizeObserver?.disconnect();
         this.intersectionObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.intersectionObserver = undefined;
+        this.chartInstance = undefined;
+        this.awaitingFirstInit = false;
+        this.deferredOptions = undefined;
+        this.sweepOrphanInstance();
+    }
+    /**
+     * ⚠️ RACE TRONG NGX-ECHARTS v20 — nguồn của
+     * "[ECharts] There is a chart instance already initialized on the dom."
+     *
+     * NgxEchartsDirective.onOptionsChange() làm:
+     *   this.chart = await this.createChart();   // ← destroy có thể rơi vào đây
+     *   this.chart$.next(this.chart);
+     *   this.chartInit.emit(this.chart);
+     *
+     * Destroy đúng lúc đang await thì ngOnDestroy → dispose() thấy `this.chart == null`
+     * nên KHÔNG dispose gì. Sau đó await resolve, gán một instance ECharts còn sống cho
+     * directive đã chết → instance MỒ CÔI, vẫn nằm trong registry của echarts gắn với
+     * DOM node đó. Angular tái dùng node ⇒ init() lần sau báo "already initialized".
+     *
+     * Không thể bắt qua (chartInit): Angular v20 TỪ CHỐI emit trên OutputRef đã destroy
+     * (chỉ log NG0953, listener không hề được gọi). Nên đường duy nhất là hỏi thẳng
+     * echarts xem node còn instance nào không, ở các macrotask SAU destroy.
+     */
+    sweepOrphanInstance() {
+        const host = this.ref.nativeElement.querySelector('.fx-chart');
+        if (!host)
+            return;
+        // Chỉ nạp echarts nếu nó đã ở trong module cache — không tự kéo bundle về
+        // chỉ để đi dọn.
+        let attempt = 0;
+        const sweep = () => {
+            import('echarts').then(({ getInstanceByDom }) => {
+                const orphan = getInstanceByDom(host);
+                if (orphan) {
+                    if (!orphan.isDisposed())
+                        orphan.dispose();
+                    return;
+                }
+                // createChart() phải chờ dynamic import nên instance mồ côi có thể xuất
+                // hiện muộn hơn một macrotask; thử lại vài nhịp rồi dừng.
+                if (++attempt < 5)
+                    setTimeout(sweep, 50 * attempt);
+            });
+        };
+        setTimeout(sweep);
+    }
+    /** rAF có thể huỷ được khi destroy — tránh chạm instance đã dispose. */
+    schedule(fn) {
+        if (this.destroyed)
+            return;
+        const id = requestAnimationFrame(() => {
+            this.pendingFrames.delete(id);
+            if (this.destroyed)
+                return;
+            fn();
+        });
+        this.pendingFrames.add(id);
+    }
+    /** Instance còn dùng được? (đã dispose thì mọi API echarts đều ném lỗi) */
+    get liveChart() {
+        const chart = this.chartInstance;
+        if (!chart || this.destroyed || chart.isDisposed())
+            return undefined;
+        return chart;
     }
     onThemeChange() {
-        if (!this.canInit)
+        if (!this.canInit || this.destroyed)
             return;
-        requestAnimationFrame(() => this.rebuildChart());
+        this.schedule(() => this.rebuildChart());
     }
     /* ================= EVENTS ================= */
     onChartClick(event) {
         this.chartClick.emit(event);
     }
-    onChartInit(chart) {
+    // ⚠️ Phải để `any`: NgxEchartsDirective emit `EChartsType` từ
+    // 'echarts/types/dist/shared', TS coi nó KHÔNG tương thích với `ECharts`
+    // của 'echarts' (private `_ssr` khai báo riêng) → template typecheck fail.
+    onChartInit(raw) {
+        const chart = raw;
+        // Phòng thân: bình thường Angular đã chặn emit sau destroy (NG0953) nên
+        // nhánh này không tới; nhưng nếu tới thì tuyệt đối không được gán lại
+        // `chartInstance` sau ngOnDestroy. Việc thu dọn instance mồ côi do
+        // sweepOrphanInstance() lo — xem ghi chú ở đó.
+        if (this.destroyed) {
+            if (!chart.isDisposed())
+                chart.dispose();
+            return;
+        }
         this.chartInstance = chart;
+        this.awaitingFirstInit = false;
+        if (this.deferredOptions) {
+            const options = this.deferredOptions;
+            this.deferredOptions = undefined;
+            this.chartOptions = options;
+            if (!chart.isDisposed()) {
+                chart.clear();
+                chart.setOption(options, true);
+            }
+        }
         this.chartInit.emit(chart);
-        requestAnimationFrame(() => this.forceMediaRecalc());
+        this.schedule(() => this.forceMediaRecalc());
     }
     /* ================= CORE FIX ================= */
+    /**
+     * @returns true nếu trạng thái responsive THỰC SỰ đổi (nên dựng lại options).
+     *
+     * Trả về boolean là điều then chốt cho animation lúc chart xuất hiện — xem
+     * ghi chú ở `forceMediaRecalc`.
+     */
     updateResponsiveState() {
         const { width } = this.ref.nativeElement.getBoundingClientRect();
-        if (width > 0) {
-            this.containerWidth = width;
-            this.isMobile = width < this.mobileWidth();
-        }
+        if (width <= 0)
+            return false;
+        const isMobile = width < this.mobileWidth();
+        const changed = width !== this.containerWidth || isMobile !== this.isMobile;
+        this.containerWidth = width;
+        this.isMobile = isMobile;
+        return changed;
     }
+    /**
+     * ⚠️ CHỈ dựng lại options khi kích thước thật sự đổi — nếu không thì
+     * **animation lúc chart xuất hiện bị giết**.
+     *
+     * Đường đi: `onChartInit` → schedule(forceMediaRecalc) → chạy ở frame KẾ
+     * TIẾP. Nếu chỗ này vô điều kiện `rebuildChart()` (clear + setOption notMerge)
+     * thì nó xoá sạch và vẽ lại từ đầu ~16ms sau lần vẽ đầu, trong khi animation
+     * xuất hiện dài ~1000ms ⇒ người dùng thấy chart hiện ra đứng im.
+     *
+     * Đo được: lần xuất hiện đầu 1/12 frame khác nhau (đứng yên) trong khi vẽ lại
+     * bằng `theme-changed` cho 9/12 → animation của ECharts vẫn bật, chỉ lần đầu
+     * bị cắt.
+     *
+     * Trước Pha 0 lỗi này bị che: lần init đầu dùng `chartOptions = {}` nên
+     * animation xuất hiện xảy ra ở lần cập nhật SAU, tức sau khi forceMediaRecalc
+     * đã chạy xong. Cổng `hasOptions` đưa options thật về ngay lần init nên lộ ra.
+     *
+     * `resize()` thì luôn gọi được — nó không cắt animation.
+     */
     forceMediaRecalc(retry = 0) {
-        if (!this.chartInstance)
+        if (!this.liveChart)
             return;
         const { width, height } = this.ref.nativeElement.getBoundingClientRect();
         if ((width === 0 || height === 0) && retry < 10) {
-            requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
+            this.schedule(() => this.forceMediaRecalc(retry + 1));
             return;
         }
+        // ⚠️ `resize()` cũng phải CÓ ĐIỀU KIỆN. ECharts nhảy thẳng tới trạng thái
+        // cuối khi resize, nên gọi nó ở frame ngay sau init sẽ CẮT animation lúc
+        // chart xuất hiện — đo được: 3 lần đổi khung trong 200ms rồi đứng im, dù
+        // đã đặt animationDuration 3000ms.
+        // Không cần resize ở lần đầu: ECharts tự lấy kích thước khi init, và vòng
+        // retry ở trên đã lo ca width/height = 0.
+        if (!this.updateResponsiveState())
+            return;
         this.rebuildChart();
-        this.chartInstance.resize();
+        this.liveChart?.resize();
     }
     rebuildChart() {
+        if (this.destroyed)
+            return;
         this.isEmpty = this.checkEmpty();
         if (this.isEmpty) {
-            if (this.chartInstance) {
-                this.chartInstance.clear();
-            }
+            this.liveChart?.clear();
             return;
         }
-        this.chartOptions = this.buildOptions();
-        if (this.chartInstance) {
-            this.chartInstance.clear();
-            this.chartInstance.setOption(this.chartOptions, true);
+        const options = this.buildOptions();
+        const chart = this.liveChart;
+        if (!chart) {
+            if (this.awaitingFirstInit) {
+                // Đang trong khoảng await của lần init đầu — KHÔNG gán vào property
+                // đang bind, xem ghi chú ở `awaitingFirstInit`.
+                this.deferredOptions = options;
+                return;
+            }
+            this.awaitingFirstInit = true;
+            this.chartOptions = options;
+            this.hasOptions = true;
+            return;
         }
+        this.chartOptions = options;
+        this.hasOptions = true;
+        chart.clear();
+        chart.setOption(options, true);
     }
     checkEmpty() {
         const type = this.detectType();
@@ -123,6 +302,14 @@ class ChartComponent {
             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)
@@ -146,7 +333,7 @@ class ChartComponent {
                     width: 80,
                     overflow: 'truncate',
                     ellipsis: '…',
-                    fontFamily: this.labelFontFamily(),
+                    fontFamily: this.resolvedFontFamily(),
                     fontSize: this.labelFontSize,
                     color: FxUtils.convertColorFromVariable('--text-secondary'),
                 },
@@ -159,7 +346,7 @@ class ChartComponent {
             yAxis: {
                 type: 'value',
                 axisLabel: {
-                    fontFamily: this.labelFontFamily(),
+                    fontFamily: this.resolvedFontFamily(),
                     fontSize: this.labelFontSize,
                     color: FxUtils.convertColorFromVariable('--text-secondary'),
                 },
@@ -185,7 +372,7 @@ class ChartComponent {
                     label: {
                         show: true,
                         position: 'top',
-                        fontFamily: this.labelFontFamily(),
+                        fontFamily: this.resolvedFontFamily(),
                         fontSize: this.labelFontSize,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
                     },
@@ -199,6 +386,7 @@ class ChartComponent {
                 color: colors,
                 tooltip: { trigger: 'item' },
                 legend: {
+                    show: this.showPieLegend(),
                     type: 'scroll',
                     orient: layout.legendOrient,
                     icon: 'circle',
@@ -213,7 +401,7 @@ class ChartComponent {
                         return item ? `${name}: ${item.value}` : name;
                     },
                     textStyle: {
-                        fontFamily: this.labelFontFamily(),
+                        fontFamily: this.resolvedFontFamily(),
                         fontSize: 13,
                         fontWeight: 500,
                         color: FxUtils.convertColorFromVariable('--text-primary'),
@@ -231,7 +419,7 @@ class ChartComponent {
                             position: 'outside',
                             formatter: '{d}%',
                             fontSize: this.labelFontSize,
-                            fontFamily: this.labelFontFamily(),
+                            fontFamily: this.resolvedFontFamily(),
                             color: FxUtils.convertColorFromVariable('--text-primary'),
                             textBorderWidth: 0,
                             textBorderColor: 'transparent',
@@ -243,26 +431,124 @@ class ChartComponent {
                         },
                     },
                 ],
-                graphic: {
-                    type: 'group',
-                    left: layout.graphicLeft,
-                    top: layout.graphicTop,
-                    bounding: 'raw',
-                    children: [
+                // 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.labelFontFamily(),
+                                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) => ({
@@ -279,7 +565,7 @@ class ChartComponent {
                     label: {
                         rotate: 'tangential',
                         fontSize: this.labelFontSize,
-                        fontFamily: this.labelFontFamily(),
+                        fontFamily: this.resolvedFontFamily(),
                         color: FxUtils.convertColorFromVariable('--text-primary'),
                         textBorderWidth: 0,
                         textBorderColor: 'transparent',
@@ -291,6 +577,19 @@ class ChartComponent {
     /* ================= 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',
@@ -351,6 +650,48 @@ class ChartComponent {
             ...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)',
@@ -374,12 +715,12 @@ class ChartComponent {
         });
     }
     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 }, 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 });
+    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 if (hasOptions) {\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 }] }], 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: [{
+            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 if (hasOptions) {\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']
             }] } });