@aquera/nile-visualization 0.6.0 → 0.8.0

package/dist/src/index.d.ts

@@ -100,3 +100,5 @@ export { NileWidgetViewer } from './nile-widget-viewer/index.js';
 export type { NileWidgetConfig, NileWidgetChartConfig, NileWidgetKpiConfig, WidgetLayout, } from './nile-widget-viewer/index.js';
 export { NileDashboardViewer } from './nile-dashboard-viewer/index.js';
 export type { NileDashboardConfig } from './nile-dashboard-viewer/index.js';
+export { NileExecutiveSummary } from './nile-executive-summary/index.js';
+export type { NileExecutiveSummaryConfig } from './nile-executive-summary/index.js';

package/dist/src/index.js

@@ -54,4 +54,5 @@ export { NileAiSender } from './nile-ai-sender/index.js';
 export { NileAiPanel } from './nile-ai-panel/index.js';
 export { NileWidgetViewer } from './nile-widget-viewer/index.js';
 export { NileDashboardViewer } from './nile-dashboard-viewer/index.js';
+export { NileExecutiveSummary } from './nile-executive-summary/index.js';
 //# sourceMappingURL=index.js.map

package/dist/src/internal/types/nile-chart-config-input.type.d.ts

@@ -1,7 +1,11 @@
 import type { ChartConfigType } from './chart-config.type.js';
 import type { AqConfigType } from './aq-config.type.js';
-/** Input to nileChartConfig(). Discriminated on chart.type. */
-export interface NileChartConfigInputType {
+import type { NileChartConfigBase } from '../../nile-chart/nile-chart-config.js';
+/**
+ * Input to nileChartConfig(). Discriminated on chart.type.
+ * Card-level fields may sit on chart, in aq, or on the root (merged: root, then chart, then aq).
+ */
+export interface NileChartConfigInputType extends Partial<NileChartConfigBase> {
     chart: ChartConfigType;
     aq?: AqConfigType;
 }

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

@@ -1,8 +1,9 @@
 /** Merges separated chart + aq config into a flat NileChartConfig. */
 export function nileChartConfig(input) {
-    const { chart, aq } = input;
+    const { chart, aq, ...fromRoot } = input;
     const { ai, switchable, ...rest } = aq ?? {};
     return {
+        ...fromRoot,
         ...chart,
         ...rest,
         ...(ai && { ai }),

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

@@ -19,7 +19,6 @@ export const styles = css `
     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 {
     box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
   }
@@ -28,8 +27,10 @@ export const styles = css `
 
   .chart-header {
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     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));
@@ -38,16 +39,24 @@ 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 {
+    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 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
     min-width: 0;
-    flex: 1;
+    flex: 1 1 auto;
   }
 
   .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-xl));
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    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));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.3;
   }
@@ -66,7 +75,7 @@ export const styles = css `
     align-items: center;
     gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     flex-shrink: 0;
-    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    align-self: center;
   }
 
   /* ── Card Body ── */
@@ -287,7 +296,12 @@ export const styles = css `
     background: transparent;
     color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
   }
-
+  .chart-inner--kpi {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    contain: none;
+  }
   .ai-trigger.active {
     background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
     color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
@@ -319,5 +333,103 @@ export const styles = css `
   .ai-panel-overlay[data-open] {
     transform: translateY(0);
   }
+
+  /* ── Skeleton loader (matches nile-skeleton-loader animation style) ── */
+
+  :host([loading]) .chart-card {
+    pointer-events: none;
+  }
+
+  .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);
+    min-height: var(--nile-chart-skeleton-height, 300px);
+  }
+
+  .chart-skeleton-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex: 1;
+    gap: var(--nile-spacing-xl, 14px);
+    padding-left: 44px;
+    position: relative;
+  }
+
+  /* Vertical y-axis rule */
+  .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);
+  }
+
+  .chart-skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, 8px);
+    height: 24px;
+  }
+
+  .chart-skeleton-ylabel {
+    width: 26px;
+    height: 10px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+    animation: nile-skeleton-blink 1.2s ease-in-out infinite;
+  }
+
+  .chart-skeleton-bar {
+    height: 20px;
+    width: var(--w, 60%);
+    border-radius: 0 3px 3px 0;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+    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; }
+
+  /* Horizontal x-axis labels row */
+  .chart-skeleton-xaxis-row {
+    display: flex;
+    justify-content: space-around;
+    padding-left: 44px;
+    margin-top: var(--nile-spacing-xl, 14px);
+  }
+
+  .chart-skeleton-xlabel {
+    height: 10px;
+    width: 30px;
+    border-radius: 3px;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+    animation: nile-skeleton-blink 1.2s ease-in-out infinite;
+    animation-delay: var(--d, 0ms);
+  }
+
+  @keyframes nile-skeleton-blink {
+    0%, 100% { opacity: 0.5; }
+    50%       { opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chart-skeleton-bar,
+    .chart-skeleton-ylabel,
+    .chart-skeleton-xlabel {
+      animation: none;
+      opacity: 0.7;
+    }
+  }
 `;
 //# sourceMappingURL=nile-chart.css.js.map

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

@@ -53,6 +53,17 @@ export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
     /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
     config: NileChartConfig | NileChartConfigInputType | null;
+    /**
+     * When true, hides the chart and shows a skeleton bar-chart loader.
+     * Set to false once data is ready to reveal the chart.
+     *
+     * @example
+     * ```js
+     * chart.loading = true;
+     * fetchData().then(data => { chart.config = buildConfig(data); chart.loading = false; });
+     * ```
+     */
+    loading: boolean;
     /**
      * 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.
@@ -108,6 +119,7 @@ export declare class NileChart extends NileElement {
     private renderHeader;
     private renderAiPanel;
     private renderChartContent;
+    private renderSkeleton;
     render(): TemplateResult;
 }
 declare global {

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

@@ -103,6 +103,17 @@ let NileChart = class NileChart extends NileElement {
         super(...arguments);
         /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
         this.config = null;
+        /**
+         * When true, hides the chart and shows a skeleton bar-chart loader.
+         * Set to false once data is ready to reveal the chart.
+         *
+         * @example
+         * ```js
+         * chart.loading = true;
+         * fetchData().then(data => { chart.config = buildConfig(data); chart.loading = false; });
+         * ```
+         */
+        this.loading = false;
         /**
          * 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.
@@ -329,13 +340,14 @@ let NileChart = class NileChart extends NileElement {
         const title = this.headerTitle;
         const subtitle = this.headerSubtitle;
         const showDefaultTitles = !this.hasHeaderSlotContent && !!(title || subtitle);
+        const headerCompact = !subtitle?.trim();
         return html `
-      <div class="chart-header">
+      <div class="chart-header ${headerCompact ? 'chart-header--compact' : ''}">
         <div class="chart-header-titles">
           <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
           ${showDefaultTitles
             ? html `
-                ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
+                ${title ? html `<p class="chart-header-title">${title}</p>` : nothing}
                 ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
               `
             : nothing}
@@ -851,6 +863,7 @@ let NileChart = class NileChart extends NileElement {
             case 'kpi': {
                 const k = config;
                 return html `<nile-kpi-chart
+          embed-in-nile-chart
           .config=${{
                     chart: {
                         type: 'kpi',
@@ -885,18 +898,39 @@ 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">
+          ${[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>
+            `)}
+        </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>
+      </div>
+    `;
+    }
     render() {
+        const isLoading = this.loading || (this.activeConfig?.loading ?? false);
         return html `
       <div class="chart-card">
         ${this.renderHeader()}
         <div class="chart-wrapper">
-          <div class="chart-inner">
-            ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
+          <div class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}">
+            ${isLoading
+            ? this.renderSkeleton()
+            : this.activeConfig
+                ? this.renderChartContent()
+                : html `<slot></slot>`}
             ${this.renderAiPanel()}
           </div>
         </div>
         <slot name="footer"></slot>
-        <slot name="footer"></slot>
       </div>
     `;
     }
@@ -905,6 +939,9 @@ NileChart.styles = styles;
 __decorate([
     property({ type: Object })
 ], NileChart.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChart.prototype, "loading", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-type' })
 ], NileChart.prototype, "chartTypeAttr", void 0);

package/dist/src/nile-executive-summary/index.d.ts

@@ -0,0 +1,2 @@
+export { NileExecutiveSummary } from './nile-executive-summary.js';
+export type { NileExecutiveSummaryConfig } from './nile-executive-summary-config.js';

package/dist/src/nile-executive-summary/index.js

@@ -0,0 +1,2 @@
+export { NileExecutiveSummary } from './nile-executive-summary.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-executive-summary/nile-executive-summary-config.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Configuration interface for the nile-executive-summary component.
+ * Assign to the component's `config` property via JavaScript.
+ *
+ * @example
+ * ```js
+ * const el = document.querySelector('nile-executive-summary');
+ * el.config = {
+ *   summary: '<p>Q1 revenue grew <strong>23%</strong> YoY...</p>',
+ *   buttonLabel: 'View Summary',
+ *   drawerLabel: 'AI Executive Summary',
+ * };
+ * ```
+ */
+export interface NileExecutiveSummaryConfig {
+    /** Text or HTML string displayed with the typewriter effect inside the drawer. */
+    summary: string;
+    /** Label rendered on the built-in trigger nile-button. Default: 'Executive Summary' */
+    buttonLabel?: string;
+    /**
+     * Variant forwarded to the internal nile-button. Default: 'primary'
+     * Mirrors nile-button's `variant` property.
+     */
+    buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'caution' | 'ghost' | 'destructive' | 'secondary-grey' | 'secondary-blue';
+    /** Title displayed in the drawer header. Default: 'Executive Summary' */
+    drawerLabel?: string;
+    /** Milliseconds per character for the typing animation. Default: 30 */
+    typingSpeed?: number;
+    /** Close the drawer when the user presses Escape. Default: true */
+    closeOnEscape?: boolean;
+    /** Prevent the drawer from closing when the overlay is clicked. Default: false */
+    preventOverlayClose?: boolean;
+}

package/dist/src/nile-executive-summary/nile-executive-summary-config.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};
+//# sourceMappingURL=nile-executive-summary-config.js.map

package/dist/src/nile-executive-summary/nile-executive-summary.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-executive-summary/nile-executive-summary.css.js

@@ -0,0 +1,196 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    display: inline-block;
+    position: relative;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  /* ─── Trigger button ───────────────────────────────────────────────────── */
+
+  .es-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: var(--executive-summary-btn-padding, 8px 14px);
+    border: none;
+    border-radius: var(--executive-summary-btn-radius, var(--nile-radius-base-standard, 4px));
+    background-color: var(--executive-summary-btn-bg, var(--nile-colors-primary-600, #0052a3));
+    color: var(--executive-summary-btn-color, var(--nile-colors-white-base, #fff));
+    font-family: var(--nile-font-family-body, sans-serif);
+    font-size: var(--nile-type-scale-3, 14px);
+    font-weight: 500;
+    line-height: 1.4;
+    cursor: pointer;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .es-trigger:hover {
+    background-color: var(--executive-summary-btn-bg-hover, var(--nile-colors-primary-700, #003d7a));
+  }
+
+  .es-trigger:focus-visible {
+    box-shadow: 0 0 0 3px var(--nile-colors-primary-200, rgba(0, 82, 163, 0.3));
+  }
+
+  .es-trigger:active {
+    background-color: var(--executive-summary-btn-bg-active, var(--nile-colors-primary-800, #002e5b));
+  }
+
+  /* ─── Backdrop wrapper (fixed, full viewport) ──────────────────────────── */
+
+  .es-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    z-index: var(--executive-summary-z-index, 700);
+  }
+
+  /* ─── Overlay ──────────────────────────────────────────────────────────── */
+
+  .es-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--executive-summary-overlay-color, hsl(240 3.8% 46.1% / 33%));
+    pointer-events: all;
+  }
+
+  /* ─── Drawer panel ─────────────────────────────────────────────────────── */
+
+  .es-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--executive-summary-size, 480px);
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    background-color: var(--nile-colors-white-base, #fff);
+    box-shadow: var(
+      --executive-summary-shadow,
+      var(
+        --nile-box-shadow-2,
+        0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+        0px 8px 8px -4px rgba(16, 24, 40, 0.03)
+      )
+    );
+    pointer-events: all;
+    outline: none;
+  }
+
+  /* ─── Header ───────────────────────────────────────────────────────────── */
+
+  .es-header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: var(--executive-summary-header-spacing, 16px 20px);
+    border-bottom: 1px solid var(--nile-colors-neutral-100, #e5e7eb);
+  }
+
+  .es-title {
+    flex: 1 1 auto;
+    margin: 0;
+    font-family: var(--nile-font-family-body, sans-serif);
+    font-size: var(--nile-font-size-rem-small, 16px);
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--nile-colors-dark-900, #111827);
+  }
+
+  /* ─── Close button ─────────────────────────────────────────────────────── */
+
+  .es-close {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    background: none;
+    border-radius: var(--nile-radius-sm, 4px);
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, #374151);
+    transition: background-color 0.15s ease;
+    margin-left: 8px;
+  }
+
+  .es-close:hover {
+    background-color: var(--nile-colors-neutral-50, #f3f4f6);
+  }
+
+  .es-close:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, #0052a3);
+    outline-offset: 1px;
+  }
+
+  .es-close svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* ─── Body ─────────────────────────────────────────────────────────────── */
+
+  .es-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--executive-summary-body-spacing, 20px);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* ─── Typed text ───────────────────────────────────────────────────────── */
+
+  .es-typed-text {
+    font-family: var(--nile-font-family-body, sans-serif);
+    font-size: var(--nile-type-scale-3, 14px);
+    line-height: 1.7;
+    color: var(--nile-colors-dark-900, #111827);
+    word-break: break-word;
+  }
+
+@media (forced-colors: active) {
+    .es-panel {
+      border: 1px solid ButtonText;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-executive-summary.css.js.map