@foxeltech/angular-ui 0.7.104 → 0.7.108

package/components.css

@@ -849,3 +849,186 @@ input[type='password'] {
 .fx-rs-busy > *:not(fx-ui-route-skeleton) {
   display: none !important;
 }
+
+/* ============================================================================
+   Grid tables, badges and status dots to the reference HTML (Binary
+   Intelligence Dashboard, porcelain) — anh Tú 15/09, moved into the lib in
+   0.7.107 from three identical copies in analyze/knowledge/host styles.scss.
+
+   The reference draws its lists as CSS-grid rows, not <table>: a sunken 10px
+   header in 10.5px/600 tracked faint, 11px rows split by hairlines, hover to
+   surface-sunken, a trailing caret that turns accent and slides 2px. Columns
+   come from the consumer as `--fx-cols` on `.fx-grid-table`.
+
+   Inside layer(components) like the rest of this file, so a Tailwind utility
+   on the same element still wins.
+   ============================================================================ */
+.fx-grid-table {
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+  background: rgb(var(--og-surface));
+  overflow: hidden;
+}
+.fx-grid-table__head,
+.fx-grid-table__row {
+  display: grid;
+  grid-template-columns: var(--fx-cols);
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+}
+.fx-grid-table__head {
+  border-bottom: 1px solid rgb(var(--og-border));
+  background: rgb(var(--og-surface-sunken));
+  font-size: var(--og-fs-2xs);
+  font-weight: 600;
+  letter-spacing: var(--og-tracking-label);
+  color: rgb(var(--og-text-faint));
+}
+.fx-grid-table__row {
+  appearance: none;
+  width: 100%;
+  padding: 11px 12px;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--og-border-subtle));
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  transition: background-color 130ms ease;
+}
+.fx-grid-table__row:last-child {
+  border-bottom: 0;
+}
+.fx-grid-table__row:hover {
+  background: rgb(var(--og-surface-sunken));
+}
+.fx-grid-table__row--on {
+  background: rgb(var(--og-accent-soft-bg));
+}
+.fx-grid-table__row:focus-visible {
+  outline: 2px solid rgb(var(--og-accent));
+  outline-offset: -2px;
+}
+.fx-grid-caret {
+  font-size: 15px;
+  line-height: 1;
+  color: rgb(var(--og-text-faint));
+  justify-self: end;
+  transition:
+    color 130ms ease,
+    transform 130ms ease;
+}
+.fx-grid-table__row:hover .fx-grid-caret {
+  color: rgb(var(--og-accent));
+  transform: translateX(2px);
+}
+.fx-grid-table__num {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.fx-grid-table__head .fx-grid-table__num {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+.fx-grid-table__strong {
+  font-size: var(--og-fs-sm);
+  font-weight: 600;
+  color: rgb(var(--og-text));
+}
+.fx-grid-table__muted {
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-muted));
+}
+.fx-grid-table__mono {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+  color: rgb(var(--og-text-faint));
+}
+.fx-grid-empty {
+  padding: 15px;
+  text-align: center;
+  color: rgb(var(--og-text-muted));
+  font-size: var(--og-fs-sm);
+  border: 1px dashed rgb(var(--og-border));
+  border-radius: var(--og-radius-card);
+}
+
+/* `.og-badge`: 3px 10px, pill, 11.5px, soft tint by tone; outline = the
+   neutral "Low" band; solid = Critical. Tone names are the SEMANTIC tokens
+   (`--og-negative`, not the chart ramp) — see the note above `.tone-tint-*`. */
+.fx-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: var(--og-radius-pill);
+  font-size: var(--og-fs-xs);
+  line-height: 1.5;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.fx-badge--negative {
+  background: rgb(var(--og-negative-soft-bg));
+  color: rgb(var(--og-negative));
+}
+.fx-badge--warning {
+  background: rgb(var(--og-warning-soft-bg));
+  color: rgb(var(--og-warning));
+}
+.fx-badge--positive {
+  background: rgb(var(--og-positive-soft-bg));
+  color: rgb(var(--og-positive));
+}
+.fx-badge--neutral {
+  background: rgb(var(--og-neutral-soft-bg));
+  color: rgb(var(--og-neutral-soft-fg));
+}
+.fx-badge--accent {
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+}
+.fx-badge--outline {
+  background: none;
+  border: 1px solid rgb(var(--og-border));
+  color: rgb(var(--og-text-muted));
+}
+.fx-badge--solid {
+  background: rgb(var(--og-text));
+  color: rgb(var(--og-surface));
+}
+
+/* `.og-statusdot`: a 7px mark and the state's name. */
+.fx-statusdot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--og-fs-sm);
+  color: rgb(var(--og-text-body));
+  white-space: nowrap;
+}
+.fx-statusdot::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: rgb(var(--og-text-faint));
+  flex: none;
+}
+.fx-statusdot--positive::before {
+  background: rgb(var(--og-positive));
+}
+.fx-statusdot--negative::before {
+  background: rgb(var(--og-negative));
+}
+.fx-statusdot--warning::before {
+  background: rgb(var(--og-warning));
+}
+.fx-statusdot--accent::before {
+  background: rgb(var(--og-accent));
+}

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

@@ -22,10 +22,34 @@ class ChartComponent {
     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 */ []));
+    /**
+     * Type size of the donut's centre TOTAL, in px. The default matches what the
+     * figure has always been; raise it where the total is the panel's headline
+     * rather than an annotation.
+     */
+    pieCenterValueSize = input(24, ...(ngDevMode ? [{ debugName: "pieCenterValueSize" }] : /* istanbul ignore next */ []));
+    /**
+     * The donut's [inner, outer] radius — ECharts' own vocabulary, so either a
+     * percentage of the shorter side or a pixel count. The default is what the
+     * ring has always been. The reference dashboard draws a 140px ring with a
+     * 22px stroke, i.e. `[48, 70]` at `height="140px"` — the panel that wants it
+     * says so; the other pies keep their proportions.
+     */
+    pieRadius = input(['40%', '70%'], ...(ngDevMode ? [{ debugName: "pieRadius" }] : /* 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 */ []));
+    // line / area-trend controls
+    /**
+     * Print each point's value beside a marker on the line.
+     *
+     * Off by default: on a dense series the labels collide and the line becomes
+     * unreadable. Turn it on for the sparse, weekly kind of series where the
+     * number at each step IS the content — a reader should not have to hover to
+     * learn what a step was.
+     */
+    showPointLabels = input(false, ...(ngDevMode ? [{ debugName: "showPointLabels" }] : /* istanbul ignore next */ []));
     /* ================= OUTPUTS ================= */
     chartClick = output();
     chartInit = output();
@@ -78,6 +102,8 @@ class ChartComponent {
      */
     appearUntil = 0;
     static APPEAR_MS = 1100;
+    /** Quiet time a host size has to hold before a resize is acted on. */
+    static RESIZE_SETTLE_MS = 120;
     deferTimer;
     /**
      * Thay đổi kích thước ghi nhận TRONG cửa sổ appear, chờ áp sau. `measure()`
@@ -107,10 +133,15 @@ class ChartComponent {
         // resize() mù sau throttle 100ms, kể cả về 0×H khi phần tử display:none
         // (skeleton route ẩn nội dung cũ) rồi resize lại khi hiện → animation
         // xuất hiện bị giết (đo 05/09 khi đổi project trên chip breadcrumb).
+        // Coalesced: a host that is being ANIMATED (the drawer's 300ms width
+        // tween, a panel sliding open) fires one RO event per frame, and acting
+        // on each one resized + rebuilt the pie ~18 times and replayed its appear
+        // animation twice (anh Tú 15/09, donut on sidebar toggle). Wait until the
+        // size has been still for RESIZE_SETTLE_MS, then act once.
         this.resizeObserver = new ResizeObserver(() => {
             if (!this.canInit || this.destroyed)
                 return;
-            this.forceMediaRecalc();
+            this.deferResize(ChartComponent.RESIZE_SETTLE_MS);
         });
         this.resizeObserver.observe(this.ref.nativeElement);
     }
@@ -247,7 +278,14 @@ class ChartComponent {
      * lại cùng cỡ thì coi như không đổi (không resize, không cắt animation).
      */
     measure() {
-        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
+        const rect = this.ref.nativeElement.getBoundingClientRect();
+        // Whole pixels only. getBoundingClientRect() follows transforms, so a host
+        // riding an fxReveal translateY reports 200.00003 then 199.99997 — the
+        // old strict compare took that jitter for a resize, and after the appear
+        // window a pie was resized + rebuilt = drawn twice (đo 07/09, Overview
+        // "Open findings by severity" 2 × 60 frames 1.1 s apart).
+        const width = Math.round(rect.width);
+        const height = Math.round(rect.height);
         if (width <= 0 || height <= 0)
             return { size: false, mobile: false };
         const isMobile = width < this.mobileWidth();
@@ -262,10 +300,18 @@ class ChartComponent {
     markAppear() {
         this.appearUntil = performance.now() + ChartComponent.APPEAR_MS;
     }
-    /** Pie/sunburst đặt legend + số giữa theo px của containerWidth → phải dựng lại. */
+    /**
+     * Sunburst, and a pie WITH its built-in legend, place things in px of
+     * containerWidth → must rebuild on resize. A legend-less pie centres its
+     * ring at 50%/50% and its total in a `left: 'center' / top: 'middle'`
+     * graphic group, so `resize()` alone re-centres it — no rebuild, no
+     * second appear animation (15/09, donut on sidebar toggle).
+     */
     needsLayoutRebuild() {
         const type = this.detectType();
-        return type === 'pie' || type === 'sunburst';
+        if (type === 'sunburst')
+            return true;
+        return type === 'pie' && this.showPieLegend();
     }
     deferResize(ms) {
         if (this.deferTimer !== undefined)
@@ -318,10 +364,19 @@ class ChartComponent {
         if (!chart)
             return;
         chart.resize();
-        if (mobile || this.needsLayoutRebuild())
+        // A rebuild forced by GEOMETRY draws the same data at a new size: no
+        // appear animation, or the panel visibly redraws (that was the "renders
+        // twice" of 15/09). Only a preset change (mobile) keeps the animation.
+        if (mobile)
             this.rebuildChart();
+        else if (this.needsLayoutRebuild())
+            this.rebuildChart(true);
     }
-    rebuildChart() {
+    /**
+     * @param silent redraw for a new size only — same data, no appear animation,
+     *   and the appear window is not re-armed.
+     */
+    rebuildChart(silent = false) {
         if (this.destroyed)
             return;
         this.isEmpty = this.checkEmpty();
@@ -329,7 +384,7 @@ class ChartComponent {
             this.liveChart?.clear();
             return;
         }
-        const options = this.buildOptions();
+        const options = silent ? { ...this.buildOptions(), animation: false } : this.buildOptions();
         const chart = this.liveChart;
         if (!chart) {
             if (this.awaitingFirstInit) {
@@ -347,7 +402,8 @@ class ChartComponent {
         this.hasOptions = true;
         chart.clear();
         chart.setOption(options, true);
-        this.markAppear();
+        if (!silent)
+            this.markAppear();
     }
     checkEmpty() {
         const type = this.detectType();
@@ -466,7 +522,7 @@ class ChartComponent {
                 series: [
                     {
                         type: 'pie',
-                        radius: ['40%', '70%'],
+                        radius: this.pieRadius(),
                         center: layout.pieCenter,
                         data,
                         label: {
@@ -486,46 +542,62 @@ class ChartComponent {
                         },
                     },
                 ],
-                // 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).
+                // Centre figure. With the built-in legend the ring sits off-centre
+                // (layout.pieCenter in px of containerWidth), so the texts are placed
+                // by x/y in pixels — graphic left/top PERCENTAGES place the element's
+                // bounding-box EDGE and mis-centred the total. Without the legend the
+                // ring is at 50%/50% and the pair goes in a group with the KEYWORDS
+                // left: 'center' / top: 'middle', which ECharts re-lays out on
+                // `resize()` — so a legend-less donut never needs a rebuild to stay
+                // centred (15/09).
                 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 [
-                        {
+                    const centre = this.pieCentreAnchors();
+                    const font = this.resolvedFontFamily();
+                    const totalText = {
+                        type: 'text',
+                        style: {
+                            text: total.toString(),
+                            fontSize: this.pieCenterValueSize(),
+                            fontWeight: 600,
+                            fontFamily: font,
+                            fill: FxUtils.convertColorFromVariable('--text-primary'),
+                            align: 'center',
+                            verticalAlign: 'middle',
+                        },
+                    };
+                    const captionText = this.pieCenterLabel()
+                        ? {
                             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'),
+                                text: this.pieCenterLabel(),
+                                fontSize: 11,
+                                fontFamily: font,
+                                fill: FxUtils.convertColorFromVariable('--text-secondary'),
                                 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',
-                                    },
-                                },
-                            ]
-                            : []),
+                        }
+                        : undefined;
+                    if (!this.showPieLegend()) {
+                        return [
+                            {
+                                type: 'group',
+                                left: 'center',
+                                top: 'middle',
+                                silent: true,
+                                children: [
+                                    { ...totalText, x: 0, y: centre.total },
+                                    ...(captionText ? [{ ...captionText, x: 0, y: centre.caption }] : []),
+                                ],
+                            },
+                        ];
+                    }
+                    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 [
+                        { ...totalText, x: cx, y: cy + centre.total },
+                        ...(captionText ? [{ ...captionText, x: cx, y: cy + centre.caption }] : []),
                     ];
                 })(),
             };
@@ -568,7 +640,7 @@ class ChartComponent {
                     name: data?.currentLabel || 'Current',
                     data: data?.current || [],
                     smooth: true,
-                    symbol: 'none',
+                    ...this.pointMarks('top', accent),
                     lineStyle: { width: 2, color: accent },
                     itemStyle: { color: accent },
                     areaStyle: {
@@ -589,7 +661,9 @@ class ChartComponent {
                     name: data?.previousLabel || 'Previous',
                     data: data.previous,
                     smooth: true,
-                    symbol: 'none',
+                    // Labels below this line, above the other one: two series sharing an
+                    // x tick would otherwise print their numbers on top of each other.
+                    ...this.pointMarks('bottom', FxUtils.convertColorFromVariable('--text-placeholder', 1, { legacyCommaSyntax: true })),
                     lineStyle: {
                         width: 1.5,
                         type: 'dashed',
@@ -696,14 +770,77 @@ class ChartComponent {
             return 'pie';
         return 'bar';
     }
+    /**
+     * Marker and value label for one line series, per `showPointLabels`.
+     *
+     * Returns the OFF state explicitly (`symbol: 'none'`) rather than nothing, so
+     * the caller spreads one object either way and the default stays exactly what
+     * it was before this input existed.
+     */
+    pointMarks(position, color) {
+        if (!this.showPointLabels())
+            return { symbol: 'none' };
+        return {
+            symbol: 'circle',
+            symbolSize: 6,
+            showSymbol: true,
+            label: {
+                show: true,
+                position,
+                distance: 7,
+                fontSize: this.labelFontSize,
+                fontFamily: this.resolvedFontFamily(),
+                color,
+            },
+        };
+    }
+    /**
+     * Where the donut's centre total and its caption sit, relative to the ring's
+     * centre.
+     *
+     * MEASURED, not guessed. Both numbers below were read off a render at two
+     * sizes (glyph ink bounding boxes against the ring's own bounding box):
+     * neutral-figure ink is ~0.73 of the font size tall, and an ECharts text with
+     * `verticalAlign: 'middle'` places its ANCHOR ~0.095 of the font size BELOW
+     * the ink's optical centre — digits have no descender, so the ink rides high
+     * in the line box.
+     *
+     * The line gap is a CONSTANT. That is the whole point of this function: the
+     * gap between two lines is typographic and does not scale with the size of
+     * the number above it. Deriving it from the font size instead — which the
+     * first cut of `pieCenterValueSize` did — inflated a 9.6px gap to 18.2px at
+     * 38px type and pushed the pair 4.8px above the ring's centre. The hand-tuned
+     * constants it replaced were already 2.5px high at the default size; this
+     * lands the block dead centre at every size (verified 24/30/38/48).
+     */
+    pieCentreAnchors() {
+        const FIGURE_INK = 0.73;
+        const MIDDLE_ANCHOR_DROP = 0.095;
+        const LINE_GAP = 10;
+        const CAPTION_SIZE = 11;
+        const value = this.pieCenterValueSize();
+        // No caption: one line, its ink centred on the ring.
+        if (!this.pieCenterLabel()) {
+            return { total: MIDDLE_ANCHOR_DROP * value, caption: 0 };
+        }
+        const valueInk = FIGURE_INK * value;
+        const captionInk = FIGURE_INK * CAPTION_SIZE;
+        const blockHeight = valueInk + LINE_GAP + captionInk;
+        return {
+            total: -blockHeight / 2 + valueInk / 2 + MIDDLE_ANCHOR_DROP * value,
+            caption: blockHeight / 2 - captionInk / 2 + MIDDLE_ANCHOR_DROP * CAPTION_SIZE,
+        };
+    }
     buildOptions() {
         const type = this.detectType();
         const palette = this.resolvePalette();
         const base = this.registry[type]?.(this.data(), palette) || {};
-        return {
-            ...base,
-            ...this.options(),
-        };
+        // DEEP merge, not a spread. A shallow one replaced whole branches, so
+        // `[options]="{series:[{label:…}]}"` threw away the recipe's own series —
+        // data included — and there was no way to adjust one nested detail from
+        // outside. Arrays merge BY INDEX for the same reason: a caller tweaking
+        // series 0 must not have to restate series 1.
+        return deepMergeOptions(base, this.options());
     }
     categoryAxis(categories) {
         return {
@@ -770,15 +907,49 @@ 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 }, 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      [autoResize]=\"false\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  } @else {\n    <!-- Until echarts is loaded + initialised (or the element scrolls into view)\n         the panel keeps the chart's footprint with a quiet pulsing sketch\n         instead of an empty box (anh T\u00FA 04/09: \"the page is too blank\"). -->\n    <div class=\"chart-placeholder\" aria-hidden=\"true\">\n      @for (h of placeholderBars; track $index) {\n        <span class=\"chart-placeholder__bar\" [style.height.%]=\"h\"></span>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";: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}.chart-placeholder{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:12px 8px 22px;animation:chart-placeholder-pulse 1.6s ease-in-out infinite}.chart-placeholder__bar{flex:1;border-radius:3px 3px 0 0;background:rgb(var(--og-track))}@keyframes chart-placeholder-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chart-placeholder{animation:none}}\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 }, pieCenterValueSize: { classPropertyName: "pieCenterValueSize", publicName: "pieCenterValueSize", isSignal: true, isRequired: false, transformFunction: null }, pieRadius: { classPropertyName: "pieRadius", publicName: "pieRadius", 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 }, showPointLabels: { classPropertyName: "showPointLabels", publicName: "showPointLabels", 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      [autoResize]=\"false\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  } @else {\n    <!-- Until echarts is loaded + initialised (or the element scrolls into view)\n         the panel keeps the chart's footprint with a quiet pulsing sketch\n         instead of an empty box (anh T\u00FA 04/09: \"the page is too blank\"). -->\n    <div class=\"chart-placeholder\" aria-hidden=\"true\">\n      @for (h of placeholderBars; track $index) {\n        <span class=\"chart-placeholder__bar\" [style.height.%]=\"h\"></span>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";: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}.chart-placeholder{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:12px 8px 22px;animation:chart-placeholder-pulse 1.6s ease-in-out infinite}.chart-placeholder__bar{flex:1;border-radius:3px 3px 0 0;background:rgb(var(--og-track))}@keyframes chart-placeholder-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chart-placeholder{animation:none}}\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 if (hasOptions) {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [autoResize]=\"false\"\n      [loading]=\"loading()\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height()\"\n    ></div>\n  } @else {\n    <!-- Until echarts is loaded + initialised (or the element scrolls into view)\n         the panel keeps the chart's footprint with a quiet pulsing sketch\n         instead of an empty box (anh T\u00FA 04/09: \"the page is too blank\"). -->\n    <div class=\"chart-placeholder\" aria-hidden=\"true\">\n      @for (h of placeholderBars; track $index) {\n        <span class=\"chart-placeholder__bar\" [style.height.%]=\"h\"></span>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";: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}.chart-placeholder{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:12px 8px 22px;animation:chart-placeholder-pulse 1.6s ease-in-out infinite}.chart-placeholder__bar{flex:1;border-radius:3px 3px 0 0;background:rgb(var(--og-track))}@keyframes chart-placeholder-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chart-placeholder{animation:none}}\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: [{
+        }], 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 }] }], pieCenterValueSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieCenterValueSize", required: false }] }], pieRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieRadius", 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 }] }], showPointLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPointLabels", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }], onThemeChange: [{
                 type: HostListener,
                 args: ['window:theme-changed']
             }] } });
+/**
+ * Recursively merges an override onto a base ECharts option tree.
+ *
+ * Plain objects merge key by key; arrays merge BY INDEX, so overriding one
+ * series does not delete its siblings; anything else — a scalar, a Date, a
+ * colour-stop function — is replaced whole, because a half-merged value of
+ * those types has no meaning. `undefined` in the override is skipped so an
+ * unset field cannot erase a built-in.
+ */
+function deepMergeOptions(base, override) {
+    if (override === undefined)
+        return base;
+    if (Array.isArray(base) && Array.isArray(override)) {
+        const out = [...base];
+        override.forEach((value, i) => {
+            out[i] = i < base.length ? deepMergeOptions(base[i], value) : value;
+        });
+        return out;
+    }
+    if (isPlainObject(base) && isPlainObject(override)) {
+        const out = { ...base };
+        for (const [key, value] of Object.entries(override)) {
+            out[key] = key in base ? deepMergeOptions(base[key], value) : value;
+        }
+        return out;
+    }
+    return override;
+}
+function isPlainObject(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        (Object.getPrototypeOf(value) === Object.prototype || Object.getPrototypeOf(value) === null));
+}
 
 let pending;
 /**