@aquera/nile-visualization 1.2.0 → 1.4.0

package/dist/src/internal/types/chart-config.type.d.ts

@@ -13,6 +13,7 @@ import type { ChartRadarConfigType } from './chart-radar-config.type.js';
 import type { ChartGaugeConfigType } from './chart-gauge-config.type.js';
 import type { ChartWaterfallConfigType } from './chart-waterfall-config.type.js';
 import type { ChartMapConfigType } from './chart-map-config.type.js';
+import type { ChartGridConfigType } from './chart-grid-config.type.js';
 import type { PrimitiveChartConfigType } from './primitive-chart-config.type.js';
 /** Core chart configs (bar, pie, …) plus all primitive series types — use with `<nile-chart>` via `chart.type`. */
-export type ChartConfigType = ChartBarConfigType | ChartPieConfigType | ChartTrendlineConfigType | ChartAnomalyConfigType | ChartLineConfigType | ChartAreaConfigType | ChartColumnConfigType | ChartDonutConfigType | ChartScatterConfigType | ChartBubbleConfigType | ChartSplineConfigType | ChartRadarConfigType | ChartGaugeConfigType | ChartWaterfallConfigType | ChartMapConfigType | PrimitiveChartConfigType;
+export type ChartConfigType = ChartBarConfigType | ChartPieConfigType | ChartTrendlineConfigType | ChartAnomalyConfigType | ChartLineConfigType | ChartAreaConfigType | ChartColumnConfigType | ChartDonutConfigType | ChartScatterConfigType | ChartBubbleConfigType | ChartSplineConfigType | ChartRadarConfigType | ChartGaugeConfigType | ChartWaterfallConfigType | ChartMapConfigType | ChartGridConfigType | PrimitiveChartConfigType;

package/dist/src/internal/types/chart-grid-config.type.d.ts

@@ -0,0 +1,16 @@
+import type { Options } from 'highcharts';
+import type { NileDataGridColumn } from '@aquera/nile-data-grid';
+/** Tabular grid variant of `<nile-chart>`, renders a `<nile-data-grid>`. */
+export interface ChartGridConfigType {
+    type: 'grid';
+    data: unknown[];
+    columns: NileDataGridColumn[];
+    loading?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    noMatchMessage?: string;
+    height?: string;
+    options?: Options;
+}

package/dist/src/internal/types/chart-grid-config.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chart-grid-config.type.js.map

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

@@ -16,6 +16,7 @@ import type { RadarChartSeriesData } from '../nile-radar-chart/nile-radar-chart.
 import type { GaugeBand } from '../nile-gauge-chart/nile-gauge-chart.js';
 import type { WaterfallDataPoint } from '../nile-waterfall-chart/nile-waterfall-chart.js';
 import type { MapChartDataPoint } from '../nile-map-chart/nile-map-chart.js';
+import type { NileDataGridColumn } from '@aquera/nile-data-grid';
 export type SwitchAggregation = 'by-category' | 'by-series' | 'flatten';
 export interface NileAiConfig {
     /** Show the AI chat icon on the chart. Default: false. */
@@ -157,6 +158,16 @@ export interface NileMapChartConfig extends NileChartConfigBase {
     /** Enable mouse-wheel zoom, double-click zoom, and +/− buttons. Default: true. */
     zoom?: boolean;
 }
+export interface NileGridChartConfig extends NileChartConfigBase {
+    type: 'grid';
+    data: unknown[];
+    columns: NileDataGridColumn[];
+    striped?: boolean;
+    hoverable?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    noMatchMessage?: string;
+}
 /** Flat config for `<nile-chart>`: discriminated `chart` fields plus merged `aq` / card chrome. */
 export type NileChartConfig = ChartConfigType & NileChartConfigBase;
 export type NileKpiChartConfig = Extract<NileChartConfig, {

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

@@ -278,38 +278,37 @@ export const styles = css `
   /* ── AI Chat Trigger (in header) ── */
 
   .ai-trigger {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--nile-width-28px, var(--ng-height-28px));
-    height: var(--nile-width-28px, var(--ng-height-28px));
+    width: 28px;
+    height: 28px;
     padding: 0;
-    border: none;
-    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
-    background: transparent;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    border-radius: var(--ng-radius-md, 10px);
+    background: var(--ng-componentcolors-utility-brand-50, #EFF4FF);
+    border: 1.5px solid var(--ng-componentcolors-utility-brand-200, #C7D7FE);
+    box-shadow: 0 4px 20px rgba(41, 112, 255, 0.12);
+    color: var(--ng-componentcolors-utility-brand-600, #2970FF);
     cursor: pointer;
-    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+    transition: background 150ms ease;
+    flex-shrink: 0;
+    outline: none;
   }
 
-  .ai-trigger:hover {
-    background: transparent;
-    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+  .ai-trigger:hover,
+  .ai-trigger:focus-visible {
+    background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }
+
   .chart-inner--kpi {
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     contain: none;
   }
-  .ai-trigger.active {
-    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
-    color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
-  }
 
-  .ai-trigger:focus-visible {
-    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
-    outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
+  .ai-trigger.active {
+    background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }
 
   /* ── AI Chat Panel Overlay ── */

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

@@ -48,6 +48,7 @@ import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
 import '../nile-kpi-chart/index.js';
+import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;

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

@@ -51,6 +51,7 @@ import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
 import '../nile-kpi-chart/index.js';
+import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 const CORE_CHART_LABELS = {
     bar: 'Bar',
@@ -88,6 +89,7 @@ const CORE_CHART_LABELS = {
     lollipop: 'Lollipop',
     'line-column': 'Line + column',
     kpi: 'KPI',
+    grid: 'Grid',
 };
 function chartTypeLabel(type) {
     const hit = CORE_CHART_LABELS[type];
@@ -331,6 +333,7 @@ let NileChart = class NileChart extends NileElement {
       >
         <nile-glyph name="smart-code" size="16"></nile-glyph>
       </button>
+      <slot name="ai-trigger-after"></slot>
     `;
     }
     renderHeader() {
@@ -390,7 +393,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-bar-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -399,7 +402,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-pie-chart
           .data=${config.data}
           .seriesName=${config.seriesName ?? ''}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -409,7 +412,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-trendline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .forecast=${config.forecast ?? null}
           .options=${mergedOptions}
@@ -419,7 +422,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-anomaly-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .anomaly=${config.anomaly ?? {}}
           .options=${mergedOptions}
@@ -429,7 +432,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-line-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -438,7 +441,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -448,7 +451,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -457,7 +460,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-donut-chart
           .data=${config.data}
           .seriesName=${config.seriesName ?? ''}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .innerSize=${config.innerSize ?? '50%'}
           .semiCircle=${config.semiCircle ?? false}
           .semiCircle=${config.semiCircle ?? false}
@@ -469,7 +472,7 @@ let NileChart = class NileChart extends NileElement {
             case 'scatter':
                 return html `<nile-scatter-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -478,7 +481,7 @@ let NileChart = class NileChart extends NileElement {
             case 'bubble':
                 return html `<nile-bubble-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -488,7 +491,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-spline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -497,7 +500,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-radar-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .showArea=${config.showArea ?? false}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -509,14 +512,14 @@ let NileChart = class NileChart extends NileElement {
           .max=${config.max ?? 100}
           .suffix=${config.suffix ?? ''}
           .bands=${config.bands ?? []}
-          .height=${config.height ?? '280px'}
+          .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-gauge-chart>`;
             case 'waterfall':
                 return html `<nile-waterfall-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -528,7 +531,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 ?? '500px'}
+          .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-map-chart>`;
@@ -536,7 +539,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-stacked-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stackMode=${config.stackMode ?? 'normal'}
           .showLegend=${config.showLegend ?? true}
@@ -548,7 +551,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-cluster-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .showLegend=${config.showLegend ?? true}
           .groupPadding=${config.groupPadding ?? 0.15}
@@ -559,7 +562,7 @@ let NileChart = class NileChart extends NileElement {
             case 'histogram':
                 return html `<nile-histogram-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .histogramSeriesName=${config.histogramSeriesName ?? ''}
@@ -574,7 +577,7 @@ let NileChart = class NileChart extends NileElement {
             case 'bellcurve':
                 return html `<nile-bellcurve-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .bellcurveSeriesName=${config.bellcurveSeriesName ?? ''}
@@ -591,7 +594,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-boxplot-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .horizontal=${config.horizontal ?? false}
@@ -602,7 +605,7 @@ let NileChart = class NileChart extends NileElement {
             case 'timeline':
                 return html `<nile-timeline-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
           .inverted=${config.inverted ?? false}
@@ -614,7 +617,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbell':
                 return html `<nile-dumbbell-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -627,7 +630,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbellLower':
                 return html `<nile-dumbbell-lower-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -640,7 +643,7 @@ let NileChart = class NileChart extends NileElement {
             case 'dumbbellUpper':
                 return html `<nile-dumbbell-upper-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .seriesName=${config.seriesName ?? ''}
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
@@ -654,7 +657,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-fan-chart
           .lineData=${config.lineData}
           .bands=${config.bands}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .lineSeriesName=${config.lineSeriesName ?? ''}
           .lineColor=${config.lineColor ?? '#1d4ed8'}
@@ -667,7 +670,7 @@ let NileChart = class NileChart extends NileElement {
             case 'funnel':
                 return html `<nile-funnel-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
           .options=${mergedOptions}
@@ -677,7 +680,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-organization-chart
           .nodes=${config.nodes}
           .links=${config.links}
-          .height=${config.height ?? '480px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .inverted=${config.inverted ?? true}
           .options=${mergedOptions}
@@ -688,7 +691,7 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories}
           .columnSeries=${config.columnSeries}
           .lineSeries=${config.lineSeries}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .columnAxisTitle=${config.columnAxisTitle ?? ''}
           .lineAxisTitle=${config.lineAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -699,7 +702,7 @@ let NileChart = class NileChart extends NileElement {
           .xCategories=${config.xCategories}
           .yCategories=${config.yCategories}
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .colorMin=${config.colorMin ?? null}
           .colorMax=${config.colorMax ?? null}
@@ -715,7 +718,7 @@ let NileChart = class NileChart extends NileElement {
           .layout=${config.layout ?? 'flame'}
           .data=${config.data ?? []}
           .sunburstData=${config.sunburstData ?? []}
-          .height=${config.height ?? '480px'}
+          .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-flame-chart>`;
@@ -723,7 +726,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-spiderweb-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .showArea=${config.showArea ?? false}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -732,7 +735,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-inverted-area-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -742,7 +745,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-pyramid-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-column-pyramid-chart>`;
@@ -750,7 +753,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-lollipop-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-lollipop-chart>`;
@@ -758,7 +761,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-spline-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
@@ -768,7 +771,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-negative-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .threshold=${config.threshold ?? 0}
           .options=${mergedOptions}
@@ -778,7 +781,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-area-range-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -787,7 +790,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-range-chart
           .data=${config.data}
           .categories=${config.categories ?? []}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -796,7 +799,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-column-drilldown-chart
           .data=${config.data}
           .drilldownSeries=${config.drilldownSeries}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -806,7 +809,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-radial-bar-chart
           .data=${config.data}
           .categories=${config.categories}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .innerSize=${config.innerSize ?? '28%'}
           .paneSize=${config.paneSize ?? '82%'}
@@ -816,7 +819,7 @@ let NileChart = class NileChart extends NileElement {
             case 'variablePie':
                 return html `<nile-variable-pie-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
@@ -826,14 +829,14 @@ let NileChart = class NileChart extends NileElement {
             case 'euler':
                 return html `<nile-euler-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-euler-chart>`;
             case 'polygon':
                 return html `<nile-polygon-chart
           .series=${config.series}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
@@ -842,7 +845,7 @@ let NileChart = class NileChart extends NileElement {
             case 'vector':
                 return html `<nile-vector-chart
           .data=${config.data}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
@@ -853,7 +856,7 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-xrange-chart
           .data=${config.data}
           .categories=${config.categories}
-          .height=${config.height ?? '400px'}
+          .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
           .options=${mergedOptions}
@@ -890,6 +893,27 @@ let NileChart = class NileChart extends NileElement {
                     },
                 }}
         ></nile-kpi-chart>`;
+            }
+            case 'grid': {
+                const gridChrome = '--nile-data-grid-radius:0;' +
+                    '--nile-data-grid-border-color:transparent;' +
+                    '--nile-data-grid-shadow:none;' +
+                    'display:block;';
+                const gridStyle = config.height
+                    ? `${gridChrome}height:${config.height};`
+                    : gridChrome;
+                return html `<nile-data-grid
+          class="nile-chart-grid"
+          .data=${config.data}
+          .columns=${config.columns}
+          .loading=${config.loading ?? false}
+          .striped=${config.striped ?? false}
+          .hoverable=${config.hoverable ?? false}
+          .emptyMessage=${config.emptyMessage ?? 'No data'}
+          .loadingMessage=${config.loadingMessage ?? 'Loading\u2026'}
+          .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}
+          style=${gridStyle}
+        ></nile-data-grid>`;
             }
             default: {
                 const _exhaustive = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -59,7 +59,13 @@
     "lit": "^3.0.0"
   },
   "peerDependencies": {
-    "highcharts": ">=10.0.0"
+    "highcharts": ">=10.0.0",
+    "@aquera/nile-data-grid": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@aquera/nile-data-grid": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.3",