@aquera/nile-visualization 1.6.0 → 1.8.0

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

@@ -122,7 +122,7 @@ let NileRadialBarChart = class NileRadialBarChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { polar: true, type: 'column', height: this.height },
+            chart: { polar: true, type: 'column', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             pane: { size: this.paneSize, innerSize: this.innerSize },

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

@@ -150,7 +150,7 @@ let NileScatterChart = class NileScatterChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'scatter', height: this.height, zoomType: 'xy' },
+            chart: { type: 'scatter', ...(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-spiderweb-chart/nile-spiderweb-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-spiderweb-chart/nile-spiderweb-chart.js

@@ -127,7 +127,7 @@ let NileSpiderwebChart = class NileSpiderwebChart extends NileElement {
         const self = this;
         const seriesType = this.showArea ? 'area' : 'line';
         return deepMerge({
-            chart: { polar: true, type: seriesType, height: this.height },
+            chart: { polar: true, type: seriesType, ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             pane: { size: '80%' },

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

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

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

@@ -142,7 +142,7 @@ let NileStackedChart = class NileStackedChart extends NileElement {
                 title: { text: this.yAxisTitle || undefined },
             };
         return deepMerge({
-            chart: { type: 'column', height: this.height },
+            chart: { type: 'column', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

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

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

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

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

package/dist/src/nile-variable-pie-chart/nile-variable-pie-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-variable-pie-chart/nile-variable-pie-chart.js

@@ -118,7 +118,7 @@ let NileVariablePieChart = class NileVariablePieChart 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 },
             tooltip: { pointFormat: '{series.name}: <b>{point.y}</b> ({point.z})' },

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

@@ -118,7 +118,7 @@ let NileVectorChart = class NileVectorChart 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: { title: { text: this.xAxisTitle || undefined } },

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

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

package/dist/src/nile-widget-viewer/nile-widget-viewer.d.ts

@@ -8,6 +8,10 @@ import '../nile-kpi-chart/index.js';
  * Renders a single dashboard widget — either a `<nile-chart>` or a `<nile-kpi-chart>` —
  * based on the discriminated `type` field of the config.
  *
+ * The child chart is rendered in `fit` mode (filling the widget's allotted cell)
+ * and any hardcoded pixel `height` in the chart config is stripped so Highcharts
+ * reflows to the container rather than overflowing into neighboring cells.
+ *
  * @example
  * ```html
  * <nile-widget-viewer></nile-widget-viewer>

package/dist/src/nile-widget-viewer/nile-widget-viewer.js

@@ -9,6 +9,10 @@ import '../nile-kpi-chart/index.js';
  * Renders a single dashboard widget — either a `<nile-chart>` or a `<nile-kpi-chart>` —
  * based on the discriminated `type` field of the config.
  *
+ * The child chart is rendered in `fit` mode (filling the widget's allotted cell)
+ * and any hardcoded pixel `height` in the chart config is stripped so Highcharts
+ * reflows to the container rather than overflowing into neighboring cells.
+ *
  * @example
  * ```html
  * <nile-widget-viewer></nile-widget-viewer>
@@ -31,10 +35,11 @@ let NileWidgetViewer = class NileWidgetViewer extends NileElement {
         if (!this.config)
             return nothing;
         if (this.config.type === 'chart') {
-            return html `<nile-chart .config=${this.config.nileConfig}></nile-chart>`;
+            const fitted = stripChartHeight(this.config.nileConfig);
+            return html `<nile-chart fit .config=${fitted}></nile-chart>`;
         }
         if (this.config.type === 'kpi') {
-            return html `<nile-kpi-chart .config=${this.config.nileConfig}></nile-kpi-chart>`;
+            return html `<nile-kpi-chart fit .config=${this.config.nileConfig}></nile-kpi-chart>`;
         }
         return nothing;
     }
@@ -47,4 +52,15 @@ NileWidgetViewer = __decorate([
     customElement('nile-widget-viewer')
 ], NileWidgetViewer);
 export { NileWidgetViewer };
+/**
+ * Returns a clone of the chart config with any hardcoded `chart.height` removed,
+ * so Highcharts sizes to its container instead of a fixed pixel value.
+ */
+function stripChartHeight(cfg) {
+    const c = cfg;
+    if (!c || !c.chart || !('height' in c.chart))
+        return cfg;
+    const { height: _ignored, ...restChart } = c.chart;
+    return { ...c, chart: restChart };
+}
 //# sourceMappingURL=nile-widget-viewer.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",