@aquera/nile-visualization 0.3.0 → 0.5.0

package/dist/src/nile-chart/nile-chart.js

@@ -19,8 +19,39 @@ import '../nile-spline-chart/index.js';
 import '../nile-radar-chart/index.js';
 import '../nile-gauge-chart/index.js';
 import '../nile-waterfall-chart/index.js';
+import '../nile-cluster-chart/index.js';
+import '../nile-stacked-chart/index.js';
+import '../nile-histogram-chart/index.js';
+import '../nile-bellcurve-chart/index.js';
+import '../nile-boxplot-chart/index.js';
+import '../nile-timeline-chart/index.js';
+import '../nile-dumbbell-chart/index.js';
+import '../nile-dumbbell-lower-chart/index.js';
+import '../nile-dumbbell-upper-chart/index.js';
+import '../nile-fan-chart/index.js';
+import '../nile-funnel-chart/index.js';
+import '../nile-organization-chart/index.js';
+import '../nile-line-column-chart/index.js';
+import '../nile-heatmap-chart/index.js';
+import '../nile-flame-chart/index.js';
+import '../nile-spiderweb-chart/index.js';
+import '../nile-column-pyramid-chart/index.js';
+import '../nile-lollipop-chart/index.js';
+import '../nile-inverted-area-chart/index.js';
+import '../nile-area-spline-chart/index.js';
+import '../nile-area-negative-chart/index.js';
+import '../nile-area-range-chart/index.js';
+import '../nile-column-range-chart/index.js';
+import '../nile-column-drilldown-chart/index.js';
+import '../nile-radial-bar-chart/index.js';
+import '../nile-variable-pie-chart/index.js';
+import '../nile-euler-chart/index.js';
+import '../nile-polygon-chart/index.js';
+import '../nile-vector-chart/index.js';
+import '../nile-xrange-chart/index.js';
+import '../nile-kpi-chart/index.js';
 import '../nile-ai-panel/index.js';
-const TYPE_LABELS = {
+const CORE_CHART_LABELS = {
     bar: 'Bar',
     pie: 'Pie',
     trendline: 'Trendline',
@@ -35,27 +66,60 @@ const TYPE_LABELS = {
     radar: 'Radar',
     gauge: 'Gauge',
     waterfall: 'Waterfall',
+    stacked: 'Stacked column',
+    cluster: 'Cluster',
+    histogram: 'Histogram',
+    bellcurve: 'Bell curve',
+    boxplot: 'Box plot',
+    timeline: 'Timeline',
+    dumbbell: 'Dumbbell',
+    fan: 'Fan',
+    funnel: 'Funnel',
+    organization: 'Organization',
+    heatmap: 'Heatmap',
+    flame: 'Flame',
+    spiderweb: 'Spiderweb',
+    euler: 'Euler / Venn',
+    polygon: 'Polygon',
+    vector: 'Vector',
+    xrange: 'X-range',
+    lollipop: 'Lollipop',
+    'line-column': 'Line + column',
+    kpi: 'KPI',
 };
+function chartTypeLabel(type) {
+    const hit = CORE_CHART_LABELS[type];
+    if (hit)
+        return hit;
+    return String(type)
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/-/g, ' ')
+        .replace(/\b\w/g, ch => ch.toUpperCase());
+}
 let NileChart = class NileChart extends NileElement {
     constructor() {
         super(...arguments);
         /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
         this.config = null;
-        /** The summary/insight text displayed in the overlay (fallback when config is not set). */
+        /**
+         * When set, fills `chart.type` if the config omits it (same values as `chart.type`, e.g. `stacked`, `pie`).
+         * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
+         */
+        this.chartTypeAttr = '';
+        /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
         this.summary = '';
-        /** Label for the toggle button (fallback when config is not set). */
-        this.toggleLabel = 'Summary';
-        /** Whether the insight overlay is visible. */
-        this.open = false;
         this.activeType = null;
         this.activeConfig = null;
         this.menuOpen = false;
         this.chatOpen = false;
+        /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
+        this.hasHeaderSlotContent = false;
+        /** True when elements are projected into `header-actions` (used to show the header row). */
+        this.hasHeaderActionsSlot = false;
         this.handleOutsideClick = (e) => {
             if (!this.contains(e.target)) {
-                this.open = false;
                 this.menuOpen = false;
-                this.emit('nile-chart-toggle', { open: this.open });
+                this.chatOpen = false;
             }
         };
         this.resolvedConfig = null;
@@ -63,11 +127,9 @@ let NileChart = class NileChart extends NileElement {
     get effectiveSummary() {
         return this.resolvedConfig?.summary ?? this.summary;
     }
-    get effectiveToggleLabel() {
-        return this.resolvedConfig?.toggleLabel ?? this.toggleLabel;
-    }
+    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
     get aiEnabled() {
-        return this.resolvedConfig?.ai?.enabled === true;
+        return this.resolvedConfig?.ai?.enabled === true || !!this.effectiveSummary;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -83,27 +145,29 @@ let NileChart = class NileChart extends NileElement {
         super.disconnectedCallback();
         document.removeEventListener('click', this.handleOutsideClick);
     }
+    mergeChartTypeFromAttr(chart) {
+        const t = this.chartTypeAttr?.trim();
+        if (t && chart.type == null) {
+            return { ...chart, type: t };
+        }
+        return chart;
+    }
     /** Resolve { chart, aq } input to flat NileChartConfig. */
     resolveConfig(input) {
         if ('chart' in input && input.chart) {
-            return nileChartConfig(input);
+            const raw = input;
+            const chart = this.mergeChartTypeFromAttr({ ...raw.chart });
+            return nileChartConfig({ ...raw, chart });
         }
-        return input;
+        return this.mergeChartTypeFromAttr({ ...input });
     }
     updated(changedProperties) {
-        if (changedProperties.has('config') && this.config) {
+        if ((changedProperties.has('config') || changedProperties.has('chartTypeAttr')) && this.config) {
             this.resolvedConfig = this.resolveConfig(this.config);
             this.activeType = this.resolvedConfig.type;
             this.activeConfig = this.resolvedConfig;
         }
     }
-    toggle(e) {
-        e.stopPropagation();
-        this.open = !this.open;
-        if (this.open)
-            this.chatOpen = false;
-        this.emit('nile-chart-toggle', { open: this.open });
-    }
     toggleMenu(e) {
         e.stopPropagation();
         this.menuOpen = !this.menuOpen;
@@ -111,8 +175,6 @@ let NileChart = class NileChart extends NileElement {
     toggleChat(e) {
         e.stopPropagation();
         this.chatOpen = !this.chatOpen;
-        if (this.chatOpen)
-            this.open = false;
         this.emit('nile-chart-ai-toggle', { open: this.chatOpen });
     }
     /** Push an AI response into the chat panel. Call this from your AI handler. */
@@ -148,6 +210,52 @@ let NileChart = class NileChart extends NileElement {
     get headerSubtitle() {
         return this.activeConfig?.chartSubtitle ?? this.resolvedConfig?.chartSubtitle ?? '';
     }
+    onHeaderSlotChange(e) {
+        const slot = e.target;
+        this.hasHeaderSlotContent = slot.assignedElements({ flatten: true }).length > 0;
+        this.requestUpdate();
+    }
+    onHeaderActionsSlotChange(e) {
+        const slot = e.target;
+        this.hasHeaderActionsSlot = slot.assignedElements({ flatten: true }).length > 0;
+        this.requestUpdate();
+    }
+    syncHeaderSlots() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const headerSlot = root.querySelector('slot[name="header"]');
+        const actionsSlot = root.querySelector('slot[name="header-actions"]');
+        let changed = false;
+        if (headerSlot) {
+            const next = headerSlot.assignedElements({ flatten: true }).length > 0;
+            if (next !== this.hasHeaderSlotContent) {
+                this.hasHeaderSlotContent = next;
+                changed = true;
+            }
+        }
+        if (actionsSlot) {
+            const next = actionsSlot.assignedElements({ flatten: true }).length > 0;
+            if (next !== this.hasHeaderActionsSlot) {
+                this.hasHeaderActionsSlot = next;
+                changed = true;
+            }
+        }
+        if (changed)
+            this.requestUpdate();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.syncHeaderSlots();
+    }
+    shouldShowHeader() {
+        const hasTitles = !!(this.headerTitle || this.headerSubtitle);
+        const hasBuiltinActions = this.aiEnabled || (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0;
+        return (hasTitles ||
+            this.hasHeaderSlotContent ||
+            this.hasHeaderActionsSlot ||
+            hasBuiltinActions);
+    }
     renderTypeSwitcher() {
         const types = this.resolvedConfig?.switchableTypes;
         if (!types || types.length === 0)
@@ -172,7 +280,7 @@ let NileChart = class NileChart extends NileElement {
                       role="menuitem"
                       @click=${() => this.switchType(type)}
                     >
-                      ${TYPE_LABELS[type] ?? type} Chart
+                      ${chartTypeLabel(type)} chart
                     </button>
                   `)}
               </div>
@@ -196,19 +304,24 @@ let NileChart = class NileChart extends NileElement {
     `;
     }
     renderHeader() {
+        if (!this.shouldShowHeader())
+            return nothing;
         const title = this.headerTitle;
         const subtitle = this.headerSubtitle;
-        const hasTypeSwitcher = (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0;
-        const hasActions = hasTypeSwitcher || this.aiEnabled;
-        if (!title && !subtitle && !hasActions)
-            return nothing;
+        const showDefaultTitles = !this.hasHeaderSlotContent && !!(title || subtitle);
         return html `
       <div class="chart-header">
         <div class="chart-header-titles">
-          ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
-          ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+          <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
+          ${showDefaultTitles
+            ? html `
+                ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
+                ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+              `
+            : nothing}
         </div>
         <div class="chart-header-actions">
+          <slot name="header-actions" @slotchange=${this.onHeaderActionsSlotChange}></slot>
           ${this.renderAiTrigger()}
           ${this.renderTypeSwitcher()}
         </div>
@@ -218,12 +331,19 @@ let NileChart = class NileChart extends NileElement {
     renderAiPanel() {
         if (!this.aiEnabled)
             return nothing;
-        const aiConfig = this.resolvedConfig.ai;
+        const aiConfig = this.resolvedConfig?.ai;
+        const summary = this.effectiveSummary;
+        // Summary always takes priority. When summary is present it is the only
+        // opening message (shown in blue). welcomeMessage is only used when there
+        // is no summary at all.
+        const summaryMessage = summary;
+        const welcomeMessage = summary ? '' : (aiConfig?.welcomeMessage ?? '');
         return html `
       <div class="ai-panel-overlay" ?data-open=${this.chatOpen}>
         <nile-ai-panel
-          .placeholder=${aiConfig.placeholder ?? 'Ask about this chart...'}
-          .welcomeMessage=${aiConfig.welcomeMessage ?? ''}
+          .placeholder=${aiConfig?.placeholder ?? 'Ask about this chart...'}
+          .welcomeMessage=${welcomeMessage}
+          .summaryMessage=${summaryMessage}
           @nile-ai-send=${this.handleAiSend}
         ></nile-ai-panel>
       </div>
@@ -308,6 +428,7 @@ let NileChart = class NileChart extends NileElement {
           .seriesName=${config.seriesName ?? ''}
           .height=${config.height ?? '400px'}
           .innerSize=${config.innerSize ?? '50%'}
+          .semiCircle=${config.semiCircle ?? false}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -368,6 +489,368 @@ let NileChart = class NileChart extends NileElement {
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-waterfall-chart>`;
+            case 'stacked':
+                return html `<nile-stacked-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .stackMode=${config.stackMode ?? 'normal'}
+          .showLegend=${config.showLegend ?? true}
+          .pointPadding=${config.pointPadding ?? 0.05}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-stacked-chart>`;
+            case 'cluster':
+                return html `<nile-cluster-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
+          .groupPadding=${config.groupPadding ?? 0.15}
+          .pointPadding=${config.pointPadding ?? 0.05}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-cluster-chart>`;
+            case 'histogram':
+                return html `<nile-histogram-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .histogramSeriesName=${config.histogramSeriesName ?? ''}
+          .sourceSeriesName=${config.sourceSeriesName ?? ''}
+          .histogramColor=${config.histogramColor ?? '#3b82f6'}
+          .binsNumber=${String(config.binsNumber ?? 'square-root')}
+          .binWidth=${config.binWidth ?? 0}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-histogram-chart>`;
+            case 'bellcurve':
+                return html `<nile-bellcurve-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .bellcurveSeriesName=${config.bellcurveSeriesName ?? ''}
+          .sourceSeriesName=${config.sourceSeriesName ?? ''}
+          .bellcurveColor=${config.bellcurveColor ?? '#6366f1'}
+          .bellcurveFill=${config.bellcurveFill ?? 'rgba(99, 102, 241, 0.2)'}
+          .intervals=${config.intervals ?? 3}
+          .pointsInInterval=${config.pointsInInterval ?? 40}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-bellcurve-chart>`;
+            case 'boxplot':
+                return html `<nile-boxplot-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-boxplot-chart>`;
+            case 'timeline':
+                return html `<nile-timeline-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .datetimeAxis=${config.datetimeAxis ?? false}
+          .inverted=${config.inverted ?? false}
+          .alternateLabels=${config.alternateLabels ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-timeline-chart>`;
+            case 'dumbbell':
+                return html `<nile-dumbbell-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .seriesName=${config.seriesName ?? ''}
+          .lowMarkerColor=${config.lowMarkerColor ?? ''}
+          .connectorColor=${config.connectorColor ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-dumbbell-chart>`;
+            case 'dumbbellLower':
+                return html `<nile-dumbbell-lower-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .seriesName=${config.seriesName ?? ''}
+          .lowMarkerColor=${config.lowMarkerColor ?? ''}
+          .connectorColor=${config.connectorColor ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-dumbbell-lower-chart>`;
+            case 'dumbbellUpper':
+                return html `<nile-dumbbell-upper-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .seriesName=${config.seriesName ?? ''}
+          .lowMarkerColor=${config.lowMarkerColor ?? ''}
+          .connectorColor=${config.connectorColor ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-dumbbell-upper-chart>`;
+            case 'fan':
+                return html `<nile-fan-chart
+          .lineData=${config.lineData}
+          .bands=${config.bands}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .lineSeriesName=${config.lineSeriesName ?? ''}
+          .lineColor=${config.lineColor ?? '#1d4ed8'}
+          .forecastStartIndex=${config.forecastStartIndex ?? -1}
+          .forecastBandLabel=${config.forecastBandLabel ?? ''}
+          .showLegend=${config.showLegend ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-fan-chart>`;
+            case 'funnel':
+                return html `<nile-funnel-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-funnel-chart>`;
+            case 'organization':
+                return html `<nile-organization-chart
+          .nodes=${config.nodes}
+          .links=${config.links}
+          .height=${config.height ?? '480px'}
+          .seriesName=${config.seriesName ?? ''}
+          .inverted=${config.inverted ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-organization-chart>`;
+            case 'line-column':
+                return html `<nile-line-column-chart
+          .categories=${config.categories}
+          .columnSeries=${config.columnSeries}
+          .lineSeries=${config.lineSeries}
+          .height=${config.height ?? '400px'}
+          .columnAxisTitle=${config.columnAxisTitle ?? ''}
+          .lineAxisTitle=${config.lineAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-line-column-chart>`;
+            case 'heatmap':
+                return html `<nile-heatmap-chart
+          .xCategories=${config.xCategories}
+          .yCategories=${config.yCategories}
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .colorMin=${config.colorMin ?? null}
+          .colorMax=${config.colorMax ?? null}
+          .minColor=${config.minColor ?? '#ffffff'}
+          .maxColor=${config.maxColor ?? '#1e40af'}
+          .colorAxisTitle=${config.colorAxisTitle ?? ''}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-heatmap-chart>`;
+            case 'flame':
+                return html `<nile-flame-chart
+          .layout=${config.layout ?? 'flame'}
+          .data=${config.data ?? []}
+          .sunburstData=${config.sunburstData ?? []}
+          .height=${config.height ?? '480px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-flame-chart>`;
+            case 'spiderweb':
+                return html `<nile-spiderweb-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .showArea=${config.showArea ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-spiderweb-chart>`;
+            case 'invertedArea':
+                return html `<nile-inverted-area-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .stacked=${config.stacked ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-inverted-area-chart>`;
+            case 'columnPyramid':
+                return html `<nile-column-pyramid-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-column-pyramid-chart>`;
+            case 'lollipop':
+                return html `<nile-lollipop-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-lollipop-chart>`;
+            case 'areaSpline':
+                return html `<nile-area-spline-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .stacked=${config.stacked ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-area-spline-chart>`;
+            case 'areaNegative':
+                return html `<nile-area-negative-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .threshold=${config.threshold ?? 0}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-area-negative-chart>`;
+            case 'areaRange':
+                return html `<nile-area-range-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-area-range-chart>`;
+            case 'columnRange':
+                return html `<nile-column-range-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-column-range-chart>`;
+            case 'columnDrilldown':
+                return html `<nile-column-drilldown-chart
+          .data=${config.data}
+          .drilldownSeries=${config.drilldownSeries}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-column-drilldown-chart>`;
+            case 'radialBar':
+                return html `<nile-radial-bar-chart
+          .data=${config.data}
+          .categories=${config.categories}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .innerSize=${config.innerSize ?? '28%'}
+          .paneSize=${config.paneSize ?? '82%'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-radial-bar-chart>`;
+            case 'variablePie':
+                return html `<nile-variable-pie-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-variable-pie-chart>`;
+            case 'euler':
+                return html `<nile-euler-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-euler-chart>`;
+            case 'polygon':
+                return html `<nile-polygon-chart
+          .series=${config.series}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-polygon-chart>`;
+            case 'vector':
+                return html `<nile-vector-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-vector-chart>`;
+            case 'xrange':
+                return html `<nile-xrange-chart
+          .data=${config.data}
+          .categories=${config.categories}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .datetimeAxis=${config.datetimeAxis ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-xrange-chart>`;
+            case 'kpi': {
+                const k = config;
+                return html `<nile-kpi-chart
+          .config=${{
+                    chart: {
+                        type: 'kpi',
+                        variant: k.variant,
+                        label: k.label,
+                        value: k.value,
+                        prefix: k.prefix,
+                        suffix: k.suffix,
+                        trendValue: k.trendValue,
+                        trendDirection: k.trendDirection,
+                        trendLabel: k.trendLabel,
+                        description: k.description,
+                        sparkline: k.sparkline,
+                        sparklineColor: k.sparklineColor,
+                        gaugeValue: k.gaugeValue,
+                        gaugeMin: k.gaugeMin,
+                        gaugeMax: k.gaugeMax,
+                        gaugeColor: k.gaugeColor,
+                        loading: k.loading,
+                        options: k.options,
+                        height: k.height,
+                    },
+                    aq: {
+                        chartSubtitle: k.chartSubtitle,
+                    },
+                }}
+        ></nile-kpi-chart>`;
+            }
+            default: {
+                const _exhaustive = config;
+                return _exhaustive;
+            }
         }
     }
     render() {
@@ -377,23 +860,10 @@ let NileChart = class NileChart extends NileElement {
         <div class="chart-wrapper">
           <div class="chart-inner">
             ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
-            <button
-              class="chart-toggle"
-              aria-expanded="${this.open}"
-              @click="${this.toggle}"
-            >
-              ${this.effectiveToggleLabel}
-            </button>
-            <div class="chart-overlay" ?data-open="${this.open}">
-              <div class="chart-content">
-                ${this.resolvedConfig
-            ? this.effectiveSummary
-            : html `<slot name="insight">${this.summary}</slot>`}
-              </div>
-            </div>
             ${this.renderAiPanel()}
           </div>
         </div>
+        <slot name="footer"></slot>
       </div>
     `;
     }
@@ -402,15 +872,12 @@ NileChart.styles = styles;
 __decorate([
     property({ type: Object })
 ], NileChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-type' })
+], NileChart.prototype, "chartTypeAttr", void 0);
 __decorate([
     property({ type: String })
 ], NileChart.prototype, "summary", void 0);
-__decorate([
-    property({ type: String, attribute: 'toggle-label' })
-], NileChart.prototype, "toggleLabel", void 0);
-__decorate([
-    state()
-], NileChart.prototype, "open", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "activeType", void 0);
@@ -423,6 +890,12 @@ __decorate([
 __decorate([
     state()
 ], NileChart.prototype, "chatOpen", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "hasHeaderSlotContent", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "hasHeaderActionsSlot", void 0);
 __decorate([
     query('nile-ai-panel')
 ], NileChart.prototype, "aiPanel", void 0);