@aquera/nile-visualization 1.7.0 → 1.8.0

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

@@ -391,7 +391,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-bar-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -412,7 +412,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-pie-chart
           .data=${config.data}
           .seriesName=${config.seriesName ?? ''}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -433,7 +433,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-trendline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .forecast=${config.forecast ?? null}
           .options=${mergedOptions}
@@ -454,7 +454,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-anomaly-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .anomaly=${config.anomaly ?? {}}
           .options=${mergedOptions}
@@ -475,7 +475,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-line-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -496,7 +496,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .showLegend=${config.showLegend ?? true}
@@ -518,7 +518,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -539,7 +539,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-donut-chart
           .data=${config.data}
           .seriesName=${config.seriesName ?? ''}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .innerSize=${config.innerSize ?? '50%'}
           .semiCircle=${config.semiCircle ?? false}
           .semiCircle=${config.semiCircle ?? false}
@@ -562,7 +562,7 @@ let NileChart = class NileChart extends NileElement {
             case 'scatter':
                 return html `<nile-scatter-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
@@ -583,7 +583,7 @@ let NileChart = class NileChart extends NileElement {
             case 'bubble':
                 return html `<nile-bubble-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
@@ -605,7 +605,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-spline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -626,7 +626,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-radar-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showArea=${config.showArea ?? false}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -650,7 +650,7 @@ let NileChart = class NileChart extends NileElement {
           .max=${config.max ?? 100}
           .suffix=${config.suffix ?? ''}
           .bands=${config.bands ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -668,7 +668,7 @@ let NileChart = class NileChart extends NileElement {
             case 'waterfall':
                 return html `<nile-waterfall-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -692,7 +692,7 @@ let NileChart = class NileChart extends NileElement {
           .joinBy=${config.joinBy ?? ['hc-key', 'hc-key']}
           .seriesType=${config.seriesType ?? 'map'}
           .zoom=${config.zoom ?? true}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -711,7 +711,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-stacked-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stackMode=${config.stackMode ?? 'normal'}
           .showLegend=${config.showLegend ?? true}
@@ -734,7 +734,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-cluster-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .groupPadding=${config.groupPadding ?? 0.15}
@@ -756,7 +756,7 @@ let NileChart = class NileChart extends NileElement {
             case 'histogram':
                 return html `<nile-histogram-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .histogramSeriesName=${config.histogramSeriesName ?? ''}
@@ -782,7 +782,7 @@ let NileChart = class NileChart extends NileElement {
             case 'bellcurve':
                 return html `<nile-bellcurve-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .bellcurveSeriesName=${config.bellcurveSeriesName ?? ''}
@@ -810,7 +810,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-boxplot-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .horizontal=${config.horizontal ?? false}
@@ -832,7 +832,7 @@ let NileChart = class NileChart extends NileElement {
             case 'timeline':
                 return html `<nile-timeline-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
           .inverted=${config.inverted ?? false}
@@ -855,7 +855,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbell':
                 return html `<nile-dumbbell-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -879,7 +879,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbellLower':
                 return html `<nile-dumbbell-lower-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -903,7 +903,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbellUpper':
                 return html `<nile-dumbbell-upper-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -928,7 +928,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-fan-chart
           .lineData=${config.lineData}
           .bands=${config.bands}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .lineSeriesName=${config.lineSeriesName ?? ''}
           .lineColor=${config.lineColor ?? '#1d4ed8'}
@@ -952,7 +952,7 @@ let NileChart = class NileChart extends NileElement {
             case 'funnel':
                 return html `<nile-funnel-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
           .options=${mergedOptions}
@@ -973,7 +973,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-organization-chart
           .nodes=${config.nodes}
           .links=${config.links}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .inverted=${config.inverted ?? true}
           .options=${mergedOptions}
@@ -995,7 +995,7 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories}
           .columnSeries=${config.columnSeries}
           .lineSeries=${config.lineSeries}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .columnAxisTitle=${config.columnAxisTitle ?? ''}
           .lineAxisTitle=${config.lineAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -1017,7 +1017,7 @@ let NileChart = class NileChart extends NileElement {
           .xCategories=${config.xCategories}
           .yCategories=${config.yCategories}
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .colorMin=${config.colorMin ?? null}
           .colorMax=${config.colorMax ?? null}
@@ -1045,7 +1045,7 @@ let NileChart = class NileChart extends NileElement {
           .layout=${config.layout ?? 'flame'}
           .data=${config.data ?? []}
           .sunburstData=${config.sunburstData ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1064,7 +1064,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-spiderweb-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showArea=${config.showArea ?? false}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -1085,7 +1085,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-inverted-area-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -1106,7 +1106,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-pyramid-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1125,7 +1125,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-lollipop-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1144,7 +1144,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-spline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -1165,7 +1165,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-negative-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .threshold=${config.threshold ?? 0}
           .options=${mergedOptions}
@@ -1186,7 +1186,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-range-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -1206,7 +1206,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-range-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -1226,7 +1226,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-drilldown-chart
           .data=${config.data}
           .drilldownSeries=${config.drilldownSeries}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -1247,7 +1247,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-radial-bar-chart
           .data=${config.data}
           .categories=${config.categories}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .innerSize=${config.innerSize ?? '28%'}
           .paneSize=${config.paneSize ?? '82%'}
@@ -1269,7 +1269,7 @@ let NileChart = class NileChart extends NileElement {
             case 'variablePie':
                 return html `<nile-variable-pie-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
@@ -1290,7 +1290,7 @@ let NileChart = class NileChart extends NileElement {
             case 'euler':
                 return html `<nile-euler-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1308,7 +1308,7 @@ let NileChart = class NileChart extends NileElement {
             case 'polygon':
                 return html `<nile-polygon-chart
           .series=${config.series}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -1328,7 +1328,7 @@ let NileChart = class NileChart extends NileElement {
             case 'vector':
                 return html `<nile-vector-chart
           .data=${config.data}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
@@ -1350,7 +1350,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-xrange-chart
           .data=${config.data}
           .categories=${config.categories}
-          .height=${config.height ?? '100%'}
+          .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
           .showLegend=${config.showLegend ?? true}

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

@@ -126,7 +126,7 @@ let NileClusterChart = class NileClusterChart extends NileElement {
     buildOptions() {
         const self = this;
         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-column-chart/nile-column-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-column-chart/nile-column-chart.js

@@ -154,7 +154,7 @@ let NileColumnChart = class NileColumnChart extends NileElement {
     buildOptions() {
         const self = this;
         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-column-drilldown-chart/nile-column-drilldown-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-column-drilldown-chart/nile-column-drilldown-chart.js

@@ -126,7 +126,7 @@ let NileColumnDrilldownChart = class NileColumnDrilldownChart extends NileElemen
             })),
         };
         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: { type: 'category' },

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

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

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

@@ -116,7 +116,7 @@ let NileColumnRangeChart = class NileColumnRangeChart 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-dashboard-viewer/nile-dashboard-viewer.css.js

@@ -20,6 +20,11 @@ export const styles = css `
     width: 100%;
   }
 
+  .dashboard-absolute {
+    position: relative;
+    width: 100%;
+  }
+
   .dashboard-cell {
     min-height: 0;
     min-width: 0;
@@ -29,6 +34,11 @@ export const styles = css `
     box-sizing: border-box;
   }
 
+  .dashboard-cell--absolute {
+    position: absolute;
+    box-sizing: border-box;
+  }
+
   nile-widget-viewer {
     display: block;
     width: 100%;

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

@@ -4,26 +4,35 @@ import NileElement from '../internal/nile-element.js';
 import type { NileDashboardConfig } from '../internal/types/dashboard-config.type.js';
 import '../nile-widget-viewer/index.js';
 /**
- * Renders a full dashboard of widgets. Supports two layout variants:
+ * Renders a full dashboard of widgets. Supports three layout variants:
  *
  * - `grid` (default): positions each widget using CSS Grid with `layout: { x, y, w, h }`.
  *   - `x` / `w` → `grid-column: (x+1) / span w`
  *   - `y` / `h` → `grid-row: (y+1) / span h`
  * - `fluid`: positions widgets with Flexbox. `x` / `y` are ignored; widgets flow in
- *   declaration order and wrap as needed. `w` sets the proportional width (as a fraction
- *   of `columns`) and `h` sets the height (in multiples of `cellHeight`).
+ *   declaration order and wrap as needed.
+ * - `absolute`: pixel-faithful replacement for angular-gridster2's output. Each
+ *   widget is `position: absolute` with computed `left`/`top`/`width`/`height`.
+ *   Horizontal values are `calc()` of `100%` so the layout reflows with the
+ *   container (no JS measurement required). Spacing between cells matches CSS
+ *   `gap` (no outer margin), so the layout is pixel-identical to the `grid` variant.
  *
  * @example
  * ```html
- * <nile-dashboard-viewer variant="fluid" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
+ * <nile-dashboard-viewer variant="absolute" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
  * ```
  */
 export declare class NileDashboardViewer extends NileElement {
     static styles: CSSResultGroup;
     /** Dashboard configuration containing all widget configs. */
     config: NileDashboardConfig | null;
-    /** Layout variant. `grid` uses x/y/w/h positioning; `fluid` flows widgets with Flexbox. Default: `grid`. */
-    variant: 'grid' | 'fluid';
+    /**
+     * Layout variant.
+     * - `grid` uses CSS Grid with x/y/w/h positioning (default).
+     * - `fluid` flows widgets with Flexbox.
+     * - `absolute` mirrors angular-gridster2 (position:absolute with calc widths).
+     */
+    variant: 'grid' | 'fluid' | 'absolute';
     /** Total number of grid columns. Default: 12. */
     columns: number;
     /** Height of a single grid row in pixels. Default: 80. */