@aquera/nile-visualization 0.3.0 → 0.5.0

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

@@ -22,6 +22,8 @@ export declare class NileDonutChart extends NileElement {
     data: DonutChartSeriesData[];
     seriesName: string;
     innerSize: string;
+    /** Renders a 180° arc (semi-circle) suitable for KPI-style gauges. */
+    semiCircle: boolean;
     options: Highcharts.Options;
     loading: boolean;
     height: string;

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

@@ -18,6 +18,8 @@ let NileDonutChart = class NileDonutChart extends NileElement {
         this.data = [];
         this.seriesName = '';
         this.innerSize = '50%';
+        /** Renders a 180° arc (semi-circle) suitable for KPI-style gauges. */
+        this.semiCircle = false;
         this.options = {};
         this.loading = false;
         this.height = '400px';
@@ -35,6 +37,8 @@ let NileDonutChart = class NileDonutChart extends NileElement {
                 this.seriesName = donut.seriesName;
             if (donut.innerSize)
                 this.innerSize = donut.innerSize;
+            if (donut.semiCircle !== undefined)
+                this.semiCircle = donut.semiCircle;
             if (donut.height)
                 this.height = donut.height;
             if (donut.loading !== undefined)
@@ -70,7 +74,7 @@ let NileDonutChart = class NileDonutChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
-        const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'seriesName', 'innerSize', 'loading', 'showDataLabels', 'showLegend'];
+        const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'seriesName', 'innerSize', 'semiCircle', 'loading', 'showDataLabels', 'showLegend'];
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -101,6 +105,14 @@ let NileDonutChart = class NileDonutChart extends NileElement {
             plotOptions: {
                 pie: {
                     innerSize: this.innerSize,
+                    ...(this.semiCircle
+                        ? {
+                            startAngle: -90,
+                            endAngle: 90,
+                            center: ['50%', '80%'],
+                            size: '120%',
+                        }
+                        : {}),
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: { enabled: this.showDataLabels, format: '<b>{point.name}</b>: {point.percentage:.1f} %' },
@@ -152,6 +164,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'inner-size' })
 ], NileDonutChart.prototype, "innerSize", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'semi-circle' })
+], NileDonutChart.prototype, "semiCircle", void 0);
 __decorate([
     property({ type: Object })
 ], NileDonutChart.prototype, "options", void 0);

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

@@ -0,0 +1,2 @@
+export { NileHeatmapChart } from './nile-heatmap-chart.js';
+export type { HeatmapCell } from './nile-heatmap-chart.js';

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+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';
+/** One cell: x/y are 0-based indices into `xCategories` / `yCategories`. */
+export interface HeatmapCell {
+    x: number;
+    y: number;
+    value: number;
+}
+export declare class NileHeatmapChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    xCategories: string[];
+    yCategories: string[];
+    data: HeatmapCell[];
+    seriesName: string;
+    colorMin: number | null;
+    colorMax: number | null;
+    minColor: string;
+    maxColor: string;
+    colorAxisTitle: string;
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    showDataLabels: boolean;
+    private applyConfig;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private valueExtent;
+    private buildOptions;
+    private initChart;
+    private destroyChart;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-heatmap-chart': NileHeatmapChart;
+    }
+}

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

@@ -0,0 +1,259 @@
+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-heatmap-chart.css.js';
+let NileHeatmapChart = class NileHeatmapChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.xCategories = [];
+        this.yCategories = [];
+        this.data = [];
+        this.seriesName = '';
+        this.colorMin = null;
+        this.colorMax = null;
+        this.minColor = '#ffffff';
+        this.maxColor = '#1e40af';
+        this.colorAxisTitle = '';
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.showDataLabels = true;
+    }
+    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 = [
+            'xCategories',
+            'yCategories',
+            'data',
+            'chartTitle',
+            'chartSubtitle',
+            'seriesName',
+            'colorMin',
+            'colorMax',
+            'minColor',
+            'maxColor',
+            'colorAxisTitle',
+            'options',
+            'height',
+            'loading',
+            'showDataLabels',
+        ];
+        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);
+    }
+    valueExtent() {
+        if (this.data.length === 0)
+            return { min: 0, max: 1 };
+        let min = this.data[0].value;
+        let max = min;
+        for (const c of this.data) {
+            if (c.value < min)
+                min = c.value;
+            if (c.value > max)
+                max = c.value;
+        }
+        if (min === max)
+            max = min + 1;
+        return { min, max };
+    }
+    buildOptions() {
+        const self = this;
+        const ext = this.valueExtent();
+        const cMin = this.colorMin ?? ext.min;
+        const cMax = this.colorMax ?? ext.max;
+        const seriesData = this.data.map(c => [c.x, c.y, c.value]);
+        return deepMerge({
+            chart: { type: 'heatmap', height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: { categories: this.xCategories, title: { text: undefined } },
+            yAxis: {
+                categories: this.yCategories,
+                title: { text: undefined },
+                reversed: true,
+            },
+            colorAxis: {
+                min: cMin,
+                max: cMax,
+                minColor: this.minColor,
+                maxColor: this.maxColor,
+                title: { text: this.colorAxisTitle || undefined },
+            },
+            legend: { align: 'right', layout: 'vertical', verticalAlign: 'top' },
+            tooltip: {
+                formatter() {
+                    const p = this.point;
+                    if (!p)
+                        return false;
+                    const x = p.x;
+                    const y = p.y;
+                    const xCat = self.xCategories[x] ?? String(x);
+                    const yCat = self.yCategories[y] ?? String(y);
+                    const val = p.value;
+                    return `<b>${yCat}</b> · ${xCat}<br/>Value: <b>${val ?? ''}</b>`;
+                },
+            },
+            plotOptions: {
+                heatmap: {
+                    dataLabels: { enabled: this.showDataLabels },
+                    borderWidth: 1,
+                    borderColor: '#e2e8f0',
+                },
+                series: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                const x = this.x;
+                                const y = this.y;
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    xCategory: self.xCategories[x],
+                                    yCategory: self.yCategories[y],
+                                    xIndex: x,
+                                    yIndex: y,
+                                    value: this.value,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+            },
+            series: [
+                {
+                    type: 'heatmap',
+                    name: this.seriesName || 'Intensity',
+                    data: seriesData,
+                },
+            ],
+            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>`;
+    }
+};
+NileHeatmapChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileHeatmapChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileHeatmapChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileHeatmapChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileHeatmapChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileHeatmapChart.prototype, "xCategories", void 0);
+__decorate([
+    property({ type: Array })
+], NileHeatmapChart.prototype, "yCategories", void 0);
+__decorate([
+    property({ type: Array })
+], NileHeatmapChart.prototype, "data", void 0);
+__decorate([
+    property({ type: String, attribute: 'series-name' })
+], NileHeatmapChart.prototype, "seriesName", void 0);
+__decorate([
+    property({ type: Number, attribute: 'color-min' })
+], NileHeatmapChart.prototype, "colorMin", void 0);
+__decorate([
+    property({ type: Number, attribute: 'color-max' })
+], NileHeatmapChart.prototype, "colorMax", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-color' })
+], NileHeatmapChart.prototype, "minColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-color' })
+], NileHeatmapChart.prototype, "maxColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'color-axis-title' })
+], NileHeatmapChart.prototype, "colorAxisTitle", void 0);
+__decorate([
+    property({ type: Object })
+], NileHeatmapChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileHeatmapChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileHeatmapChart.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-data-labels' })
+], NileHeatmapChart.prototype, "showDataLabels", void 0);
+NileHeatmapChart = __decorate([
+    customElement('nile-heatmap-chart')
+], NileHeatmapChart);
+export { NileHeatmapChart };
+//# sourceMappingURL=nile-heatmap-chart.js.map

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

@@ -112,7 +112,9 @@ let NileHistogramChart = class NileHistogramChart extends NileElement {
     buildOptions() {
         const self = this;
         const bw = this.binWidth > 0 ? this.binWidth : undefined;
-        const scatterData = this.data.map(x => [x, 0]);
+        // Highcharts #15: line/scatter x values must be ascending; raw samples are often unsorted.
+        const sorted = [...this.data].sort((a, b) => a - b);
+        const scatterData = sorted.map(x => [x, 0]);
         return deepMerge({
             chart: { height: this.height },
             title: { text: this.chartTitle || undefined },

package/dist/src/nile-kpi-chart/nile-kpi-chart.css.js

@@ -13,7 +13,7 @@ export const styles = css `
   /* ── Card variant ── */
 
   .kpi-card {
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background: transparent;
     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));
@@ -79,17 +79,17 @@ export const styles = css `
   }
 
   .kpi-trend--up {
-    background: var(--nile-colors-success-100, #ECFDF3);
+    background: none;
     color: var(--nile-colors-success-700, #067647);
   }
 
   .kpi-trend--down {
-    background: var(--nile-colors-error-100, #FEF3F2);
+    background: none;
     color: var(--nile-colors-error-700, #B42318);
   }
 
   .kpi-trend--neutral {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: none;
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
   }
 

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

@@ -24,6 +24,8 @@ export interface ChartKpiSeparatedPayload {
     gaugeColor?: string;
     loading?: boolean;
     options?: Highcharts.Options;
+    /** Optional min height when embedded in `<nile-chart>` (maps to host `min-height`). */
+    height?: string;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {

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

@@ -86,6 +86,12 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loading = c.loading;
             if (c.options !== undefined)
                 this.options = c.options;
+            if (c.height !== undefined) {
+                if (c.height)
+                    this.style.minHeight = c.height;
+                else
+                    this.style.removeProperty('min-height');
+            }
         }
         if (aq) {
             if (aq.chartTitle != null)

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

@@ -0,0 +1,2 @@
+export { NileLineColumnChart } from './nile-line-column-chart.js';
+export type { LineColumnSeriesPart } from './nile-line-column-chart.js';

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

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

package/dist/src/nile-line-column-chart/nile-line-column-chart.css.d.ts

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

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

package/dist/src/nile-line-column-chart/nile-line-column-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 LineColumnSeriesPart {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export declare class NileLineColumnChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    categories: string[];
+    columnSeries: LineColumnSeriesPart;
+    lineSeries: LineColumnSeriesPart;
+    columnAxisTitle: string;
+    lineAxisTitle: string;
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    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-line-column-chart': NileLineColumnChart;
+    }
+}