@aquera/nile-visualization 0.3.0 → 0.5.0

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

@@ -33,7 +33,7 @@ export const styles = css `
     position: relative;
     z-index: 10;
     padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background: transparent;
     border-bottom: 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)) var(--nile-radius-radius-3xl, var(--ng-radius-xl)) 0 0;
   }
@@ -82,10 +82,35 @@ export const styles = css `
     contain: layout style;
   }
 
-  ::slotted(*) {
+  /* ── Default slot (custom chart body only — not named slots) ── */
+  slot:not([name])::slotted(*) {
+    display: block;
+    width: 100%;
+  }
+
+  /* ── header / header-actions slots (one row; built-in AI + switcher on the right) ── */
+  slot[name='header']::slotted(*) {
+    display: block;
     width: 100%;
   }
 
+  slot[name='header-actions']::slotted(*) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  /* ── footer slot ── */
+  slot[name='footer']::slotted(*) {
+    display: block;
+    margin: 0;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    border-top: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    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));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+  }
+
   nile-bar-chart,
   nile-pie-chart,
   nile-trendline-chart,
@@ -128,7 +153,7 @@ export const styles = css `
   }
 
   .chart-toggle:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
   }
 
@@ -188,7 +213,7 @@ export const styles = css `
   }
 
   .chart-menu-trigger:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: transparent;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
@@ -228,7 +253,7 @@ export const styles = css `
   }
 
   .chart-menu-item:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: transparent;
   }
 
   .chart-menu-item.active {
@@ -259,7 +284,7 @@ export const styles = css `
   }
 
   .ai-trigger:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: transparent;
     color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
   }
 

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

@@ -16,33 +16,69 @@ 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';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
     /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
     config: NileChartConfig | NileChartConfigInputType | 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.
+     */
+    chartTypeAttr: string;
+    /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
     summary: string;
-    /** Label for the toggle button (fallback when config is not set). */
-    toggleLabel: string;
-    /** Whether the insight overlay is visible. */
-    open: boolean;
     private activeType;
     private activeConfig;
     private menuOpen;
     private chatOpen;
+    /** 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). */
+    private hasHeaderActionsSlot;
     private aiPanel;
     private get effectiveSummary();
-    private get effectiveToggleLabel();
+    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
     private get aiEnabled();
     private handleOutsideClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private mergeChartTypeFromAttr;
     /** Resolve { chart, aq } input to flat NileChartConfig. */
     private resolveConfig;
     private resolvedConfig;
     protected updated(changedProperties: PropertyValues): void;
-    private toggle;
     private toggleMenu;
     private toggleChat;
     /** Push an AI response into the chat panel. Call this from your AI handler. */
@@ -51,6 +87,11 @@ export declare class NileChart extends NileElement {
     private switchType;
     private get headerTitle();
     private get headerSubtitle();
+    private onHeaderSlotChange;
+    private onHeaderActionsSlotChange;
+    private syncHeaderSlots;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    private shouldShowHeader;
     private renderTypeSwitcher;
     private renderAiTrigger;
     private renderHeader;