@aquera/nile-visualization 1.7.0 → 1.9.0

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

@@ -1,31 +1,83 @@
 import { css } from 'lit';
+export const tooltipCss = `
+  .nile-chart-header-tooltip {
+    position: fixed;
+    display: none;
+    transform: translate(-50%, calc(-100% - 10px));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: 1.4;
+    padding: 4px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 2147483647;
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+  }
+  .nile-chart-header-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+`;
 export const styles = css `
   :host {
     display: block;
     width: 100%;
     position: relative;
+    container-type: inline-size;
   }
 
   :host([hidden]) {
     display: none;
   }
 
+  /* Fit-to-container mode (set by nile-widget-viewer) — makes the card fill
+     its host rather than auto-sizing to content, so the chart reflows to the
+     allotted cell instead of overflowing. */
+  :host([fit]) {
+    height: 100%;
+  }
+
+  :host([fit]) .nile-chart-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host([fit]) .nile-chart-wrapper {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  :host([fit]) .nile-chart-inner {
+    height: 100%;
+  }
+
   /* ── Unified Card Container ── */
 
-  .chart-card {
+  .nile-chart-card {
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
     transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
   }
-  .chart-card:hover {
+  .nile-chart-card:hover {
     box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
   }
 
   /* ── Card Header ── */
 
-  .chart-header {
+  .nile-chart-header {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -39,11 +91,11 @@ export const styles = css `
     border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl)) 0 0;
   }
 
-  .chart-header.chart-header--compact {
+  .nile-chart-header.nile-chart-header--compact {
     padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
-  .chart-header-titles {
+  .nile-chart-header-titles {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -52,25 +104,54 @@ export const styles = css `
     flex: 1 1 auto;
   }
 
-  .chart-header-title {
+  .nile-chart-header-title {
     margin: 0;
     font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
     font-size: var(--nile-type-scale-6, var(--ng-font-size-text-l));
-     font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    width: 100%;
   }
 
-  .chart-header-subtitle {
+  .nile-chart-header-subtitle {
     margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    width: 100%;
+  }
+
+  @container (max-width: 400px) {
+    .nile-chart-header {
+      padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    }
+    .nile-chart-header.nile-chart-header--compact {
+      padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+    }
   }
 
-  .chart-header-actions {
+  @container (max-width: 280px) {
+    .nile-chart-header {
+      padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+      gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    }
+    .nile-chart-header.nile-chart-header--compact {
+      padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    }
+  }
+
+  .nile-chart-header-actions {
     display: flex;
     align-items: center;
     gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
@@ -80,17 +161,41 @@ export const styles = css `
 
   /* ── Card Body ── */
 
-  .chart-wrapper {
+  .nile-chart-wrapper {
     position: relative;
   }
 
-  .chart-inner {
+  .nile-chart-inner {
     position: relative;
     overflow: hidden;
     border-radius: 0 0 var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl));
     contain: layout style;
   }
 
+  /* Grid: height applies to the whole card — header + grid together */
+  .nile-chart-card--grid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nile-chart-card--grid .nile-chart-wrapper {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nile-chart-card--grid .nile-chart-inner {
+    flex: 1;
+    min-height: 0;
+    contain: none;
+  }
+
+  .nile-chart-card--grid nile-data-grid {
+    display: block;
+    height: 100%;
+  }
+
   /* ── Default slot (custom chart body only — not named slots) ── */
   slot:not([name])::slotted(*) {
     display: block;
@@ -130,7 +235,7 @@ export const styles = css `
 
   /* ── Summary Toggle ── */
 
-  .chart-toggle {
+  .nile-chart-toggle {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -155,25 +260,25 @@ export const styles = css `
     pointer-events: none;
   }
 
-  .chart-inner:hover .chart-toggle,
-  .chart-toggle[aria-expanded='true'] {
+  .nile-chart-inner:hover .nile-chart-toggle,
+  .nile-chart-toggle[aria-expanded='true'] {
     opacity: 1;
     pointer-events: auto;
   }
 
-  .chart-toggle:hover {
+  .nile-chart-toggle:hover {
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
   }
 
-  .chart-toggle:focus-visible {
+  .nile-chart-toggle:focus-visible {
     outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
     outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
   }
 
   /* ── Summary Overlay ── */
 
-  .chart-overlay {
+  .nile-chart-overlay {
     position: absolute;
     left: 0;
     right: 0;
@@ -189,29 +294,29 @@ export const styles = css `
     padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
-  .chart-overlay[data-open] {
+  .nile-chart-overlay[data-open] {
     transform: translateY(0);
   }
 
-  .chart-content {
+  .nile-chart-content {
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.6;
   }
 
-  /* ── Type Switcher (in header) ── */
+  /* ── Actions Menu (in header) ── */
 
-  .chart-menu-anchor {
+  .nile-chart-menu-anchor {
     position: relative;
   }
 
-  .chart-menu-trigger {
+  .nile-chart-menu-trigger {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--nile-width-28px, var(--ng-height-28px));
-    height: var(--nile-width-28px, var(--ng-height-28px));
+    width: var(--nile-height-28px, var(--ng-height-28px));
+    height: var(--nile-height-28px, var(--ng-height-28px));
     padding: 0;
     border: none;
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
@@ -221,17 +326,17 @@ export const styles = css `
     transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
   }
 
-  .chart-menu-trigger:hover {
+  .nile-chart-menu-trigger:hover {
     background: transparent;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
-  .chart-menu-trigger:focus-visible {
+  .nile-chart-menu-trigger:focus-visible {
     outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
     outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
   }
 
-  .chart-menu-dropdown {
+  .nile-chart-menu-dropdown {
     position: absolute;
     top: 100%;
     right: 0;
@@ -246,7 +351,7 @@ export const styles = css `
     z-index: 10;
   }
 
-  .chart-menu-item {
+  .nile-chart-menu-item {
     display: block;
     width: 100%;
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
@@ -261,59 +366,66 @@ export const styles = css `
     transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
   }
 
-  .chart-menu-item:hover {
-    background: transparent;
+  .nile-chart-menu-item:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
-  .chart-menu-item.active {
+  .nile-chart-menu-item.active {
     color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
     font-weight: 600;
   }
 
-  .chart-menu-item:focus-visible {
+  .nile-chart-menu-item:focus-visible {
     outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
     outline-offset: calc(var(--nile-spacing-2px, var(--ng-outline-offset-2)) * -1);
   }
 
+  .nile-chart-menu-separator {
+    height: var(--nile-border-width-1, var(--ng-stroke-width-1));
+    background: var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+    margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
+  }
+
   /* ── AI Chat Trigger (in header) ── */
 
-  .ai-trigger {
+  .nile-ai-trigger {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: var(--nile-height-28px, var(--ng-height-28px));
+    height: var(--nile-height-28px, var(--ng-height-28px));
     padding: 0;
-    border-radius: var(--ng-radius-md, 10px);
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
     background: var(--ng-componentcolors-utility-brand-50, #EFF4FF);
-    border: 1.5px solid var(--ng-componentcolors-utility-brand-200, #C7D7FE);
+    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--ng-componentcolors-utility-brand-200, #C7D7FE);
     box-shadow: 0 4px 20px rgba(41, 112, 255, 0.12);
     color: var(--ng-componentcolors-utility-brand-600, #2970FF);
     cursor: pointer;
-    transition: background 150ms ease;
+    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
     flex-shrink: 0;
     outline: none;
   }
 
-  .ai-trigger:hover,
-  .ai-trigger:focus-visible {
+  .nile-ai-trigger:hover,
+  .nile-ai-trigger:focus-visible {
     background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }
 
-  .chart-inner--kpi {
+  .nile-chart-inner--kpi {
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     contain: none;
   }
 
-  .ai-trigger.active {
+  .nile-ai-trigger.active {
     background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }
 
   /* ── AI Chat Panel Overlay ── */
 
-  .ai-panel-overlay {
+  .nile-ai-panel-overlay {
     position: absolute;
     left: 0;
     right: 0;
@@ -329,90 +441,90 @@ export const styles = css `
     overflow: hidden;
   }
 
-  .ai-panel-overlay[data-open] {
+  .nile-ai-panel-overlay[data-open] {
     transform: translateY(0);
   }
 
   /* ── Skeleton loader (matches nile-skeleton-loader animation style) ── */
 
-  :host([loading]) .chart-card {
+  :host([loading]) .nile-chart-card {
     pointer-events: none;
   }
 
-  .chart-skeleton {
+  .nile-chart-skeleton {
     display: flex;
     flex-direction: column;
     gap: 0;
-    padding: var(--nile-spacing-3xl, 24px) var(--nile-spacing-3xl, 24px) var(--nile-spacing-xl, 16px);
+    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     min-height: var(--nile-chart-skeleton-height, 300px);
   }
 
-  .chart-skeleton-body {
+  .nile-chart-skeleton-body {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     flex: 1;
-    gap: var(--nile-spacing-xl, 14px);
+    gap: var(--nile-spacing-14px, var(--ng-spacing-lg));
     padding-left: 44px;
     position: relative;
   }
 
   /* Vertical y-axis rule */
-  .chart-skeleton-body::before {
+  .nile-chart-skeleton-body::before {
     content: '';
     position: absolute;
     left: 34px;
-    top: 4px;
-    bottom: 4px;
-    width: 2px;
-    border-radius: 1px;
-    background: var(--nile-colors-neutral-400, #e5e7eb);
+    top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    width: var(--nile-border-width-2, var(--ng-stroke-width-2));
+    border-radius: var(--nile-border-width-1, var(--ng-stroke-width-1));
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
-  .chart-skeleton-row {
+  .nile-chart-skeleton-row {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-md, 8px);
-    height: 24px;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
-  .chart-skeleton-ylabel {
-    width: 26px;
-    height: 10px;
-    border-radius: 3px;
+  .nile-chart-skeleton-ylabel {
+    width: var(--nile-height-26px, 26px);
+    height: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
+    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-xs));
     flex-shrink: 0;
-    background: var(--nile-colors-neutral-400, #e5e7eb);
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     animation: nile-skeleton-blink 1.2s ease-in-out infinite;
   }
 
-  .chart-skeleton-bar {
-    height: 20px;
+  .nile-chart-skeleton-bar {
+    height: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
     width: var(--w, 60%);
-    border-radius: 0 3px 3px 0;
-    background: var(--nile-colors-neutral-400, #e5e7eb);
+    border-radius: 0 var(--nile-radius-radius-sm, var(--ng-radius-xs)) var(--nile-radius-radius-sm, var(--ng-radius-xs)) 0;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     animation: nile-skeleton-blink 1.2s ease-in-out infinite;
   }
 
   /* Staggered wave across the bars */
-  .chart-skeleton-row:nth-child(1) .chart-skeleton-bar { animation-delay: 0ms; }
-  .chart-skeleton-row:nth-child(2) .chart-skeleton-bar { animation-delay: 100ms; }
-  .chart-skeleton-row:nth-child(3) .chart-skeleton-bar { animation-delay: 200ms; }
-  .chart-skeleton-row:nth-child(4) .chart-skeleton-bar { animation-delay: 300ms; }
-  .chart-skeleton-row:nth-child(5) .chart-skeleton-bar { animation-delay: 400ms; }
+  .nile-chart-skeleton-row:nth-child(1) .nile-chart-skeleton-bar { animation-delay: 0ms; }
+  .nile-chart-skeleton-row:nth-child(2) .nile-chart-skeleton-bar { animation-delay: 100ms; }
+  .nile-chart-skeleton-row:nth-child(3) .nile-chart-skeleton-bar { animation-delay: 200ms; }
+  .nile-chart-skeleton-row:nth-child(4) .nile-chart-skeleton-bar { animation-delay: 300ms; }
+  .nile-chart-skeleton-row:nth-child(5) .nile-chart-skeleton-bar { animation-delay: 400ms; }
 
   /* Horizontal x-axis labels row */
-  .chart-skeleton-xaxis-row {
+  .nile-chart-skeleton-xaxis-row {
     display: flex;
     justify-content: space-around;
     padding-left: 44px;
-    margin-top: var(--nile-spacing-xl, 14px);
+    margin-top: var(--nile-spacing-14px, var(--ng-spacing-lg));
   }
 
-  .chart-skeleton-xlabel {
-    height: 10px;
-    width: 30px;
-    border-radius: 3px;
-    background: var(--nile-colors-neutral-400, #e5e7eb);
+  .nile-chart-skeleton-xlabel {
+    height: var(--nile-spacing-10px, var(--ng-spacing-md-alt));
+    width: var(--nile-height-30px, 30px);
+    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-xs));
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     animation: nile-skeleton-blink 1.2s ease-in-out infinite;
     animation-delay: var(--d, 0ms);
   }
@@ -423,9 +535,9 @@ export const styles = css `
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .chart-skeleton-bar,
-    .chart-skeleton-ylabel,
-    .chart-skeleton-xlabel {
+    .nile-chart-skeleton-bar,
+    .nile-chart-skeleton-ylabel,
+    .nile-chart-skeleton-xlabel {
       animation: none;
       opacity: 0.7;
     }

package/dist/src/nile-chart/nile-chart.d.ts

@@ -1,6 +1,6 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element.js';
-import type { NileChartConfig } from './nile-chart-config.js';
+import type { NileChartConfig, NileChartMenuConfig } from './nile-chart-config.js';
 import type { NileChartConfigInputType } from '../internal/types/index.js';
 import '../nile-bar-chart/index.js';
 import '../nile-pie-chart/index.js';
@@ -52,6 +52,7 @@ import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
+    private _headerTipEl;
     /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
     config: NileChartConfig | NileChartConfigInputType | null;
     /**
@@ -71,16 +72,22 @@ export declare class NileChart extends NileElement {
      */
     chartTypeAttr: string;
     /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
+    summary: string;
     /**
-     * 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. */
-    summary: string;
+    menu: NileChartMenuConfig | null;
     private activeType;
     private activeConfig;
     private menuOpen;
     private chatOpen;
+    private _hcChart;
     /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
     private hasHeaderSlotContent;
     /** True when elements are projected into `header-actions` (used to show the header row). */
@@ -90,6 +97,7 @@ export declare class NileChart extends NileElement {
     /** AI panel shows when ai.enabled is true OR when a summary is provided. */
     private get aiEnabled();
     private handleOutsideClick;
+    private handleChartReady;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private mergeChartTypeFromAttr;
@@ -112,8 +120,19 @@ export declare class NileChart extends NileElement {
     /** Direct children with `slot=` — header row renders on first paint before slot assignment runs. */
     private lightDomHasSlot;
     private shouldShowHeader;
-    private renderTypeSwitcher;
+    private buildExportingOptions;
+    /** Ensures exporting modules are loaded and the chart's exporting/fullscreen instances exist. */
+    private ensureExporting;
+    private viewFullscreen;
+    private printChart;
+    private exportChart;
+    private downloadCsv;
+    private renderActionsMenu;
     private renderAiTrigger;
+    private _showHeaderTip;
+    private _hideHeaderTip;
+    private _onTitleEnter;
+    private _onSubtitleEnter;
     private renderHeader;
     private renderAiPanel;
     private renderChartContent;