@aquera/nile-visualization 0.2.0 → 0.4.0

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

@@ -0,0 +1,41 @@
+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 AreaSplineSeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export declare class NileAreaSplineChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: AreaSplineSeriesData[];
+    categories: string[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    yAxisTitle: string;
+    stacked: boolean;
+    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-spline-chart': NileAreaSplineChart;
+    }
+}

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

@@ -0,0 +1,174 @@
+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-spline-chart.css.js';
+let NileAreaSplineChart = class NileAreaSplineChart 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.stacked = false;
+    }
+    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',
+            '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: 'areaspline', 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: {
+                areaspline: { 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: 'areaspline',
+                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>`;
+    }
+};
+NileAreaSplineChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileAreaSplineChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaSplineChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileAreaSplineChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileAreaSplineChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileAreaSplineChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileAreaSplineChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaSplineChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAreaSplineChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileAreaSplineChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileAreaSplineChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAreaSplineChart.prototype, "stacked", void 0);
+NileAreaSplineChart = __decorate([
+    customElement('nile-area-spline-chart')
+], NileAreaSplineChart);
+export { NileAreaSplineChart };
+//# sourceMappingURL=nile-area-spline-chart.js.map

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

@@ -100,7 +100,9 @@ let NileBellcurveChart = class NileBellcurveChart extends NileElement {
         const self = this;
         // Bell curve derives mean & σ from the **y** values of the base series (see Highcharts docs).
         // Do not use [x, 0] — that makes every y zero and collapses the curve.
-        const scatterData = this.data.map(v => [v, v]);
+        // Highcharts #15: scatter x must be ascending; raw samples are often unsorted.
+        const sorted = [...this.data].sort((a, b) => a - b);
+        const scatterData = sorted.map(v => [v, v]);
         const pts = this.pointsInInterval > 0 ? this.pointsInInterval : 40;
         const iv = this.intervals > 0 ? this.intervals : 3;
         return deepMerge({

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

@@ -2,4 +2,4 @@ export { NileChart } from './nile-chart.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';
+export type { AiConfigType, SwitchableConfigType, AqConfigType, ChartBarConfigType, ChartPieConfigType, ChartTrendlineConfigType, ChartAnomalyConfigType, ChartLineConfigType, ChartAreaConfigType, ChartInvertedAreaConfigType, ChartColumnConfigType, ChartDonutConfigType, ChartScatterConfigType, ChartBubbleConfigType, ChartSplineConfigType, ChartRadarConfigType, ChartGaugeConfigType, ChartWaterfallConfigType, ChartClusterConfigType, ChartStackedConfigType, ChartHistogramConfigType, ChartBellcurveConfigType, ChartBoxplotConfigType, ChartTimelineConfigType, ChartDumbbellConfigType, ChartDumbbellLowerConfigType, ChartDumbbellUpperConfigType, ChartColumnPyramidConfigType, ChartLollipopConfigType, ChartAreaSplineConfigType, ChartAreaNegativeConfigType, ChartAreaRangeConfigType, ChartColumnRangeConfigType, ChartColumnDrilldownConfigType, ChartRadialBarConfigType, ChartVariablePieConfigType, ChartEulerConfigType, ChartPolygonConfigType, ChartVectorConfigType, ChartXrangeConfigType, ChartFanConfigType, ChartFunnelConfigType, ChartOrganizationConfigType, ChartLineColumnConfigType, ChartHeatmapConfigType, ChartFlameConfigType, ChartSpiderwebConfigType, ChartKpiPropsType, PrimitiveChartConfigType, SeparatedChartConfigInputType, AllChartConfigType, ChartConfigType, NileChartConfigInputType, ChartAiPanelPayload, ChartAiSenderPayload, NileAiPanelConfigInputType, NileAiSenderConfigInputType, } from '../internal/types/index.js';

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

@@ -1,19 +1,6 @@
-import type { Options } from 'highcharts';
-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';
-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';
+import type { ChartConfigType } from '../internal/types/chart-config.type.js';
+/** Every supported `chart.type` value for `<nile-chart>`. */
+export type ChartType = ChartConfigType['type'];
 export type SwitchAggregation = 'by-category' | 'by-series' | 'flatten';
 export interface NileAiConfig {
     /** Show the AI chat icon on the chart. Default: false. */
@@ -23,110 +10,63 @@ export interface NileAiConfig {
     /** Initial assistant message shown when the chat panel opens. */
     welcomeMessage?: string;
 }
+/** Fields merged from `aq` (and shared card chrome) onto `chart` for `<nile-chart>`. */
 export interface NileChartConfigBase {
     chartTitle?: string;
     chartSubtitle?: string;
     height?: string;
     loading?: boolean;
-    options?: Options;
+    options?: import('highcharts').Options;
     summary?: string;
     toggleLabel?: string;
     /** Chart types the user can switch to. Shows type-switch UI when set. */
     switchableTypes?: ChartType[];
-    /** How to aggregate bar data when converting to pie. Default: 'by-category'. */
+    /** How to aggregate bar-like data when converting to pie. Default: 'by-category'. */
     switchAggregation?: SwitchAggregation;
     /** AI chat configuration. When ai.enabled is true, shows the allsearch icon. */
     ai?: NileAiConfig;
 }
-export interface NileBarChartConfig extends NileChartConfigBase {
+/** Flat config for `<nile-chart>` after merging `chart` + `aq`. */
+export type NileChartConfig = ChartConfigType & NileChartConfigBase;
+export type NileBarChartConfig = Extract<NileChartConfig, {
     type: 'bar';
-    data: BarChartSeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-}
-export interface NilePieChartConfig extends NileChartConfigBase {
+}>;
+export type NilePieChartConfig = Extract<NileChartConfig, {
     type: 'pie';
-    data: PieChartSeriesData[];
-    seriesName?: string;
-    showDataLabels?: boolean;
-    showLegend?: boolean;
-}
-export interface NileTrendlineChartConfig extends NileChartConfigBase {
+}>;
+export type NileTrendlineChartConfig = Extract<NileChartConfig, {
     type: 'trendline';
-    data: TrendlineSeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-    forecast?: ForecastConfig;
-}
-export interface NileAnomalyChartConfig extends NileChartConfigBase {
+}>;
+export type NileAnomalyChartConfig = Extract<NileChartConfig, {
     type: 'anomaly';
-    data: AnomalySeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-    anomaly?: AnomalyConfig;
-}
-export interface NileLineChartConfig extends NileChartConfigBase {
+}>;
+export type NileLineChartConfig = Extract<NileChartConfig, {
     type: 'line';
-    data: LineChartSeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-}
-export interface NileAreaChartConfig extends NileChartConfigBase {
+}>;
+export type NileAreaChartConfig = Extract<NileChartConfig, {
     type: 'area';
-    data: AreaChartSeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-    stacked?: boolean;
-}
-export interface NileColumnChartConfig extends NileChartConfigBase {
+}>;
+export type NileColumnChartConfig = Extract<NileChartConfig, {
     type: 'column';
-    data: ColumnChartSeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-}
-export interface NileDonutChartConfig extends NileChartConfigBase {
+}>;
+export type NileDonutChartConfig = Extract<NileChartConfig, {
     type: 'donut';
-    data: DonutChartSeriesData[];
-    seriesName?: string;
-    innerSize?: string;
-    showDataLabels?: boolean;
-    showLegend?: boolean;
-}
-export interface NileScatterChartConfig extends NileChartConfigBase {
+}>;
+export type NileScatterChartConfig = Extract<NileChartConfig, {
     type: 'scatter';
-    data: ScatterChartSeriesData[];
-    xAxisTitle?: string;
-    yAxisTitle?: string;
-}
-export interface NileBubbleChartConfig extends NileChartConfigBase {
+}>;
+export type NileBubbleChartConfig = Extract<NileChartConfig, {
     type: 'bubble';
-    data: BubbleChartSeriesData[];
-    xAxisTitle?: string;
-    yAxisTitle?: string;
-}
-export interface NileSplineChartConfig extends NileChartConfigBase {
+}>;
+export type NileSplineChartConfig = Extract<NileChartConfig, {
     type: 'spline';
-    data: SplineChartSeriesData[];
-    categories?: string[];
-    yAxisTitle?: string;
-}
-export interface NileRadarChartConfig extends NileChartConfigBase {
+}>;
+export type NileRadarChartConfig = Extract<NileChartConfig, {
     type: 'radar';
-    data: RadarChartSeriesData[];
-    categories?: string[];
-    showArea?: boolean;
-}
-export interface NileGaugeChartConfig extends NileChartConfigBase {
+}>;
+export type NileGaugeChartConfig = Extract<NileChartConfig, {
     type: 'gauge';
-    value: number;
-    min?: number;
-    max?: number;
-    suffix?: string;
-    bands?: GaugeBand[];
-}
-export interface NileWaterfallChartConfig extends NileChartConfigBase {
+}>;
+export type NileWaterfallChartConfig = Extract<NileChartConfig, {
     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.css.js

@@ -13,7 +13,7 @@ export const styles = css `
   /* ── Unified Card Container ── */
 
   .chart-card {
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-quaternary-alt));
     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));

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

@@ -16,11 +16,46 @@ 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-cluster-chart/index.js';
+import '../nile-stacked-chart/index.js';
+import '../nile-histogram-chart/index.js';
+import '../nile-bellcurve-chart/index.js';
+import '../nile-boxplot-chart/index.js';
+import '../nile-timeline-chart/index.js';
+import '../nile-dumbbell-chart/index.js';
+import '../nile-dumbbell-lower-chart/index.js';
+import '../nile-dumbbell-upper-chart/index.js';
+import '../nile-fan-chart/index.js';
+import '../nile-funnel-chart/index.js';
+import '../nile-organization-chart/index.js';
+import '../nile-line-column-chart/index.js';
+import '../nile-heatmap-chart/index.js';
+import '../nile-flame-chart/index.js';
+import '../nile-spiderweb-chart/index.js';
+import '../nile-column-pyramid-chart/index.js';
+import '../nile-lollipop-chart/index.js';
+import '../nile-inverted-area-chart/index.js';
+import '../nile-area-spline-chart/index.js';
+import '../nile-area-negative-chart/index.js';
+import '../nile-area-range-chart/index.js';
+import '../nile-column-range-chart/index.js';
+import '../nile-column-drilldown-chart/index.js';
+import '../nile-radial-bar-chart/index.js';
+import '../nile-variable-pie-chart/index.js';
+import '../nile-euler-chart/index.js';
+import '../nile-polygon-chart/index.js';
+import '../nile-vector-chart/index.js';
+import '../nile-xrange-chart/index.js';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
     /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
     config: NileChartConfig | NileChartConfigInputType | null;
+    /**
+     * When set, fills `chart.type` if the config omits it (same values as `chart.type`, e.g. `stacked`, `pie`).
+     * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
+     */
+    chartTypeAttr: string;
     /** 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). */
@@ -38,6 +73,7 @@ export declare class NileChart extends NileElement {
     private handleOutsideClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private mergeChartTypeFromAttr;
     /** Resolve { chart, aq } input to flat NileChartConfig. */
     private resolveConfig;
     private resolvedConfig;