Chart Components

The BI Workbench provides 8+ chart types at frontend/bi-workbench/src/components/charts/, combining custom React chart components with Vega-Lite declarative specifications for maximum flexibility.

Chart Types

Component	File	Visualization
`BarChart`	`charts/BarChart.tsx`	Grouped/stacked bar charts
`LineChart`	`charts/LineChart.tsx`	Time series line charts
`AreaChart`	`charts/AreaChart.tsx`	Area charts with fill
`PieChart`	`charts/PieChart.tsx`	Pie/donut charts
`KPICard`	`charts/KPICard.tsx`	Single metric with trend
`VegaChart`	`charts/VegaChart.tsx`	Generic Vega-Lite renderer
`VegaLiteChart`	`charts/VegaLiteChart.tsx`	Vega-Lite specification renderer
`ChartBuilder`	`charts/ChartBuilder.tsx`	Interactive chart configuration UI

BarChart

File: frontend/bi-workbench/src/components/charts/BarChart.tsx

interface BarChartProps {
  config: ChartConfig;
  className?: string;
}
 
interface ChartConfig {
  title?: string;
  subtitle?: string;
  data: {
    series: Array<{ name: string; data: (number | null)[]; color?: string }>;
    categories?: string[];
  };
  options?: {
    colors?: string[];
    legend?: { show?: boolean };
    grid?: { show?: boolean };
  };
}

Features:

Multi-series support with automatic color assignment
Y-axis scaling based on maximum values
Hover tooltips with series name and value
Configurable legend, grid lines, and colors
Default color palette: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4']

VegaChart / VegaLiteChart

The Vega-Lite chart components render any valid Vega-Lite specification, enabling declarative chart definitions stored as JSON:

// Example Vega-Lite specification
{
  mark: 'bar',
  encoding: {
    x: { field: 'category', type: 'nominal' },
    y: { field: 'value', type: 'quantitative' },
    color: { field: 'series', type: 'nominal' }
  }
}

Chart Utilities

chartGenerators.ts

Generates Vega-Lite specifications from data and configuration:

generateBarChartSpec(data, options)
generateLineChartSpec(data, options)
generatePieChartSpec(data, options)

chartPresets.ts

Pre-configured chart templates for common analytics patterns.

export.ts

Chart export utilities for converting charts to images (PNG/SVG) using html2canvas and Vega's built-in export.

Dashboard Builder Filter System