@aquera/nile-visualization 1.8.0 → 1.9.0

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

@@ -106,6 +106,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.cardPaddingVertical = '';
         this.cardPaddingHorizontal = '';
         this.contentGap = '';
+        /** Accent bar colour for the 'accent' variant. */
+        this.accentColor = '';
         // ── Label ──
         this.labelColor = '';
         this.labelFontSize = '';
@@ -124,6 +126,14 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.loading = false;
         /** Highcharts options override for the sparkline or gauge. */
         this.options = {};
+        /** How to abbreviate the numeric value. 'auto' picks K/M/B/T by magnitude. Default: 'auto'. */
+        this.valueFormat = 'auto';
+        /** Base unit combined with the magnitude prefix (e.g. 'L' → "1.5KL"). */
+        this.unit = '';
+        /** Decimal places for the abbreviated value. null = auto (0–2 by magnitude). */
+        this.precision = null;
+        /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+        this.locale = '';
         /**
          * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
          */
@@ -160,7 +170,25 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         // ── Value / Gauge hover handlers ─────────────────────────────────────────
         this._onValueEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
-            this._showTip(this.getTooltipContent(), rect.left + rect.width / 2, rect.top);
+            const rawNum = this.parseNumericValue(this.value);
+            const full = rawNum != null ? this.formatValue(rawNum).full : String(this.value ?? '');
+            const prefix = this.prefix ?? '';
+            const suffix = this.suffix ?? '';
+            this._showTip(`${prefix}${full}${suffix}`.trim(), rect.left + rect.width / 2, rect.top);
+        };
+        this._onDescEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showTip(this.description ?? '', rect.left + rect.width / 2, rect.top);
+        };
+        this._onLabelEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showTip(this.label ?? '', rect.left + rect.width / 2, rect.top);
         };
         this._onGaugeEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
@@ -203,6 +231,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.style.removeProperty(prop);
         };
         const len = (val) => this.formatCssLength(val) ?? '';
+        set('--nile-kpi-accent-color', this.accentColor);
         set('--nile-kpi-card-bg', this.cardBackground);
         set('--nile-kpi-card-border-color', this.cardBorderColor);
         set('--nile-kpi-card-border-width', len(this.cardBorderWidth));
@@ -252,11 +281,12 @@ let NileKpiChart = class NileKpiChart extends NileElement {
     }
     formatTooltipNumber(n) {
         const maxFractionDigits = Number.isInteger(n) ? 0 : 6;
-        return new Intl.NumberFormat(undefined, {
+        const grouped = new Intl.NumberFormat(this.locale || undefined, {
             useGrouping: true,
             minimumFractionDigits: 0,
             maximumFractionDigits: maxFractionDigits,
         }).format(n);
+        return `${grouped}${this.unit ?? ''}`;
     }
     inferSparklineTooltipScale() {
         if (!this.sparkline?.length)
@@ -284,6 +314,85 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             : this.formatTooltipNumber(numeric);
         return `${prefix}${valueText}${suffix}`.trim();
     }
+    formatValue(raw) {
+        const fmt = this.valueFormat;
+        const baseUnit = this.unit ?? '';
+        const abs = Math.abs(raw);
+        const sign = raw < 0 ? '-' : '';
+        const maxFrac = Number.isInteger(raw) ? 0 : 6;
+        const tooltipLocale = this.locale || undefined;
+        const displayLocale = this.locale || undefined;
+        const full = `${new Intl.NumberFormat(tooltipLocale, {
+            useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: maxFrac,
+        }).format(raw)}${baseUnit}`;
+        const display0 = `${new Intl.NumberFormat(displayLocale, {
+            useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: maxFrac,
+        }).format(raw)}${baseUnit}`;
+        if (fmt === 'none')
+            return { display: display0, full, abbreviated: false };
+        let divisor = 0;
+        let magnitude = '';
+        if (fmt === 'K') {
+            divisor = 1e3;
+            magnitude = 'K';
+        }
+        else if (fmt === 'M') {
+            divisor = 1e6;
+            magnitude = 'M';
+        }
+        else if (fmt === 'B') {
+            divisor = 1e9;
+            magnitude = 'B';
+        }
+        else if (fmt === 'T') {
+            divisor = 1e12;
+            magnitude = 'T';
+        }
+        else {
+            if (abs >= 1e12) {
+                divisor = 1e12;
+                magnitude = 'T';
+            }
+            else if (abs >= 1e9) {
+                divisor = 1e9;
+                magnitude = 'B';
+            }
+            else if (abs >= 1e6) {
+                divisor = 1e6;
+                magnitude = 'M';
+            }
+            else if (abs >= 1e3) {
+                divisor = 1e3;
+                magnitude = 'K';
+            }
+        }
+        if (!divisor)
+            return { display: display0, full, abbreviated: false };
+        const divided = abs / divisor;
+        let decimals;
+        if (this.precision !== null) {
+            decimals = Math.max(0, Math.floor(this.precision));
+        }
+        else {
+            decimals = divided >= 100 ? 0 : divided >= 10 ? 1 : 2;
+        }
+        let numStr;
+        if (this._hc) {
+            numStr = this._hc.numberFormat(divided, decimals, undefined, '');
+            if (this.precision === null) {
+                const dec = this._hc.options?.lang?.decimalPoint ?? '.';
+                const escapedDec = dec.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                numStr = numStr.replace(new RegExp(`${escapedDec}0*$`), '').replace(new RegExp(`${escapedDec}$`), '');
+            }
+        }
+        else {
+            numStr = divided.toFixed(decimals);
+            if (this.precision === null && numStr.includes('.')) {
+                numStr = numStr.replace(/\.?0+$/, '');
+            }
+        }
+        return { display: `${sign}${numStr}${magnitude}${baseUnit}`, full, abbreviated: true };
+    }
     // ── Config ───────────────────────────────────────────────────────────────
     applyConfig(cfg) {
         const { chart: c, aq } = cfg;
@@ -358,6 +467,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loadingText = c.loadingText;
             if (c.tooltipEnabled !== undefined)
                 this.tooltipEnabled = c.tooltipEnabled;
+            if (c.accentColor !== undefined)
+                this.accentColor = c.accentColor;
             if (c.cardBackground !== undefined)
                 this.cardBackground = c.cardBackground;
             if (c.cardBorderColor !== undefined)
@@ -400,6 +511,14 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loading = c.loading;
             if (c.options !== undefined)
                 this.options = c.options;
+            if (c.valueFormat !== undefined)
+                this.valueFormat = c.valueFormat;
+            if (c.precision !== undefined)
+                this.precision = c.precision;
+            if (c.locale !== undefined)
+                this.locale = c.locale;
+            if (c.unit !== undefined)
+                this.unit = c.unit;
             if ('height' in c) {
                 const h = this.formatCssLength(c.height);
                 if (h) {
@@ -426,6 +545,9 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         super.connectedCallback();
         ensureTooltipStyles();
         this._createTipEl();
+        if (!this._hc) {
+            getHighcharts().then(hc => { this._hc = hc; this.requestUpdate(); });
+        }
         if (this.config)
             this.applyConfig(this.config);
     }
@@ -460,7 +582,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.initSparkline();
             }
         }
-        const cssVarProps = ['cardBackground', 'cardBorderColor', 'cardBorderWidth', 'cardBorderRadius',
+        const cssVarProps = ['accentColor', 'cardBackground', 'cardBorderColor', 'cardBorderWidth', 'cardBorderRadius',
             'cardShadow', 'cardShadowHover', 'cardPaddingVertical', 'cardPaddingHorizontal', 'contentGap',
             'labelColor', 'labelFontSize', 'labelFontWeight', 'descriptionColor', 'descriptionFontSize',
             'prefixSuffixColor', 'prefixSuffixFontSize', 'trendUpColor', 'trendDownColor', 'trendNeutralColor',
@@ -589,7 +711,13 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                         borderWidth: 0,
                         y: this.gaugeLabelYOffset,
                         useHTML: true,
-                        format: `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${this.prefix}{y}${this.suffix}</span></div>`,
+                        formatter: (() => {
+                            const self = this;
+                            return function () {
+                                const fmtResult = self.formatValue(this.y ?? 0);
+                                return `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
+                            };
+                        })(),
                     },
                     rounded: this.gaugeRounded,
                     linecap: 'round',
@@ -675,9 +803,17 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             return html `<div class="chart-loading">${this.loadingText}</div>`;
         }
         const isGauge = this.variant === 'gauge';
+        const rawNum = this.parseNumericValue(this.value);
+        const fmt = rawNum != null ? this.formatValue(rawNum) : null;
+        const displayValue = fmt ? fmt.display : String(this.value ?? '');
+        const showTooltip = !!fmt && fmt.display !== fmt.full;
         return html `
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
-        ${this.label ? html `<p class="kpi-label">${this.label}</p>` : nothing}
+        ${this.label ? html `<p
+          class="kpi-label"
+          @mouseenter=${this._onLabelEnter}
+          @mouseleave=${this._onTipLeave}
+        >${this.label}</p>` : nothing}
 
         ${isGauge ? html `
           <div
@@ -691,10 +827,10 @@ let NileKpiChart = class NileKpiChart extends NileElement {
           ${!isGauge ? html `
             <h2
               class="kpi-value"
-              @mouseenter=${this._onValueEnter}
-              @mouseleave=${this._onTipLeave}
+              @mouseenter=${showTooltip ? this._onValueEnter : nothing}
+              @mouseleave=${showTooltip ? this._onTipLeave : nothing}
             >
-              ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
+              ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${displayValue}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
             </h2>
           ` : nothing}
           ${!isGauge ? this.renderTrend() : nothing}
@@ -702,7 +838,11 @@ let NileKpiChart = class NileKpiChart extends NileElement {
 
         ${isGauge ? this.renderTrend() : nothing}
 
-        ${this.description ? html `<p class="kpi-description">${this.description}</p>` : nothing}
+        ${this.description ? html `<p
+          class="kpi-description"
+          @mouseenter=${this._onDescEnter}
+          @mouseleave=${this._onTipLeave}
+        >${this.description}</p>` : nothing}
 
         ${this.sparkline.length && !isGauge ? html `<div class="kpi-sparkline"></div>` : nothing}
       </div>
@@ -851,6 +991,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'content-gap' })
 ], NileKpiChart.prototype, "contentGap", void 0);
+__decorate([
+    property({ type: String, attribute: 'accent-color' })
+], NileKpiChart.prototype, "accentColor", void 0);
 __decorate([
     property({ type: String, attribute: 'label-color' })
 ], NileKpiChart.prototype, "labelColor", void 0);
@@ -887,6 +1030,18 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "options", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-format' })
+], NileKpiChart.prototype, "valueFormat", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "unit", void 0);
+__decorate([
+    property({ type: Number })
+], NileKpiChart.prototype, "precision", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "locale", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'embed-in-nile-chart' })
 ], NileKpiChart.prototype, "embedInNileChart", void 0);

package/package.json

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