@praxisui/charts 10.0.0-rc.7 → 10.0.0-rc.9

package/README.md

@@ -257,6 +257,26 @@ follows the host. Palette inheritance is preserved. Explicit chart surface/backg
 and text colors remain authoritative; choosing them requires a coherent contrast pair.
 Changing the host theme updates inherited colors without modifying the chart document.
 
+Existing color strings in palette arrays, metric/series colors, surface backgrounds,
+text colors and gauge bands can reference host CSS custom properties (for example,
+`var(--md-sys-color-primary, #1263b4)`). The default engine resolves them against the
+chart host on every render and projects modern CSS colors such as OKLCH into sRGB
+for Canvas. Explicit literal colors and palette overrides retain precedence. Missing
+or invalid tokens use bounded engine defaults; gauge bands retain their semantic
+tone fallback. Persisted documents and source data remain unchanged. A string
+`theme.palette` in `x-ui.chart` still names a registered Praxis palette; use an array
+for individual CSS colors.
+
+Palette array items must be non-empty strings; malformed persisted values are
+rejected by canonical validation with the item path. Direct runtime color fields
+also fall back safely when untyped JSON supplies another value type. Color probes
+isolate their measured color from host CSS rules, including rules with `!important`.
+
+The engine also derives tooltip background, foreground and border from the host's
+existing popover roles, with card/foreground and Material fallbacks. Tooltip
+formatting, triggers and disabled state keep their authored semantics; these
+computed appearance values are transient and never saved into the chart document.
+
 ## Micro Visualizations
 
 Transparent charts inside `WidgetShell` inherit the shell foreground, including fixed dark finishes in a light application theme. The chart's opaque accessible-data panel pairs its own background with the corresponding foreground. Explicit chart text colors keep precedence.

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-12T01:05:29.617Z",
+  "generatedAt": "2026-10-12T12:49:05.370Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "10.0.0-rc.7",
+  "packageVersion": "10.0.0-rc.9",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 4,

package/fesm2022/praxisui-charts.mjs

@@ -10,7 +10,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
 import { AnalyticsTableConfigAdapterService, AnalyticsTableStatsApiService, ANALYTICS_TABLE_ROW_KEY_FIELD, PraxisTable } from '@praxisui/table';
-import { use, init } from 'echarts/core';
+import { color, use, init } from 'echarts/core';
 import { BarChart, FunnelChart, GaugeChart, LineChart, PieChart, ScatterChart, TreemapChart } from 'echarts/charts';
 import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TimelineComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -718,11 +718,24 @@ class ChartContractValidationService {
         }
     }
     validateTheme(document, issues) {
-        if (document.theme?.palette && typeof document.theme.palette === 'string') {
-            if (!isPraxisChartPaletteToken(document.theme.palette)) {
-                issues.push(this.error('palette-token-unknown', 'theme.palette', `x-ui.chart theme.palette token "${document.theme.palette}" is not registered in @praxisui/charts.`));
+        const palette = document.theme?.palette;
+        if (palette === undefined)
+            return;
+        if (Array.isArray(palette)) {
+            palette.forEach((color, index) => {
+                if (typeof color !== 'string' || !color.trim()) {
+                    issues.push(this.error('palette-color-invalid', `theme.palette[${index}]`, `x-ui.chart theme.palette[${index}] must be a non-empty CSS color string.`));
+                }
+            });
+        }
+        else if (typeof palette === 'string') {
+            if (!isPraxisChartPaletteToken(palette)) {
+                issues.push(this.error('palette-token-unknown', 'theme.palette', `x-ui.chart theme.palette token "${palette}" is not registered in @praxisui/charts.`));
             }
         }
+        else {
+            issues.push(this.error('palette-invalid', 'theme.palette', 'x-ui.chart theme.palette must be a registered palette token or an array of CSS color strings.'));
+        }
     }
     validateMetrics(document, issues) {
         if (!document.metrics?.length) {
@@ -2431,6 +2444,7 @@ class PraxisChartComponent {
     shellObserver = signal(null, ...(ngDevMode ? [{ debugName: "shellObserver" }] : /* istanbul ignore next */ []));
     themeObserver = signal(null, ...(ngDevMode ? [{ debugName: "themeObserver" }] : /* istanbul ignore next */ []));
     inheritedTheme = signal(null, ...(ngDevMode ? [{ debugName: "inheritedTheme" }] : /* istanbul ignore next */ []));
+    hostThemeRevision = signal(0, ...(ngDevMode ? [{ debugName: "hostThemeRevision" }] : /* istanbul ignore next */ []));
     inheritedHostTextColor = signal(undefined, ...(ngDevMode ? [{ debugName: "inheritedHostTextColor" }] : /* istanbul ignore next */ []));
     currentLoadState = signal('idle', ...(ngDevMode ? [{ debugName: "currentLoadState" }] : /* istanbul ignore next */ []));
     remoteResolvedData = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedData" }] : /* istanbul ignore next */ []));
@@ -2877,6 +2891,7 @@ class PraxisChartComponent {
         });
         effect(() => {
             this.renderAttempt();
+            this.hostThemeRevision();
             if (this.loadState() !== 'ready') {
                 this.cancelScheduledRender();
                 this.cancelScheduledResize();
@@ -3477,6 +3492,9 @@ class PraxisChartComponent {
         this.themeObserver()?.disconnect();
         const observer = new MutationObserver(() => {
             this.syncInheritedTheme(host);
+            // Token-only changes can leave the inherited theme document unchanged.
+            // The adapter must still resolve authored CSS colors against the new host.
+            this.hostThemeRevision.update((revision) => revision + 1);
         });
         let current = host;
         while (current) {
@@ -5744,6 +5762,173 @@ function stringifyValue(value) {
     return value === null || value === undefined ? undefined : String(value);
 }
 
+const FALLBACK_PALETTE = ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'];
+const GAUGE_TONE_COLORS = {
+    success: ['var(--praxis-success, var(--ready, #1b7a43))', '#1b7a43'],
+    warning: ['var(--praxis-warning, var(--warning, #d97706))', '#d97706'],
+    danger: ['var(--destructive, var(--md-sys-color-error, #c62828))', '#c62828'],
+    critical: ['var(--destructive, var(--md-sys-color-error, #b91c1c))', '#b91c1c'],
+    info: ['var(--praxis-info, var(--category-sky, var(--md-sys-color-primary, #0a6eb4)))', '#0a6eb4'],
+    neutral: ['var(--muted-foreground, var(--md-sys-color-on-surface-variant, #64748b))', '#64748b'],
+};
+let probeSequence = 0;
+/** Resolve only canonical color fields; never traverse source rows or raw engine options. */
+function materializeHostColors(host, config) {
+    const document = host.ownerDocument;
+    const view = document?.defaultView;
+    const probe = view ? document.createElement('span') : undefined;
+    const property = `--praxis-chart-engine-color-${++probeSequence}`;
+    const cache = new Map();
+    let context;
+    if (probe) {
+        probe.style.cssText = 'display:none;pointer-events:none';
+        host.appendChild(probe);
+    }
+    const resolve = (value, fallback) => {
+        if (value === undefined)
+            return undefined;
+        // Runtime config may originate from persisted JSON rather than typed TS.
+        if (typeof value !== 'string')
+            return fallback;
+        if (cache.has(value))
+            return cache.get(value) ?? fallback;
+        let color;
+        const candidate = value.trim();
+        if (probe && view) {
+            // The browser expands nested var() fallbacks and rejects cycles. A private,
+            // per-render property prevents invalid substitutions from inheriting color.
+            probe.style.removeProperty(property);
+            probe.style.setProperty(property, candidate, 'important');
+            const expanded = probe.style.getPropertyValue(property).trim()
+                ? view.getComputedStyle(probe).getPropertyValue(property).trim()
+                : '';
+            probe.style.removeProperty('color');
+            // Host rules targeting spans must not replace the value being measured.
+            probe.style.setProperty('color', expanded, 'important');
+            if (probe.style.color) {
+                color = isEngineColor(candidate) ? value : view.getComputedStyle(probe).color;
+            }
+        }
+        else if (isEngineColor(candidate)) {
+            color = value;
+        }
+        if (color && !isEngineColor(color)) {
+            try {
+                if (context === undefined) {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = canvas.height = 1;
+                    context = canvas.getContext('2d', { willReadFrequently: true });
+                }
+                if (context) {
+                    // ECharts' color parser does not understand OKLCH, color() or modern
+                    // color-mix(). Canvas supplies their browser-defined sRGB projection.
+                    context.fillStyle = '#010203';
+                    context.fillStyle = color;
+                    const first = context.fillStyle;
+                    context.fillStyle = '#040506';
+                    context.fillStyle = color;
+                    if (context.fillStyle !== first) {
+                        color = undefined;
+                    }
+                    else {
+                        context.clearRect(0, 0, 1, 1);
+                        context.fillRect(0, 0, 1, 1);
+                        const [r, g, b, alpha] = context.getImageData(0, 0, 1, 1).data;
+                        color = `rgba(${r}, ${g}, ${b}, ${alpha / 255})`;
+                    }
+                }
+                else {
+                    color = undefined;
+                }
+            }
+            catch {
+                color = undefined;
+            }
+        }
+        cache.set(value, color);
+        return color ?? fallback;
+    };
+    try {
+        const rawPalette = config.theme?.palette;
+        const palette = Array.isArray(rawPalette)
+            ? rawPalette.map((color, index) => {
+                const fallback = FALLBACK_PALETTE[index % FALLBACK_PALETTE.length];
+                return resolve(color, fallback) ?? fallback;
+            })
+            : undefined;
+        const seriesPalette = palette?.length ? palette : FALLBACK_PALETTE;
+        const hostText = view ? resolve(view.getComputedStyle(host).color, '#4b5563') : '#4b5563';
+        const resolvedConfig = {
+            ...config,
+            ...(config.theme ? { theme: {
+                    ...config.theme,
+                    palette,
+                    backgroundColor: resolve(config.theme.backgroundColor, 'transparent'),
+                    textColor: resolve(config.theme.textColor, hostText),
+                    ...(config.theme.surface ? { surface: {
+                            ...config.theme.surface,
+                            background: resolve(config.theme.surface.background, 'transparent'),
+                            borderColor: resolve(config.theme.surface.borderColor, hostText),
+                        } } : {}),
+                } } : {}),
+            series: config.series.map((series, index) => ({
+                ...series,
+                color: resolve(series.color, seriesPalette[index % seriesPalette.length]),
+            })),
+            ...(config.gauge ? { gauge: {
+                    ...config.gauge,
+                    colorBands: config.gauge.colorBands?.map((band) => {
+                        const tone = band.tone ? GAUGE_TONE_COLORS[band.tone] : undefined;
+                        const toneColor = tone ? resolve(tone[0], tone[1]) : undefined;
+                        return { ...band, color: band.color === undefined ? toneColor : resolve(band.color, toneColor) };
+                    }),
+                } } : {}),
+        };
+        return {
+            config: resolvedConfig,
+            tooltip: {
+                backgroundColor: resolve('var(--popover, var(--card, var(--md-sys-color-surface-container, #fff)))', '#fff'),
+                textColor: resolve('var(--popover-foreground, var(--foreground, var(--md-sys-color-on-surface, #1f2937)))', '#1f2937'),
+                borderColor: resolve('var(--border, var(--md-sys-color-outline-variant, #d1d5db))', '#d1d5db'),
+            },
+        };
+    }
+    finally {
+        probe?.remove();
+    }
+}
+/** Apply host chrome only to tooltips the compiler enabled, preserving all callbacks. */
+function materializeTooltipColors(option, colors) {
+    const apply = (tooltip) => {
+        const entries = Array.isArray(tooltip) ? tooltip : [tooltip];
+        const resolved = entries.map((entry) => ({
+            ...entry,
+            backgroundColor: colors.backgroundColor,
+            borderColor: colors.borderColor,
+            textStyle: { ...entry.textStyle, color: colors.textColor },
+        }));
+        return Array.isArray(tooltip) ? resolved : resolved[0];
+    };
+    const applyUnit = (unit) => ({
+        ...unit,
+        ...(unit.tooltip ? { tooltip: apply(unit.tooltip) } : {}),
+    });
+    return {
+        ...option,
+        ...(option.tooltip ? { tooltip: apply(option.tooltip) } : {}),
+        ...(option.baseOption ? { baseOption: applyUnit(option.baseOption) } : {}),
+        ...(option.media ? { media: option.media.map((entry) => ({
+                ...entry,
+                ...(entry.option ? { option: applyUnit(entry.option) } : {}),
+            })) } : {}),
+    };
+}
+/** Ask the renderer's own parser rather than maintaining a parallel CSS dialect. */
+function isEngineColor(value) {
+    const channels = color.parse(value);
+    return Boolean(channels?.length === 4 && channels.every(Number.isFinite));
+}
+
 const PRAXIS_CHART_DEFAULT_PALETTE = ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'];
 const TITLE_TOP = 18;
 const TITLE_LEFT = 24;
@@ -6730,7 +6915,8 @@ class EChartsEngineAdapter {
             this.chart = this.createChart(host);
             this.currentHost = host;
         }
-        const option = this.optionBuilder.build(payload.config, payload.data);
+        const appearance = materializeHostColors(host, payload.config);
+        const option = materializeTooltipColors(this.optionBuilder.build(appearance.config, payload.data), appearance.tooltip);
         const chart = this.chart;
         chart.setOption(option, true);
         this.detachHandlers();
@@ -9130,8 +9316,7 @@ class PraxisChartConfigEditor {
         }));
     }
     setPalette(value) {
-        const palette = value
-            .split(/[\n,]/)
+        const palette = this.splitPaletteColors(value)
             .map((item) => item.trim())
             .filter(Boolean);
         this.patchDocument((document) => ({
@@ -9784,6 +9969,24 @@ class PraxisChartConfigEditor {
         this.currentDocument.set(updater(structuredClone(this.currentDocument())));
         this.refreshState(true);
     }
+    splitPaletteColors(value) {
+        const colors = [];
+        let depth = 0;
+        let start = 0;
+        for (let index = 0; index < value.length; index += 1) {
+            const character = value[index];
+            if (character === '(')
+                depth += 1;
+            if (character === ')')
+                depth = Math.max(0, depth - 1);
+            if (depth === 0 && (character === ',' || character === '\n')) {
+                colors.push(value.slice(start, index));
+                start = index + 1;
+            }
+        }
+        colors.push(value.slice(start));
+        return colors;
+    }
     refreshState(markDirty) {
         this.isDirty$.next(markDirty);
         this.isValid$.next(this.validation().valid);
@@ -12758,7 +12961,7 @@ class PraxisChartCompositionShowcaseComponent {
         </article>
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton"], outputs: ["pageChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton"], outputs: ["pageChange", "persistenceChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
             type: Component,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "10.0.0-rc.7",
+  "version": "10.0.0-rc.9",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^10.0.0-rc.7",
+    "@praxisui/core": "^10.0.0-rc.9",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^10.0.0-rc.7",
+    "@praxisui/table": "^10.0.0-rc.9",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -652,6 +652,7 @@ declare class PraxisChartComponent implements WidgetShellActionContributor {
     private readonly shellObserver;
     private readonly themeObserver;
     private readonly inheritedTheme;
+    private readonly hostThemeRevision;
     private readonly inheritedHostTextColor;
     private readonly currentLoadState;
     private readonly remoteResolvedData;
@@ -1647,6 +1648,7 @@ declare class PraxisChartConfigEditor implements SettingsValueProvider {
     private createApplyPayload;
     private createSavePayload;
     private patchDocument;
+    private splitPaletteColors;
     private refreshState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisChartConfigEditor, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisChartConfigEditor, "praxis-chart-config-editor", never, { "documentInput": { "alias": "document"; "required": false; "isSignal": true; }; "modeInput": { "alias": "mode"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonly"; "required": false; "isSignal": true; }; "availableResourcesInput": { "alias": "availableResources"; "required": false; "isSignal": true; }; "availableFieldsInput": { "alias": "availableFields"; "required": false; "isSignal": true; }; "availableTargetsInput": { "alias": "availableTargets"; "required": false; "isSignal": true; }; }, { "apply": "apply"; "save": "save"; "resetChange": "resetChange"; "documentChange": "documentChange"; }, never, never, true, never>;