@aquera/nile-visualization 0.6.0 → 0.7.0

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));

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

@@ -329,13 +329,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 +852,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',
@@ -891,12 +893,14 @@ let NileChart = class NileChart extends NileElement {
         ${this.renderHeader()}
         <div class="chart-wrapper">
           <div class="chart-inner">
+          <div
+            class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}"
+          >
             ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
             ${this.renderAiPanel()}
           </div>
         </div>
         <slot name="footer"></slot>
-        <slot name="footer"></slot>
       </div>
     `;
     }

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

@@ -1,18 +1,20 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     position: relative;
+    box-sizing: border-box;
   }
 
   :host([hidden]) {
     display: none;
   }
 
-  /* ── Card variant ── */
-
-  .kpi-card {
+  /* Card / gauge chrome on the host when used alone (inside nile-chart, embed-in-nile-chart skips this). */
+  :host([variant='card']:not([embed-in-nile-chart])),
+  :host([variant='gauge']:not([embed-in-nile-chart])) {
     background: transparent;
     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));
@@ -20,13 +22,14 @@ export const styles = css `
     transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
   }
 
-  .kpi-card:hover {
+  :host([variant='card']:not([embed-in-nile-chart]):hover),
+  :host([variant='gauge']:not([embed-in-nile-chart]):hover) {
     box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
   }
 
-  /* ── Base layout ── */
-
   .kpi {
+    flex: 1 1 auto;
+    
     display: flex;
     flex-direction: column;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
@@ -52,7 +55,7 @@ export const styles = css `
   .kpi-value {
     margin: 0;
     font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
-    font-size: 36px;
+    font-size: clamp(1.25rem, 2.5vw + 0.75rem, 36px);
     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.2;
@@ -115,7 +118,8 @@ export const styles = css `
 
   .kpi-sparkline {
     width: 100%;
-    height: 48px;
+    flex: 0 1 48px;
+    min-height: 22px;
     margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
@@ -127,8 +131,11 @@ export const styles = css `
   }
 
   .kpi-gauge-container {
-    width: 160px;
-    height: 160px;
+    width: 100%;
+    max-width: 160px;
+    aspect-ratio: 1;
+    flex: 0 1 160px;
+    min-width: 72px;
     margin: 0 auto;
   }
 
@@ -153,6 +160,7 @@ export const styles = css `
   /* ── Loading state ── */
 
   .chart-loading {
+    flex: 1 1 auto;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -24,8 +24,8 @@ export interface ChartKpiSeparatedPayload {
     gaugeColor?: string;
     loading?: boolean;
     options?: Highcharts.Options;
-    /** Optional min height when embedded in `<nile-chart>` (maps to host `min-height`). */
-    height?: string;
+    /** Box size when a height is set (host min-height and height). */
+    height?: string | number;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {
@@ -89,12 +89,18 @@ export declare class NileKpiChart extends NileElement {
     loading: boolean;
     /** Highcharts options override for the sparkline or gauge. */
     options: Highcharts.Options;
+    /**
+     * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
+     */
+    embedInNileChart: boolean;
+    private formatCssLength;
     /** Apply `{ chart, aq }` to individual properties. */
     private applyConfig;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
+    private syncSparklineChartSize;
     private setupResizeObserver;
     private buildSparklineOptions;
     private buildGaugeOptions;

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

@@ -47,6 +47,23 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.loading = false;
         /** Highcharts options override for the sparkline or gauge. */
         this.options = {};
+        /**
+         * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
+         */
+        this.embedInNileChart = false;
+    }
+    formatCssLength(value) {
+        if (value == null)
+            return null;
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? `${value}px` : null;
+        }
+        const s = String(value).trim();
+        if (!s)
+            return null;
+        if (/^-?\d*\.?\d+$/.test(s))
+            return `${s}px`;
+        return s;
     }
     /** Apply `{ chart, aq }` to individual properties. */
     applyConfig(cfg) {
@@ -86,11 +103,19 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loading = c.loading;
             if (c.options !== undefined)
                 this.options = c.options;
-            if (c.height !== undefined) {
-                if (c.height)
-                    this.style.minHeight = c.height;
-                else
+            if ('height' in c) {
+                const h = this.formatCssLength(c.height);
+                if (h) {
+                    /* min-height only: host can grow with content; sparkline shrinks via flex + setSize */
+                    this.style.minHeight = h;
+                    this.style.removeProperty('height');
+                    this.style.removeProperty('max-height');
+                }
+                else {
                     this.style.removeProperty('min-height');
+                    this.style.removeProperty('height');
+                    this.style.removeProperty('max-height');
+                }
             }
         }
         if (aq) {
@@ -125,6 +150,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (sparklineProps.some(p => changedProperties.has(p))) {
             if (this.sparklineChart) {
                 this.sparklineChart.update(this.buildSparklineOptions(), true, true);
+                requestAnimationFrame(() => this.syncSparklineChartSize());
             }
             else {
                 this.initSparkline();
@@ -140,9 +166,16 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             }
         }
     }
+    syncSparklineChartSize() {
+        if (!this.sparklineChart || !this.sparklineContainer)
+            return;
+        const rect = this.sparklineContainer.getBoundingClientRect();
+        const h = Math.max(22, Math.round(rect.height));
+        this.sparklineChart.setSize(null, h, false);
+    }
     setupResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
-            this.sparklineChart?.reflow();
+            this.syncSparklineChartSize();
             this.gaugeChart?.reflow();
         });
         if (this.sparklineContainer)
@@ -252,6 +285,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
+        requestAnimationFrame(() => this.syncSparklineChartSize());
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
     }
     async initGauge() {
@@ -326,10 +360,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (this.loading) {
             return html `<div class="chart-loading">Loading...</div>`;
         }
-        const useCard = this.variant === 'card' || this.variant === 'gauge';
-        if (useCard) {
-            return html `<div class="kpi-card">${this.renderContent()}</div>`;
-        }
+        /* Same DOM as inside nile-chart: one surface; card/gauge chrome is on :host when standalone. */
         return this.renderContent();
     }
 };
@@ -394,6 +425,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'embed-in-nile-chart' })
+], NileKpiChart.prototype, "embedInNileChart", void 0);
 NileKpiChart = __decorate([
     customElement('nile-kpi-chart')
 ], NileKpiChart);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",