@aquera/nile-visualization 0.6.0 → 0.8.0

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

@@ -3,7 +3,18 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
 import NileElement from '../internal/nile-element.js';
 import { getHighcharts } from '../internal/highcharts-provider.js';
-import { styles } from './nile-kpi-chart.css.js';
+import { styles, tooltipCss } from './nile-kpi-chart.css.js';
+// Inject tooltip styles into document.head once per page load.
+let _tooltipStylesInjected = false;
+function ensureTooltipStyles() {
+    if (_tooltipStylesInjected || typeof document === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.dataset['nilekpichart'] = '';
+    style.textContent = tooltipCss;
+    document.head.appendChild(style);
+    _tooltipStylesInjected = true;
+}
 let NileKpiChart = class NileKpiChart extends NileElement {
     constructor() {
         super(...arguments);
@@ -11,6 +22,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.sparklineChart = null;
         this.gaugeChart = null;
         this.resizeObserver = null;
+        /** Tooltip element on document.body — outside shadow DOM, never clipped. */
+        this._tipEl = null;
         /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
         this.config = null;
         /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
@@ -47,8 +60,133 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.loading = false;
         /** Highcharts options override for the sparkline or gauge. */
         this.options = {};
+        /**
+         * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
+         */
+        this.embedInNileChart = false;
+        // ── Sparkline mousemove tooltip ──────────────────────────────────────────
+        this._onSparklineMouseMove = (e) => {
+            const chart = this.sparklineChart;
+            if (!chart || !this.sparklineContainer)
+                return;
+            const series = chart.series[0];
+            if (!series?.points?.length)
+                return;
+            const rect = this.sparklineContainer.getBoundingClientRect();
+            const mouseXInPlot = e.clientX - rect.left - (chart.plotLeft ?? 0);
+            // Snap to nearest point by plotX
+            let nearest = series.points[0];
+            let minDist = Infinity;
+            for (const p of series.points) {
+                const dist = Math.abs((p.plotX ?? 0) - mouseXInPlot);
+                if (dist < minDist) {
+                    minDist = dist;
+                    nearest = p;
+                }
+            }
+            const scale = this.inferSparklineTooltipScale();
+            const text = this.getTooltipContent((nearest.y ?? 0) * scale);
+            const tipX = rect.left + (chart.plotLeft ?? 0) + (nearest.plotX ?? 0);
+            const tipY = rect.top + (chart.plotTop ?? 0) + (nearest.plotY ?? 0);
+            this._showTip(text, tipX, tipY);
+        };
+        this._onSparklineMouseLeave = () => {
+            this._hideTip();
+        };
+        // ── Value / Gauge hover handlers ─────────────────────────────────────────
+        this._onValueEnter = (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            this._showTip(this.getTooltipContent(), 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._onTipLeave = () => {
+            this._hideTip();
+        };
+    }
+    // ── Tooltip ──────────────────────────────────────────────────────────────
+    _createTipEl() {
+        if (this._tipEl)
+            return;
+        const el = document.createElement('div');
+        el.className = 'nile-kpi-tooltip';
+        document.body.appendChild(el);
+        this._tipEl = el;
+    }
+    _showTip(text, x, y) {
+        if (!this._tipEl)
+            return;
+        this._tipEl.textContent = text;
+        this._tipEl.style.left = `${x}px`;
+        this._tipEl.style.top = `${y}px`;
+        this._tipEl.style.display = 'block';
+    }
+    _hideTip() {
+        if (this._tipEl)
+            this._tipEl.style.display = 'none';
+    }
+    // ── Formatting helpers ───────────────────────────────────────────────────
+    formatCssLength(value) {
+        if (value == null)
+            return null;
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? `${value}px` : null;
+        }
+        const s = String(value).trim();
+        if (!s)
+            return null;
+        if (/^-?\d*\.?\d+$/.test(s))
+            return `${s}px`;
+        return s;
+    }
+    parseNumericValue(v) {
+        if (typeof v === 'number')
+            return Number.isFinite(v) ? v : null;
+        if (typeof v !== 'string')
+            return null;
+        const cleaned = v.replace(/,/g, '').trim();
+        if (!cleaned)
+            return null;
+        const n = Number(cleaned);
+        return Number.isFinite(n) ? n : null;
+    }
+    formatTooltipNumber(n) {
+        const maxFractionDigits = Number.isInteger(n) ? 0 : 6;
+        return new Intl.NumberFormat(undefined, {
+            useGrouping: true,
+            minimumFractionDigits: 0,
+            maximumFractionDigits: maxFractionDigits,
+        }).format(n);
+    }
+    inferSparklineTooltipScale() {
+        if (!this.sparkline?.length)
+            return 1;
+        const main = this.parseNumericValue(this.value);
+        const last = this.sparkline[this.sparkline.length - 1];
+        if (main == null || !Number.isFinite(last) || last === 0)
+            return 1;
+        const ratio = Math.abs(main / last);
+        const candidates = [1000, 1000000];
+        for (const c of candidates) {
+            if (Math.abs(ratio - c) / c < 0.02)
+                return c;
+        }
+        return 1;
     }
-    /** Apply `{ chart, aq }` to individual properties. */
+    getTooltipContent(overrideNumeric) {
+        const prefix = this.prefix ?? '';
+        const suffix = this.suffix ?? '';
+        const numeric = overrideNumeric ?? this.parseNumericValue(this.value) ??
+            (this.variant === 'gauge' ? this.gaugeValue : null) ??
+            (this.sparkline.length ? this.sparkline[this.sparkline.length - 1] : null);
+        const valueText = numeric == null
+            ? String(this.value ?? '').trim()
+            : this.formatTooltipNumber(numeric);
+        return `${prefix}${valueText}${suffix}`.trim();
+    }
+    // ── Config ───────────────────────────────────────────────────────────────
     applyConfig(cfg) {
         const { chart: c, aq } = cfg;
         if (c) {
@@ -86,11 +224,18 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loading = c.loading;
             if (c.options !== undefined)
                 this.options = c.options;
-            if (c.height !== undefined) {
-                if (c.height)
-                    this.style.minHeight = c.height;
-                else
+            if ('height' in c) {
+                const h = this.formatCssLength(c.height);
+                if (h) {
+                    this.style.minHeight = h;
+                    this.style.removeProperty('height');
+                    this.style.removeProperty('max-height');
+                }
+                else {
                     this.style.removeProperty('min-height');
+                    this.style.removeProperty('height');
+                    this.style.removeProperty('max-height');
+                }
             }
         }
         if (aq) {
@@ -100,13 +245,19 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.description = aq.chartSubtitle;
         }
     }
+    // ── Lifecycle ────────────────────────────────────────────────────────────
     connectedCallback() {
         super.connectedCallback();
+        ensureTooltipStyles();
+        this._createTipEl();
         if (this.config)
             this.applyConfig(this.config);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this._hideTip();
+        this._tipEl?.remove();
+        this._tipEl = null;
         this.destroyCharts();
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
@@ -125,6 +276,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (sparklineProps.some(p => changedProperties.has(p))) {
             if (this.sparklineChart) {
                 this.sparklineChart.update(this.buildSparklineOptions(), true, true);
+                requestAnimationFrame(() => this.syncSparklineChartSize());
             }
             else {
                 this.initSparkline();
@@ -140,9 +292,17 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             }
         }
     }
+    // ── Chart sizing ─────────────────────────────────────────────────────────
+    syncSparklineChartSize() {
+        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);
+    }
     setupResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
-            this.sparklineChart?.reflow();
+            this.syncSparklineChartSize();
             this.gaugeChart?.reflow();
         });
         if (this.sparklineContainer)
@@ -150,6 +310,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (this.gaugeContainer)
             this.resizeObserver.observe(this.gaugeContainer);
     }
+    // ── Chart options ────────────────────────────────────────────────────────
     buildSparklineOptions() {
         const brandColor = this.sparklineColor || '#005EA6';
         const defaults = {
@@ -245,6 +406,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             ...this.options,
         };
     }
+    // ── Chart init/destroy ───────────────────────────────────────────────────
     async initSparkline() {
         if (!this.sparkline.length || !this.sparklineContainer)
             return;
@@ -252,6 +414,9 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
+        requestAnimationFrame(() => this.syncSparklineChartSize());
+        this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
+        this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
     }
     async initGauge() {
@@ -264,6 +429,10 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.emit('nile-chart-ready', { chart: this.gaugeChart });
     }
     destroySparkline() {
+        if (this.sparklineContainer) {
+            this.sparklineContainer.removeEventListener('mousemove', this._onSparklineMouseMove);
+            this.sparklineContainer.removeEventListener('mouseleave', this._onSparklineMouseLeave);
+        }
         if (this.sparklineChart) {
             this.sparklineChart.destroy();
             this.sparklineChart = null;
@@ -279,6 +448,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.destroySparkline();
         this.destroyGauge();
     }
+    // ── Render ───────────────────────────────────────────────────────────────
     renderTrend() {
         if (this.trendValue === null)
             return nothing;
@@ -297,18 +467,37 @@ let NileKpiChart = class NileKpiChart extends NileElement {
       </span>
     `;
     }
-    renderContent() {
+    render() {
+        if (this.loading) {
+            return html `<div class="chart-loading">Loading...</div>`;
+        }
         const isGauge = this.variant === 'gauge';
         return html `
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
         ${this.label ? html `<p class="kpi-label">${this.label}</p>` : nothing}
 
-        ${isGauge ? html `<div class="kpi-gauge-container"></div>` : nothing}
+        ${isGauge
+            ? html `
+              <div
+                class="kpi-gauge-container"
+                @mouseenter=${this._onGaugeEnter}
+                @mouseleave=${this._onTipLeave}
+              ></div>
+            `
+            : nothing}
 
         <div class="kpi-value-row">
-          <h2 class="kpi-value">
-            ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
-          </h2>
+          ${!isGauge
+            ? html `
+                <h2
+                  class="kpi-value"
+                  @mouseenter=${this._onValueEnter}
+                  @mouseleave=${this._onTipLeave}
+                >
+                  ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
+                </h2>
+              `
+            : nothing}
           ${!isGauge ? this.renderTrend() : nothing}
         </div>
 
@@ -322,16 +511,6 @@ let NileKpiChart = class NileKpiChart extends NileElement {
       </div>
     `;
     }
-    render() {
-        if (this.loading) {
-            return html `<div class="chart-loading">Loading...</div>`;
-        }
-        const useCard = this.variant === 'card' || this.variant === 'gauge';
-        if (useCard) {
-            return html `<div class="kpi-card">${this.renderContent()}</div>`;
-        }
-        return this.renderContent();
-    }
 };
 NileKpiChart.styles = styles;
 __decorate([
@@ -394,6 +573,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'embed-in-nile-chart' })
+], NileKpiChart.prototype, "embedInNileChart", void 0);
 NileKpiChart = __decorate([
     customElement('nile-kpi-chart')
 ], NileKpiChart);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -42,7 +42,8 @@
     "./nile-kpi-chart": "./dist/src/nile-kpi-chart/index.js",
     "./nile-chart": "./dist/src/nile-chart/index.js",
     "./nile-widget-viewer": "./dist/src/nile-widget-viewer/index.js",
-    "./nile-dashboard-viewer": "./dist/src/nile-dashboard-viewer/index.js"
+    "./nile-dashboard-viewer": "./dist/src/nile-dashboard-viewer/index.js",
+    "./nile-executive-summary": "./dist/src/nile-executive-summary/index.js"
   },
   "files": [
     "dist/src/**/*.js",