@aquera/nile-visualization 2.9.7 → 2.9.9

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

@@ -169,6 +169,7 @@ 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);
@@ -195,21 +196,6 @@ 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();
         };
@@ -648,32 +634,14 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         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();
-    }
-    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);
+        const h = Math.max(22, Math.round(rect.height));
+        this.sparklineChart.setSize(null, h, false);
     }
     setupResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
             this.syncSparklineChartSize();
-            this.syncGaugeChartSize();
+            this.gaugeChart?.reflow();
         });
-        this.resizeObserver.observe(this);
         if (this.sparklineContainer)
             this.resizeObserver.observe(this.sparklineContainer);
         if (this.gaugeContainer)
@@ -685,8 +653,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 isPie = seriesType === 'pie';
-        const fillColor = seriesType === 'area' || seriesType === 'areaspline'
+        const plotKey = seriesType;
+        const fillColor = seriesType === 'area'
             ? {
                 fillColor: {
                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -697,70 +665,24 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 },
             }
             : {};
-        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',
-            },
+            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,
-            series: [{
-                    type: seriesType,
-                    name: '',
-                    data: isPie ? pieData : this.sparkline,
-                }],
+            plotOptions: {
+                [plotKey]: {
+                    marker: { enabled: this.sparklineMarkers },
+                    lineWidth,
+                    lineColor: brandColor,
+                    ...fillColor,
+                    states: { hover: { lineWidth } },
+                },
+            },
+            series: [{ type: seriesType, data: this.sparkline }],
             credits: { enabled: false },
         };
         return { ...defaults, ...this.options };
@@ -779,8 +701,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         return {
             chart: {
                 type: 'solidgauge',
-                height: null,
-                width: null,
+                height: this.gaugeHeight,
                 margin: [0, 0, 0, 0],
                 backgroundColor: 'transparent',
             },
@@ -818,18 +739,9 @@ 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);
-                                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>`;
+                                return `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
                             };
                         })(),
                     },
@@ -859,31 +771,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
-        // 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);
+        requestAnimationFrame(() => this.syncSparklineChartSize());
         this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
         this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
@@ -895,7 +783,6 @@ 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() {
@@ -924,14 +811,8 @@ 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}"
-        data-full-text=${fullText}
-        @mouseenter=${this._onTrendEnter}
-        @mouseleave=${this._onTipLeave}
-      >
+      <span class="kpi-trend kpi-trend--${dir}">
         <span class="kpi-trend-arrow">
           ${dir === 'up'
             ? html `<svg viewBox="0 0 12 12"><path d="M6 2.5l4 5H2z"/></svg>`
@@ -939,7 +820,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>
-        <span class="kpi-trend-text">${formatted}${this.trendLabel ? html ` ${this.trendLabel}` : nothing}</span>
+        ${formatted}${this.trendLabel ? html ` <span>${this.trendLabel}</span>` : nothing}
       </span>
     `;
     }
@@ -951,9 +832,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 showValueTooltip = !!fmt && fmt.display !== fmt.full;
+        const showTooltip = !!fmt && fmt.display !== fmt.full;
         return html `
-      <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' : ''}">
+      <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
         ${this.label ? html `<p
           class="kpi-label"
           @mouseenter=${this._onLabelEnter}
@@ -972,8 +853,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
           ${!isGauge ? html `
             <h2
               class="kpi-value"
-              @mouseenter=${showValueTooltip ? this._onValueEnter : nothing}
-              @mouseleave=${showValueTooltip ? this._onTipLeave : nothing}
+              @mouseenter=${showTooltip ? this._onValueEnter : nothing}
+              @mouseleave=${showTooltip ? 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.7",
+  "version": "2.9.9",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",

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

@@ -1,2 +0,0 @@
-import { type TemplateResult } from 'lit';
-export declare function renderChartSkeleton(chartType: string | undefined): TemplateResult;

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

@@ -1,188 +0,0 @@
-import { html } from 'lit';
-const SKELETON_TYPE_MAP = {
-    column: 'columns', stacked: 'columns', cluster: 'columns', histogram: 'columns',
-    waterfall: 'columns', funnel: 'columns', columnPyramid: 'columns',
-    columnRange: 'columns', columnDrilldown: 'columns', lollipop: 'columns',
-    line: 'line', area: 'line', spline: 'line', areaSpline: 'line',
-    invertedArea: 'line', areaNegative: 'line', areaRange: 'line',
-    fan: 'line', bellcurve: 'line',
-    trendline: 'trendline', anomaly: 'anomaly',
-    pie: 'pie', donut: 'pie', variablePie: 'pie', radialBar: 'pie', gauge: 'pie', euler: 'pie',
-    scatter: 'scatter', bubble: 'scatter', dumbbell: 'scatter', boxplot: 'scatter',
-    heatmap: 'heatmap', flame: 'heatmap',
-    radar: 'radar', spiderweb: 'radar',
-    timeline: 'timeline', xrange: 'timeline',
-    kpi: 'kpi', grid: 'grid', filter: 'filter',
-};
-const SCATTER_DOTS = [
-    [12, 70, 8], [22, 45, 10], [28, 78, 6], [38, 30, 12], [46, 58, 7],
-    [54, 22, 9], [62, 65, 11], [70, 40, 7], [78, 75, 10], [88, 35, 8],
-    [18, 30, 6], [50, 80, 8],
-];
-const TIMELINE_BARS = [
-    [5, 38], [22, 28], [12, 55], [40, 22], [30, 40], [55, 30],
-];
-const sk = (variant, width, height, borderRadius) => borderRadius
-    ? html `<nile-skeleton-loader variant=${variant} width=${width} height=${height} border-radius=${borderRadius}></nile-skeleton-loader>`
-    : html `<nile-skeleton-loader variant=${variant} width=${width} height=${height}></nile-skeleton-loader>`;
-const repeat = (n, fn) => Array.from({ length: n }, (_, i) => fn(i));
-const xaxis = (n = 5, w = 30) => html `
-  <div class="nile-chart-skeleton-xaxis-row">
-    ${repeat(n, () => sk('rounded', w, 10))}
-  </div>
-`;
-function variantFor(type) {
-    return (type && SKELETON_TYPE_MAP[type]) || 'bars';
-}
-function renderBody(v) {
-    switch (v) {
-        case 'columns':
-            return html `
-        <div class="nile-chart-skeleton-columns">
-          ${[58, 82, 44, 91, 67, 35, 76, 50].map(h => html `<div class="nile-chart-skeleton-col-cell" style="height:${h}%">${sk('rectangular', '100%', '100%')}</div>`)}
-        </div>
-        <div class="nile-chart-skeleton-xaxis-row nile-chart-skeleton-xaxis-row--columns">
-          ${repeat(8, () => sk('rounded', 24, 10))}
-        </div>
-      `;
-        case 'line':
-            return html `
-        <div class="nile-chart-skeleton-line">
-          <svg viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
-            <path class="nile-chart-skeleton-line-area" d="M0,30 C10,20 18,32 28,22 C38,12 48,28 60,18 C72,8 82,24 92,14 L100,16 L100,40 L0,40 Z"></path>
-            <path class="nile-chart-skeleton-line-stroke" d="M0,30 C10,20 18,32 28,22 C38,12 48,28 60,18 C72,8 82,24 92,14 L100,16"></path>
-          </svg>
-        </div>
-        ${xaxis()}
-      `;
-        case 'trendline':
-            // Solid actuals (0–60%) + a dashed straight forecast continuation (60–100%)
-            // along the trend, plus a faint trend line through it.
-            return html `
-        <div class="nile-chart-skeleton-line">
-          <svg viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
-            <line class="nile-chart-skeleton-trend-line" x1="0" y1="28" x2="100" y2="10"></line>
-            <path class="nile-chart-skeleton-line-stroke" d="M0,30 C8,24 14,30 22,22 C30,16 38,24 46,18 C52,14 56,20 60,16"></path>
-            <path class="nile-chart-skeleton-trend-forecast" d="M60,16 L72,13 L84,11 L100,8"></path>
-            <line class="nile-chart-skeleton-trend-divider" x1="60" y1="0" x2="60" y2="40"></line>
-          </svg>
-        </div>
-        ${xaxis()}
-      `;
-        case 'anomaly':
-            // Smooth line with a few highlighted anomaly markers off-trend.
-            return html `
-        <div class="nile-chart-skeleton-line">
-          <svg viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true">
-            <path class="nile-chart-skeleton-line-stroke" d="M0,26 C10,22 18,24 26,20 C34,16 42,22 50,18 C58,14 66,18 74,16 C82,14 90,16 100,14"></path>
-            ${[[18, 6], [50, 32], [74, 4]].map(([x, y]) => html `<circle class="nile-chart-skeleton-anomaly-dot" cx=${x} cy=${y} r="2.5"></circle>`)}
-            ${[[18, 6], [50, 32], [74, 4]].map(([x, y]) => html `<circle class="nile-chart-skeleton-anomaly-halo" cx=${x} cy=${y} r="5"></circle>`)}
-          </svg>
-        </div>
-        ${xaxis()}
-      `;
-        case 'pie':
-            return html `
-        <div class="nile-chart-skeleton-pie-wrap">
-          <div class="nile-chart-skeleton-pie"></div>
-          <div class="nile-chart-skeleton-legend">
-            ${repeat(4, () => html `<div class="nile-chart-skeleton-legend-row">${sk('circular', 10, 10)}${sk('rounded', 70, 8)}</div>`)}
-          </div>
-        </div>
-      `;
-        case 'scatter':
-            return html `
-        <div class="nile-chart-skeleton-scatter">
-          ${SCATTER_DOTS.map(([x, y, r]) => html `<span class="nile-chart-skeleton-dot-pos" style="left:${x}%;top:${y}%;">${sk('circular', r, r)}</span>`)}
-        </div>
-        ${xaxis()}
-      `;
-        case 'heatmap':
-            return html `
-        <div class="nile-chart-skeleton-heatmap">
-          ${repeat(4, () => html `<div class="nile-chart-skeleton-heatmap-row">${repeat(7, () => html `<div class="nile-chart-skeleton-heatmap-cell">${sk('rounded', '100%', '100%')}</div>`)}</div>`)}
-        </div>
-      `;
-        case 'radar': {
-            // Pentagon vertices (5-sided radar) at radii 40/27/14 around center (50,50).
-            const ring = (r) => [-90, -18, 54, 126, 198]
-                .map(deg => {
-                const rad = (deg * Math.PI) / 180;
-                return `${(50 + r * Math.cos(rad)).toFixed(2)},${(50 + r * Math.sin(rad)).toFixed(2)}`;
-            })
-                .join(' ');
-            const outer = ring(40);
-            const data = [35, 22, 30, 18, 28]
-                .map((r, i) => {
-                const deg = [-90, -18, 54, 126, 198][i];
-                const rad = (deg * Math.PI) / 180;
-                return `${(50 + r * Math.cos(rad)).toFixed(2)},${(50 + r * Math.sin(rad)).toFixed(2)}`;
-            })
-                .join(' ');
-            const spokes = [-90, -18, 54, 126, 198].map(deg => {
-                const rad = (deg * Math.PI) / 180;
-                return [50 + 40 * Math.cos(rad), 50 + 40 * Math.sin(rad)];
-            });
-            return html `
-        <div class="nile-chart-skeleton-radar-wrap">
-          <svg class="nile-chart-skeleton-radar-svg" viewBox="0 0 100 100" aria-hidden="true">
-            <polygon class="nile-chart-skeleton-radar-grid" points=${outer}></polygon>
-            <polygon class="nile-chart-skeleton-radar-grid" points=${ring(27)}></polygon>
-            <polygon class="nile-chart-skeleton-radar-grid" points=${ring(14)}></polygon>
-            ${spokes.map(([x, y]) => html `<line class="nile-chart-skeleton-radar-spoke" x1="50" y1="50" x2=${x.toFixed(2)} y2=${y.toFixed(2)}></line>`)}
-            <polygon class="nile-chart-skeleton-radar-data" points=${data}></polygon>
-            ${spokes.map(([x, y]) => html `<circle class="nile-chart-skeleton-radar-dot" cx=${x.toFixed(2)} cy=${y.toFixed(2)} r="1.6"></circle>`)}
-          </svg>
-        </div>
-      `;
-        }
-        case 'timeline':
-            return html `
-        <div class="nile-chart-skeleton-timeline">
-          ${TIMELINE_BARS.map(([x, w]) => html `<div class="nile-chart-skeleton-tl-row"><span class="nile-chart-skeleton-tl-bar-pos" style="left:${x}%;width:${w}%;">${sk('rounded', '100%', 12, '999px')}</span></div>`)}
-        </div>
-        ${xaxis()}
-      `;
-        case 'kpi':
-            return html `
-        <div class="nile-chart-skeleton-kpi">
-          ${sk('rounded', '40%', 10)}${sk('rounded', '60%', 28)}${sk('rounded', '30%', 10)}
-          <svg class="nile-chart-skeleton-kpi-spark" viewBox="0 0 100 20" preserveAspectRatio="none" aria-hidden="true">
-            <path d="M0,14 L14,10 L28,12 L42,6 L56,9 L70,4 L84,7 L100,2"></path>
-          </svg>
-        </div>
-      `;
-        case 'grid':
-            return html `
-        <div class="nile-chart-skeleton-grid">
-          <div class="nile-chart-skeleton-grid-head">${repeat(4, () => sk('rounded', '100%', 12))}</div>
-          ${repeat(5, () => html `<div class="nile-chart-skeleton-grid-row">${repeat(4, () => sk('text', '100%', 10))}</div>`)}
-        </div>
-      `;
-        case 'filter':
-            return html `
-        <div class="nile-chart-skeleton-filter">
-          ${sk('rounded', '100%', 36)}
-          <div class="nile-chart-skeleton-filter-chips">
-            ${[60, 80, 50, 90, 70].map(w => sk('rounded', w, 22, '999px'))}
-          </div>
-        </div>
-      `;
-        case 'bars':
-        default:
-            return html `
-        <div class="nile-chart-skeleton-body">
-          ${[96, 88, 94, 84, 92].map(w => html `<div class="nile-chart-skeleton-row">
-              <nile-skeleton-loader class="nile-chart-skeleton-ylabel-sk" variant="rounded" width="100%" height="10"></nile-skeleton-loader>
-              <nile-skeleton-loader class="nile-chart-skeleton-bar-sk" variant="rounded" width="100%" height="18" style="flex:0 1 ${w}%;min-width:0;"></nile-skeleton-loader>
-            </div>`)}
-        </div>
-        ${xaxis()}
-      `;
-    }
-}
-export function renderChartSkeleton(chartType) {
-    const v = variantFor(chartType);
-    return html `<div class="nile-chart-skeleton nile-chart-skeleton--${v}" aria-busy="true" aria-label="Loading chart">${renderBody(v)}</div>`;
-}
-//# sourceMappingURL=nile-chart-skeleton.js.map