@aquera/nile-visualization 2.9.9 → 2.9.11

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

@@ -140,11 +140,18 @@ let NileKpiChart = class NileKpiChart extends NileElement {
          * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
          */
         this.embedInNileChart = false;
+        // ── Chart sizing ─────────────────────────────────────────────────────────
+        this._lastSparkSize = { w: 0, h: 0 };
+        this._lastGaugeSize = { w: 0, h: 0 };
+        this._gaugeRafScheduled = false;
         // ── Sparkline mousemove tooltip ──────────────────────────────────────────
         this._onSparklineMouseMove = (e) => {
             const chart = this.sparklineChart;
             if (!chart || !this.sparklineContainer)
                 return;
+            // Pie uses Highcharts' native tooltip — the x-snap logic below is meaningless for radial layouts.
+            if (this.sparklineType === 'pie')
+                return;
             const series = chart.series[0];
             if (!series?.points?.length)
                 return;
@@ -192,10 +199,29 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             const rect = el.getBoundingClientRect();
             this._showTip(this.label ?? '', rect.left + rect.width / 2, rect.top);
         };
+        this._onTrendEnter = (e) => {
+            const el = e.currentTarget;
+            // Only show a tooltip when the trend is actually clipped/ellipsized.
+            const hasEllipsis = getComputedStyle(el).textOverflow === 'ellipsis';
+            if (!hasEllipsis)
+                return;
+            if (el.scrollWidth <= el.clientWidth + 2)
+                return;
+            const rect = el.getBoundingClientRect();
+            const dir = this.trendDirection;
+            const arrow = dir === 'up' ? '▲' : dir === 'down' ? '▼' : '–';
+            const pct = this.trendValue !== null ? `${Math.abs(this.trendValue).toFixed(1)}%` : '';
+            const text = `${arrow} ${pct}${this.trendLabel ? ' ' + this.trendLabel : ''}`.trim();
+            this._showTip(text, rect.left + rect.width / 2, rect.top);
+        };
         this._onGaugeEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
             this._showTip(this.getTooltipContent(), rect.left + rect.width / 2, rect.top + rect.height / 2);
         };
+        this._onTrendKeydown = (e) => {
+            if (e.key === 'Escape')
+                this._hideTip();
+        };
         this._onTipLeave = () => {
             this._hideTip();
         };
@@ -623,29 +649,83 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (gaugeProps.some(p => changedProperties.has(p))) {
             if (this.gaugeChart) {
                 this.gaugeChart.update(this.buildGaugeOptions(), true, true);
+                requestAnimationFrame(() => this.syncGaugeChartSize());
             }
             else {
                 this.initGauge();
             }
         }
     }
-    // ── Chart sizing ─────────────────────────────────────────────────────────
+    _scheduleGaugeSync() {
+        if (this._gaugeRafScheduled)
+            return;
+        this._gaugeRafScheduled = true;
+        requestAnimationFrame(() => {
+            this._gaugeRafScheduled = false;
+            this._syncGaugeNow();
+        });
+    }
+    _syncGaugeNow() {
+        if (!this.gaugeContainer || !this.gaugeSlot || this.variant !== 'gauge')
+            return;
+        // Hide the gauge container while measuring the slot
+        const prevDisplay = this.gaugeContainer.style.display;
+        this.gaugeContainer.style.display = 'none';
+        const rect = this.gaugeSlot.getBoundingClientRect();
+        this.gaugeContainer.style.display = prevDisplay;
+        const w = Math.max(1, Math.round(rect.width));
+        const h = Math.max(1, Math.round(rect.height));
+        const size = Math.max(1, Math.min(w, h));
+        // writing its size re-fires the observer.
+        if (size === this._lastGaugeSize.w && this.gaugeChart)
+            return;
+        this._lastGaugeSize = { w: size, h: size };
+        this.gaugeContainer.style.width = `${size}px`;
+        this.gaugeContainer.style.height = `${size}px`;
+        if (!this._hc)
+            return;
+        if (this.gaugeChart) {
+            this.gaugeChart.setSize(size, size, false);
+        }
+        else {
+            this.gaugeChart = this._hc.chart(this.gaugeContainer, this.buildGaugeOptions());
+            this.gaugeChart.setSize(size, size, false);
+        }
+    }
+    syncGaugeChartSize() {
+        // always measure after the layout
+        this._scheduleGaugeSync();
+    }
     syncSparklineChartSize() {
         if (!this.sparklineChart || !this.sparklineContainer)
             return;
         const rect = this.sparklineContainer.getBoundingClientRect();
+        const w = Math.max(1, Math.round(rect.width));
         const h = Math.max(22, Math.round(rect.height));
-        this.sparklineChart.setSize(null, h, false);
+        if (w === this._lastSparkSize.w && h === this._lastSparkSize.h)
+            return;
+        this._lastSparkSize = { w, h };
+        // Rebuild the chart 
+        this.destroySparkline();
+        if (!this._hc)
+            return;
+        this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
+        this.sparklineChart.setSize(w, h, false);
+        this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
+        this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
     }
     setupResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
             this.syncSparklineChartSize();
-            this.gaugeChart?.reflow();
+            this.syncGaugeChartSize();
         });
+        this.resizeObserver.observe(this);
         if (this.sparklineContainer)
             this.resizeObserver.observe(this.sparklineContainer);
         if (this.gaugeContainer)
             this.resizeObserver.observe(this.gaugeContainer);
+        if (this.gaugeSlot)
+            this.resizeObserver.observe(this.gaugeSlot);
     }
     // ── Chart options ────────────────────────────────────────────────────────
     buildSparklineOptions() {
@@ -653,8 +733,37 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         const lineWidth = this.sparklineLineWidth;
         const seriesType = this.sparklineType;
         const topAlpha = Math.round(Math.min(1, Math.max(0, this.sparklineFillOpacity)) * 255).toString(16).padStart(2, '0');
+        // Pie variant — a compact pie with no slice labels / connectors.
+        if (seriesType === 'pie') {
+            const defaults = {
+                chart: { type: 'pie', height: this.sparklineHeight, margin: [0, 0, 0, 0], backgroundColor: 'transparent' },
+                title: { text: undefined },
+                subtitle: { text: undefined },
+                legend: { enabled: false },
+                tooltip: {
+                    enabled: true,
+                    outside: true,
+                    pointFormat: '<b>{point.y}</b> ({point.percentage:.1f}%)',
+                },
+                plotOptions: {
+                    pie: {
+                        size: '100%',
+                        borderWidth: 0,
+                        dataLabels: { enabled: false },
+                        states: { hover: { enabled: true } },
+                        allowPointSelect: false,
+                    },
+                },
+                series: [{ type: 'pie', data: this.sparkline.map((v, i) => ({ y: v, name: `Slice ${i + 1}` })) }],
+                credits: { enabled: false },
+            };
+            return { ...defaults, ...this.options };
+        }
         const plotKey = seriesType;
-        const fillColor = seriesType === 'area'
+        const isAreaLike = seriesType === 'area' || seriesType === 'areaspline';
+        const isBarLike = seriesType === 'column' || seriesType === 'bar';
+        const isScatter = seriesType === 'scatter';
+        const fillColor = isAreaLike
             ? {
                 fillColor: {
                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -665,6 +774,28 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 },
             }
             : {};
+        const seriesPlotOptions = isBarLike
+            ? {
+                color: brandColor,
+                borderWidth: 0,
+                pointPadding: 0.05,
+                groupPadding: 0.05,
+                states: { hover: { enabled: false } },
+            }
+            : isScatter
+                ? {
+                    color: brandColor,
+                    marker: { enabled: true, radius: Math.max(2, lineWidth) },
+                    states: { hover: { enabled: false } },
+                }
+                : {
+                    marker: { enabled: this.sparklineMarkers },
+                    lineWidth,
+                    lineColor: brandColor,
+                    color: brandColor,
+                    ...fillColor,
+                    states: { hover: { lineWidth } },
+                };
         const defaults = {
             chart: { type: seriesType, height: this.sparklineHeight, margin: [2, 0, 2, 0], backgroundColor: 'transparent' },
             title: { text: undefined },
@@ -674,13 +805,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             legend: { enabled: false },
             tooltip: { enabled: false },
             plotOptions: {
-                [plotKey]: {
-                    marker: { enabled: this.sparklineMarkers },
-                    lineWidth,
-                    lineColor: brandColor,
-                    ...fillColor,
-                    states: { hover: { lineWidth } },
-                },
+                [plotKey]: seriesPlotOptions,
             },
             series: [{ type: seriesType, data: this.sparkline }],
             credits: { enabled: false },
@@ -692,17 +817,22 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         const trackColor = this.gaugeTrackColor || '#E5E7EB';
         const innerRadius = this.gaugeInnerRadius || '80%';
         const outerRadius = this.gaugeOuterRadius || '100%';
-        const labelFontSize = this.formatCssLength(this.gaugeLabelFontSize) ?? '28px';
+        const maxLabelFontPx = (() => {
+            const raw = this.gaugeLabelFontSize;
+            if (typeof raw === 'number' && Number.isFinite(raw))
+                return raw;
+            const m = String(raw).match(/^(\d+(?:\.\d+)?)/);
+            return m ? Number(m[1]) : 28;
+        })();
         const labelColor = this.gaugeLabelColor || '#101828';
         const labelFontWeight = this.gaugeLabelFontWeight ?? 600;
-        const displayValue = typeof this.value !== 'undefined' && this.value !== ''
-            ? (typeof this.value === 'number' ? this.value : this.gaugeValue)
-            : this.gaugeValue;
+        const parsedValue = this.parseNumericValue(this.value);
+        const displayValue = parsedValue != null ? parsedValue : this.gaugeValue;
         return {
             chart: {
                 type: 'solidgauge',
-                height: this.gaugeHeight,
                 margin: [0, 0, 0, 0],
+                spacing: [0, 0, 0, 0],
                 backgroundColor: 'transparent',
             },
             title: { text: undefined },
@@ -735,13 +865,17 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                     dataLabels: {
                         enabled: true,
                         borderWidth: 0,
-                        y: this.gaugeLabelYOffset,
+                        y: 0,
+                        verticalAlign: 'middle',
                         useHTML: true,
                         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>`;
+                                const chart = this.series?.chart;
+                                const size = chart ? Math.min(chart.plotWidth || chart.chartWidth || 160, chart.plotHeight || chart.chartHeight || 160) : 160;
+                                const fontPx = Math.max(10, Math.min(maxLabelFontPx, Math.round(size * 0.18)));
+                                return `<div style="text-align:center;line-height:1;"><span style="font-size:${fontPx}px;font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
                             };
                         })(),
                     },
@@ -771,7 +905,11 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
-        requestAnimationFrame(() => this.syncSparklineChartSize());
+        // Force a reflow after the next layout pass 
+        requestAnimationFrame(() => {
+            this.syncSparklineChartSize();
+            requestAnimationFrame(() => this.syncSparklineChartSize());
+        });
         this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
         this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
@@ -783,6 +921,13 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroyGauge();
         this.gaugeChart = this._hc.chart(this.gaugeContainer, this.buildGaugeOptions());
+        // Force the chart to match the container's measured size
+        this._lastGaugeSize = { w: 0, h: 0 };
+        this.syncGaugeChartSize();
+        requestAnimationFrame(() => {
+            this.syncGaugeChartSize();
+            requestAnimationFrame(() => this.syncGaugeChartSize());
+        });
         this.emit('nile-chart-ready', { chart: this.gaugeChart });
     }
     destroySparkline() {
@@ -811,8 +956,19 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             return undefined;
         const dir = this.trendDirection;
         const formatted = Math.abs(this.trendValue).toFixed(1) + '%';
+        const trendAriaLabel = `Trend ${dir === 'up' ? 'up' : dir === 'down' ? 'down' : 'neutral'} ${formatted}${this.trendLabel ? ' ' + this.trendLabel : ''}`.trim();
         return html `
-      <span class="kpi-trend kpi-trend--${dir}">
+      <span
+        class="kpi-trend kpi-trend--${dir}"
+        tabindex="0"
+        role="button"
+        aria-label=${trendAriaLabel}
+        @mouseenter=${this._onTrendEnter}
+        @mouseleave=${this._onTipLeave}
+        @focus=${this._onTrendEnter}
+        @blur=${this._onTipLeave}
+        @keydown=${this._onTrendKeydown}
+      >
         <span class="kpi-trend-arrow">
           ${dir === 'up'
             ? html `<svg viewBox="0 0 12 12"><path d="M6 2.5l4 5H2z"/></svg>`
@@ -820,7 +976,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 ? html `<svg viewBox="0 0 12 12"><path d="M6 9.5l4-5H2z"/></svg>`
                 : html `<svg viewBox="0 0 12 12"><path d="M2 6.5h8" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`}
         </span>
-        ${formatted}${this.trendLabel ? html ` <span>${this.trendLabel}</span>` : nothing}
+        <span class="kpi-trend-value">${formatted}</span>${this.trendLabel ? html ` <span class="kpi-trend-label">${this.trendLabel}</span>` : nothing}
       </span>
     `;
     }
@@ -837,24 +993,40 @@ let NileKpiChart = class NileKpiChart extends NileElement {
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
         ${this.label ? html `<p
           class="kpi-label"
+          tabindex="0"
           @mouseenter=${this._onLabelEnter}
           @mouseleave=${this._onTipLeave}
+          @focus=${this._onLabelEnter}
+          @blur=${this._onTipLeave}
+          @keydown=${this._onTrendKeydown}
         >${this.label}</p>` : nothing}
 
         ${isGauge ? html `
-          <div
-            class="kpi-gauge-container"
-            @mouseenter=${this._onGaugeEnter}
-            @mouseleave=${this._onTipLeave}
-          ></div>
+          <div class="kpi-gauge-slot">
+            <div
+              class="kpi-gauge-container"
+              tabindex="0"
+              role="img"
+              aria-label=${this.getTooltipContent()}
+              @mouseenter=${this._onGaugeEnter}
+              @mouseleave=${this._onTipLeave}
+              @focus=${this._onGaugeEnter}
+              @blur=${this._onTipLeave}
+              @keydown=${this._onTrendKeydown}
+            ></div>
+          </div>
         ` : nothing}
 
         <div class="kpi-value-row">
           ${!isGauge ? html `
             <h2
               class="kpi-value"
+              tabindex=${showTooltip ? '0' : nothing}
               @mouseenter=${showTooltip ? this._onValueEnter : nothing}
               @mouseleave=${showTooltip ? this._onTipLeave : nothing}
+              @focus=${showTooltip ? this._onValueEnter : nothing}
+              @blur=${showTooltip ? this._onTipLeave : nothing}
+              @keydown=${showTooltip ? this._onTrendKeydown : 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>
@@ -866,8 +1038,12 @@ let NileKpiChart = class NileKpiChart extends NileElement {
 
         ${this.description ? html `<p
           class="kpi-description"
+          tabindex="0"
           @mouseenter=${this._onDescEnter}
           @mouseleave=${this._onTipLeave}
+          @focus=${this._onDescEnter}
+          @blur=${this._onTipLeave}
+          @keydown=${this._onTrendKeydown}
         >${this.description}</p>` : nothing}
 
         ${this.sparkline.length && !isGauge ? html `<div class="kpi-sparkline"></div>` : nothing}
@@ -882,6 +1058,9 @@ __decorate([
 __decorate([
     query('.kpi-gauge-container')
 ], NileKpiChart.prototype, "gaugeContainer", void 0);
+__decorate([
+    query('.kpi-gauge-slot')
+], NileKpiChart.prototype, "gaugeSlot", void 0);
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "config", void 0);

package/package.json

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