@praxisui/charts 9.0.61 → 9.0.63

package/README.md

@@ -155,6 +155,8 @@ The public contract is `PraxisChartConfig` or the canonical `PraxisXUiChartContr
 
 The structured alternative is automatic. It does not add an accessibility field to `PraxisChartConfig` or `x-ui.chart`, and custom engines remain responsible for an accessible visual rendering while the component-level data alternative remains renderer-neutral.
 
+Standalone charts render that toggle inside the component. When the chart is loaded by `WidgetShell`, it contributes the same stateful action to the shell toolbar and suppresses the duplicate internal control. The visual canvas becomes hidden and inert while the opaque structured-data surface is active, so the two representations never compete visually or interactively.
+
 Supported canonical kinds are `bar`, `horizontal-bar`, `line`, `area`, `stacked-bar`,
 `stacked-area`, `combo`, `pie`, `donut`, `scatter`, `funnel`, `pyramid`, `treemap`, and `gauge`. Funnel,
 pyramid, and treemap require one categorical dimension and exactly one non-negative metric. Funnel
@@ -190,9 +192,12 @@ requests.
 
 Choice precedence is temporary user choice, persisted `preferredFamily`, then projection hints.
 `availableFamilies` must already reflect host policy/capabilities; the runtime intersects it with
-installed and semantically eligible renderers. Incompatible preferences fail closed. This first
-cut may execute the same canonical query again when switching renderer, and stale table responses
-are ignored. KPI and summary-list remain unavailable until they have canonical remote renderers.
+installed and semantically eligible renderers. Incompatible preferences fail closed. Switching
+renderer may execute the same canonical query again; when projection, family or `queryContext`
+changes, the component unsubscribes the previous Table/KPI request so the HTTP transport is
+aborted instead of merely ignoring a stale result. KPI is eligible for canonical `group-by`
+projections with exactly one primary metric. Summary-list remains unavailable until it has a
+canonical remote renderer.
 
 ## Canonical Chart Documents
 

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-05T03:48:57.914Z",
+  "generatedAt": "2026-09-05T19:46:18.619Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "9.0.61",
+  "packageVersion": "9.0.63",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 3,

package/fesm2022/praxisui-charts.mjs

@@ -12,7 +12,7 @@ import { catchError } from 'rxjs/operators';
 import { AnalyticsTableConfigAdapterService, AnalyticsTableStatsApiService, ANALYTICS_TABLE_ROW_KEY_FIELD, PraxisTable } from '@praxisui/table';
 import { use, init } from 'echarts/core';
 import { BarChart, FunnelChart, GaugeChart, LineChart, PieChart, ScatterChart, TreemapChart } from 'echarts/charts';
-import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
+import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TimelineComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -878,7 +878,10 @@ class ChartContractValidationService {
             return;
         }
         if (!document.dimensions?.length) {
-            issues.push(this.error('gauge-missing-dimension', 'dimensions', 'x-ui.chart gauge charts require at least one dimension.'));
+            issues.push(this.error('gauge-missing-dimension', 'dimensions', 'x-ui.chart gauge charts require one dimension.'));
+        }
+        else if (document.dimensions.length !== 1) {
+            issues.push(this.error('gauge-single-dimension', 'dimensions', 'x-ui.chart gauge charts require exactly one dimension.'));
         }
         if ((document.metrics?.length ?? 0) !== 1) {
             issues.push(this.error('gauge-single-metric', 'metrics', 'x-ui.chart gauge charts require exactly one metric.'));
@@ -1917,6 +1920,7 @@ class PraxisChartComponent {
     activeSelectionSignature = signal(null, ...(ngDevMode ? [{ debugName: "activeSelectionSignature" }] : /* istanbul ignore next */ []));
     configEditorContextPending = signal(false, ...(ngDevMode ? [{ debugName: "configEditorContextPending" }] : /* istanbul ignore next */ []));
     showAccessibleData = signal(false, ...(ngDevMode ? [{ debugName: "showAccessibleData" }] : /* istanbul ignore next */ []));
+    widgetShellActionHostActive = signal(false, ...(ngDevMode ? [{ debugName: "widgetShellActionHostActive" }] : /* istanbul ignore next */ []));
     accessibilityPanelId = `praxis-chart-data-${++chartAccessibilityPanelSequence}`;
     accessibilityPanelTitleId = `${this.accessibilityPanelId}-title`;
     fillContainerHeight = signal(false, ...(ngDevMode ? [{ debugName: "fillContainerHeight" }] : /* istanbul ignore next */ []));
@@ -1982,6 +1986,21 @@ class PraxisChartComponent {
         const sizing = this.effectiveConfig().sizing;
         return this.toCssSize(sizing?.minHeight) ?? (this.isFillContainerMode() ? '0' : null);
     }, ...(ngDevMode ? [{ debugName: "resolvedMinHeight" }] : /* istanbul ignore next */ []));
+    resolvedHostMinHeight = computed(() => {
+        const sizing = this.effectiveConfig().sizing;
+        const configuredMinHeight = this.toCssSize(sizing?.minHeight);
+        if (configuredMinHeight) {
+            return configuredMinHeight;
+        }
+        const mode = sizing?.mode ?? (sizing?.height !== undefined ? 'fixed' : undefined);
+        if (mode === 'fixed' || mode === 'fill-container' || mode === 'auto') {
+            return '0';
+        }
+        if (this.effectiveConfig().height !== undefined) {
+            return '0';
+        }
+        return 'var(--praxis-chart-runtime-height, 320px)';
+    }, ...(ngDevMode ? [{ debugName: "resolvedHostMinHeight" }] : /* istanbul ignore next */ []));
     resolvedMaxHeight = computed(() => this.toCssSize(this.effectiveConfig().sizing?.maxHeight) ?? null, ...(ngDevMode ? [{ debugName: "resolvedMaxHeight" }] : /* istanbul ignore next */ []));
     resolvedAspectRatio = computed(() => this.toCssAspectRatio(this.effectiveConfig().sizing?.aspectRatio), ...(ngDevMode ? [{ debugName: "resolvedAspectRatio" }] : /* istanbul ignore next */ []));
     isFillContainerMode = computed(() => {
@@ -1993,6 +2012,16 @@ class PraxisChartComponent {
     surfaceBorderWidth = computed(() => this.toCssSize(this.effectiveConfig().theme?.surface?.borderWidth) ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderWidth" }] : /* istanbul ignore next */ []));
     surfaceBorderRadius = computed(() => this.toCssSize(this.effectiveConfig().theme?.surface?.borderRadius) ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderRadius" }] : /* istanbul ignore next */ []));
     surfaceTextColor = computed(() => this.effectiveConfig().theme?.textColor ?? null, ...(ngDevMode ? [{ debugName: "surfaceTextColor" }] : /* istanbul ignore next */ []));
+    accessibleDataSurfaceBackground = computed(() => {
+        const background = this.surfaceBackground()?.trim();
+        if (!background ||
+            background.toLowerCase() === 'transparent' ||
+            background.replace(/\s/g, '') === 'rgba(0,0,0,0)' ||
+            background.toLowerCase() === '#00000000') {
+            return 'var(--md-sys-color-surface-container-lowest, #fff)';
+        }
+        return background;
+    }, ...(ngDevMode ? [{ debugName: "accessibleDataSurfaceBackground" }] : /* istanbul ignore next */ []));
     renderConfig = computed(() => {
         const config = this.effectiveConfig();
         const explicitData = this.data();
@@ -2081,6 +2110,26 @@ class PraxisChartComponent {
     accessibleCategoryHeading = computed(() => this.t('praxis.charts.runtime.accessibility.category', 'Category'), ...(ngDevMode ? [{ debugName: "accessibleCategoryHeading" }] : /* istanbul ignore next */ []));
     accessibleSeriesHeading = computed(() => this.t('praxis.charts.runtime.accessibility.series', 'Series'), ...(ngDevMode ? [{ debugName: "accessibleSeriesHeading" }] : /* istanbul ignore next */ []));
     accessibleValueHeading = computed(() => this.t('praxis.charts.runtime.accessibility.value', 'Value'), ...(ngDevMode ? [{ debugName: "accessibleValueHeading" }] : /* istanbul ignore next */ []));
+    widgetShellActions = computed(() => {
+        if (this.loadState() !== 'ready' || !this.accessiblePoints().length) {
+            return [];
+        }
+        const dataVisible = this.showAccessibleData();
+        const label = this.accessibleDataToggleLabel();
+        return [{
+                id: 'chart-data-view',
+                label,
+                tooltip: label,
+                icon: 'table_view',
+                pressedIcon: 'bar_chart',
+                variant: 'icon',
+                placement: 'header',
+                command: 'praxis-chart:toggle-data-view',
+                pressed: dataVisible,
+                ariaControls: this.accessibilityPanelId,
+                ariaExpanded: dataVisible,
+            }];
+    }, ...(ngDevMode ? [{ debugName: "widgetShellActions" }] : /* istanbul ignore next */ []));
     loadState = computed(() => {
         if (this.chartDocumentMappingError()) {
             return 'error';
@@ -2492,6 +2541,15 @@ class PraxisChartComponent {
     toggleAccessibleData() {
         this.showAccessibleData.update((visible) => !visible);
     }
+    setWidgetShellActionHostActive(active) {
+        this.widgetShellActionHostActive.set(active);
+    }
+    handleShellAction(action) {
+        if (action.command === 'praxis-chart:toggle-data-view' ||
+            action.id === 'chart-data-view') {
+            this.toggleAccessibleData();
+        }
+    }
     activateAccessiblePoint(point) {
         this.handlePointClick({
             chartId: point.chartId,
@@ -2857,7 +2915,7 @@ class PraxisChartComponent {
         this.resizeFrameId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved", chartDocumentPatchChange: "chartDocumentPatchChange" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved", chartDocumentPatchChange: "chartDocumentPatchChange" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()", "style.height": "resolvedHeight()", "style.min-height": "resolvedHostMinHeight()", "style.max-height": "resolvedMaxHeight()", "style.aspect-ratio": "resolvedAspectRatio()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section
       class="praxis-chart-shell"
       [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
@@ -2889,7 +2947,11 @@ class PraxisChartComponent {
         ></button>
       }
 
-      @if (loadState() === 'ready' && accessiblePoints().length) {
+      @if (
+        loadState() === 'ready' &&
+        accessiblePoints().length &&
+        !widgetShellActionHostActive()
+      ) {
         <button
           class="praxis-chart-data-trigger"
           [class.praxis-chart-data-trigger-with-settings]="canOpenConfigEditor()"
@@ -2963,6 +3025,8 @@ class PraxisChartComponent {
         @if (showAccessibleData()) {
           <section
             class="praxis-chart-accessible-data"
+            [class.praxis-chart-accessible-data--shell-controlled]="widgetShellActionHostActive()"
+            [style.background]="accessibleDataSurfaceBackground()"
             [id]="accessibilityPanelId"
             role="region"
             [attr.aria-labelledby]="accessibilityPanelTitleId"
@@ -3002,16 +3066,21 @@ class PraxisChartComponent {
         <div
           #chartHost
           class="praxis-chart-host"
+          [class.praxis-chart-host--data-hidden]="showAccessibleData()"
           [attr.aria-hidden]="showAccessibleData() ? 'true' : null"
         ></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) )}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:inherit}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.16em;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{box-sizing:border-box;position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:inherit}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.16em;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-chart', standalone: true, host: {
                         '[class.praxis-chart-host-fill-container]': 'isFillContainerMode()',
+                        '[style.height]': 'resolvedHeight()',
+                        '[style.min-height]': 'resolvedHostMinHeight()',
+                        '[style.max-height]': 'resolvedMaxHeight()',
+                        '[style.aspect-ratio]': 'resolvedAspectRatio()',
                     }, imports: [MatTooltipModule, PraxisIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <section
       class="praxis-chart-shell"
@@ -3044,7 +3113,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></button>
       }
 
-      @if (loadState() === 'ready' && accessiblePoints().length) {
+      @if (
+        loadState() === 'ready' &&
+        accessiblePoints().length &&
+        !widgetShellActionHostActive()
+      ) {
         <button
           class="praxis-chart-data-trigger"
           [class.praxis-chart-data-trigger-with-settings]="canOpenConfigEditor()"
@@ -3118,6 +3191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         @if (showAccessibleData()) {
           <section
             class="praxis-chart-accessible-data"
+            [class.praxis-chart-accessible-data--shell-controlled]="widgetShellActionHostActive()"
+            [style.background]="accessibleDataSurfaceBackground()"
             [id]="accessibilityPanelId"
             role="region"
             [attr.aria-labelledby]="accessibilityPanelTitleId"
@@ -3157,11 +3232,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <div
           #chartHost
           class="praxis-chart-host"
+          [class.praxis-chart-host--data-hidden]="showAccessibleData()"
           [attr.aria-hidden]="showAccessibleData() ? 'true' : null"
         ></div>
       }
     </section>
-  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) )}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:inherit}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.16em;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{box-sizing:border-box;position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:inherit}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.16em;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartDocumentPatchChange: [{ type: i0.Output, args: ["chartDocumentPatchChange"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
@@ -4651,7 +4727,9 @@ class PraxisAnalyticsPresentationComponent {
             const resolved = this.resolved();
             const queryContext = this.queryContext();
             const generation = ++this.resultRequestGeneration;
+            let resultSubscription;
             onCleanup(() => {
+                resultSubscription?.unsubscribe();
                 if (this.resultRequestGeneration === generation) {
                     this.resultRequestGeneration += 1;
                 }
@@ -4663,17 +4741,20 @@ class PraxisAnalyticsPresentationComponent {
                 return;
             }
             this.resultState.set('loading');
-            void this.tableStats.execute(resolved.projection, queryContext).then((rows) => {
-                if (this.resultRequestGeneration !== generation)
-                    return;
-                this.resultRows.set(rows);
-                this.resultState.set('ready');
-            }, () => {
-                if (this.resultRequestGeneration !== generation)
-                    return;
-                this.resultRows.set([]);
-                this.resultState.set('error');
-                this.resultDiagnostic.set(this.t('praxis.charts.analyticsPresentation.loadError', 'Analytics data could not be loaded.'));
+            resultSubscription = this.tableStats.execute(resolved.projection, queryContext).subscribe({
+                next: (rows) => {
+                    if (this.resultRequestGeneration !== generation)
+                        return;
+                    this.resultRows.set(rows);
+                    this.resultState.set('ready');
+                },
+                error: () => {
+                    if (this.resultRequestGeneration !== generation)
+                        return;
+                    this.resultRows.set([]);
+                    this.resultState.set('error');
+                    this.resultDiagnostic.set(this.t('praxis.charts.analyticsPresentation.loadError', 'Analytics data could not be loaded.'));
+                },
             });
         });
     }
@@ -4908,12 +4989,17 @@ class EChartsOptionBuilderService {
         if (transformed.mode === 'pie') {
             const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
             const labelsVisible = config.series[0]?.labels?.visible ?? transformed.slices.length <= 4;
+            const titledRadius = config.type === 'donut'
+                ? labelsVisible ? ['32%', '52%'] : ['38%', '56%']
+                : labelsVisible ? '52%' : '56%';
             const pieSeries = {
                 type: 'pie',
-                radius: config.type === 'donut'
-                    ? labelsVisible ? ['32%', '52%'] : ['42%', '64%']
-                    : labelsVisible ? '54%' : '66%',
-                center: ['50%', hasChartTitle ? '54%' : '50%'],
+                radius: hasChartTitle
+                    ? titledRadius
+                    : config.type === 'donut'
+                        ? labelsVisible ? ['32%', '52%'] : ['42%', '64%']
+                        : labelsVisible ? '54%' : '66%',
+                center: ['50%', hasChartTitle ? '58%' : '50%'],
                 avoidLabelOverlap: true,
                 label: {
                     show: labelsVisible,
@@ -5696,6 +5782,7 @@ use([
     LineChart,
     PieChart,
     ScatterChart,
+    TimelineComponent,
     TitleComponent,
     TooltipComponent,
     TransformComponent,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "9.0.61",
+  "version": "9.0.63",
   "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": "^9.0.61",
+    "@praxisui/core": "^9.0.63",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^9.0.61",
+    "@praxisui/table": "^9.0.63",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -2,7 +2,7 @@ import * as _praxisui_charts from '@praxisui/charts';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Provider, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import * as _praxisui_core from '@praxisui/core';
-import { PraxisAnalyticsComparisonStatsRequest, PraxisDataQueryContext, PraxisTextValue, PraxisPresentationVisualizationConfig, PraxisPresentationVisualizationPoint, PraxisPresentationVisualizationSegment, PraxisPresentationVisualizationThreshold, AnalyticsPresentationFamily, PraxisXUiAnalytics, PraxisAnalyticsProjection, WidgetDefinition, WidgetShellConfig, WidgetInstance, PraxisI18nService, ApiUrlConfig, AnalyticsSchemaContractService, AnalyticsPresentationResolver, WidgetPageDefinition, SettingsValueProvider, ComponentConfigEditorContextResult, ResourceCapabilitySnapshot, PraxisI18nDictionary, PraxisI18nConfig, PraxisI18nMessageDescriptor, ComponentAuthoringManifest, ComponentDocMeta } from '@praxisui/core';
+import { PraxisAnalyticsComparisonStatsRequest, PraxisDataQueryContext, PraxisTextValue, WidgetShellActionContributor, WidgetShellAction, WidgetShellActionEvent, PraxisPresentationVisualizationConfig, PraxisPresentationVisualizationPoint, PraxisPresentationVisualizationSegment, PraxisPresentationVisualizationThreshold, AnalyticsPresentationFamily, PraxisXUiAnalytics, PraxisAnalyticsProjection, WidgetDefinition, WidgetShellConfig, WidgetInstance, PraxisI18nService, ApiUrlConfig, AnalyticsSchemaContractService, AnalyticsPresentationResolver, WidgetPageDefinition, SettingsValueProvider, ComponentConfigEditorContextResult, ResourceCapabilitySnapshot, PraxisI18nDictionary, PraxisI18nConfig, PraxisI18nMessageDescriptor, ComponentAuthoringManifest, ComponentDocMeta } from '@praxisui/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { AnalyticsTableRow } from '@praxisui/table';
 import { HttpClient } from '@angular/common/http';
@@ -558,7 +558,7 @@ interface PraxisChartAccessiblePoint extends PraxisChartPointEvent {
     seriesLabel: string;
     valueLabel: string;
 }
-declare class PraxisChartComponent {
+declare class PraxisChartComponent implements WidgetShellActionContributor {
     readonly config: _angular_core.InputSignal<PraxisChartConfig>;
     readonly data: _angular_core.InputSignal<PraxisChartDataRow[] | null>;
     readonly chartDocument: _angular_core.InputSignal<PraxisXUiChartContract | null>;
@@ -606,6 +606,7 @@ declare class PraxisChartComponent {
     private readonly activeSelectionSignature;
     protected readonly configEditorContextPending: _angular_core.WritableSignal<boolean>;
     readonly showAccessibleData: _angular_core.WritableSignal<boolean>;
+    readonly widgetShellActionHostActive: _angular_core.WritableSignal<boolean>;
     readonly accessibilityPanelId: string;
     readonly accessibilityPanelTitleId: string;
     private readonly fillContainerHeight;
@@ -625,6 +626,7 @@ declare class PraxisChartComponent {
     readonly resolvedData: _angular_core.Signal<PraxisChartDataRow[]>;
     readonly resolvedHeight: _angular_core.Signal<string>;
     readonly resolvedMinHeight: _angular_core.Signal<string | null>;
+    readonly resolvedHostMinHeight: _angular_core.Signal<string>;
     readonly resolvedMaxHeight: _angular_core.Signal<string | null>;
     readonly resolvedAspectRatio: _angular_core.Signal<string | null>;
     readonly isFillContainerMode: _angular_core.Signal<boolean>;
@@ -634,6 +636,7 @@ declare class PraxisChartComponent {
     readonly surfaceBorderWidth: _angular_core.Signal<string | null>;
     readonly surfaceBorderRadius: _angular_core.Signal<string | null>;
     readonly surfaceTextColor: _angular_core.Signal<string | null>;
+    readonly accessibleDataSurfaceBackground: _angular_core.Signal<string>;
     readonly renderConfig: _angular_core.Signal<PraxisChartConfig>;
     readonly loadingLabel: _angular_core.Signal<string>;
     readonly loadingDescription: _angular_core.Signal<string>;
@@ -651,6 +654,7 @@ declare class PraxisChartComponent {
     readonly accessibleCategoryHeading: _angular_core.Signal<string>;
     readonly accessibleSeriesHeading: _angular_core.Signal<string>;
     readonly accessibleValueHeading: _angular_core.Signal<string>;
+    readonly widgetShellActions: _angular_core.Signal<readonly WidgetShellAction[]>;
     readonly loadState: _angular_core.Signal<PraxisChartLoadState>;
     constructor();
     private resolveDataDiagnosticDescription;
@@ -666,6 +670,8 @@ declare class PraxisChartComponent {
     private asRecord;
     private handlePointClick;
     toggleAccessibleData(): void;
+    setWidgetShellActionHostActive(active: boolean): void;
+    handleShellAction(action: WidgetShellActionEvent): void;
     activateAccessiblePoint(point: PraxisChartAccessiblePoint): void;
     accessiblePointPressed(point: PraxisChartAccessiblePoint): string | null;
     accessiblePointActionLabel(point: PraxisChartAccessiblePoint): string;