@aquera/nile-visualization 0.1.0

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

@@ -0,0 +1,246 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import NileElement from '../internal/nile-element.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-trendline-chart.css.js';
+let NileTrendlineChart = class NileTrendlineChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        /** The chart title displayed above the chart. */
+        this.chartTitle = '';
+        /** The subtitle displayed below the title. */
+        this.chartSubtitle = '';
+        /** Array of series data. Each series is a line on the chart. */
+        this.data = [];
+        /** X-axis category labels (e.g., months, dates). */
+        this.categories = [];
+        /** Forecast configuration. When set, extends each series with a forecast line. */
+        this.forecast = null;
+        /** 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 = '400px';
+        /** Y-axis title text. */
+        this.yAxisTitle = '';
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() {
+        this.initChart();
+        this.setupResizeObserver();
+    }
+    updated(changedProperties) {
+        const chartProps = [
+            'data',
+            'categories',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'yAxisTitle',
+            'forecast',
+            'loading',
+        ];
+        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);
+    }
+    /**
+     * Simple linear regression forecast.
+     * Extends the data array by `periods` using least-squares fit.
+     */
+    computeForecast(values, periods) {
+        const n = values.length;
+        if (n < 2)
+            return Array(periods).fill(values[0] ?? 0);
+        let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
+        for (let i = 0; i < n; i++) {
+            sumX += i;
+            sumY += values[i];
+            sumXY += i * values[i];
+            sumXX += i * i;
+        }
+        const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
+        const intercept = (sumY - slope * sumX) / n;
+        const forecast = [];
+        for (let i = 0; i < periods; i++) {
+            forecast.push(Math.round((intercept + slope * (n + i)) * 100) / 100);
+        }
+        return forecast;
+    }
+    buildOptions() {
+        const self = this;
+        const forecastPeriods = this.forecast?.periods ?? 0;
+        // Build extended categories if forecasting
+        const extendedCategories = [...this.categories];
+        if (forecastPeriods > 0) {
+            for (let i = 1; i <= forecastPeriods; i++) {
+                extendedCategories.push(`Forecast +${i}`);
+            }
+        }
+        // Build series: actual data + optional forecast lines
+        const series = [];
+        for (const s of this.data) {
+            // Actual data line
+            series.push({
+                type: 'line',
+                name: s.name,
+                data: forecastPeriods > 0
+                    ? [...s.data, ...Array(forecastPeriods).fill(null)]
+                    : s.data,
+                color: s.color,
+                marker: { enabled: true, radius: 4 },
+            });
+            // Forecast line (overlaps last actual point for continuity)
+            if (forecastPeriods > 0) {
+                const forecastValues = this.computeForecast(s.data, forecastPeriods);
+                const forecastData = [
+                    ...Array(s.data.length - 1).fill(null),
+                    s.data[s.data.length - 1],
+                    ...forecastValues,
+                ];
+                series.push({
+                    type: 'line',
+                    name: `${s.name} (Forecast)`,
+                    data: forecastData,
+                    color: this.forecast?.color ?? s.color,
+                    dashStyle: this.forecast?.dashStyle ?? 'Dash',
+                    marker: { enabled: true, radius: 3, symbol: 'circle' },
+                    linkedTo: ':previous',
+                });
+            }
+        }
+        const defaults = {
+            chart: {
+                type: 'line',
+                height: this.height,
+            },
+            title: {
+                text: this.chartTitle || undefined,
+            },
+            subtitle: {
+                text: this.chartSubtitle || undefined,
+            },
+            xAxis: {
+                categories: extendedCategories,
+                title: { text: undefined },
+            },
+            yAxis: {
+                title: { text: this.yAxisTitle || undefined },
+            },
+            tooltip: {
+                shared: true,
+            },
+            plotOptions: {
+                line: {
+                    dataLabels: { enabled: false },
+                },
+                series: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    category: this.category,
+                                    value: this.y,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+            },
+            series,
+            credits: {
+                enabled: false,
+            },
+        };
+        return deepMerge(defaults, this.options);
+    }
+    async initChart() {
+        if (this.loading || !this.chartContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        this.chart = this._hc.chart(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>`;
+    }
+};
+NileTrendlineChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileTrendlineChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileTrendlineChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileTrendlineChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileTrendlineChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileTrendlineChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileTrendlineChart.prototype, "forecast", void 0);
+__decorate([
+    property({ type: Object })
+], NileTrendlineChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileTrendlineChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileTrendlineChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileTrendlineChart.prototype, "yAxisTitle", void 0);
+NileTrendlineChart = __decorate([
+    customElement('nile-trendline-chart')
+], NileTrendlineChart);
+export { NileTrendlineChart };
+//# sourceMappingURL=nile-trendline-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileWaterfallChart } from './nile-waterfall-chart.js';
+export type { WaterfallDataPoint } from './nile-waterfall-chart.js';

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

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

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

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

package/dist/src/nile-waterfall-chart/nile-waterfall-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-waterfall-chart.css.js.map

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

@@ -0,0 +1,37 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+export interface WaterfallDataPoint {
+    name: string;
+    y: number;
+    color?: string;
+    isSum?: boolean;
+    isIntermediateSum?: boolean;
+}
+export declare class NileWaterfallChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: WaterfallDataPoint[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    yAxisTitle: string;
+    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-waterfall-chart': NileWaterfallChart;
+    }
+}

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

@@ -0,0 +1,137 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import NileElement from '../internal/nile-element.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-waterfall-chart.css.js';
+let NileWaterfallChart = class NileWaterfallChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.yAxisTitle = '';
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() { this.initChart(); this.setupResizeObserver(); }
+    updated(changedProperties) {
+        const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'yAxisTitle', 'loading'];
+        if (!props.some(p => changedProperties.has(p)))
+            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;
+        return deepMerge({
+            chart: { type: 'waterfall', height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: {
+                type: 'category',
+            },
+            yAxis: {
+                title: { text: this.yAxisTitle || undefined },
+            },
+            tooltip: { pointFormat: '<b>{point.y}</b>' },
+            plotOptions: {
+                waterfall: {
+                    dataLabels: { enabled: true },
+                    pointPadding: 0,
+                },
+                series: {
+                    cursor: 'pointer',
+                    point: { events: { click() { self.emit('nile-chart-click', { point: this, name: this.name, value: this.y, seriesName: this.series.name }); } } },
+                },
+            },
+            series: [{
+                    type: 'waterfall',
+                    name: this.chartTitle || 'Waterfall',
+                    data: this.data.map(d => ({
+                        name: d.name,
+                        y: d.isSum || d.isIntermediateSum ? undefined : d.y,
+                        isSum: d.isSum,
+                        isIntermediateSum: d.isIntermediateSum,
+                        color: d.color,
+                    })),
+                    color: '#3b82f6',
+                    negativeColor: '#ef4444',
+                }],
+            legend: { enabled: false },
+            credits: { enabled: false },
+        }, this.options);
+    }
+    async initChart() {
+        if (this.loading || !this.chartContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        this.chart = this._hc.chart(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>`;
+    }
+};
+NileWaterfallChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileWaterfallChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileWaterfallChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileWaterfallChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileWaterfallChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], NileWaterfallChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWaterfallChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileWaterfallChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileWaterfallChart.prototype, "yAxisTitle", void 0);
+NileWaterfallChart = __decorate([
+    customElement('nile-waterfall-chart')
+], NileWaterfallChart);
+export { NileWaterfallChart };
+//# sourceMappingURL=nile-waterfall-chart.js.map

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@aquera/nile-visualization",
+  "version": "0.1.0",
+  "description": "A visualization Library for the Nile Design System",
+  "license": "MIT",
+  "author": "Aquera Inc",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./nile-bar-chart": "./dist/src/nile-bar-chart/index.js",
+    "./nile-pie-chart": "./dist/src/nile-pie-chart/index.js",
+    "./nile-line-chart": "./dist/src/nile-line-chart/index.js",
+    "./nile-area-chart": "./dist/src/nile-area-chart/index.js",
+    "./nile-column-chart": "./dist/src/nile-column-chart/index.js",
+    "./nile-spline-chart": "./dist/src/nile-spline-chart/index.js",
+    "./nile-donut-chart": "./dist/src/nile-donut-chart/index.js",
+    "./nile-scatter-chart": "./dist/src/nile-scatter-chart/index.js",
+    "./nile-bubble-chart": "./dist/src/nile-bubble-chart/index.js",
+    "./nile-radar-chart": "./dist/src/nile-radar-chart/index.js",
+    "./nile-gauge-chart": "./dist/src/nile-gauge-chart/index.js",
+    "./nile-waterfall-chart": "./dist/src/nile-waterfall-chart/index.js",
+    "./nile-trendline-chart": "./dist/src/nile-trendline-chart/index.js",
+    "./nile-anomaly-chart": "./dist/src/nile-anomaly-chart/index.js",
+    "./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"
+  },
+  "files": [
+    "dist/src/**/*.js",
+    "dist/src/**/*.d.ts"
+  ],
+  "scripts": {
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "package": "rollup -c",
+    "clean": "rimraf dist/*"
+  },
+  "dependencies": {
+    "lit": "^3.0.0"
+  },
+  "peerDependencies": {
+    "highcharts": ">=10.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@web/dev-server": "^0.1.34",
+    "concurrently": "^5.3.0",
+    "glob": "^8.0.3",
+    "rollup": "^3.8.1",
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.3.1",
+    "typescript": "^5.6.2"
+  }
+}