@aquera/nile-visualization 1.7.0 → 1.9.0

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

@@ -2,9 +2,17 @@ import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
 import NileElement from '../internal/nile-element.js';
-import { styles } from './nile-chart.css.js';
+import { styles, tooltipCss } from './nile-chart.css.js';
 import { nileChartConfig } from './nile-chart-config-builder.js';
 import { convertConfig } from '../internal/chart-adapters.js';
+import { deepMerge } from '../internal/utils.js';
+import { initNileChartExporting, getHighcharts } from '../internal/highcharts-provider.js';
+// Start loading exporting/offline-exporting/export-data at module import time.
+// `chart.fullscreen` is attached via a `beforeRender` hook installed by the exporting module's
+// compose step, so if a chart is constructed before the module applies, that instance will have
+// no `fullscreen`. Kicking the load off here gives it a head start; handlers still await it
+// before invoking methods, and viewFullscreen falls back to the DOM Fullscreen API.
+initNileChartExporting();
 import '../nile-bar-chart/index.js';
 import '../nile-pie-chart/index.js';
 import '../nile-trendline-chart/index.js';
@@ -100,9 +108,20 @@ function chartTypeLabel(type) {
         .replace(/-/g, ' ')
         .replace(/\b\w/g, ch => ch.toUpperCase());
 }
+let _headerTooltipStylesInjected = false;
+function ensureHeaderTooltipStyles() {
+    if (_headerTooltipStylesInjected || typeof document === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.dataset['nilechart'] = '';
+    style.textContent = tooltipCss;
+    document.head.appendChild(style);
+    _headerTooltipStylesInjected = true;
+}
 let NileChart = class NileChart extends NileElement {
     constructor() {
         super(...arguments);
+        this._headerTipEl = null;
         /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
         this.config = null;
         /**
@@ -122,16 +141,22 @@ let NileChart = class NileChart extends NileElement {
          */
         this.chartTypeAttr = '';
         /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
+        this.summary = '';
         /**
-         * 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.
+         * Controls which items appear in the actions menu. All items are opt-in —
+         * only items explicitly set to `true` are shown. Merged with (and takes
+         * priority over) `config.menu`.
+         *
+         * @example
+         * // PNG + CSV only
+         * chart.menu = { enabled: true, downloadPng: true, downloadCsv: true }
          */
-        /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
-        this.summary = '';
+        this.menu = null;
         this.activeType = null;
         this.activeConfig = null;
         this.menuOpen = false;
         this.chatOpen = false;
+        this._hcChart = null;
         /** 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). */
@@ -142,7 +167,24 @@ let NileChart = class NileChart extends NileElement {
                 this.chatOpen = false;
             }
         };
+        this.handleChartReady = (e) => {
+            this._hcChart = e.detail?.chart ?? null;
+        };
         this.resolvedConfig = null;
+        this._onTitleEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showHeaderTip(el.textContent ?? '', rect.left + rect.width / 2, rect.top);
+        };
+        this._onSubtitleEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showHeaderTip(el.textContent ?? '', rect.left + rect.width / 2, rect.top);
+        };
     }
     get effectiveSummary() {
         return this.resolvedConfig?.summary ?? this.summary;
@@ -153,7 +195,14 @@ let NileChart = class NileChart extends NileElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        ensureHeaderTooltipStyles();
+        const tip = document.createElement('div');
+        tip.className = 'nile-chart-header-tooltip';
+        document.body.appendChild(tip);
+        this._headerTipEl = tip;
         document.addEventListener('click', this.handleOutsideClick);
+        this.addEventListener('nile-chart-ready', this.handleChartReady);
+        initNileChartExporting();
         // Pick up config set before element upgrade (e.g. Angular ngAfterViewInit)
         if (this.config && !this.resolvedConfig) {
             this.resolvedConfig = this.resolveConfig(this.config);
@@ -164,6 +213,9 @@ let NileChart = class NileChart extends NileElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('click', this.handleOutsideClick);
+        this.removeEventListener('nile-chart-ready', this.handleChartReady);
+        this._headerTipEl?.remove();
+        this._headerTipEl = null;
     }
     mergeChartTypeFromAttr(chart) {
         const t = this.chartTypeAttr?.trim();
@@ -278,7 +330,8 @@ let NileChart = class NileChart extends NileElement {
     }
     shouldShowHeader() {
         const hasTitles = !!(this.headerTitle || this.headerSubtitle);
-        const hasBuiltinActions = this.aiEnabled || (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0;
+        const menuEnabled = this.resolvedConfig?.menu?.enabled === true || this.menu?.enabled === true;
+        const hasBuiltinActions = this.aiEnabled || (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0 || menuEnabled;
         return (hasTitles ||
             this.hasHeaderSlotContent ||
             this.hasHeaderActionsSlot ||
@@ -286,36 +339,102 @@ let NileChart = class NileChart extends NileElement {
             this.lightDomHasSlot('header-actions') ||
             hasBuiltinActions);
     }
-    renderTypeSwitcher() {
-        const types = this.resolvedConfig?.switchableTypes;
-        if (!types || types.length === 0)
+    buildExportingOptions() {
+        return { exporting: { enabled: true, buttons: { contextButton: { enabled: false } } } };
+    }
+    /** Ensures exporting modules are loaded and the chart's exporting/fullscreen instances exist. */
+    async ensureExporting() {
+        await initNileChartExporting();
+        const chart = this._hcChart;
+        if (chart && !chart.exporting) {
+            const HC = await getHighcharts();
+            HC.fireEvent(chart, 'afterInit');
+        }
+    }
+    async viewFullscreen() {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        if (this._hcChart?.fullscreen?.open) {
+            this._hcChart.fullscreen.open();
+            return;
+        }
+        const target = this.shadowRoot?.querySelector('.nile-chart-card') ?? this;
+        target.requestFullscreen?.();
+    }
+    async printChart() {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        this._hcChart?.print?.();
+    }
+    async exportChart(type) {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        const filename = (this.headerTitle || 'chart').replace(/[^a-z0-9_-]+/gi, '_');
+        this._hcChart?.exportChartLocal?.({ type, filename, local: true });
+    }
+    async downloadCsv() {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        this._hcChart?.downloadCSV?.();
+    }
+    renderActionsMenu() {
+        if (!this.resolvedConfig)
             return nothing;
+        const menuCfg = { ...(this.resolvedConfig.menu ?? {}), ...(this.menu ?? {}) };
+        if (menuCfg.enabled !== true)
+            return nothing;
+        const types = this.resolvedConfig.switchableTypes;
+        const allItems = [
+            ...(this.resolvedConfig.menuItems ?? []),
+            ...(menuCfg.items ?? []),
+        ];
+        const hasChart = !!this._hcChart;
+        const hasAnyItems = !!(types?.length || allItems.length);
         return html `
-      <div class="chart-menu-anchor">
+      <div class="nile-chart-menu-anchor">
         <button
-          class="chart-menu-trigger"
+          type="button"
+          class="nile-chart-menu-trigger"
           aria-haspopup="true"
           aria-expanded=${this.menuOpen ? 'true' : 'false'}
-          aria-label="Change chart type"
-          @click=${this.toggleMenu}
+          aria-label="Chart actions"
+          @click=${(e) => this.toggleMenu(e)}
         >
           <nile-glyph name="options" size="16"></nile-glyph>
         </button>
-        ${this.menuOpen
-            ? html `
-              <div class="chart-menu-dropdown" role="menu" aria-label="Chart type">
-                ${types.map(type => html `
-                    <button
-                      class="chart-menu-item ${type === this.activeType ? 'active' : ''}"
-                      role="menuitem"
-                      @click=${() => this.switchType(type)}
-                    >
-                      ${chartTypeLabel(type)} chart
-                    </button>
-                  `)}
-              </div>
-            `
-            : nothing}
+        ${this.menuOpen && hasAnyItems ? html `
+          <div class="nile-chart-menu-dropdown" role="menu">
+            ${types?.length ? html `
+              ${types.map(type => html `
+                <button type="button" class="nile-chart-menu-item ${type === this.activeType ? 'active' : ''}" role="menuitem" @click=${() => this.switchType(type)}>
+                  ${chartTypeLabel(type)}
+                </button>
+              `)}
+              ${allItems.length ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+            ` : nothing}
+            ${allItems.map(item => {
+            if (item.type === 'custom') {
+                return html `
+                  ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+                  <button type="button" class="nile-chart-menu-item" role="menuitem"
+                    @click=${() => { this.menuOpen = false; this.emit('nile-menu-change', { id: item.id }); }}>
+                    ${item.label}
+                  </button>
+                `;
+            }
+            if (!hasChart)
+                return nothing;
+            return html `
+                ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+                ${item.fullscreen ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.viewFullscreen()}>${item.label ?? 'Fullscreen'}</button>` : nothing}
+                ${item.print ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.printChart()}>${item.label ?? 'Print'}</button>` : nothing}
+                ${item.downloadPng ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/png')}>${item.label ?? 'Download PNG'}</button>` : nothing}
+                ${item.downloadSvg ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/svg+xml')}>${item.label ?? 'Download SVG'}</button>` : nothing}
+                ${item.downloadCsv ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.downloadCsv()}>${item.label ?? 'Download CSV'}</button>` : nothing}
+              `;
+        })}
+          </div>
+        ` : nothing}
       </div>
     `;
     }
@@ -324,16 +443,28 @@ let NileChart = class NileChart extends NileElement {
             return nothing;
         return html `
       <button
-        class="ai-trigger ${this.chatOpen ? 'active' : ''}"
+        class="nile-ai-trigger ${this.chatOpen ? 'active' : ''}"
         aria-label="Ask AI about this chart"
         aria-expanded=${this.chatOpen ? 'true' : 'false'}
         @click=${this.toggleChat}
       >
         <nile-glyph name="smart-code" size="16"></nile-glyph>
       </button>
-      <slot name="ai-trigger-after"></slot>
+      <slot name="nile-ai-trigger-after"></slot>
     `;
     }
+    _showHeaderTip(text, x, y) {
+        if (!this._headerTipEl)
+            return;
+        this._headerTipEl.textContent = text;
+        this._headerTipEl.style.left = `${x}px`;
+        this._headerTipEl.style.top = `${y}px`;
+        this._headerTipEl.style.display = 'block';
+    }
+    _hideHeaderTip() {
+        if (this._headerTipEl)
+            this._headerTipEl.style.display = 'none';
+    }
     renderHeader() {
         if (!this.shouldShowHeader())
             return nothing;
@@ -342,20 +473,20 @@ let NileChart = class NileChart extends NileElement {
         const showDefaultTitles = !this.hasHeaderSlotContent && !!(title || subtitle);
         const headerCompact = !subtitle?.trim();
         return html `
-      <div class="chart-header ${headerCompact ? 'chart-header--compact' : ''}">
-        <div class="chart-header-titles">
+      <div class="nile-chart-header ${headerCompact ? 'nile-chart-header--compact' : ''}">
+        <div class="nile-chart-header-titles">
           <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
           ${showDefaultTitles
             ? html `
-                ${title ? html `<p class="chart-header-title">${title}</p>` : nothing}
-                ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+                ${title ? html `<p class="nile-chart-header-title" @mouseenter=${this._onTitleEnter} @mouseleave=${() => this._hideHeaderTip()}>${title}</p>` : nothing}
+                ${subtitle ? html `<p class="nile-chart-header-subtitle" @mouseenter=${this._onSubtitleEnter} @mouseleave=${() => this._hideHeaderTip()}>${subtitle}</p>` : nothing}
               `
             : nothing}
         </div>
-        <div class="chart-header-actions">
+        <div class="nile-chart-header-actions">
           <slot name="header-actions" @slotchange=${this.onHeaderActionsSlotChange}></slot>
           ${this.renderAiTrigger()}
-          ${this.renderTypeSwitcher()}
+          ${this.renderActionsMenu()}
         </div>
       </div>
     `;
@@ -371,7 +502,7 @@ let NileChart = class NileChart extends NileElement {
         const summaryMessage = summary;
         const welcomeMessage = summary ? '' : (aiConfig?.welcomeMessage ?? '');
         return html `
-      <div class="ai-panel-overlay" ?data-open=${this.chatOpen}>
+      <div class="nile-ai-panel-overlay" ?data-open=${this.chatOpen}>
         <nile-ai-panel
           .placeholder=${aiConfig?.placeholder ?? 'Ask about this chart...'}
           .welcomeMessage=${welcomeMessage}
@@ -385,13 +516,13 @@ let NileChart = class NileChart extends NileElement {
         const config = this.activeConfig;
         // Suppress inner Highcharts title/subtitle — the card header shows them
         const noTitle = { title: { text: undefined }, subtitle: { text: undefined } };
-        const mergedOptions = { ...(config.options ?? {}), ...noTitle };
+        const mergedOptions = deepMerge(deepMerge(config.options ?? {}, noTitle), this.buildExportingOptions());
         switch (config.type) {
             case 'bar':
                 return html `<nile-bar-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -412,7 +543,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-pie-chart
           .data=${config.data}
           .seriesName=${config.seriesName ?? ''}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -433,7 +564,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-trendline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .forecast=${config.forecast ?? null}
           .options=${mergedOptions}
@@ -454,7 +585,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-anomaly-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .anomaly=${config.anomaly ?? {}}
           .options=${mergedOptions}
@@ -475,7 +606,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-line-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -496,7 +627,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .showLegend=${config.showLegend ?? true}
@@ -518,7 +649,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -539,10 +670,9 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-donut-chart
           .data=${config.data}
           .seriesName=${config.seriesName ?? ''}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .innerSize=${config.innerSize ?? '50%'}
           .semiCircle=${config.semiCircle ?? false}
-          .semiCircle=${config.semiCircle ?? false}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -562,7 +692,7 @@ let NileChart = class NileChart extends NileElement {
             case 'scatter':
                 return html `<nile-scatter-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
@@ -583,7 +713,7 @@ let NileChart = class NileChart extends NileElement {
             case 'bubble':
                 return html `<nile-bubble-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
@@ -605,7 +735,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-spline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -626,7 +756,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-radar-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showArea=${config.showArea ?? false}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -650,7 +780,7 @@ let NileChart = class NileChart extends NileElement {
           .max=${config.max ?? 100}
           .suffix=${config.suffix ?? ''}
           .bands=${config.bands ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -668,7 +798,7 @@ let NileChart = class NileChart extends NileElement {
             case 'waterfall':
                 return html `<nile-waterfall-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -692,7 +822,7 @@ let NileChart = class NileChart extends NileElement {
           .joinBy=${config.joinBy ?? ['hc-key', 'hc-key']}
           .seriesType=${config.seriesType ?? 'map'}
           .zoom=${config.zoom ?? true}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -711,7 +841,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-stacked-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stackMode=${config.stackMode ?? 'normal'}
           .showLegend=${config.showLegend ?? true}
@@ -734,7 +864,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-cluster-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .groupPadding=${config.groupPadding ?? 0.15}
@@ -756,7 +886,7 @@ let NileChart = class NileChart extends NileElement {
             case 'histogram':
                 return html `<nile-histogram-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .histogramSeriesName=${config.histogramSeriesName ?? ''}
@@ -782,7 +912,7 @@ let NileChart = class NileChart extends NileElement {
             case 'bellcurve':
                 return html `<nile-bellcurve-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .bellcurveSeriesName=${config.bellcurveSeriesName ?? ''}
@@ -810,7 +940,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-boxplot-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .horizontal=${config.horizontal ?? false}
@@ -832,7 +962,7 @@ let NileChart = class NileChart extends NileElement {
             case 'timeline':
                 return html `<nile-timeline-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
           .inverted=${config.inverted ?? false}
@@ -855,7 +985,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbell':
                 return html `<nile-dumbbell-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -879,7 +1009,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbellLower':
                 return html `<nile-dumbbell-lower-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -903,7 +1033,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbellUpper':
                 return html `<nile-dumbbell-upper-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -928,7 +1058,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-fan-chart
           .lineData=${config.lineData}
           .bands=${config.bands}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .lineSeriesName=${config.lineSeriesName ?? ''}
           .lineColor=${config.lineColor ?? '#1d4ed8'}
@@ -952,7 +1082,7 @@ let NileChart = class NileChart extends NileElement {
             case 'funnel':
                 return html `<nile-funnel-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
           .options=${mergedOptions}
@@ -973,7 +1103,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-organization-chart
           .nodes=${config.nodes}
           .links=${config.links}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .inverted=${config.inverted ?? true}
           .options=${mergedOptions}
@@ -995,7 +1125,7 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories}
           .columnSeries=${config.columnSeries}
           .lineSeries=${config.lineSeries}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .columnAxisTitle=${config.columnAxisTitle ?? ''}
           .lineAxisTitle=${config.lineAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -1017,7 +1147,7 @@ let NileChart = class NileChart extends NileElement {
           .xCategories=${config.xCategories}
           .yCategories=${config.yCategories}
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .colorMin=${config.colorMin ?? null}
           .colorMax=${config.colorMax ?? null}
@@ -1045,7 +1175,7 @@ let NileChart = class NileChart extends NileElement {
           .layout=${config.layout ?? 'flame'}
           .data=${config.data ?? []}
           .sunburstData=${config.sunburstData ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1064,7 +1194,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-spiderweb-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showArea=${config.showArea ?? false}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -1085,7 +1215,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-inverted-area-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -1106,7 +1236,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-pyramid-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1125,7 +1255,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-lollipop-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1144,7 +1274,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-spline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -1165,7 +1295,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-negative-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .threshold=${config.threshold ?? 0}
           .options=${mergedOptions}
@@ -1186,7 +1316,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-range-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -1206,7 +1336,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-range-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -1226,7 +1356,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-drilldown-chart
           .data=${config.data}
           .drilldownSeries=${config.drilldownSeries}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -1247,7 +1377,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-radial-bar-chart
           .data=${config.data}
           .categories=${config.categories}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .innerSize=${config.innerSize ?? '28%'}
           .paneSize=${config.paneSize ?? '82%'}
@@ -1269,7 +1399,7 @@ let NileChart = class NileChart extends NileElement {
             case 'variablePie':
                 return html `<nile-variable-pie-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
@@ -1290,7 +1420,7 @@ let NileChart = class NileChart extends NileElement {
             case 'euler':
                 return html `<nile-euler-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1308,7 +1438,7 @@ let NileChart = class NileChart extends NileElement {
             case 'polygon':
                 return html `<nile-polygon-chart
           .series=${config.series}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -1328,7 +1458,7 @@ let NileChart = class NileChart extends NileElement {
             case 'vector':
                 return html `<nile-vector-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
@@ -1350,7 +1480,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-xrange-chart
           .data=${config.data}
           .categories=${config.categories}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
           .showLegend=${config.showLegend ?? true}
@@ -1370,6 +1500,7 @@ let NileChart = class NileChart extends NileElement {
         ></nile-xrange-chart>`;
             case 'kpi': {
                 const k = config;
+                const kpiOptions = deepMerge(k.options ?? {}, this.buildExportingOptions());
                 return html `<nile-kpi-chart
           embed-in-nile-chart
           .config=${{
@@ -1429,8 +1560,11 @@ let NileChart = class NileChart extends NileElement {
                         contentGap: k.contentGap,
                         tooltipEnabled: k.tooltipEnabled,
                         loading: k.loading,
-                        options: k.options,
+                        options: kpiOptions,
                         height: k.height,
+                        valueFormat: k.valueFormat,
+                        precision: k.precision,
+                        unit: k.unit,
                     },
                     aq: {
                         chartSubtitle: k.chartSubtitle,
@@ -1442,9 +1576,6 @@ let NileChart = class NileChart extends NileElement {
                 const gridChrome = '--nile-data-grid-radius:0;' +
                     '--nile-data-grid-border-color:transparent;' +
                     '--nile-data-grid-shadow:none;';
-                const gridStyle = config.height
-                    ? `${gridChrome}height:${config.height};`
-                    : gridChrome;
                 return html `<nile-data-grid
           class="nile-chart-grid"
           .data=${config.data}
@@ -1454,9 +1585,9 @@ let NileChart = class NileChart extends NileElement {
           .hoverable=${config.hoverable ?? false}
           .stickyHeader=${config.stickyHeader ?? false}
           .emptyMessage=${config.emptyMessage ?? 'No data'}
-          .loadingMessage=${config.loadingMessage ?? 'Loading\u2026'}
+          .loadingMessage=${config.loadingMessage ?? 'Loading…'}
           .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}
-          style=${gridStyle}
+          style=${gridChrome}
         ></nile-data-grid>`;
             }
             default: {
@@ -1467,28 +1598,32 @@ let NileChart = class NileChart extends NileElement {
     }
     renderSkeleton() {
         return html `
-      <div class="chart-skeleton" aria-busy="true" aria-label="Loading chart">
-        <div class="chart-skeleton-body">
+      <div class="nile-chart-skeleton" aria-busy="true" aria-label="Loading chart">
+        <div class="nile-chart-skeleton-body">
           ${[78, 55, 91, 42, 68].map(w => html `
-              <div class="chart-skeleton-row">
-                <div class="chart-skeleton-ylabel"></div>
-                <div class="chart-skeleton-bar" style="--w: ${w}%"></div>
+              <div class="nile-chart-skeleton-row">
+                <div class="nile-chart-skeleton-ylabel"></div>
+                <div class="nile-chart-skeleton-bar" style="--w: ${w}%"></div>
               </div>
             `)}
         </div>
-        <div class="chart-skeleton-xaxis-row">
-          ${[0, 1, 2, 3, 4].map(i => html `<div class="chart-skeleton-xlabel" style="--d: ${i * 80}ms"></div>`)}
+        <div class="nile-chart-skeleton-xaxis-row">
+          ${[0, 1, 2, 3, 4].map(i => html `<div class="nile-chart-skeleton-xlabel" style="--d: ${i * 80}ms"></div>`)}
         </div>
       </div>
     `;
     }
     render() {
         const isLoading = this.loading || (this.activeConfig?.loading ?? false);
+        const isGrid = this.activeConfig?.type === 'grid';
+        const cardStyle = isGrid && this.activeConfig?.height
+            ? `height:${this.activeConfig.height}`
+            : '';
         return html `
-      <div class="chart-card">
+      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}" style=${cardStyle}>
         ${this.renderHeader()}
-        <div class="chart-wrapper">
-          <div class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}">
+        <div class="nile-chart-wrapper">
+          <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''}">
             ${isLoading
             ? this.renderSkeleton()
             : this.activeConfig
@@ -1515,6 +1650,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileChart.prototype, "summary", void 0);
+__decorate([
+    property({ type: Object })
+], NileChart.prototype, "menu", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "activeType", void 0);
@@ -1527,6 +1665,9 @@ __decorate([
 __decorate([
     state()
 ], NileChart.prototype, "chatOpen", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "_hcChart", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "hasHeaderSlotContent", void 0);