@aquera/nile-visualization 2.9.6 → 2.9.7

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

@@ -47,14 +47,14 @@ 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(20px, 9cqmin, 56px);
     --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));
     --nile-kpi-trend-up-color: var(--nile-colors-success-700, var(--ng-color-success-700));
     --nile-kpi-trend-down-color: var(--nile-colors-error-700, var(--ng-color-error-700));
     --nile-kpi-trend-neutral-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
-    --nile-kpi-description-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    --nile-kpi-description-font-size: clamp(0.75rem, 1.2cqmin, 1rem);
     --nile-kpi-description-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     display: flex;
     flex-direction: column;
@@ -63,7 +63,8 @@ export const styles = css `
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
-    container-type: inline-size;
+    container-type: size;
+    container-name: kpi-card;
   }
 
   :host([hidden]) {
@@ -120,6 +121,118 @@ export const styles = css `
     overflow: hidden;
   }
 
+  /* ── Adaptive layout: classes set by render() based on what content exists.
+        .kpi--no-chart  — no sparkline and no gauge
+        .kpi--no-desc   — no description
+        Use both together for "value-only" centering. ── */
+  .kpi.kpi--no-chart {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* When there is no chart, center value-row vertically in the leftover space
+     below the label, and push the description toward the bottom. With a chart
+     present, items stack from the top naturally (no auto margins). */
+  .kpi--no-chart .kpi-value-row {
+    margin-top: auto;
+  }
+
+  .kpi--no-chart .kpi-description {
+    margin-bottom: auto;
+  }
+
+  /* Reset any grid-only props inherited from the side-by-side rule. */
+  .kpi.kpi--no-chart .kpi-label,
+  .kpi.kpi--no-chart .kpi-value-row,
+  .kpi.kpi--no-chart .kpi-description {
+    grid-column: auto;
+    grid-row: auto;
+  }
+
+  .kpi--no-chart .kpi-label {
+    align-self: flex-start;
+    width: 100%;
+  }
+
+  .kpi--no-chart .kpi-value-row {
+    overflow: hidden;
+    flex-wrap: wrap;
+    row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  /* Center value-row vertically when there's nothing below it (no desc, no chart). */
+  .kpi--no-chart.kpi--no-desc .kpi-value-row {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  /* Grow the value when there's room — no chart AND (no description OR no trend). */
+  .kpi--no-chart.kpi--no-desc,
+  .kpi--no-chart.kpi--no-trend {
+    --nile-kpi-value-font-size: clamp(20px, 9cqmin, 56px);
+  }
+
+  /* When trend is absent, the value sits alone in the row — make sure it
+     centers horizontally and the row sizes to content. */
+  .kpi--no-chart.kpi--no-trend .kpi-value-row {
+    justify-content: center;
+  }
+
+  .kpi--no-chart.kpi--no-trend .kpi-value {
+    text-align: center;
+  }
+
+  .kpi--no-chart .kpi-trend {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Let the trend text size to its own content when there's no chart. The
+     default flex 1 1 0 (basis 0) gives the trend nearly zero natural width,
+     so the parent row gives it almost no space and the text clips. */
+  .kpi--no-chart .kpi-trend > span:last-child {
+    flex: 0 0 auto;
+  }
+
+  .kpi--no-chart:not(.kpi--no-desc) .kpi-description {
+    margin-bottom: auto;
+    align-self: center;
+    text-align: center;
+  }
+
+
+  /* When the card is narrow, the centered no-chart value can overflow both
+     edges (cut off on the left). Switch to left-aligned at narrow widths so
+     the value's left edge stays visible. */
+  @container (max-width: 160px) {
+    .kpi--no-chart {
+      align-items: stretch;
+    }
+
+    .kpi--no-chart .kpi-value-row {
+      justify-content: flex-start;
+      align-self: stretch;
+      width: 100%;
+    }
+
+    .kpi--no-chart.kpi--no-trend .kpi-value-row {
+      justify-content: flex-start;
+    }
+
+    .kpi--no-chart.kpi--no-trend .kpi-value {
+      text-align: left;
+    }
+  }
+
   .kpi-label {
     display: block;
     margin: 0;
@@ -141,11 +254,24 @@ export const styles = css `
   .kpi-value-row {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     flex-wrap: nowrap;
+    width: 100%;
+    max-width: 100%;
     min-width: 0;
     overflow: hidden;
     flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  /* When a chart is rendered, force value-row to the left of its column,
+     overriding any centering inherited from the .kpi--no-chart rules. */
+  .kpi:not(.kpi--no-chart) .kpi-value-row {
+    justify-content: flex-start;
+    align-self: stretch;
+    margin-left: 0;
+    margin-right: 0;
   }
 
   .kpi-value {
@@ -157,10 +283,9 @@ 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;
+    flex-shrink: 0;
+    overflow: visible;
   }
 
   .kpi-prefix,
@@ -172,7 +297,7 @@ export const styles = css `
   }
 
   .kpi-trend {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
@@ -181,10 +306,36 @@ export const styles = css `
     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;
-    flex-shrink: 1;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .kpi-trend-text {
     min-width: 0;
+    min-height: 0;
+    max-width: 100%;
     overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  .kpi-trend > span:last-child {
+    flex: 1 1 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  /* ── When no chart is rendered, the trend has room — don't truncate. ── */
+  .kpi--no-chart .kpi-trend,
+  .kpi--no-chart .kpi-trend > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
   }
 
   .kpi-trend--up {
@@ -215,7 +366,9 @@ export const styles = css `
   }
 
   .kpi-description {
-    display: block;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
     margin: 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-kpi-description-font-size);
@@ -223,13 +376,19 @@ export const styles = css `
     line-height: 1.5;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
     min-width: 0;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
-    flex-shrink: 1;
+    flex-shrink: 0;
   }
 
+  /* Description stays visible whenever there's room — sparkline gives up its
+     space first because it has flex-shrink and flex-basis: 0. */
+
+
   .kpi-sparkline {
     width: 100%;
     flex: 1 1 0;
@@ -241,7 +400,7 @@ export const styles = css `
   /* ── Container queries: scale down for narrow cards ── */
 
   /* Medium-small: ~280px and below — tighten padding, shrink prefix/suffix. */
-  @container (max-width: 280px) {
+  @container (max-width: 10px) {
     :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));
@@ -268,7 +427,9 @@ export const styles = css `
     }
 
     .kpi-sparkline {
-      min-height: 0;
+
+      min-height: 18px;
+
     }
   }
 
@@ -284,6 +445,136 @@ export const styles = css `
     }
   }
 
+
+
+  /* ── Named-container hide thresholds ──────────────────────────────────────
+     Use kpi-card (this host) so descendants hide when the host can't fit them.
+     Tune each height to match where the section first starts clipping. ── */
+
+  /* Hide sparkline (and gauge) when the card can't fit it cleanly. */
+  @container kpi-card (max-height: 10px) {
+    .kpi-sparkline,
+    .kpi-gauge-container {
+      display: none;
+    }
+  }
+
+  /* Hide description when the card is even shorter. */
+  @container kpi-card (max-height: 110px) {
+    .kpi-description {
+      display: none;
+    }
+  }
+
+  /* Hide trend at very small sizes — keeps only label + value. */
+  @container kpi-card (max-height: 20px) {
+    .kpi-trend {
+      display: none;
+    }
+  }
+
+  /* When the host is short, hide the sparkline. Centering of the value-row is
+     restricted to .kpi--no-chart only — with a chart present, items stack from
+     the top of the card naturally. */
+  @container (max-height: 80px) {
+    .kpi-sparkline {
+      display: none;
+    }
+
+    .kpi.kpi--no-chart {
+      align-items: center;
+    }
+
+    .kpi--no-chart .kpi-label {
+      align-self: flex-start;
+      width: 100%;
+    }
+
+    .kpi--no-chart .kpi-value-row {
+      overflow: visible;
+      flex-wrap: wrap;
+      row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+      justify-content: center;
+      align-self: center;
+      width: auto;
+      max-width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  /* SIDE_HEIGHT × SIDE_WIDTH — wide + short, chart on the right of text.
+     Only when a chart is present; otherwise text would be squeezed into the
+     left half while the right half stays empty. */
+  @container (max-height: 108px) and (min-width: 390px) {
+    .kpi:not(.kpi--no-chart) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(1px, 1fr);
+     
+      grid-template-rows: auto auto auto 1fr;
+      column-gap: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+      align-items: start;
+      height: 100%;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-label {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-value-row {
+      grid-column: 1;
+      grid-row: 2;
+      overflow: hidden;
+      min-width: 0;
+      width: 100%;
+      max-width: 100%;
+      justify-content: flex-start;
+      justify-self: stretch;
+      align-self: start;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-description {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-trend {
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-trend > span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .kpi-sparkline {
+      display: block;
+      grid-column: 2;
+      grid-row: 1 / -1;
+      align-self: stretch;
+      min-height: 0;
+      height: 100%;
+      margin-top: 0;
+    }
+
+    .kpi-gauge-container {
+      display: block;
+      grid-column: 2;
+      grid-row: 1 / -1;
+      align-self: stretch;
+      min-height: 0;
+      height: 100%;
+      margin-top: 0;
+    }
+  }
+
   /* ── Gauge variant ── */
 
   .kpi--gauge {
@@ -293,11 +584,13 @@ export const styles = css `
 
   .kpi-gauge-container {
     width: 100%;
-    max-width: 160px;
-    aspect-ratio: 1;
-    flex: 0 1 160px;
-    min-width: 72px;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100%;
+    max-height: 100%;
     margin: 0 auto;
+    overflow: hidden;
   }
 
   .kpi--gauge .kpi-value-row {

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

@@ -3,8 +3,8 @@ import type Highcharts from 'highcharts';
 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 KpiVariant = 'default' | 'card' | 'sparkline' | 'gauge' | 'accent';
+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'`). */
@@ -265,6 +265,7 @@ export declare class NileKpiChart extends NileElement {
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
     private syncSparklineChartSize;
+    private syncGaugeChartSize;
     private setupResizeObserver;
     private _onSparklineMouseMove;
     private _onSparklineMouseLeave;
@@ -279,6 +280,7 @@ export declare class NileKpiChart extends NileElement {
     private _onDescEnter;
     private _onLabelEnter;
     private _onGaugeEnter;
+    private _onTrendEnter;
     private _onTipLeave;
     private renderTrend;
     render(): TemplateResult;