@aquera/nile-visualization 0.1.0

package/dist/src/nile-ai-sender/nile-ai-sender.d.ts

@@ -0,0 +1,20 @@
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+export declare class NileAiSender extends NileElement {
+    static styles: CSSResultGroup;
+    /** Placeholder text for the input. */
+    placeholder: string;
+    /** Whether the input is disabled. */
+    disabled: boolean;
+    private value;
+    private inputEl;
+    private handleInput;
+    private handleKeyDown;
+    private send;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-ai-sender': NileAiSender;
+    }
+}

package/dist/src/nile-ai-sender/nile-ai-sender.js

@@ -0,0 +1,77 @@
+import { __decorate } from "tslib";
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { styles } from './nile-ai-sender.css.js';
+let NileAiSender = class NileAiSender extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Placeholder text for the input. */
+        this.placeholder = 'Ask about this chart...';
+        /** Whether the input is disabled. */
+        this.disabled = false;
+        this.value = '';
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.send();
+        }
+    }
+    send() {
+        const message = this.value.trim();
+        if (!message || this.disabled)
+            return;
+        this.emit('nile-ai-send', { message });
+        this.value = '';
+        if (this.inputEl)
+            this.inputEl.value = '';
+    }
+    render() {
+        return html `
+      <div class="sender">
+        <input
+          class="sender-input"
+          type="text"
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeyDown}
+        />
+        <button
+          class="sender-btn"
+          ?disabled=${!this.value.trim() || this.disabled}
+          @click=${this.send}
+          aria-label="Send message"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="8" y1="12" x2="8" y2="4"/>
+            <polyline points="4,7 8,3 12,7"/>
+          </svg>
+        </button>
+      </div>
+    `;
+    }
+};
+NileAiSender.styles = styles;
+__decorate([
+    property({ type: String })
+], NileAiSender.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAiSender.prototype, "disabled", void 0);
+__decorate([
+    state()
+], NileAiSender.prototype, "value", void 0);
+__decorate([
+    query('.sender-input')
+], NileAiSender.prototype, "inputEl", void 0);
+NileAiSender = __decorate([
+    customElement('nile-ai-sender')
+], NileAiSender);
+export { NileAiSender };
+//# sourceMappingURL=nile-ai-sender.js.map

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

@@ -0,0 +1,2 @@
+export { NileAnomalyChart } from './nile-anomaly-chart.js';
+export type { AnomalySeriesData, AnomalyConfig } from './nile-anomaly-chart.js';

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+export interface AnomalySeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export interface AnomalyConfig {
+    /** Standard deviation multiplier for the threshold band. Default: 2. */
+    threshold?: number;
+    /** Color for anomaly markers. Default: '#ef4444' (red). */
+    anomalyColor?: string;
+    /** Color for the normal range band. Default: 'rgba(59,130,246,0.1)'. */
+    bandColor?: string;
+}
+export declare class NileAnomalyChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    /** The chart title displayed above the chart. */
+    chartTitle: string;
+    /** The subtitle displayed below the title. */
+    chartSubtitle: string;
+    /** Array of series data. Anomalies are detected per series. */
+    data: AnomalySeriesData[];
+    /** X-axis category labels. */
+    categories: string[];
+    /** Anomaly detection configuration. */
+    anomaly: AnomalyConfig;
+    /** 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;
+    /** Y-axis title text. */
+    yAxisTitle: string;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    /**
+     * Detect anomalies using mean ± (threshold × stddev).
+     * Returns { upper, lower, mean, anomalyIndices } for a data array.
+     */
+    private detectAnomalies;
+    private buildOptions;
+    private initChart;
+    private destroyChart;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-anomaly-chart': NileAnomalyChart;
+    }
+}

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

@@ -0,0 +1,268 @@
+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-anomaly-chart.css.js';
+let NileAnomalyChart = class NileAnomalyChart 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. Anomalies are detected per series. */
+        this.data = [];
+        /** X-axis category labels. */
+        this.categories = [];
+        /** Anomaly detection configuration. */
+        this.anomaly = {};
+        /** 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',
+            'anomaly',
+            '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);
+    }
+    /**
+     * Detect anomalies using mean ± (threshold × stddev).
+     * Returns { upper, lower, mean, anomalyIndices } for a data array.
+     */
+    detectAnomalies(values) {
+        const n = values.length;
+        if (n === 0)
+            return { upper: 0, lower: 0, mean: 0, anomalyIndices: [] };
+        const mean = values.reduce((a, b) => a + b, 0) / n;
+        const variance = values.reduce((sum, v) => sum + (v - mean) ** 2, 0) / n;
+        const stddev = Math.sqrt(variance);
+        const multiplier = this.anomaly?.threshold ?? 2;
+        const upper = mean + multiplier * stddev;
+        const lower = mean - multiplier * stddev;
+        const anomalyIndices = [];
+        for (let i = 0; i < n; i++) {
+            if (values[i] > upper || values[i] < lower) {
+                anomalyIndices.push(i);
+            }
+        }
+        return { upper, lower, mean, anomalyIndices };
+    }
+    buildOptions() {
+        const self = this;
+        const anomalyColor = this.anomaly?.anomalyColor ?? '#ef4444';
+        const bandColor = this.anomaly?.bandColor ?? 'rgba(59, 130, 246, 0.1)';
+        const series = [];
+        const plotBands = [];
+        for (const s of this.data) {
+            const { upper, lower, mean, anomalyIndices } = this.detectAnomalies(s.data);
+            // Main data line
+            series.push({
+                type: 'line',
+                name: s.name,
+                data: s.data.map((val, i) => ({
+                    y: val,
+                    marker: anomalyIndices.includes(i)
+                        ? {
+                            enabled: true,
+                            radius: 7,
+                            fillColor: anomalyColor,
+                            lineColor: anomalyColor,
+                            lineWidth: 2,
+                            symbol: 'diamond',
+                        }
+                        : undefined,
+                })),
+                color: s.color,
+                marker: { enabled: true, radius: 3 },
+            });
+            // Anomaly scatter points (for legend + tooltip clarity)
+            if (anomalyIndices.length > 0) {
+                series.push({
+                    type: 'scatter',
+                    name: `${s.name} (Anomalies)`,
+                    data: anomalyIndices.map(i => ({
+                        x: i,
+                        y: s.data[i],
+                    })),
+                    color: anomalyColor,
+                    marker: { radius: 8, symbol: 'diamond', lineWidth: 2, lineColor: '#fff' },
+                    tooltip: {
+                        pointFormat: '<b>Anomaly:</b> {point.y}<br/>Threshold: ±{point.threshold}',
+                    },
+                    linkedTo: ':previous',
+                });
+            }
+            // Mean line
+            series.push({
+                type: 'line',
+                name: `${s.name} (Mean)`,
+                data: s.data.map(() => Math.round(mean * 100) / 100),
+                color: '#94a3b8',
+                dashStyle: 'ShortDot',
+                marker: { enabled: false },
+                enableMouseTracking: false,
+                linkedTo: ':previous',
+            });
+            // Normal range band (via plotBands on yAxis)
+            plotBands.push({
+                from: Math.round(lower * 100) / 100,
+                to: Math.round(upper * 100) / 100,
+                color: bandColor,
+                label: {
+                    text: 'Normal Range',
+                    style: { color: '#6b7280', fontSize: '11px' },
+                },
+            });
+        }
+        const defaults = {
+            chart: {
+                type: 'line',
+                height: this.height,
+            },
+            title: {
+                text: this.chartTitle || undefined,
+            },
+            subtitle: {
+                text: this.chartSubtitle || undefined,
+            },
+            xAxis: {
+                categories: this.categories,
+                title: { text: undefined },
+            },
+            yAxis: {
+                title: { text: this.yAxisTitle || undefined },
+                plotBands,
+            },
+            tooltip: {
+                shared: true,
+            },
+            plotOptions: {
+                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>`;
+    }
+};
+NileAnomalyChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileAnomalyChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileAnomalyChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileAnomalyChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileAnomalyChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileAnomalyChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileAnomalyChart.prototype, "anomaly", void 0);
+__decorate([
+    property({ type: Object })
+], NileAnomalyChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAnomalyChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileAnomalyChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileAnomalyChart.prototype, "yAxisTitle", void 0);
+NileAnomalyChart = __decorate([
+    customElement('nile-anomaly-chart')
+], NileAnomalyChart);
+export { NileAnomalyChart };
+//# sourceMappingURL=nile-anomaly-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileAreaChart } from './nile-area-chart.js';
+export type { AreaChartSeriesData } from './nile-area-chart.js';

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

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

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

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

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

package/dist/src/nile-area-chart/nile-area-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 AreaChartSeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export declare class NileAreaChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: AreaChartSeriesData[];
+    categories: string[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    yAxisTitle: string;
+    stacked: boolean;
+    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-area-chart': NileAreaChart;
+    }
+}

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

@@ -0,0 +1,122 @@
+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-area-chart.css.js';
+let NileAreaChart = class NileAreaChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.categories = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.yAxisTitle = '';
+        this.stacked = false;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() { this.initChart(); this.setupResizeObserver(); }
+    updated(changedProperties) {
+        const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'yAxisTitle', 'stacked', '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: 'area', height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: { categories: this.categories },
+            yAxis: { title: { text: this.yAxisTitle || undefined } },
+            tooltip: { shared: true },
+            plotOptions: {
+                area: { stacking: this.stacked ? 'normal' : undefined, fillOpacity: 0.25 },
+                series: { cursor: 'pointer', point: { events: { click() { self.emit('nile-chart-click', { point: this, category: this.category, value: this.y, seriesName: this.series.name }); } } } },
+            },
+            series: this.data.map(s => ({ type: 'area', name: s.name, data: s.data, color: s.color })),
+            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>`;
+    }
+};
+NileAreaChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileAreaChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileAreaChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileAreaChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileAreaChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileAreaChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAreaChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileAreaChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileAreaChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAreaChart.prototype, "stacked", void 0);
+NileAreaChart = __decorate([
+    customElement('nile-area-chart')
+], NileAreaChart);
+export { NileAreaChart };
+//# sourceMappingURL=nile-area-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileBarChart } from './nile-bar-chart.js';
+export type { BarChartSeriesData } from './nile-bar-chart.js';

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

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

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

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