@aquera/nile-visualization 2.9.7 → 2.9.8

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(20px, 9cqmin, 56px);
+    --nile-kpi-value-font-size: clamp(1rem, 5cqi + 0.25rem, 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));
     --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: clamp(0.75rem, 1.2cqmin, 1rem);
+    --nile-kpi-description-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     --nile-kpi-description-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     display: flex;
     flex-direction: column;
@@ -63,8 +63,7 @@ export const styles = css `
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
-    container-type: size;
-    container-name: kpi-card;
+    container-type: inline-size;
   }
 
   :host([hidden]) {
@@ -121,118 +120,6 @@ 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;
@@ -248,30 +135,15 @@ export const styles = css `
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
-    flex-shrink: 0;
   }
 
   .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 {
@@ -283,9 +155,10 @@ export const styles = css `
     line-height: 1.2;
     cursor: default;
     white-space: nowrap;
-    flex: 0 0 auto;
-    flex-shrink: 0;
-    overflow: visible;
+    min-width: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .kpi-prefix,
@@ -297,7 +170,7 @@ export const styles = css `
   }
 
   .kpi-trend {
-    display: flex;
+    display: inline-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));
@@ -306,36 +179,10 @@ 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: 0 1 auto;
+    flex-shrink: 1;
     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 {
@@ -366,9 +213,7 @@ export const styles = css `
   }
 
   .kpi-description {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
+    display: block;
     margin: 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-kpi-description-font-size);
@@ -376,31 +221,23 @@ 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: 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;
-    min-height: 0;
+    flex: 0 1 48px;
+    min-height: 22px;
     margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
-    overflow: hidden;
   }
 
   /* ── Container queries: scale down for narrow cards ── */
 
   /* Medium-small: ~280px and below — tighten padding, shrink prefix/suffix. */
-  @container (max-width: 10px) {
+  @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));
@@ -427,9 +264,8 @@ export const styles = css `
     }
 
     .kpi-sparkline {
-
+      flex-basis: 32px;
       min-height: 18px;
-
     }
   }
 
@@ -445,136 +281,6 @@ 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 {
@@ -584,13 +290,11 @@ export const styles = css `
 
   .kpi-gauge-container {
     width: 100%;
-    flex: 1 1 0;
-    min-width: 0;
-    min-height: 0;
-    max-width: 100%;
-    max-height: 100%;
+    max-width: 160px;
+    aspect-ratio: 1;
+    flex: 0 1 160px;
+    min-width: 72px;
     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' | 'sparkline' | 'gauge' | 'accent';
-export type SparklineType = 'area' | 'line' | 'column' | 'bar' | 'spline' | 'areaspline' | 'pie' | 'scatter';
+export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
+export type SparklineType = 'area' | 'line';
 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,7 +265,6 @@ export declare class NileKpiChart extends NileElement {
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
     private syncSparklineChartSize;
-    private syncGaugeChartSize;
     private setupResizeObserver;
     private _onSparklineMouseMove;
     private _onSparklineMouseLeave;
@@ -280,7 +279,6 @@ export declare class NileKpiChart extends NileElement {
     private _onDescEnter;
     private _onLabelEnter;
     private _onGaugeEnter;
-    private _onTrendEnter;
     private _onTipLeave;
     private renderTrend;
     render(): TemplateResult;