@aquera/nile-visualization 2.9.5 → 2.9.7

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

@@ -524,6 +524,8 @@ export interface NileKpiChartConfig extends NileChartConfigBase {
     cardPaddingVertical?: string | number;
     cardPaddingHorizontal?: string | number;
     contentGap?: string | number;
+    /** Accent bar colour for the 'accent' variant. */
+    accentColor?: string;
     /** Abbreviation scale. Default 'auto'. */
     valueFormat?: KpiValueFormat;
     /** Decimal places on the abbreviated value. */

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

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

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

@@ -0,0 +1,188 @@
+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