@aquera/nile-visualization 2.9.6 → 2.9.7

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

@@ -169,7 +169,6 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this._onSparklineMouseLeave = () => {
             this._hideTip();
         };
-        // ── Value / Gauge hover handlers ─────────────────────────────────────────
         this._onValueEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
             const rawNum = this.parseNumericValue(this.value);
@@ -196,6 +195,21 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             const rect = e.currentTarget.getBoundingClientRect();
             this._showTip(this.getTooltipContent(), rect.left + rect.width / 2, rect.top + rect.height / 2);
         };
+        this._onTrendEnter = (e) => {
+            const el = e.currentTarget;
+            if (this.trendValue === null)
+                return;
+            const textEl = el.querySelector('.kpi-trend-text');
+            const overflowing = textEl
+                ? textEl.scrollWidth > textEl.clientWidth
+                : el.scrollWidth > el.clientWidth;
+            if (!overflowing)
+                return;
+            const percent = Math.abs(this.trendValue).toFixed(1) + '%';
+            const text = this.trendLabel ? `${percent} ${this.trendLabel}` : percent;
+            const rect = el.getBoundingClientRect();
+            this._showTip(text, rect.left + rect.width / 2, rect.top);
+        };
         this._onTipLeave = () => {
             this._hideTip();
         };
@@ -634,14 +648,32 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (!this.sparklineChart || !this.sparklineContainer)
             return;
         const rect = this.sparklineContainer.getBoundingClientRect();
-        const h = Math.max(22, Math.round(rect.height));
-        this.sparklineChart.setSize(null, h, false);
+        const w = Math.round(rect.width);
+        const h = Math.round(rect.height);
+        if (w > 0 && h > 0) {
+            this.sparklineChart.setSize(w, h, false);
+        }
+        this.sparklineChart.reflow();
+    }
+    syncGaugeChartSize() {
+        if (!this.gaugeChart || !this.gaugeContainer)
+            return;
+        const rect = this.gaugeContainer.getBoundingClientRect();
+        const w = Math.max(72, Math.round(rect.width));
+        const h = Math.max(72, Math.round(rect.height));
+        const side = Math.min(w, h);
+        const scaledY = Math.round((this.gaugeLabelYOffset * side) / 160);
+        this.gaugeChart.update({
+            plotOptions: { solidgauge: { dataLabels: { y: scaledY } } },
+        }, false, false);
+        this.gaugeChart.setSize(w, h, false);
     }
     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)
@@ -653,8 +685,8 @@ 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');
-        const plotKey = seriesType;
-        const fillColor = seriesType === 'area'
+        const isPie = seriesType === 'pie';
+        const fillColor = seriesType === 'area' || seriesType === 'areaspline'
             ? {
                 fillColor: {
                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -665,24 +697,70 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 },
             }
             : {};
-        const defaults = {
-            chart: { type: seriesType, height: this.sparklineHeight, margin: [2, 0, 2, 0], backgroundColor: 'transparent' },
-            title: { text: undefined },
-            subtitle: { text: undefined },
-            xAxis: { visible: false },
-            yAxis: { visible: false },
-            legend: { enabled: false },
-            tooltip: { enabled: false },
-            plotOptions: {
-                [plotKey]: {
+        let pieData = [];
+        if (isPie && this.sparkline.length) {
+            const n = this.sparkline.length;
+            const picks = [
+                this.sparkline[0],
+                this.sparkline[Math.floor(n / 3)],
+                this.sparkline[Math.floor((2 * n) / 3)],
+                this.sparkline[n - 1],
+            ];
+            pieData = picks.map(y => ({ y }));
+        }
+        const plotOptions = isPie
+            ? {
+                pie: {
+                    dataLabels: { enabled: false, connectorWidth: 0 },
+                    showInLegend: false,
+                    borderWidth: 0,
+                    borderRadius: 0,
+                    size: '100%',
+                    center: ['50%', '50%'],
+                    slicedOffset: 0,
+                    allowPointSelect: false,
+                    states: { hover: { halo: null } },
+                    colors: [
+                        brandColor + 'ff',
+                        brandColor + 'cc',
+                        brandColor + '99',
+                        brandColor + '66',
+                    ],
+                },
+            }
+            : {
+                [seriesType]: {
                     marker: { enabled: this.sparklineMarkers },
                     lineWidth,
                     lineColor: brandColor,
+                    color: brandColor,
                     ...fillColor,
                     states: { hover: { lineWidth } },
                 },
+            };
+        // Let the chart inherit the container's height by default. An explicit
+        // height in options would freeze the chart at that size until setSize() is
+        // called, which made the initial render appear as a thin sliver.
+        const initialHeight = this.sparklineContainer?.clientHeight || null;
+        const defaults = {
+            chart: {
+                type: seriesType,
+                height: initialHeight && initialHeight > 0 ? initialHeight : null,
+                margin: isPie ? [0, 0, 0, 0] : [2, 0, 2, 0],
+                backgroundColor: 'transparent',
             },
-            series: [{ type: seriesType, data: this.sparkline }],
+            title: { text: undefined },
+            subtitle: { text: undefined },
+            xAxis: { visible: false },
+            yAxis: { visible: false },
+            legend: { enabled: false },
+            tooltip: { enabled: false },
+            plotOptions,
+            series: [{
+                    type: seriesType,
+                    name: '',
+                    data: isPie ? pieData : this.sparkline,
+                }],
             credits: { enabled: false },
         };
         return { ...defaults, ...this.options };
@@ -701,7 +779,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         return {
             chart: {
                 type: 'solidgauge',
-                height: this.gaugeHeight,
+                height: null,
+                width: null,
                 margin: [0, 0, 0, 0],
                 backgroundColor: 'transparent',
             },
@@ -739,9 +818,18 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                         useHTML: true,
                         formatter: (() => {
                             const self = this;
+                            const basePx = (() => {
+                                const m = /^(-?\d*\.?\d+)px$/.exec(labelFontSize);
+                                return m ? parseFloat(m[1]) : 28;
+                            })();
                             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 side = chart
+                                    ? Math.min(chart.plotWidth ?? 160, chart.plotHeight ?? 160)
+                                    : 160;
+                                const scaledPx = Math.max(8, Math.round((basePx * side) / 160));
+                                return `<div style="text-align:center"><span style="font-size:${scaledPx}px;font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
                             };
                         })(),
                     },
@@ -771,7 +859,31 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
-        requestAnimationFrame(() => this.syncSparklineChartSize());
+        // Retry sync over several frames until the measured container size stabilises.
+        // Initial chart creation may run before parent flex layout settles, so the
+        // first measure can be too small; we keep syncing until we see two
+        // consecutive identical sizes.
+        let lastW = -1, lastH = -1, stable = 0, frames = 0;
+        const tick = () => {
+            if (!this.sparklineChart || !this.sparklineContainer)
+                return;
+            const rect = this.sparklineContainer.getBoundingClientRect();
+            const w = Math.round(rect.width);
+            const h = Math.round(rect.height);
+            if (w > 0 && h > 0)
+                this.sparklineChart.setSize(w, h, false);
+            this.sparklineChart.reflow();
+            if (w === lastW && h === lastH)
+                stable++;
+            else
+                stable = 0;
+            lastW = w;
+            lastH = h;
+            frames++;
+            if (stable < 2 && frames < 30)
+                requestAnimationFrame(tick);
+        };
+        requestAnimationFrame(tick);
         this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
         this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
@@ -783,6 +895,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroyGauge();
         this.gaugeChart = this._hc.chart(this.gaugeContainer, this.buildGaugeOptions());
+        requestAnimationFrame(() => this.syncGaugeChartSize());
         this.emit('nile-chart-ready', { chart: this.gaugeChart });
     }
     destroySparkline() {
@@ -811,8 +924,14 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             return undefined;
         const dir = this.trendDirection;
         const formatted = Math.abs(this.trendValue).toFixed(1) + '%';
+        const fullText = this.trendLabel ? `${formatted} ${this.trendLabel}` : formatted;
         return html `
-      <span class="kpi-trend kpi-trend--${dir}">
+      <span
+        class="kpi-trend kpi-trend--${dir}"
+        data-full-text=${fullText}
+        @mouseenter=${this._onTrendEnter}
+        @mouseleave=${this._onTipLeave}
+      >
         <span class="kpi-trend-arrow">
           ${dir === 'up'
             ? html `<svg viewBox="0 0 12 12"><path d="M6 2.5l4 5H2z"/></svg>`
@@ -820,7 +939,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-text">${formatted}${this.trendLabel ? html ` ${this.trendLabel}` : nothing}</span>
       </span>
     `;
     }
@@ -832,9 +951,9 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         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;
+        const showValueTooltip = !!fmt && fmt.display !== fmt.full;
         return html `
-      <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
+      <div class="kpi ${isGauge ? 'kpi--gauge' : ''} ${!isGauge && (this.variant !== 'sparkline' || this.sparkline.length === 0) ? 'kpi--no-chart' : ''} ${!this.description ? 'kpi--no-desc' : ''} ${this.trendValue === null ? 'kpi--no-trend' : ''}">
         ${this.label ? html `<p
           class="kpi-label"
           @mouseenter=${this._onLabelEnter}
@@ -853,8 +972,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
           ${!isGauge ? html `
             <h2
               class="kpi-value"
-              @mouseenter=${showTooltip ? this._onValueEnter : nothing}
-              @mouseleave=${showTooltip ? this._onTipLeave : nothing}
+              @mouseenter=${showValueTooltip ? this._onValueEnter : nothing}
+              @mouseleave=${showValueTooltip ? this._onTipLeave : 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>

package/package.json

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