@aquera/nile-visualization 0.1.0 → 0.3.0

package/dist/src/internal/types/separated-chart-config-input.type.d.ts

@@ -0,0 +1,7 @@
+import type { AqConfigType } from './aq-config.type.js';
+import type { PrimitiveChartConfigType } from './primitive-chart-config.type.js';
+/** Input for primitive `<nile-*-chart>` tags that use `el.config = { chart, aq }`. */
+export interface SeparatedChartConfigInputType {
+    chart: PrimitiveChartConfigType;
+    aq?: AqConfigType;
+}

package/dist/src/internal/types/separated-chart-config-input.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=separated-chart-config-input.type.js.map

package/dist/src/internal/types/switchable-config.type.d.ts

@@ -0,0 +1,8 @@
+import type { ChartType, SwitchAggregation } from '../../nile-chart/nile-chart-config.js';
+/** Config for chart type switching UI. */
+export interface SwitchableConfigType {
+    /** Chart types the user can switch to. */
+    types?: ChartType[];
+    /** How to aggregate bar data when converting to pie. Default: 'by-category'. */
+    aggregation?: SwitchAggregation;
+}

package/dist/src/internal/types/switchable-config.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=switchable-config.type.js.map

package/dist/src/nile-ai-panel/index.d.ts

@@ -1 +1,2 @@
 export { NileAiPanel } from './nile-ai-panel.js';
+export type { ChartAiPanelPayload, NileAiPanelConfigInputType, } from '../internal/types/nile-ai-widgets-config-input.type.js';

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

@@ -1,8 +1,11 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element.js';
+import type { NileAiPanelConfigInputType } from '../internal/types/nile-ai-widgets-config-input.type.js';
 import '../nile-ai-sender/index.js';
 export declare class NileAiPanel extends NileElement {
     static styles: CSSResultGroup;
+    /** Full configuration: `{ chart, aq }` (same convention as Nile charts). */
+    config: NileAiPanelConfigInputType | null;
     /** Placeholder text passed to nile-ai-sender. */
     placeholder: string;
     /** Welcome message shown when the panel opens. */
@@ -10,6 +13,10 @@ export declare class NileAiPanel extends NileElement {
     private messages;
     private loading;
     private messagesEl;
+    /** Apply `{ chart, aq }` to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     /** Add a user message to the conversation. */
     addUserMessage(text: string): void;
     /** Add an assistant response to the conversation. */

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

@@ -7,6 +7,8 @@ import '../nile-ai-sender/index.js';
 let NileAiPanel = class NileAiPanel extends NileElement {
     constructor() {
         super(...arguments);
+        /** Full configuration: `{ chart, aq }` (same convention as Nile charts). */
+        this.config = null;
         /** Placeholder text passed to nile-ai-sender. */
         this.placeholder = 'Ask about this chart...';
         /** Welcome message shown when the panel opens. */
@@ -14,6 +16,35 @@ let NileAiPanel = class NileAiPanel extends NileElement {
         this.messages = [];
         this.loading = false;
     }
+    /** Apply `{ chart, aq }` to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (aq) {
+            if (aq.ai?.placeholder != null)
+                this.placeholder = aq.ai.placeholder;
+            if (aq.ai?.welcomeMessage != null)
+                this.welcomeMessage = aq.ai.welcomeMessage;
+        }
+        if (c) {
+            const p = c;
+            if (p.placeholder !== undefined)
+                this.placeholder = p.placeholder;
+            if (p.welcomeMessage !== undefined)
+                this.welcomeMessage = p.welcomeMessage;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
+        super.updated(changedProperties);
+    }
     /** Add a user message to the conversation. */
     addUserMessage(text) {
         this.messages = [...this.messages, { role: 'user', text }];
@@ -76,6 +107,9 @@ let NileAiPanel = class NileAiPanel extends NileElement {
     }
 };
 NileAiPanel.styles = styles;
+__decorate([
+    property({ type: Object })
+], NileAiPanel.prototype, "config", void 0);
 __decorate([
     property({ type: String })
 ], NileAiPanel.prototype, "placeholder", void 0);

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

@@ -1 +1,2 @@
 export { NileAiSender } from './nile-ai-sender.js';
+export type { ChartAiSenderPayload, NileAiSenderConfigInputType, } from '../internal/types/nile-ai-widgets-config-input.type.js';

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

@@ -1,13 +1,20 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element.js';
+import type { NileAiSenderConfigInputType } from '../internal/types/nile-ai-widgets-config-input.type.js';
 export declare class NileAiSender extends NileElement {
     static styles: CSSResultGroup;
+    /** Full configuration: `{ chart, aq }` (same convention as Nile charts). */
+    config: NileAiSenderConfigInputType | null;
     /** Placeholder text for the input. */
     placeholder: string;
     /** Whether the input is disabled. */
     disabled: boolean;
     private value;
     private inputEl;
+    /** Apply `{ chart, aq }` to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     private handleInput;
     private handleKeyDown;
     private send;

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

@@ -6,12 +6,39 @@ import { styles } from './nile-ai-sender.css.js';
 let NileAiSender = class NileAiSender extends NileElement {
     constructor() {
         super(...arguments);
+        /** Full configuration: `{ chart, aq }` (same convention as Nile charts). */
+        this.config = null;
         /** Placeholder text for the input. */
         this.placeholder = 'Ask about this chart...';
         /** Whether the input is disabled. */
         this.disabled = false;
         this.value = '';
     }
+    /** Apply `{ chart, aq }` to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (aq?.ai?.placeholder != null)
+            this.placeholder = aq.ai.placeholder;
+        if (c) {
+            const s = c;
+            if (s.placeholder !== undefined)
+                this.placeholder = s.placeholder;
+            if (s.disabled !== undefined)
+                this.disabled = s.disabled;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
+        super.updated(changedProperties);
+    }
     handleInput(e) {
         this.value = e.target.value;
     }
@@ -58,6 +85,9 @@ let NileAiSender = class NileAiSender extends NileElement {
     }
 };
 NileAiSender.styles = styles;
+__decorate([
+    property({ type: Object })
+], NileAiSender.prototype, "config", void 0);
 __decorate([
     property({ type: String })
 ], NileAiSender.prototype, "placeholder", void 0);

package/dist/src/nile-anomaly-chart/nile-anomaly-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 AnomalySeriesData {
     name: string;
     data: number[];
@@ -20,6 +21,8 @@ export declare class NileAnomalyChart extends NileElement {
     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. */
@@ -38,6 +41,9 @@ export declare class NileAnomalyChart extends NileElement {
     height: string;
     /** Y-axis title text. */
     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-anomaly-chart/nile-anomaly-chart.js

@@ -11,6 +11,8 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
         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. */
@@ -30,6 +32,38 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
         /** Y-axis title text. */
         this.yAxisTitle = '';
     }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const anom = c;
+            if (anom.data)
+                this.data = anom.data;
+            if (anom.categories)
+                this.categories = anom.categories;
+            if (anom.yAxisTitle)
+                this.yAxisTitle = anom.yAxisTitle;
+            if (anom.height)
+                this.height = anom.height;
+            if (anom.loading !== undefined)
+                this.loading = anom.loading;
+            if (anom.options)
+                this.options = anom.options;
+            if (anom.anomaly)
+                this.anomaly = anom.anomaly;
+        }
+        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();
@@ -41,6 +75,10 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
         this.setupResizeObserver();
     }
     updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
         const chartProps = [
             'data',
             'categories',
@@ -234,6 +272,9 @@ NileAnomalyChart.styles = styles;
 __decorate([
     query('.chart-container')
 ], NileAnomalyChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileAnomalyChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-title' })
 ], NileAnomalyChart.prototype, "chartTitle", void 0);

package/dist/src/nile-area-chart/nile-area-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 AreaChartSeriesData {
     name: string;
     data: number[];
@@ -12,6 +13,8 @@ export declare class NileAreaChart extends NileElement {
     private chart;
     private resizeObserver;
     private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
     chartTitle: string;
     chartSubtitle: string;
     data: AreaChartSeriesData[];
@@ -21,6 +24,9 @@ export declare class NileAreaChart extends NileElement {
     height: string;
     yAxisTitle: string;
     stacked: boolean;
+    /** 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-area-chart/nile-area-chart.js

@@ -11,6 +11,8 @@ let NileAreaChart = class NileAreaChart 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 = [];
@@ -21,6 +23,38 @@ let NileAreaChart = class NileAreaChart extends NileElement {
         this.yAxisTitle = '';
         this.stacked = false;
     }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const area = c;
+            if (area.data)
+                this.data = area.data;
+            if (area.categories)
+                this.categories = area.categories;
+            if (area.yAxisTitle)
+                this.yAxisTitle = area.yAxisTitle;
+            if (area.height)
+                this.height = area.height;
+            if (area.loading !== undefined)
+                this.loading = area.loading;
+            if (area.options)
+                this.options = area.options;
+            if (area.stacked !== undefined)
+                this.stacked = area.stacked;
+        }
+        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();
@@ -29,6 +63,10 @@ let NileAreaChart = class NileAreaChart extends NileElement {
     }
     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', 'yAxisTitle', 'stacked', 'loading'];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -88,6 +126,9 @@ NileAreaChart.styles = styles;
 __decorate([
     query('.chart-container')
 ], NileAreaChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-title' })
 ], NileAreaChart.prototype, "chartTitle", void 0);

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

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

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+export interface AreaNegativeSeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+    negativeColor?: string;
+}
+export declare class NileAreaNegativeChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: AreaNegativeSeriesData[];
+    categories: string[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    yAxisTitle: string;
+    threshold: number;
+    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-area-negative-chart': NileAreaNegativeChart;
+    }
+}

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

@@ -0,0 +1,178 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-area-negative-chart.css.js';
+let NileAreaNegativeChart = class NileAreaNegativeChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.categories = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.yAxisTitle = '';
+        this.threshold = 0;
+    }
+    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',
+            'yAxisTitle',
+            'threshold',
+            '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: {
+                    threshold: this.threshold,
+                    fillOpacity: 0.35,
+                },
+                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,
+                negativeColor: s.negativeColor,
+            })),
+            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>`;
+    }
+};
+NileAreaNegativeChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileAreaNegativeChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaNegativeChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileAreaNegativeChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileAreaNegativeChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileAreaNegativeChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileAreaNegativeChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaNegativeChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAreaNegativeChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileAreaNegativeChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileAreaNegativeChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: Number })
+], NileAreaNegativeChart.prototype, "threshold", void 0);
+NileAreaNegativeChart = __decorate([
+    customElement('nile-area-negative-chart')
+], NileAreaNegativeChart);
+export { NileAreaNegativeChart };
+//# sourceMappingURL=nile-area-negative-chart.js.map

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

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

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

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

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

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