@aquera/nile-visualization 2.9.9 → 2.9.11

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

@@ -47,7 +47,7 @@ export const styles = css `
     --nile-kpi-label-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     --nile-kpi-label-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-kpi-label-font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    --nile-kpi-value-font-size: clamp(1rem, 5cqi + 0.25rem, 36px);
+    --nile-kpi-value-font-size: clamp(22px, 9cqi, 36px);
     --nile-kpi-value-color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
     --nile-kpi-prefix-suffix-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
@@ -63,7 +63,14 @@ export const styles = css `
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
-    container-type: inline-size;
+    /* size containment so @container queries can use both width and height */
+    container-type: size;
+    min-height: 120px;
+  }
+
+  /* Gauge variant needs more vertical room so the ring renders at a usable size. */
+  :host([variant='gauge']) {
+    min-height: 200px;
   }
 
   :host([hidden]) {
@@ -75,6 +82,7 @@ export const styles = css `
      element is already flex:1, so it stretches with the host. */
   :host([fit]) {
     height: 100%;
+    min-height: 0;
   }
 
   /* Card / gauge chrome on the host when used alone (inside nile-chart, embed-in-nile-chart skips this). */
@@ -142,6 +150,7 @@ export const styles = css `
     align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     flex-wrap: nowrap;
+    flex: 0 0 auto;
     min-width: 0;
     overflow: hidden;
   }
@@ -155,10 +164,7 @@ export const styles = css `
     line-height: 1.2;
     cursor: default;
     white-space: nowrap;
-    min-width: 0;
-    flex: 0 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    flex: 0 0 auto;
   }
 
   .kpi-prefix,
@@ -178,6 +184,21 @@ export const styles = css `
     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));
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .kpi-trend-arrow,
+  .kpi-trend-value {
+    flex: 0 0 auto;
+  }
+
+  .kpi-trend-label {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     line-height: 1;
     flex-shrink: 1;
     min-width: 0;
@@ -229,20 +250,17 @@ export const styles = css `
 
   .kpi-sparkline {
     width: 100%;
-    flex: 0 1 48px;
-    min-height: 22px;
+    flex: 1 1 24px;
+    min-height: 24px;
     margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   /* ── Container queries: scale down for narrow cards ── */
 
-  /* Medium-small: ~280px and below — tighten padding, shrink prefix/suffix. */
+  /* Medium-small: ~280px and below — shrink prefix/suffix only */
   @container (max-width: 280px) {
     :host {
-      --nile-kpi-padding-v: var(--nile-spacing-lg, var(--ng-spacing-lg));
-      --nile-kpi-padding-h: var(--nile-spacing-xl, var(--ng-spacing-xl));
       --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
-      --nile-kpi-label-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     }
 
     .kpi-value-row {
@@ -257,8 +275,6 @@ export const styles = css `
   /* Small: ~220px and below — tighten further; description/sparkline stay visible. */
   @container (max-width: 220px) {
     :host {
-      --nile-kpi-padding-v: var(--nile-spacing-md, var(--ng-spacing-md));
-      --nile-kpi-padding-h: var(--nile-spacing-lg, var(--ng-spacing-lg));
       --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
       --nile-kpi-description-font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
     }
@@ -269,15 +285,161 @@ export const styles = css `
     }
   }
 
-  /* Very small: under ~180px — stack the trend below the value so neither clips. */
+  /* Sparkline is the lowest-priority piece — hide it before the trend so
+     the visible order stays value → trend → sparkline. */
   @container (max-width: 180px) {
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* At minimum height (h ≤ 75px and not short-wide) —
+     hide everything except the value and trend. */
+  @container (max-height: 50px) and (max-width: 319.98px) {
+    .kpi-label,
+    .kpi-description,
+    .kpi-sparkline {
+      display: none;
+    }
+
+    :host([variant='gauge']) .kpi {
+      padding: 0;
+    }
+  }
+
+  /* Gauge card is short — collapse padding so the gauge still renders. */
+  @container (max-height: 109.98px) {
+    :host([variant='gauge']) .kpi {
+      padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    }
+  }
+
+  /* Narrow card — keep trend inline next to value. Behavior is the same at
+     any height so the trend doesn't appear/disappear when the card grows
+     taller, only when it grows wider/narrower. The arrow + numeric value
+     stay intact; only the label ellipses when space is tight. */
+  @container (max-width: 320px) {
     .kpi-value-row {
-      flex-wrap: wrap;
-      row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+      flex-direction: row;
+      align-items: center;
+      gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+      overflow: hidden;
     }
 
+    /* Treat arrow + value + label as a single text run that ellipses
+       together: switch the trend from flex to a single inline-block with
+       white-space:nowrap so text-overflow:ellipsis applies across the
+       whole "▲ 14.2% vs last month" string instead of only the label. */
     .kpi-trend {
-      flex-basis: 100%;
+      display: inline-block;
+      flex: 1 1 0;
+      min-width: 0;
+      max-width: 100%;
+      padding-left: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: 1;
+    }
+
+    .kpi-trend-arrow {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .kpi-trend-value,
+    .kpi-trend-label {
+      display: inline;
+      flex: initial;
+      overflow: visible;
+      text-overflow: clip;
+      min-width: 0;
+      white-space: nowrap;
+    }
+  }
+
+  /* Card too short for a clean sparkline — hide it (unless short-wide layout below restores it). */
+  @container (max-height: 70px) {
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* Tall — there is enough vertical room, bring the sparkline back even at narrow widths. */
+  @container (min-height: 80px) {
+    .kpi-sparkline {
+      display: block;
+    }
+  }
+
+  /* Short but wide (h ≤ 110, w ≥ 320) — lay out value, trend and sparkline horizontally.
+     Skip the card-variant gauge here so the gauge ring keeps its vertical room. */
+  @container (max-height: 110px) and (min-width: 320px) {
+    :host(:not([variant='gauge'])) .kpi {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    }
+
+    .kpi-label,
+    .kpi-description {
+      display: none;
+    }
+
+    .kpi-value-row {
+      flex: 0 0 auto;
+      flex-direction: row;
+      align-items: center;
+      overflow: visible;
+    }
+
+    .kpi-trend {
+      display: inline-flex;
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+      padding-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    }
+
+    .kpi-trend-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kpi-sparkline {
+      display: block;
+      flex: 1 1 0;
+      min-width: 0;
+      margin-top: 0;
+      align-self: stretch;
+      height: auto;
+    }
+  }
+
+  @container (max-width: 100px) {
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* Constrained both ways — only show the value. */
+    
+
+  @container (max-width: 180px) and (max-height: 70px) {
+   
+    .kpi-description,
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* Short but wide — drop description, keep trend (and sparkline) alongside value. */
+  @container (min-width: 180.01px) and (max-height: 85px) {
+    .kpi-description {
+      display: none;
     }
   }
 
@@ -288,13 +450,24 @@ export const styles = css `
     text-align: center;
   }
 
-  .kpi-gauge-container {
+  .kpi-gauge-slot {
+    flex: 1 1 0;
     width: 100%;
-    max-width: 160px;
-    aspect-ratio: 1;
-    flex: 0 1 160px;
-    min-width: 72px;
-    margin: 0 auto;
+    min-width: 0;
+    min-height: 40px;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .kpi-gauge-container {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: block;
+    flex: 0 0 auto;
   }
 
   .kpi--gauge .kpi-value-row {

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

@@ -4,7 +4,7 @@ import NileElement from '../internal/nile-element.js';
 import type { AqConfigType } from '../internal/types/aq-config.type.js';
 export type TrendDirection = 'up' | 'down' | 'neutral';
 export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
-export type SparklineType = 'area' | 'line';
+export type SparklineType = 'area' | 'line' | 'column' | 'bar' | 'spline' | 'areaspline' | 'pie' | 'scatter';
 export type KpiValueFormat = 'auto' | 'K' | 'M' | 'B' | 'T' | 'none';
 export type KpiNumberSystem = 'indian' | 'international';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
@@ -136,6 +136,7 @@ export declare class NileKpiChart extends NileElement {
     private _tipEl;
     private sparklineContainer;
     private gaugeContainer;
+    private gaugeSlot;
     /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
     config: NileKpiConfigInputType | null;
     /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
@@ -264,6 +265,12 @@ export declare class NileKpiChart extends NileElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
+    private _lastSparkSize;
+    private _lastGaugeSize;
+    private _gaugeRafScheduled;
+    private _scheduleGaugeSync;
+    private _syncGaugeNow;
+    private syncGaugeChartSize;
     private syncSparklineChartSize;
     private setupResizeObserver;
     private _onSparklineMouseMove;
@@ -278,7 +285,9 @@ export declare class NileKpiChart extends NileElement {
     private _onValueEnter;
     private _onDescEnter;
     private _onLabelEnter;
+    private _onTrendEnter;
     private _onGaugeEnter;
+    private _onTrendKeydown;
     private _onTipLeave;
     private renderTrend;
     render(): TemplateResult;