@aquera/nile-visualization 1.7.0 → 1.8.0

package/dist/src/internal/dashboard-adapters.d.ts

@@ -5,6 +5,7 @@ import type { NileDashboardConfig } from './types/dashboard-config.type.js';
  *
  * Handles:
  * - `widgetType` → `type` rename
+ * - Gridster-native layout keys (`cols`/`rows`) → canonical (`w`/`h`)
  * - API chart `series[].data[].value` → `data[].y` (pie/donut)
  * - Multi-series format for bar/line/column/area etc.
  * - KPI sub-object: adds the `type: 'kpi'` discriminator

package/dist/src/internal/dashboard-adapters.js

@@ -61,8 +61,17 @@ function adaptKpiWidget(apiKpi) {
     };
 }
 // ─── Widget adapter ──────────────────────────────────────────────────────────
+function normalizeLayout(raw) {
+    const src = raw ?? { x: 0, y: 0 };
+    return {
+        x: src.x ?? 0,
+        y: src.y ?? 0,
+        w: src.w ?? src.cols ?? 6,
+        h: src.h ?? src.rows ?? 4,
+    };
+}
 function adaptWidget(apiWidget) {
-    const layout = apiWidget.layout ?? { x: 0, y: 0, w: 6, h: 4 };
+    const layout = normalizeLayout(apiWidget.layout);
     const widgetType = apiWidget.widgetType ?? apiWidget.type;
     // Already in NileWidgetConfig shape — pass through
     if (apiWidget.nileConfig) {
@@ -101,6 +110,7 @@ function adaptWidget(apiWidget) {
  *
  * Handles:
  * - `widgetType` → `type` rename
+ * - Gridster-native layout keys (`cols`/`rows`) → canonical (`w`/`h`)
  * - API chart `series[].data[].value` → `data[].y` (pie/donut)
  * - Multi-series format for bar/line/column/area etc.
  * - KPI sub-object: adds the `type: 'kpi'` discriminator

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -265,7 +265,7 @@ let NileAnomalyChart = class NileAnomalyChart extends NileElement {
         const defaults = {
             chart: {
                 type: 'line',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
             },
             title: {
                 text: this.chartTitle || undefined,

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -157,7 +157,7 @@ let NileAreaChart = class NileAreaChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'area', height: this.height },
+            chart: { type: 'area', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -118,7 +118,7 @@ let NileAreaNegativeChart = class NileAreaNegativeChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'area', height: this.height },
+            chart: { type: 'area', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -116,7 +116,7 @@ let NileAreaRangeChart = class NileAreaRangeChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { height: this.height },
+            chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -118,7 +118,7 @@ let NileAreaSplineChart = class NileAreaSplineChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'areaspline', height: this.height },
+            chart: { type: 'areaspline', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -178,7 +178,7 @@ let NileBarChart = class NileBarChart extends NileElement {
         const defaults = {
             chart: {
                 type: 'bar',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
             },
             title: {
                 text: this.chartTitle || undefined,

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -145,7 +145,7 @@ let NileBellcurveChart = class NileBellcurveChart extends NileElement {
         const pts = this.pointsInInterval > 0 ? this.pointsInInterval : 40;
         const iv = this.intervals > 0 ? this.intervals : 3;
         return deepMerge({
-            chart: { height: this.height },
+            chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             legend: { enabled: this.showLegend },

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -158,7 +158,7 @@ let NileBoxplotChart = class NileBoxplotChart extends NileElement {
         return deepMerge({
             chart: {
                 type: 'boxplot',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
                 inverted: this.horizontal,
             },
             title: { text: this.chartTitle || undefined },

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

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

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

@@ -154,7 +154,7 @@ let NileBubbleChart = class NileBubbleChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'bubble', height: this.height, zoomType: 'xy' },
+            chart: { type: 'bubble', ...(this.height ? { height: this.height } : {}), zoomType: 'xy' },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { title: { text: this.xAxisTitle || undefined } },

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

@@ -10,6 +10,28 @@ export const styles = css `
     display: none;
   }
 
+  /* Fit-to-container mode (set by nile-widget-viewer) — makes the card fill
+     its host rather than auto-sizing to content, so the chart reflows to the
+     allotted cell instead of overflowing. */
+  :host([fit]) {
+    height: 100%;
+  }
+
+  :host([fit]) .chart-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host([fit]) .chart-wrapper {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  :host([fit]) .chart-inner {
+    height: 100%;
+  }
+
   /* ── Unified Card Container ── */
 
   .chart-card {