@aquera/nile-visualization 0.4.0 → 0.6.0

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

@@ -13,7 +13,7 @@ export const styles = css `
   /* ── Card variant ── */
 
   .kpi-card {
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background: transparent;
     border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
@@ -79,17 +79,17 @@ export const styles = css `
   }
 
   .kpi-trend--up {
-    background: var(--nile-colors-success-100, #ECFDF3);
+    background: none;
     color: var(--nile-colors-success-700, #067647);
   }
 
   .kpi-trend--down {
-    background: var(--nile-colors-error-100, #FEF3F2);
+    background: none;
     color: var(--nile-colors-error-700, #B42318);
   }
 
   .kpi-trend--neutral {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: none;
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
   }
 

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

@@ -24,6 +24,8 @@ export interface ChartKpiSeparatedPayload {
     gaugeColor?: string;
     loading?: boolean;
     options?: Highcharts.Options;
+    /** Optional min height when embedded in `<nile-chart>` (maps to host `min-height`). */
+    height?: string;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {

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

@@ -86,6 +86,12 @@ 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
+                    this.style.removeProperty('min-height');
+            }
         }
         if (aq) {
             if (aq.chartTitle != null)

package/dist/src/nile-map-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { NileMapChart } from './nile-map-chart.js';
+export type { MapChartDataPoint } from './nile-map-chart.js';

package/dist/src/nile-map-chart/index.js

@@ -0,0 +1,2 @@
+export { NileMapChart } from './nile-map-chart.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-map-chart/nile-map-chart.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/nile-map-chart/nile-map-chart.css.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .chart-container {
+    width: 100%;
+    min-height: var(--nile-height-200px, var(--ng-height-200px));
+  }
+
+  .chart-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: inherit;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  }
+`;
+//# sourceMappingURL=nile-map-chart.css.js.map

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

@@ -0,0 +1,74 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
+export interface MapChartDataPoint {
+    /** Highcharts map key matching the map topology (e.g. 'us-ca'). */
+    'hc-key'?: string;
+    value: number;
+    name?: string;
+    color?: string;
+    [key: string]: unknown;
+}
+export declare class NileMapChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
+    /** The chart title displayed above the chart. */
+    chartTitle: string;
+    /** The subtitle displayed below the title. */
+    chartSubtitle: string;
+    /**
+     * Array of data points. Each point should have a value and a key matching the
+     * map topology (e.g. `{ 'hc-key': 'us-ca', value: 42 }`).
+     */
+    data: MapChartDataPoint[];
+    /**
+     * GeoJSON or Highcharts topology object describing the map shapes.
+     * Obtain from https://code.highcharts.com/mapdata/ or supply your own.
+     */
+    mapData: object | null;
+    /**
+     * How to join `data` with `mapData`. Defaults to `['hc-key', 'hc-key']`.
+     * Pass a single string to match by that property name on both sides,
+     * or a two-element array `[mapKey, dataKey]` for different key names.
+     */
+    joinBy: string | string[];
+    /** Deep-merge override object for full Highcharts options. */
+    options: Highcharts.Options;
+    /** Whether to show a loading indicator instead of the chart. */
+    loading: boolean;
+    /** CSS height for the chart container. */
+    height: string;
+    /** Enable mouse-wheel zoom, double-click zoom, and +/− zoom buttons. Default: true. */
+    zoom: boolean;
+    /**
+     * Type of the primary map series.
+     * - `'map'` (default) — choropleth/filled regions
+     * - `'mapline'` — line/route overlay
+     * - `'mappoint'` — scatter points on map
+     * - `'mapbubble'` — sized bubbles on map
+     * For multi-series or `tiledwebmap`, pass `options.series` directly (it replaces the default series).
+     */
+    seriesType: 'map' | 'mapline' | 'mappoint' | 'mapbubble' | 'tiledwebmap';
+    /** Apply { chart, aq } config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private buildOptions;
+    private initChart;
+    private destroyChart;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-map-chart': NileMapChart;
+    }
+}

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

@@ -0,0 +1,263 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-map-chart.css.js';
+let NileMapChart = class NileMapChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated { chart, aq } input. */
+        this.config = null;
+        /** The chart title displayed above the chart. */
+        this.chartTitle = '';
+        /** The subtitle displayed below the title. */
+        this.chartSubtitle = '';
+        /**
+         * Array of data points. Each point should have a value and a key matching the
+         * map topology (e.g. `{ 'hc-key': 'us-ca', value: 42 }`).
+         */
+        this.data = [];
+        /**
+         * GeoJSON or Highcharts topology object describing the map shapes.
+         * Obtain from https://code.highcharts.com/mapdata/ or supply your own.
+         */
+        this.mapData = null;
+        /**
+         * How to join `data` with `mapData`. Defaults to `['hc-key', 'hc-key']`.
+         * Pass a single string to match by that property name on both sides,
+         * or a two-element array `[mapKey, dataKey]` for different key names.
+         */
+        this.joinBy = ['hc-key', 'hc-key'];
+        /** Deep-merge override object for full Highcharts options. */
+        this.options = {};
+        /** Whether to show a loading indicator instead of the chart. */
+        this.loading = false;
+        /** CSS height for the chart container. */
+        this.height = '500px';
+        /** Enable mouse-wheel zoom, double-click zoom, and +/− zoom buttons. Default: true. */
+        this.zoom = true;
+        /**
+         * Type of the primary map series.
+         * - `'map'` (default) — choropleth/filled regions
+         * - `'mapline'` — line/route overlay
+         * - `'mappoint'` — scatter points on map
+         * - `'mapbubble'` — sized bubbles on map
+         * For multi-series or `tiledwebmap`, pass `options.series` directly (it replaces the default series).
+         */
+        this.seriesType = 'map';
+    }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const map = c;
+            if (map.data)
+                this.data = map.data;
+            if (map.mapData)
+                this.mapData = map.mapData;
+            if (map.joinBy !== undefined)
+                this.joinBy = map.joinBy;
+            if (map.seriesType)
+                this.seriesType = map.seriesType;
+            if (map.height)
+                this.height = map.height;
+            if (map.loading !== undefined)
+                this.loading = map.loading;
+            if (map.zoom !== undefined)
+                this.zoom = map.zoom;
+            if (map.options)
+                this.options = map.options;
+        }
+        if (aq) {
+            if (aq.chartTitle)
+                this.chartTitle = aq.chartTitle;
+            if (aq.chartSubtitle)
+                this.chartSubtitle = aq.chartSubtitle;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() {
+        // If config was set synchronously before the first render (common when the
+        // consumer assigns `.config = {...}` immediately after the element is in the
+        // DOM), connectedCallback will have missed it. Apply it here so buildOptions()
+        // has the full options—including series type, mapView, and projection—before
+        // Highcharts is ever initialised.
+        if (this.config)
+            this.applyConfig(this.config);
+        this.initChart();
+        this.setupResizeObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
+        const chartProps = [
+            'data',
+            'mapData',
+            'joinBy',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'loading',
+            'zoom',
+            'seriesType',
+        ];
+        const needsUpdate = chartProps.some(p => changedProperties.has(p));
+        if (!needsUpdate)
+            return;
+        if (this.loading) {
+            this.destroyChart();
+            return;
+        }
+        if (this.chart) {
+            this.chart.update(this.buildOptions(), true, true);
+        }
+        else {
+            this.initChart();
+        }
+    }
+    setupResizeObserver() {
+        if (!this.chartContainer)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.chart?.reflow();
+        });
+        this.resizeObserver.observe(this.chartContainer);
+    }
+    buildOptions() {
+        const self = this;
+        const defaults = {
+            chart: {
+                height: this.height,
+            },
+            title: {
+                text: this.chartTitle || undefined,
+            },
+            subtitle: {
+                text: this.chartSubtitle || undefined,
+            },
+            colorAxis: {
+                min: 0,
+            },
+            legend: {
+                enabled: true,
+            },
+            mapNavigation: {
+                enabled: this.zoom,
+                enableMouseWheelZoom: this.zoom,
+                enableDoubleClickZoom: this.zoom,
+                enableDoubleClickZoomTo: false,
+                buttonOptions: {
+                    alignTo: 'spacingBox',
+                },
+            },
+            series: this.seriesType !== 'tiledwebmap' ? [
+                {
+                    type: this.seriesType,
+                    data: this.data,
+                    mapData: this.mapData ?? undefined,
+                    joinBy: this.joinBy,
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    name: this.name,
+                                    value: this.value,
+                                    key: this['hc-key'],
+                                });
+                            },
+                        },
+                    },
+                },
+            ] : [],
+            credits: {
+                enabled: false,
+            },
+        };
+        return deepMerge(defaults, this.options);
+    }
+    async initChart() {
+        if (this.loading || !this.chartContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        // Highcharts Maps module adds mapChart(); fall back to chart() if unavailable.
+        const hcAny = this._hc;
+        const factory = typeof hcAny.mapChart === 'function' ? hcAny.mapChart : hcAny.chart;
+        this.chart = factory(this.chartContainer, this.buildOptions());
+        this.emit('nile-chart-ready', { chart: this.chart });
+    }
+    destroyChart() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+        }
+        return html `<div class="chart-container"></div>`;
+    }
+};
+NileMapChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileMapChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileMapChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileMapChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileMapChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileMapChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], NileMapChart.prototype, "mapData", void 0);
+__decorate([
+    property({ type: Array })
+], NileMapChart.prototype, "joinBy", void 0);
+__decorate([
+    property({ type: Object })
+], NileMapChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileMapChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileMapChart.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileMapChart.prototype, "zoom", void 0);
+__decorate([
+    property({ type: String })
+], NileMapChart.prototype, "seriesType", void 0);
+NileMapChart = __decorate([
+    customElement('nile-map-chart')
+], NileMapChart);
+export { NileMapChart };
+//# sourceMappingURL=nile-map-chart.js.map

package/dist/src/nile-widget-viewer/index.d.ts

@@ -0,0 +1,3 @@
+export { NileWidgetViewer } from './nile-widget-viewer.js';
+export type { NileWidgetConfig, NileWidgetChartConfig, NileWidgetKpiConfig, } from '../internal/types/widget-config.type.js';
+export type { WidgetLayout } from '../internal/types/widget-layout.type.js';

package/dist/src/nile-widget-viewer/index.js

@@ -0,0 +1,2 @@
+export { NileWidgetViewer } from './nile-widget-viewer.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-widget-viewer/nile-widget-viewer.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/nile-widget-viewer/nile-widget-viewer.css.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  nile-chart,
+  nile-kpi-chart {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+//# sourceMappingURL=nile-widget-viewer.css.js.map

package/dist/src/nile-widget-viewer/nile-widget-viewer.d.ts

@@ -0,0 +1,33 @@
+import { nothing } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import type { NileWidgetConfig } from '../internal/types/widget-config.type.js';
+import '../nile-chart/index.js';
+import '../nile-kpi-chart/index.js';
+/**
+ * Renders a single dashboard widget — either a `<nile-chart>` or a `<nile-kpi-chart>` —
+ * based on the discriminated `type` field of the config.
+ *
+ * @example
+ * ```html
+ * <nile-widget-viewer></nile-widget-viewer>
+ * ```
+ * ```js
+ * el.config = {
+ *   type: 'chart',
+ *   layout: { x: 0, y: 0, w: 6, h: 4 },
+ *   nileConfig: { chart: { type: 'pie', data: [...] }, aq: { chartTitle: 'My Chart' } }
+ * };
+ * ```
+ */
+export declare class NileWidgetViewer extends NileElement {
+    static styles: CSSResultGroup;
+    /** Widget configuration. Discriminated on `type`: `'chart'` or `'kpi'`. */
+    config: NileWidgetConfig | null;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-widget-viewer': NileWidgetViewer;
+    }
+}

package/dist/src/nile-widget-viewer/nile-widget-viewer.js

@@ -0,0 +1,50 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { styles } from './nile-widget-viewer.css.js';
+import '../nile-chart/index.js';
+import '../nile-kpi-chart/index.js';
+/**
+ * Renders a single dashboard widget — either a `<nile-chart>` or a `<nile-kpi-chart>` —
+ * based on the discriminated `type` field of the config.
+ *
+ * @example
+ * ```html
+ * <nile-widget-viewer></nile-widget-viewer>
+ * ```
+ * ```js
+ * el.config = {
+ *   type: 'chart',
+ *   layout: { x: 0, y: 0, w: 6, h: 4 },
+ *   nileConfig: { chart: { type: 'pie', data: [...] }, aq: { chartTitle: 'My Chart' } }
+ * };
+ * ```
+ */
+let NileWidgetViewer = class NileWidgetViewer extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Widget configuration. Discriminated on `type`: `'chart'` or `'kpi'`. */
+        this.config = null;
+    }
+    render() {
+        if (!this.config)
+            return nothing;
+        if (this.config.type === 'chart') {
+            return html `<nile-chart .config=${this.config.nileConfig}></nile-chart>`;
+        }
+        if (this.config.type === 'kpi') {
+            return html `<nile-kpi-chart .config=${this.config.nileConfig}></nile-kpi-chart>`;
+        }
+        return nothing;
+    }
+};
+NileWidgetViewer.styles = styles;
+__decorate([
+    property({ type: Object })
+], NileWidgetViewer.prototype, "config", void 0);
+NileWidgetViewer = __decorate([
+    customElement('nile-widget-viewer')
+], NileWidgetViewer);
+export { NileWidgetViewer };
+//# sourceMappingURL=nile-widget-viewer.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -40,7 +40,9 @@
     "./nile-ai-sender": "./dist/src/nile-ai-sender/index.js",
     "./nile-ai-panel": "./dist/src/nile-ai-panel/index.js",
     "./nile-kpi-chart": "./dist/src/nile-kpi-chart/index.js",
-    "./nile-chart": "./dist/src/nile-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"
   },
   "files": [
     "dist/src/**/*.js",