@aquera/nile-visualization 2.0.0 → 2.2.0

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

@@ -2,6 +2,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';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface AnomalySeriesData {
     name: string;
     data: number[];
@@ -52,6 +53,9 @@ export declare class NileAnomalyChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     /** Apply { chart, aq } config to individual properties. */
     private applyConfig;

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

@@ -44,6 +44,9 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -149,6 +152,8 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
             'height',
             'yAxisTitle',
             'anomaly',
+            'showLegend',
+            'legend',
             'loading',
         ];
         const needsUpdate = chartProps.some(p => changedProperties.has(p));
@@ -302,6 +307,7 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
                 },
             },
             series,
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: {
                 enabled: false,
             },
@@ -396,6 +402,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileAnomalyChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileAnomalyChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileAnomalyChart.prototype, "legend", void 0);
 NileAnomalyChart = __decorate([
     customElement('nile-anomaly-chart')
 ], NileAnomalyChart);

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

@@ -25,6 +25,8 @@ export declare class NileAreaChart extends NileElement {
     yAxisTitle: string;
     stacked: boolean;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -23,6 +23,8 @@ let NileAreaChart = class NileAreaChart extends NileElement {
         this.yAxisTitle = '';
         this.stacked = false;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -168,7 +170,7 @@ let NileAreaChart = class NileAreaChart extends NileElement {
                 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 })),
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -227,6 +229,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileAreaChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileAreaChart.prototype, "chartBg", void 0);

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

@@ -2,6 +2,7 @@ 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';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface AreaNegativeSeriesData {
     name: string;
     data: number[];
@@ -35,6 +36,9 @@ export declare class NileAreaNegativeChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     private applyConfig;
     connectedCallback(): void;

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

@@ -35,6 +35,9 @@ let NileAreaNegativeChart = class NileAreaNegativeChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -95,6 +98,8 @@ let NileAreaNegativeChart = class NileAreaNegativeChart extends NileElement {
             'yAxisTitle',
             'threshold',
             'loading',
+            'showLegend',
+            'legend',
         ];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -152,6 +157,7 @@ let NileAreaNegativeChart = class NileAreaNegativeChart extends NileElement {
                 color: s.color,
                 negativeColor: s.negativeColor,
             })),
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -243,6 +249,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileAreaNegativeChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileAreaNegativeChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaNegativeChart.prototype, "legend", void 0);
 NileAreaNegativeChart = __decorate([
     customElement('nile-area-negative-chart')
 ], NileAreaNegativeChart);

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

@@ -2,6 +2,7 @@ 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';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface AreaRangeSeriesData {
     name: string;
     data: [number, number][];
@@ -34,6 +35,9 @@ export declare class NileAreaRangeChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     private applyConfig;
     connectedCallback(): void;

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

@@ -34,6 +34,9 @@ let NileAreaRangeChart = class NileAreaRangeChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -93,6 +96,8 @@ let NileAreaRangeChart = class NileAreaRangeChart extends NileElement {
             'height',
             'yAxisTitle',
             'loading',
+            'showLegend',
+            'legend',
         ];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -150,6 +155,7 @@ let NileAreaRangeChart = class NileAreaRangeChart extends NileElement {
                 color: s.color,
                 fillOpacity: s.fillOpacity,
             })),
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -238,6 +244,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileAreaRangeChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileAreaRangeChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaRangeChart.prototype, "legend", void 0);
 NileAreaRangeChart = __decorate([
     customElement('nile-area-range-chart')
 ], NileAreaRangeChart);

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

@@ -2,6 +2,7 @@ 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';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface AreaSplineSeriesData {
     name: string;
     data: number[];
@@ -34,6 +35,9 @@ export declare class NileAreaSplineChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     private applyConfig;
     connectedCallback(): void;

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

@@ -35,6 +35,9 @@ let NileAreaSplineChart = class NileAreaSplineChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -95,6 +98,8 @@ let NileAreaSplineChart = class NileAreaSplineChart extends NileElement {
             'yAxisTitle',
             'stacked',
             'loading',
+            'showLegend',
+            'legend',
         ];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -148,6 +153,7 @@ let NileAreaSplineChart = class NileAreaSplineChart extends NileElement {
                 data: s.data,
                 color: s.color,
             })),
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -239,6 +245,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileAreaSplineChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileAreaSplineChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileAreaSplineChart.prototype, "legend", void 0);
 NileAreaSplineChart = __decorate([
     customElement('nile-area-spline-chart')
 ], NileAreaSplineChart);

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

@@ -33,6 +33,8 @@ export declare class NileBarChart extends NileElement {
     yAxisTitle: string;
     /** Whether to enable the legend. */
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -31,6 +31,8 @@ let NileBarChart = class NileBarChart extends NileElement {
         this.yAxisTitle = '';
         /** Whether to enable the legend. */
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -225,7 +227,10 @@ let NileBarChart = class NileBarChart extends NileElement {
                 data: s.data,
                 color: s.color,
             })),
-            legend: { enabled: this.showLegend },
+            legend: (() => {
+                const { show, ...rest } = this.legend ?? {};
+                return { enabled: show ?? this.showLegend, ...rest };
+            })(),
             credits: {
                 enabled: false,
             },
@@ -287,6 +292,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileBarChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileBarChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileBarChart.prototype, "chartBg", void 0);

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

@@ -30,6 +30,8 @@ export declare class NileBellcurveChart extends NileElement {
     /** Samples per interval; higher values yield a smoother curve. */
     pointsInInterval: number;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -33,6 +33,8 @@ let NileBellcurveChart = class NileBellcurveChart extends NileElement {
         /** Samples per interval; higher values yield a smoother curve. */
         this.pointsInInterval = 40;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -148,7 +150,7 @@ let NileBellcurveChart = class NileBellcurveChart extends NileElement {
             chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: [
                 {
                     title: { text: this.xAxisTitle || undefined },
@@ -292,6 +294,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileBellcurveChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileBellcurveChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileBellcurveChart.prototype, "chartBg", void 0);

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

@@ -36,6 +36,8 @@ export declare class NileBoxplotChart extends NileElement {
     xAxisTitle: string;
     yAxisTitle: string;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     /** When true, draws horizontal boxes (categories on the y-axis). */
     horizontal: boolean;
     chartBg: string;

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

@@ -24,6 +24,8 @@ let NileBoxplotChart = class NileBoxplotChart extends NileElement {
         this.xAxisTitle = '';
         this.yAxisTitle = '';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         /** When true, draws horizontal boxes (categories on the y-axis). */
         this.horizontal = false;
         // ── Container styling ──
@@ -163,7 +165,7 @@ let NileBoxplotChart = class NileBoxplotChart extends NileElement {
             },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: this.horizontal ? valueAxis : catAxis,
             yAxis: this.horizontal ? catAxis : valueAxis,
             tooltip: {
@@ -264,6 +266,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileBoxplotChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileBoxplotChart.prototype, "legend", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'horizontal' })
 ], NileBoxplotChart.prototype, "horizontal", void 0);

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

@@ -24,6 +24,8 @@ export declare class NileBubbleChart extends NileElement {
     xAxisTitle: string;
     yAxisTitle: string;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -22,6 +22,8 @@ let NileBubbleChart = class NileBubbleChart extends NileElement {
         this.xAxisTitle = '';
         this.yAxisTitle = '';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -170,7 +172,7 @@ let NileBubbleChart = class NileBubbleChart extends NileElement {
                 series: { cursor: 'pointer', point: { events: { click() { self.emit('nile-chart-click', { point: this, x: this.x, y: this.y, z: this.z, seriesName: this.series.name }); } } } },
             },
             series: this.data.map(s => ({ type: 'bubble', name: s.name, data: s.data, color: s.color })),
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -226,6 +228,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileBubbleChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileBubbleChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileBubbleChart.prototype, "chartBg", void 0);

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

@@ -2,7 +2,7 @@ import type { ChartConfigType } from '../internal/types/chart-config.type.js';
 /** Every supported `chart.type` value for `<nile-chart>`. */
 export type ChartType = ChartConfigType['type'];
 import type { BarChartSeriesData } from '../nile-bar-chart/nile-bar-chart.js';
-import type { PieChartSeriesData } from '../nile-pie-chart/nile-pie-chart.js';
+import type { PieChartSeriesData, LegendConfig } 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';
@@ -15,7 +15,7 @@ import type { SplineChartSeriesData } from '../nile-spline-chart/nile-spline-cha
 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';
-import type { KpiVariant, KpiValueFormat, SparklineType, TrendDirection } from '../nile-kpi-chart/nile-kpi-chart.js';
+import type { KpiVariant, KpiValueFormat, KpiNumberSystem, SparklineType, TrendDirection } from '../nile-kpi-chart/nile-kpi-chart.js';
 import type { MapChartDataPoint } from '../nile-map-chart/nile-map-chart.js';
 import type { NileDataGridColumn } from '@aquera/nile-data-grid';
 import type { StackedChartSeriesData } from '../nile-stacked-chart/nile-stacked-chart.js';
@@ -132,8 +132,8 @@ export interface NileChartConfigBase {
     menu?: NileChartMenuConfig;
     /** Custom items appended at the bottom of the chart actions menu. */
     menuItems?: NileChartMenuItem[];
-    /** Show the chart legend. Each chart's default varies; set explicitly to override. */
-    showLegend?: boolean;
+    /** Legend configuration — full Highcharts legend surface. */
+    legend?: LegendConfig;
     chartBg?: string;
     chartBorderRadius?: string | number;
     chartBorder?: string;
@@ -530,6 +530,10 @@ export interface NileKpiChartConfig extends NileChartConfigBase {
     precision?: number | null;
     /** Base unit (e.g. 'L', 'g', 'm') combined with the magnitude prefix: "1.5KL", "2.5Kg". */
     unit?: string;
+    /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+    locale?: string;
+    /** Number system: 'indian' (1,00,000 / L / Cr) or 'international' (100,000 / K / M / B / T). */
+    numberSystem?: KpiNumberSystem;
     tooltipEnabled?: boolean;
 }
 /** Discriminated union of every named chart config — use for typed `<nile-chart>` configs. */

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

@@ -172,30 +172,28 @@ export const styles = css `
     contain: layout style;
   }
 
-  /* Grid: height applies to the whole card — header + grid together */
+  /* Grid layout:
+     - card uses clip-path (not overflow:hidden) so position:sticky on the header is not broken
+     - height goes on nile-data-grid itself so .scroll-container inside shadow DOM scrolls,
+       making position:sticky on <th> work correctly
+     - AI panel is rendered outside the wrapper and anchored via position:relative on the card */
   .nile-chart-card--grid {
-    display: flex;
-    flex-direction: column;
+    position: relative;
+    clip-path: inset(0);
   }
 
-  .nile-chart-card--grid .nile-chart-wrapper {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
+  .nile-chart-card--grid .nile-chart-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   .nile-chart-card--grid .nile-chart-inner {
-    flex: 1;
-    min-height: 0;
+    overflow: visible;
     contain: none;
   }
 
-  .nile-chart-card--grid nile-data-grid {
-    display: block;
-    height: 100%;
-  }
-
   /* ── Default slot (custom chart body only — not named slots) ── */
   slot:not([name])::slotted(*) {
     display: block;