@aquera/nile-visualization 1.2.0 → 1.3.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];
@@ -890,6 +892,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.3.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",