@aquera/nile-visualization 0.1.0 → 0.2.0

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

@@ -0,0 +1,257 @@
+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-fan-chart.css.js';
+const DEFAULT_BAND_COLORS = ['#93c5fd', '#60a5fa', '#3b82f6'];
+let NileFanChart = class NileFanChart 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.lineData = [];
+        this.bands = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.yAxisTitle = '';
+        this.lineSeriesName = '';
+        this.lineColor = '#1d4ed8';
+        this.showLegend = false;
+        /**
+         * Index (0-based) of the first **forecast** category on the x-axis.
+         * When ≥ 0, draws a dashed separator and optional plot band.
+         */
+        this.forecastStartIndex = -1;
+        this.forecastBandLabel = '';
+    }
+    /** 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 = [
+            'lineData',
+            'bands',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'yAxisTitle',
+            'lineSeriesName',
+            'lineColor',
+            'showLegend',
+            'forecastStartIndex',
+            'forecastBandLabel',
+            '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;
+        const fi = this.forecastStartIndex;
+        const nCat = this.lineData.length;
+        const xAxisExtra = { type: 'category' };
+        if (fi >= 0 && nCat > 0) {
+            xAxisExtra.plotLines = [
+                {
+                    value: fi,
+                    dashStyle: 'Dash',
+                    color: '#64748b',
+                    width: 2,
+                    zIndex: 5,
+                },
+            ];
+            if (this.forecastBandLabel) {
+                xAxisExtra.plotBands = [
+                    {
+                        from: fi,
+                        to: Math.max(fi, nCat - 1) + 0.99,
+                        color: 'rgba(59, 130, 246, 0.06)',
+                        label: {
+                            text: this.forecastBandLabel,
+                            style: { color: '#64748b', fontSize: '11px' },
+                        },
+                    },
+                ];
+            }
+        }
+        const bandSeries = this.bands.map((b, i) => ({
+            type: 'arearange',
+            name: b.name,
+            data: b.data.map(d => [d.category, d.low, d.high]),
+            color: b.color ?? DEFAULT_BAND_COLORS[i % DEFAULT_BAND_COLORS.length],
+            fillOpacity: b.fillOpacity ?? Math.min(0.38, 0.14 + i * 0.08),
+            lineWidth: 0,
+            enableMouseTracking: false,
+            zIndex: i,
+            states: { inactive: { enabled: false } },
+        }));
+        return deepMerge({
+            chart: {
+                height: this.height,
+                zoomType: 'x',
+            },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            legend: { enabled: this.showLegend },
+            tooltip: { shared: true, crosshairs: true },
+            xAxis: xAxisExtra,
+            yAxis: {
+                title: { text: this.yAxisTitle || undefined },
+            },
+            plotOptions: {
+                line: {
+                    marker: { enabled: false },
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    category: this.category,
+                                    value: this.y,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+                arearange: {
+                    lineWidth: 0,
+                    states: { inactive: { enabled: false } },
+                },
+            },
+            series: [
+                ...bandSeries,
+                {
+                    type: 'line',
+                    name: this.lineSeriesName || 'Path',
+                    data: this.lineData.map(p => [p.category, p.y]),
+                    color: this.lineColor,
+                    lineWidth: 3,
+                    zIndex: this.bands.length + 2,
+                    marker: { enabled: false },
+                },
+            ],
+            credits: { enabled: false },
+        }, this.options);
+    }
+    async initChart() {
+        if (this.loading || !this.chartContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        this.chart = this._hc.chart(this.chartContainer, this.buildOptions());
+        this.emit('nile-chart-ready', { chart: this.chart });
+    }
+    destroyChart() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+        }
+        return html `<div class="chart-container"></div>`;
+    }
+};
+NileFanChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileFanChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileFanChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileFanChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileFanChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileFanChart.prototype, "lineData", void 0);
+__decorate([
+    property({ type: Array })
+], NileFanChart.prototype, "bands", void 0);
+__decorate([
+    property({ type: Object })
+], NileFanChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileFanChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileFanChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileFanChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'line-series-name' })
+], NileFanChart.prototype, "lineSeriesName", void 0);
+__decorate([
+    property({ type: String, attribute: 'line-color' })
+], NileFanChart.prototype, "lineColor", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileFanChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Number, attribute: 'forecast-start-index' })
+], NileFanChart.prototype, "forecastStartIndex", void 0);
+__decorate([
+    property({ type: String, attribute: 'forecast-band-label' })
+], NileFanChart.prototype, "forecastBandLabel", void 0);
+NileFanChart = __decorate([
+    customElement('nile-fan-chart')
+], NileFanChart);
+export { NileFanChart };
+//# sourceMappingURL=nile-fan-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileFlameChart } from './nile-flame-chart.js';
+export type { FlameChartPoint, FlameSunburstPoint, FlameChartLayout } from './nile-flame-chart.js';

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+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';
+/** Segment row for the flame / icicle layout (`columnrange`-based). */
+export interface FlameChartPoint {
+    name: string;
+    id?: string;
+    value: number;
+    x: number;
+    low: number;
+    high: number;
+    color?: string;
+}
+/** Hierarchical row for the sunburst layout. Root uses `parent: ''`. */
+export interface FlameSunburstPoint {
+    id: string;
+    parent: string;
+    name: string;
+    value: number;
+    color?: string;
+}
+export type FlameChartLayout = 'flame' | 'icicle' | 'sunburst';
+export declare class NileFlameChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    /** Full chart configuration. Accepts separated `{ chart, aq }` input. */
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    /** Data for flame or icicle layout. */
+    data: FlameChartPoint[];
+    /** Data for sunburst layout; required when `layout` is `sunburst`. */
+    sunburstData: FlameSunburstPoint[];
+    layout: FlameChartLayout;
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    /** Apply `{ chart, aq }` config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private mapFlameData;
+    private mapSunburstData;
+    private buildOptions;
+    private initChart;
+    private destroyChart;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-flame-chart': NileFlameChart;
+    }
+}

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

@@ -0,0 +1,311 @@
+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-flame-chart.css.js';
+function registerFlameSeriesTypeIfNeeded(H) {
+    const types = H.seriesTypes;
+    if (types.flame)
+        return;
+    H.seriesType('flame', 'columnrange', {
+        cursor: 'pointer',
+        dataLabels: {
+            enabled: true,
+            format: '{point.name}',
+            inside: true,
+            align: 'center',
+            crop: true,
+            overflow: 'none',
+            color: 'black',
+            style: { textOutline: 'none', fontWeight: 'normal' },
+        },
+        pointPadding: 0,
+        groupPadding: 0,
+    }, {
+        drawDataLabels: H.seriesTypes.line.prototype.drawDataLabels,
+    });
+}
+let NileFlameChart = class NileFlameChart 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 = '';
+        /** Data for flame or icicle layout. */
+        this.data = [];
+        /** Data for sunburst layout; required when `layout` is `sunburst`. */
+        this.sunburstData = [];
+        this.layout = 'flame';
+        this.options = {};
+        this.loading = false;
+        this.height = '480px';
+    }
+    /** 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',
+            'sunburstData',
+            'layout',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            '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);
+    }
+    mapFlameData() {
+        return this.data.map(d => {
+            const row = {
+                name: d.name,
+                x: d.x,
+                low: d.low,
+                high: d.high,
+            };
+            if (d.id != null)
+                row.id = d.id;
+            if (d.color)
+                row.color = d.color;
+            row.value = d.value;
+            return row;
+        });
+    }
+    mapSunburstData() {
+        return this.sunburstData.map(d => {
+            const row = {
+                id: d.id,
+                parent: d.parent,
+                name: d.name,
+                value: d.value,
+            };
+            if (d.color)
+                row.color = d.color;
+            return row;
+        });
+    }
+    buildOptions() {
+        const self = this;
+        const isSunburst = this.layout === 'sunburst';
+        const xAxisSecond = isSunburst
+            ? { visible: false, startOnTick: false, endOnTick: false, minPadding: 0, maxPadding: 0 }
+            : {
+                visible: false,
+                startOnTick: false,
+                endOnTick: false,
+                minPadding: 0,
+                maxPadding: 0,
+                reversed: this.layout === 'flame',
+            };
+        const titleText = this.chartTitle ||
+            (isSunburst ? 'Sunburst' : this.layout === 'icicle' ? 'Icicle chart' : 'Flame chart');
+        return deepMerge({
+            chart: { inverted: !isSunburst, height: this.height },
+            title: { text: titleText, align: 'left' },
+            subtitle: { text: this.chartSubtitle || undefined, align: 'left' },
+            legend: { enabled: false },
+            xAxis: [{ visible: false }, xAxisSecond],
+            yAxis: [
+                { visible: false },
+                {
+                    visible: false,
+                    min: 0,
+                    maxPadding: 0,
+                    startOnTick: false,
+                    endOnTick: false,
+                },
+            ],
+            tooltip: {
+                headerFormat: '',
+                pointFormat: isSunburst
+                    ? '<b>{point.name}</b><br/>value: <b>{point.value}</b>'
+                    : '<b>{point.name}</b><br/>value: <b>{point.value}</b><br/>range: {point.low} – {point.high}',
+            },
+            plotOptions: {
+                flame: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    name: this.name,
+                                    value: this.value,
+                                    low: this.low,
+                                    high: this.high,
+                                    x: this.x,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+                sunburst: {
+                    cursor: 'pointer',
+                    allowDrillToNode: true,
+                    levels: [
+                        {
+                            level: 1,
+                            levelIsConstant: false,
+                            dataLabels: { enabled: false },
+                        },
+                    ],
+                    dataLabels: {
+                        textPath: { attributes: { dy: 5 }, enabled: true },
+                    },
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    name: this.name,
+                                    value: this.value,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+            },
+            series: isSunburst
+                ? [
+                    {
+                        visible: false,
+                        type: 'flame',
+                        data: this.mapFlameData(),
+                        yAxis: 1,
+                        xAxis: 1,
+                    },
+                    {
+                        visible: true,
+                        size: '100%',
+                        type: 'sunburst',
+                        name: 'Sunburst',
+                        data: this.mapSunburstData(),
+                    },
+                ]
+                : [
+                    {
+                        visible: true,
+                        type: 'flame',
+                        name: 'Flame',
+                        data: this.mapFlameData(),
+                        yAxis: 1,
+                        xAxis: 1,
+                    },
+                    {
+                        visible: false,
+                        size: '100%',
+                        type: 'sunburst',
+                        name: 'Sunburst',
+                        data: this.mapSunburstData(),
+                    },
+                ],
+            credits: { enabled: false },
+        }, this.options);
+    }
+    async initChart() {
+        if (this.loading || !this.chartContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        registerFlameSeriesTypeIfNeeded(this._hc);
+        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>`;
+    }
+};
+NileFlameChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileFlameChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileFlameChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileFlameChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileFlameChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileFlameChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], NileFlameChart.prototype, "sunburstData", void 0);
+__decorate([
+    property({ type: String })
+], NileFlameChart.prototype, "layout", void 0);
+__decorate([
+    property({ type: Object })
+], NileFlameChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileFlameChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileFlameChart.prototype, "height", void 0);
+NileFlameChart = __decorate([
+    customElement('nile-flame-chart')
+], NileFlameChart);
+export { NileFlameChart };
+//# sourceMappingURL=nile-flame-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileFunnelChart } from './nile-funnel-chart.js';
+export type { FunnelDataPoint } from './nile-funnel-chart.js';

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

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

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

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