@aquera/nile-visualization 0.1.0 → 0.2.0

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

@@ -0,0 +1,235 @@
+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 { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-boxplot-chart.css.js';
+let NileBoxplotChart = class NileBoxplotChart 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;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.categories = [];
+        this.data = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.xAxisTitle = '';
+        this.yAxisTitle = '';
+        this.showLegend = true;
+        /** When true, draws horizontal boxes (categories on the y-axis). */
+        this.horizontal = false;
+    }
+    /** Apply `{ chart, aq }` config to individual properties. */
+    applyConfig(cfg) {
+        applySeparatedChartConfig(this, cfg);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() {
+        this.initChart();
+        this.setupResizeObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
+        const props = [
+            'data',
+            'categories',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'xAxisTitle',
+            'yAxisTitle',
+            'showLegend',
+            'horizontal',
+            '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);
+    }
+    mapSeries() {
+        return this.data.map(s => ({
+            type: 'boxplot',
+            name: s.name,
+            color: s.color,
+            data: s.data.map((b, i) => {
+                const row = {
+                    x: i,
+                    low: b.low,
+                    q1: b.q1,
+                    median: b.median,
+                    q3: b.q3,
+                    high: b.high,
+                };
+                if (b.color)
+                    row.color = b.color;
+                return row;
+            }),
+        }));
+    }
+    buildOptions() {
+        const self = this;
+        const catAxis = {
+            categories: this.categories,
+            title: { text: this.xAxisTitle || undefined },
+            gridLineWidth: 1,
+        };
+        const valueAxis = {
+            title: { text: this.yAxisTitle || undefined },
+            gridLineWidth: 1,
+        };
+        return deepMerge({
+            chart: {
+                type: 'boxplot',
+                height: this.height,
+                inverted: this.horizontal,
+            },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            legend: { enabled: this.showLegend },
+            xAxis: this.horizontal ? valueAxis : catAxis,
+            yAxis: this.horizontal ? catAxis : valueAxis,
+            tooltip: {
+                pointFormat: '<span style="color:{point.color}">●</span> <b>{series.name}</b><br/>' +
+                    'Maximum: <b>{point.high}</b><br/>' +
+                    'Upper quartile: <b>{point.q3}</b><br/>' +
+                    'Median: <b>{point.median}</b><br/>' +
+                    'Lower quartile: <b>{point.q1}</b><br/>' +
+                    'Minimum: <b>{point.low}</b><br/>',
+            },
+            plotOptions: {
+                boxplot: {
+                    fillColor: 'rgba(59, 130, 246, 0.12)',
+                    lineWidth: 2,
+                    medianColor: '#1d4ed8',
+                    medianWidth: 3,
+                    stemColor: '#64748b',
+                    whiskerColor: '#64748b',
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                const xIdx = typeof this.x === 'number' ? this.x : 0;
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    category: self.categories[xIdx],
+                                    low: this.low,
+                                    q1: this.q1,
+                                    median: this.median,
+                                    q3: this.q3,
+                                    high: this.high,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+            },
+            series: this.mapSeries(),
+            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>`;
+    }
+};
+NileBoxplotChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileBoxplotChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileBoxplotChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileBoxplotChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileBoxplotChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileBoxplotChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Array })
+], NileBoxplotChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], NileBoxplotChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileBoxplotChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileBoxplotChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'x-axis-title' })
+], NileBoxplotChart.prototype, "xAxisTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileBoxplotChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileBoxplotChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'horizontal' })
+], NileBoxplotChart.prototype, "horizontal", void 0);
+NileBoxplotChart = __decorate([
+    customElement('nile-boxplot-chart')
+], NileBoxplotChart);
+export { NileBoxplotChart };
+//# sourceMappingURL=nile-boxplot-chart.js.map

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

@@ -1,6 +1,7 @@
 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 BubbleChartSeriesData {
     name: string;
     data: [number, number, number][];
@@ -12,6 +13,8 @@ export declare class NileBubbleChart extends NileElement {
     private chart;
     private resizeObserver;
     private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
     chartTitle: string;
     chartSubtitle: string;
     data: BubbleChartSeriesData[];
@@ -20,6 +23,9 @@ export declare class NileBubbleChart extends NileElement {
     height: string;
     xAxisTitle: string;
     yAxisTitle: string;
+    /** Apply { chart, aq } config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;

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

@@ -11,6 +11,8 @@ let NileBubbleChart = class NileBubbleChart extends NileElement {
         this._hc = null;
         this.chart = null;
         this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated { chart, aq } input. */
+        this.config = null;
         this.chartTitle = '';
         this.chartSubtitle = '';
         this.data = [];
@@ -20,6 +22,36 @@ let NileBubbleChart = class NileBubbleChart extends NileElement {
         this.xAxisTitle = '';
         this.yAxisTitle = '';
     }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const bubble = c;
+            if (bubble.data)
+                this.data = bubble.data;
+            if (bubble.xAxisTitle)
+                this.xAxisTitle = bubble.xAxisTitle;
+            if (bubble.yAxisTitle)
+                this.yAxisTitle = bubble.yAxisTitle;
+            if (bubble.height)
+                this.height = bubble.height;
+            if (bubble.loading !== undefined)
+                this.loading = bubble.loading;
+            if (bubble.options)
+                this.options = bubble.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();
@@ -28,6 +60,10 @@ let NileBubbleChart = class NileBubbleChart extends NileElement {
     }
     firstUpdated() { this.initChart(); this.setupResizeObserver(); }
     updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
         const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'xAxisTitle', 'yAxisTitle', 'loading'];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -92,6 +128,9 @@ NileBubbleChart.styles = styles;
 __decorate([
     query('.chart-container')
 ], NileBubbleChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileBubbleChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-title' })
 ], NileBubbleChart.prototype, "chartTitle", void 0);

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

@@ -1,3 +1,5 @@
 export { NileChart } from './nile-chart.js';
-export type { NileChartConfig, NileBarChartConfig, NilePieChartConfig, NileTrendlineChartConfig, NileAnomalyChartConfig, ChartType, SwitchAggregation, NileAiConfig, } from './nile-chart-config.js';
+export type { NileChartConfig, NileBarChartConfig, NilePieChartConfig, NileTrendlineChartConfig, NileAnomalyChartConfig, NileLineChartConfig, NileAreaChartConfig, NileColumnChartConfig, NileDonutChartConfig, NileScatterChartConfig, NileBubbleChartConfig, NileSplineChartConfig, NileRadarChartConfig, NileGaugeChartConfig, NileWaterfallChartConfig, ChartType, SwitchAggregation, NileAiConfig, } from './nile-chart-config.js';
 export { convertConfig, registerAdapter } from '../internal/chart-adapters.js';
+export { nileChartConfig } from './nile-chart-config-builder.js';
+export type { AiConfigType, SwitchableConfigType, AqConfigType, ChartBarConfigType, ChartPieConfigType, ChartTrendlineConfigType, ChartAnomalyConfigType, ChartLineConfigType, ChartAreaConfigType, ChartColumnConfigType, ChartDonutConfigType, ChartScatterConfigType, ChartBubbleConfigType, ChartSplineConfigType, ChartRadarConfigType, ChartGaugeConfigType, ChartWaterfallConfigType, ChartClusterConfigType, ChartStackedConfigType, ChartHistogramConfigType, ChartBellcurveConfigType, ChartBoxplotConfigType, ChartTimelineConfigType, ChartDumbbellConfigType, ChartFanConfigType, ChartFunnelConfigType, ChartFlameConfigType, ChartSpiderwebConfigType, ChartKpiPropsType, PrimitiveChartConfigType, SeparatedChartConfigInputType, AllChartConfigType, ChartConfigType, NileChartConfigInputType, ChartAiPanelPayload, ChartAiSenderPayload, NileAiPanelConfigInputType, NileAiSenderConfigInputType, } from '../internal/types/index.js';

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

@@ -1,3 +1,4 @@
 export { NileChart } from './nile-chart.js';
 export { convertConfig, registerAdapter } from '../internal/chart-adapters.js';
+export { nileChartConfig } from './nile-chart-config-builder.js';
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,4 @@
+import type { NileChartConfig } from './nile-chart-config.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
+/** Merges separated chart + aq config into a flat NileChartConfig. */
+export declare function nileChartConfig(input: NileChartConfigInputType): NileChartConfig;

package/dist/src/nile-chart/nile-chart-config-builder.js

@@ -0,0 +1,13 @@
+/** Merges separated chart + aq config into a flat NileChartConfig. */
+export function nileChartConfig(input) {
+    const { chart, aq } = input;
+    const { ai, switchable, ...rest } = aq ?? {};
+    return {
+        ...chart,
+        ...rest,
+        ...(ai && { ai }),
+        ...(switchable?.types && { switchableTypes: switchable.types }),
+        ...(switchable?.aggregation && { switchAggregation: switchable.aggregation }),
+    };
+}
+//# sourceMappingURL=nile-chart-config-builder.js.map

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

@@ -3,7 +3,17 @@ import type { BarChartSeriesData } from '../nile-bar-chart/nile-bar-chart.js';
 import type { PieChartSeriesData } from '../nile-pie-chart/nile-pie-chart.js';
 import type { TrendlineSeriesData, ForecastConfig } from '../nile-trendline-chart/nile-trendline-chart.js';
 import type { AnomalySeriesData, AnomalyConfig } from '../nile-anomaly-chart/nile-anomaly-chart.js';
-export type ChartType = 'bar' | 'pie' | 'trendline' | 'anomaly';
+import type { LineChartSeriesData } from '../nile-line-chart/nile-line-chart.js';
+import type { AreaChartSeriesData } from '../nile-area-chart/nile-area-chart.js';
+import type { ColumnChartSeriesData } from '../nile-column-chart/nile-column-chart.js';
+import type { DonutChartSeriesData } from '../nile-donut-chart/nile-donut-chart.js';
+import type { ScatterChartSeriesData } from '../nile-scatter-chart/nile-scatter-chart.js';
+import type { BubbleChartSeriesData } from '../nile-bubble-chart/nile-bubble-chart.js';
+import type { SplineChartSeriesData } from '../nile-spline-chart/nile-spline-chart.js';
+import type { RadarChartSeriesData } from '../nile-radar-chart/nile-radar-chart.js';
+import type { GaugeBand } from '../nile-gauge-chart/nile-gauge-chart.js';
+import type { WaterfallDataPoint } from '../nile-waterfall-chart/nile-waterfall-chart.js';
+export type ChartType = 'bar' | 'pie' | 'trendline' | 'anomaly' | 'line' | 'area' | 'column' | 'donut' | 'scatter' | 'bubble' | 'spline' | 'radar' | 'gauge' | 'waterfall';
 export type SwitchAggregation = 'by-category' | 'by-series' | 'flatten';
 export interface NileAiConfig {
     /** Show the AI chat icon on the chart. Default: false. */
@@ -55,4 +65,68 @@ export interface NileAnomalyChartConfig extends NileChartConfigBase {
     yAxisTitle?: string;
     anomaly?: AnomalyConfig;
 }
-export type NileChartConfig = NileBarChartConfig | NilePieChartConfig | NileTrendlineChartConfig | NileAnomalyChartConfig;
+export interface NileLineChartConfig extends NileChartConfigBase {
+    type: 'line';
+    data: LineChartSeriesData[];
+    categories?: string[];
+    yAxisTitle?: string;
+}
+export interface NileAreaChartConfig extends NileChartConfigBase {
+    type: 'area';
+    data: AreaChartSeriesData[];
+    categories?: string[];
+    yAxisTitle?: string;
+    stacked?: boolean;
+}
+export interface NileColumnChartConfig extends NileChartConfigBase {
+    type: 'column';
+    data: ColumnChartSeriesData[];
+    categories?: string[];
+    yAxisTitle?: string;
+}
+export interface NileDonutChartConfig extends NileChartConfigBase {
+    type: 'donut';
+    data: DonutChartSeriesData[];
+    seriesName?: string;
+    innerSize?: string;
+    showDataLabels?: boolean;
+    showLegend?: boolean;
+}
+export interface NileScatterChartConfig extends NileChartConfigBase {
+    type: 'scatter';
+    data: ScatterChartSeriesData[];
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+}
+export interface NileBubbleChartConfig extends NileChartConfigBase {
+    type: 'bubble';
+    data: BubbleChartSeriesData[];
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+}
+export interface NileSplineChartConfig extends NileChartConfigBase {
+    type: 'spline';
+    data: SplineChartSeriesData[];
+    categories?: string[];
+    yAxisTitle?: string;
+}
+export interface NileRadarChartConfig extends NileChartConfigBase {
+    type: 'radar';
+    data: RadarChartSeriesData[];
+    categories?: string[];
+    showArea?: boolean;
+}
+export interface NileGaugeChartConfig extends NileChartConfigBase {
+    type: 'gauge';
+    value: number;
+    min?: number;
+    max?: number;
+    suffix?: string;
+    bands?: GaugeBand[];
+}
+export interface NileWaterfallChartConfig extends NileChartConfigBase {
+    type: 'waterfall';
+    data: WaterfallDataPoint[];
+    yAxisTitle?: string;
+}
+export type NileChartConfig = NileBarChartConfig | NilePieChartConfig | NileTrendlineChartConfig | NileAnomalyChartConfig | NileLineChartConfig | NileAreaChartConfig | NileColumnChartConfig | NileDonutChartConfig | NileScatterChartConfig | NileBubbleChartConfig | NileSplineChartConfig | NileRadarChartConfig | NileGaugeChartConfig | NileWaterfallChartConfig;

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

@@ -1,15 +1,26 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element.js';
 import type { NileChartConfig } from './nile-chart-config.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
 import '../nile-bar-chart/index.js';
 import '../nile-pie-chart/index.js';
 import '../nile-trendline-chart/index.js';
 import '../nile-anomaly-chart/index.js';
+import '../nile-line-chart/index.js';
+import '../nile-area-chart/index.js';
+import '../nile-column-chart/index.js';
+import '../nile-donut-chart/index.js';
+import '../nile-scatter-chart/index.js';
+import '../nile-bubble-chart/index.js';
+import '../nile-spline-chart/index.js';
+import '../nile-radar-chart/index.js';
+import '../nile-gauge-chart/index.js';
+import '../nile-waterfall-chart/index.js';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
-    /** Full chart configuration including type, data, and summary. */
-    config: NileChartConfig | null;
+    /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
+    config: NileChartConfig | NileChartConfigInputType | null;
     /** The summary/insight text displayed in the overlay (fallback when config is not set). */
     summary: string;
     /** Label for the toggle button (fallback when config is not set). */
@@ -27,6 +38,9 @@ export declare class NileChart extends NileElement {
     private handleOutsideClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Resolve { chart, aq } input to flat NileChartConfig. */
+    private resolveConfig;
+    private resolvedConfig;
     protected updated(changedProperties: PropertyValues): void;
     private toggle;
     private toggleMenu;