Vue Better BI

A Vue 3 charting library built on Apache ECharts and Leaflet.js with advanced formatting, theming, and export capabilities.

This library was inspired by evidence.dev charts.

Features

• 18 Chart Types: Bar, Line, Area, Scatter, Bubble, Box Plot, Histogram, Funnel, Pie, Heatmap, Calendar Heatmap, Sankey, Waterfall, US Map, Area Map, Point Map, Bubble Map
• BigValue Component: KPI metric display with formatted value, sparkline chart, and comparison delta indicator
• Interactive Maps: PointMap and BubbleMap use Leaflet.js with CartoDB tile basemaps — real zoomable maps down to street level (dynamically loaded, no bundle bloat)
• DataTable Component: Full-featured data table with sorting, pagination, search, grouping, totals, column formatting, and rich content types (bars, deltas, sparklines, color scales)
• 100+ Built-in Formats: Currencies (USD, EUR, GBP, etc.), dates, numbers, percentages with automatic scaling (k, M, B, T)
• Light/Dark Theme Support: Automatic system detection with manual toggle
• Export Options: PNG, JPEG, CSV download and clipboard copy
• TypeScript Support: Full type definitions included
• Reference Components: Add reference lines, areas, and points to charts
• Attached Tables: Add a DataTable above or below any chart with table="bottom" — fully configurable with column-level formatting, bar cells, color scales, and more

Installation

npm install @autonomousminds-public/vue-better-bi echarts

Quick Start

<script setup>
import { BarChart, LineChart, useTheme } from '@autonomousminds-public/vue-better-bi';

const { activeAppearance, cycleAppearance } = useTheme();

const data = [
  { month: 'Jan', sales: 12500, orders: 145 },
  { month: 'Feb', sales: 15200, orders: 178 },
  { month: 'Mar', sales: 18900, orders: 210 },
  { month: 'Apr', sales: 16400, orders: 189 },
  { month: 'May', sales: 21000, orders: 245 },
  { month: 'Jun', sales: 24500, orders: 289 }
];
</script>

<template>
  <button @click="cycleAppearance">Toggle Theme</button>

  <BarChart
    :data="data"
    x="month"
    y="sales"
    title="Monthly Sales"
    yFmt="usd0k"
  />

  <LineChart
    :data="data"
    x="month"
    :y="['sales', 'orders']"
    title="Sales & Orders Trend"
    :markers="true"
  />
</template>

Chart Types

Basic Charts

Advanced Charts

Note: ScatterPlot and BubbleChart both use ECharts' scatter series. BubbleChart adds a size prop that maps a data column to point sizes (minSize–maxSize), making it a scatter plot with a third dimension.

Specialized Charts

Maps

Note: PointMap and BubbleMap use Leaflet.js with CartoDB tile basemaps, providing real interactive maps with smooth zoom down to street level. Leaflet is dynamically imported and only loaded when a map component renders. USMap and AreaMap use ECharts.

Data Table

Value Components

Reference Components

ReferenceLine Props

Formatting

Use the yFmt, xFmt, or valueFmt props on charts, or the fmt property on DataTable column configs.

Number Formats

Percent Formats

Currency Formats

Each currency supports the same suffixes: (none), 0, 1, 2, 0k, 1k, 2k, 0m, 1m, 2m, 0b, 1b, 2b.

Available currencies:

Date/Time Formats

Date formats require the data to contain actual date values (ISO strings like 2022-01-09T12:45:00 or Date objects).

Custom Format Codes

Any string that doesn't match a built-in tag is passed through as a raw SSF format code, giving you full control:

"fmt": "mmm dd, h:mm AM/PM"    → Mar 05, 10:32 PM
"fmt": "yyyy-mm-dd"            → 2022-01-09
"fmt": "#,##0.00"              → 7,043.12
"fmt": "0.0%"                  → 73.1%

Theming

Using Theme Composable

import { useTheme } from '@autonomousminds-public/vue-better-bi';

const {
  activeAppearance,    // Current theme: 'light' | 'dark'
  selectedAppearance,  // User preference: 'light' | 'dark' | 'system'
  setAppearance,       // Set preference
  cycleAppearance,     // Cycle through options
  resolveColor,        // Resolve color for current theme
  resolveColorPalette  // Get color palette
} = useTheme();

Pre-built Themes

Apply a complete theme preset with a single call:

import { applyPreset } from '@autonomousminds-public/vue-better-bi';

applyPreset('midnight');

Available presets:

You can also start from a preset and customize further:

import { themePresets, configureThemes } from '@autonomousminds-public/vue-better-bi';

const custom = {
  light: {
    ...themePresets.midnight.light,
    colors: { ...themePresets.midnight.light.colors, 'base-100': '#1a1a2e' }
  },
  dark: themePresets.midnight.dark
};
configureThemes(custom);

Custom Themes

import { configureThemes } from '@autonomousminds-public/vue-better-bi';

configureThemes({
  light: {
    colors: {
      'base-100': '#ffffff',
      'base-content': '#333333'
    },
    colorPalettes: {
      default: ['#3366cc', '#dc3912', '#ff9900']
    }
  }
});

Series-Style Rotation

When a line or area chart has more series than the active palette has colors, the dash pattern (solid → dashed → dotted) and marker shape (circle → rect → triangle → diamond → pin → arrow) automatically rotate per palette wrap. So series 1 and series 11 share a color but stay visually distinct.

This kicks in only past the wrap — series 1–10 keep whatever lineType / markerShape you set chart-wide. To opt out entirely, set lineType and markerShape explicitly on the chart.

Props Reference

Common Props

Axis Labels Props

<LineChart
  :data="data"
  x="month"
  y="sales"
  :xAxisLabels="true"
  :yAxisLabels="true"
  xAxisTitle="Month"
  yAxisTitle="Sales ($)"
  :yGridlines="true"
  :xAxisLabelRotate="45"
/>

Secondary Y-Axis (Dual Axis)

Add a secondary Y-axis to overlay different scales or chart types. Supported by BarChart, LineChart, and AreaChart.

When a secondary axis is present, both axes automatically color their labels and titles to match their respective series colors. This provides a clear visual link between each axis and its data. You can override with a custom color or set to 'false' to disable.

<!-- Bar chart with line overlay on secondary axis -->
<BarChart
  :data="data"
  x="month"
  y="revenue"
  y2="profit_margin"
  y2SeriesType="line"
  yAxisTitle="Revenue"
  y2AxisTitle="Profit Margin"
  yFmt="usd0"
  y2Fmt="pct1"
/>

<!-- Custom axis colors -->
<LineChart
  :data="data"
  x="month"
  y="temperature"
  y2="rainfall"
  yAxisColor="#e74c3c"
  y2AxisColor="#3498db"
/>

Legend Props

<!-- Legend at bottom -->
<LineChart
  :data="data"
  x="month"
  :y="['sales', 'orders']"
  :legend="true"
  legendPosition="bottom"
/>

<!-- Legend on the right -->
<BarChart
  :data="data"
  x="month"
  y="sales"
  series="region"
  legendPosition="right"
/>

Export Props

BarChart Props

In addition to common props, axis props, and formatting props:

<!-- Stacked bars with total labels only (no per-segment labels) -->
<BarChart
  :data="data"
  x="month"
  y="revenue"
  series="region"
  type="stacked"
  :labels="true"
  :stackTotalLabel="true"
  :seriesLabels="false"
  yFmt="usd0k"
/>

AreaChart Props

In addition to common props, axis props, and formatting props:

FunnelChart Props

<FunnelChart
  :data="data"
  name="stage"
  value="count"
  :showPercent="true"
  funnelAlign="left"
  valueFmt="num0"
/>

SankeyDiagram Props

<SankeyDiagram
  :data="flowData"
  source="from"
  target="to"
  value="amount"
  nodeLabels="full"
  linkLabels="percent"
  linkColor="gradient"
  valueFmt="num0"
/>

BoxPlot Props

<!-- Whiskers auto-computed from IQR -->
<BoxPlot
  :data="data"
  x="group"
  midpoint="median"
  confidenceIntervalLower="q1"
  confidenceIntervalUpper="q3"
/>

<!-- Explicit whisker columns -->
<BoxPlot
  :data="data"
  x="group"
  midpoint="median"
  confidenceIntervalLower="q1"
  confidenceIntervalUpper="q3"
  min="whisker_low"
  max="whisker_high"
/>

CalendarHeatmap Props

<CalendarHeatmap
  :data="data"
  date="date"
  value="contributions"
  :min="0"
  :max="20"
  :dayLabel="false"
/>

Heatmap Props

<Heatmap
  :data="data"
  x="hour"
  y="day"
  value="visitors"
  title="Website Traffic"
  titleIcon="https://example.com/icon.svg"
  subtitle="Peak Hours Analysis - Shows visitor patterns across weekdays and highlights peak activity periods"
  :valueLabels="true"
  zeroDisplay="0"
  colorScale="blue"
/>

Pie Chart Props

<!-- Basic pie chart -->
<PieChart
  :data="data"
  name="category"
  value="revenue"
  title="Revenue by Category"
  valueFmt="usd0k"
/>

<!-- Donut chart with inside labels -->
<PieChart
  :data="data"
  name="category"
  value="revenue"
  title="Revenue Breakdown"
  :donut="true"
  labelPosition="inside"
  legendPosition="right"
/>

<!-- Custom inner radius -->
<PieChart
  :data="data"
  name="category"
  value="revenue"
  :donut="true"
  innerRadius="30%"
/>

Waterfall Chart Props

Two waterfall types are supported via waterfallType:

• Accumulative (default) — Each bar is an incremental change from zero. A running total builds up across all bars, with an optional auto-total at the end.
• Bridge — Starts and ends with explicit total bars (full bars from zero), with incremental +/- changes floating in between. Requires a totalColumn to mark which rows are totals.

<!-- Accumulative: P&L breakdown -->
<WaterfallChart
  :data="plData"
  x="category"
  y="amount"
  title="Profit & Loss"
  yFmt="usd0k"
  :labels="true"
  totalLabel="Net Income"
/>

<!-- Bridge: Q1 → changes → Q2 -->
<WaterfallChart
  :data="bridgeData"
  x="category"
  y="amount"
  waterfallType="bridge"
  totalColumn="isTotal"
  title="Revenue Bridge Q1 → Q2"
  yFmt="usd0k"
/>

DataTable

A full-featured data table component with sorting, pagination, search, grouping, totals, and rich column content types.

Basic Usage

<script setup>
import { DataTable } from '@autonomousminds-public/vue-better-bi';

const data = [
  { name: 'Alice', department: 'Engineering', salary: 125000, change: 0.08 },
  { name: 'Bob', department: 'Marketing', salary: 95000, change: -0.03 },
  { name: 'Carol', department: 'Engineering', salary: 142000, change: 0.12 },
  { name: 'Dave', department: 'Sales', salary: 88000, change: 0.05 },
];
</script>

<template>
  <!-- Auto-generates columns from data keys -->
  <DataTable :data="data" title="Team Directory" />
</template>

Custom Columns

Use <Column> children to control which columns appear, their order, formatting, and content types:

<script setup>
import { DataTable, Column } from '@autonomousminds-public/vue-better-bi';
</script>

<template>
  <DataTable :data="data" title="Team Compensation" :search="true">
    <Column id="name" title="Employee" />
    <Column id="department" />
    <Column id="salary" fmt="usd0" totalAgg="mean" />
    <Column id="change" contentType="delta" fmt="pct1" />
  </DataTable>
</template>

DataTable Props

Grouping Props

Color Props

Column Props

Column Content Types

Bar (contentType="bar")

Renders a horizontal bar in the cell background proportional to the value.

<Column id="revenue" contentType="bar" fmt="usd0k" barColor="#4ade80" />

Delta (contentType="delta")

Shows a value with an up/down indicator and configurable styling.

<Column id="change" contentType="delta" fmt="pct1" downIsGood chip />

Color Scale (contentType="colorscale")

Colors the cell background based on the value using a gradient scale.

<Column id="score" contentType="colorscale" colorScale="positive" />

Sparkline / Sparkbar / Sparkarea

Renders a mini chart inside the cell from array data.

<Column id="trend" contentType="sparkline" sparkColor="#6366f1" :interactive="true" />

Link (contentType="link")

Renders the cell value as a clickable hyperlink.

Image (contentType="image")

Renders the cell value as an image URL.

HTML (contentType="html")

Renders the cell value as raw HTML.

Grouping Example

<DataTable
  :data="data"
  groupBy="department"
  groupType="accordion"
  :subtotals="true"
  :groupsOpen="true"
  accordionRowColor="#f8fafc"
>
  <Column id="name" />
  <Column id="department" />
  <Column id="salary" fmt="usd0" totalAgg="sum" />
</DataTable>

Total Row Example

<DataTable :data="data" :totalRow="true" totalRowColor="#f0fdf4">
  <Column id="product" />
  <Column id="revenue" fmt="usd0" totalAgg="sum" />
  <Column id="margin" fmt="pct1" totalAgg="mean" />
  <Column id="growth" contentType="delta" fmt="pct1" totalAgg="mean" />
</DataTable>

Formula-based Total Aggregation

For columns where standard aggregations produce meaningless totals (e.g. a percentage change column), totalAgg accepts formula strings starting with =. Formulas reference other columns and compute the total from their aggregated values.

<DataTable :data="data" :totalRow="true">
  <Column id="current_revenue" fmt="usd0" totalAgg="sum" />
  <Column id="prev_revenue" fmt="usd0" totalAgg="sum" />
  <Column
    id="yoy_change"
    fmt="pct1"
    contentType="delta"
    totalAgg="=sum(current_revenue) / sum(prev_revenue) - 1"
  />
</DataTable>

Syntax:

• Wrap column names in an aggregation function: sum(col), mean(col), median(col), min(col), max(col), count(col), countDistinct(col)
• Bare column names use that column's own totalAgg (default: sum): =current_revenue / prev_revenue - 1
• Arithmetic operators + - * / ( ) are supported
• Formula columns suppress the aggregation label (no "Sum" / "Mean" prefix in the total row)
• Formulas work in both total rows and subtotal rows (computed per group)

Attached Table

Any chart component can render a DataTable directly above or below itself using the table, tableProps, and tableColumns props. The table shares the chart's data automatically.

Basic Usage

<!-- Simple: just add table="bottom" to any chart -->
<BarChart :data="data" x="month" y="sales" table="bottom" />

<!-- Position above the chart instead -->
<LineChart :data="data" x="day" y="value" table="top" />

Configuring the Table

Pass any DataTableProps via tableProps to control the table's behavior and styling:

<BarChart
  :data="data"
  x="month"
  y="sales"
  table="bottom"
  :tableProps="{
    rows: 5,
    search: true,
    rowShading: true,
    totalRow: true,
    headerColor: '#1e3a5f',
    headerFontColor: '#ffffff',
    compact: true
  }"
/>

Column-Level Configuration

Use tableColumns to define per-column formatting, content types (bar cells, color scales, deltas), alignment, and aggregations. Each entry uses the same ColumnProps interface as the <Column> component:

<script setup>
import { BarChart } from '@autonomousminds-public/vue-better-bi';

const data = [
  { brand: 'Contoso', revenue: 2075978, profit: 1164129, margin: 0.56 },
  { brand: 'Fabrikam', revenue: 1408217, profit: 805671, margin: 0.57 },
  { brand: 'Proseware', revenue: 1205475, profit: 700565, margin: 0.58 },
];

const tableColumns = [
  { id: 'brand', title: 'Brand', align: 'left' },
  { id: 'revenue', title: 'Revenue', fmt: 'usd0', contentType: 'bar', totalAgg: 'sum', barColor: '#3b82f6' },
  { id: 'profit', title: 'Profit', fmt: 'usd0', contentType: 'bar', totalAgg: 'sum', barColor: '#60a5fa' },
  { id: 'margin', title: 'Margin', fmt: 'pct1', contentType: 'colorscale', totalAgg: 'mean', colorScale: ['#fecaca', '#ffffff', '#bbf7d0'] },
];
</script>

<template>
  <BarChart
    :data="data"
    x="brand"
    :y="['revenue', 'profit']"
    title="Brand Performance"
    yFmt="usd0"
    table="bottom"
    :tableProps="{ search: true, rowShading: true, totalRow: true, headerColor: '#1e3a5f', headerFontColor: '#fff' }"
    :tableColumns="tableColumns"
  />
</template>

Props

These props are available on every chart component: BarChart, LineChart, AreaChart, ScatterPlot, BubbleChart, BoxPlot, Histogram, FunnelChart, PieChart, Heatmap, CalendarHeatmap, SankeyDiagram, and WaterfallChart.

BigValue

A KPI metric display component for showing a single highlighted value with an optional sparkline trend chart and comparison delta indicator.

The comparison column holds the raw comparison value (e.g. previous period's revenue), and the component automatically computes the percentage or absolute change. Click the comparison area to toggle between display modes.

Basic Usage

<script setup>
import { BigValue } from '@autonomousminds-public/vue-better-bi';

const data = [
  { date: '2025-01-01', revenue: 48500, previous_revenue: 43200 },
  { date: '2025-01-02', revenue: 49200, previous_revenue: 44100 },
  // ... 30 days of data
];
</script>

<template>
  <BigValue
    :data="data"
    value="revenue"
    title="Monthly Revenue"
    fmt="usd0"
  />
</template>

With Sparkline and Comparison

<BigValue
  :data="data"
  value="revenue"
  comparison="previous_revenue"
  sparkline="date"
  title="Revenue"
  subtitle="Last 30 days"
  fmt="usd0"
/>

This renders:

• Title and optional subtitle (same style as chart headers)
• Large formatted value from the first row of data
• Sparkline showing the trend over time (line, area, or bar)
• Comparison delta with directional arrow and color coding (e.g. ▲ 12.3%)
• Clickable toggle — click the comparison area to switch between percentage and absolute change

BigValue Props

Comparison Props

The comparison column should contain the raw comparison value (e.g. previous period's revenue). The component computes the delta automatically:

• Percent mode: (value - comparison) / |comparison| — displayed as ▲ 12.3%
• Absolute mode: value - comparison — displayed as ▲ 5,234

Click the comparison area to toggle between modes.

Sparkline Props

Examples

<!-- Simple KPI -->
<BigValue :data="data" value="revenue" fmt="usd0" />

<!-- With all features (defaults to percent mode, click to toggle) -->
<BigValue
  :data="data"
  value="revenue"
  comparison="previous_revenue"
  sparkline="date"
  title="Monthly Revenue"
  subtitle="Compared to previous period"
  fmt="usd0"
  sparklineType="area"
  sparklineColor="#3366cc"
  :sparklineYScale="true"
/>

<!-- Start in absolute mode -->
<BigValue
  :data="data"
  value="revenue"
  comparison="previous_revenue"
  comparisonDisplay="absolute"
  fmt="usd0"
/>

<!-- Down is good (e.g. costs, churn) -->
<BigValue
  :data="data"
  value="churn_rate"
  comparison="previous_churn_rate"
  fmt="pct1"
  :downIsGood="true"
/>

<!-- Plain comparison (no delta computation, no toggle) -->
<BigValue
  :data="data"
  value="revenue"
  comparison="target"
  :comparisonDelta="false"
  comparisonTitle="vs. target"
  fmt="usd0"
/>

<!-- Aggregated: big number = sum of all rows, sparkline = daily trend -->
<BigValue
  :data="dailyRevenue"
  value="revenue"
  agg="sum"
  sparkline="date"
  title="Total Revenue"
  fmt="usd0"
/>

<!-- Average metric with trend -->
<BigValue
  :data="dailyData"
  value="margin"
  agg="mean"
  sparkline="date"
  title="Avg Margin"
  fmt="pct1"
/>

<!-- Linked sparklines (shared tooltip) -->
<BigValue :data="data" value="revenue" sparkline="date" connectGroup="kpis" />
<BigValue :data="data" value="orders" sparkline="date" connectGroup="kpis" />

Interactive Features

Structured props for common ECharts interactive features. These provide a cleaner API than raw echartsOptions passthrough with full TypeScript support and sensible defaults.

Zoom (DataZoom)

Enable data zooming with slider or mouse wheel controls.

<!-- Simple: just enable with true -->
<LineChart :data="data" x="date" y="value" :zoom="true" />

<!-- Detailed configuration -->
<LineChart
  :data="data"
  x="date"
  y="value"
  :zoom="{
    type: 'both',      // 'slider' | 'inside' | 'both'
    axis: 'x',         // 'x' | 'y' | 'both'
    start: 0,          // 0-100 percentage
    end: 50,           // 0-100 percentage
    height: 30         // slider height in pixels
  }"
/>

Toolbox

Add a toolbox with save, restore, and zoom controls.

<!-- Simple: enables saveAsImage + restore -->
<LineChart :data="data" x="date" y="value" :toolbox="true" />

<!-- Full configuration -->
<LineChart
  :data="data"
  x="date"
  y="value"
  :toolbox="{
    position: 'top-right',
    saveAsImage: true,
    dataZoom: true,
    restore: true,
    magicType: { type: ['line', 'bar'] }
  }"
/>

Brush (Selection)

Enable brush selection on scatter plots and other charts.

<ScatterPlot
  :data="data"
  x="age"
  y="income"
  :brush="{
    type: ['rect', 'polygon'],
    outOfBrush: { opacity: 0.2 }
  }"
/>

Animation

Control chart animations.

<!-- Disable animation -->
<LineChart :data="data" x="date" y="value" :animation="false" />

<!-- Custom animation -->
<LineChart
  :data="data"
  x="date"
  y="value"
  :animation="{
    duration: 2000,
    easing: 'elasticOut'
  }"
/>

Tooltip

Customize tooltip behavior and appearance.

<LineChart
  :data="data"
  x="date"
  y="value"
  :tooltip="{
    trigger: 'axis',
    axisPointer: 'cross',
    confine: true
  }"
/>

Complete Example

<LineChart
  :data="timeSeriesData"
  x="date"
  :y="['revenue', 'cost']"
  title="Revenue & Cost Trend"
  yFmt="usd0k"
  :zoom="{ type: 'both', axis: 'x', start: 0, end: 50 }"
  :toolbox="{ saveAsImage: true, dataZoom: true, restore: true }"
  :animation="{ duration: 2000, easing: 'elasticOut' }"
  :tooltip="{ trigger: 'axis', axisPointer: 'cross' }"
/>

Escape Hatch

The echartsOptions prop is still available for edge cases not covered by structured props:

<LineChart
  :data="data"
  x="date"
  y="value"
  :echartsOptions="{
    /* Any raw ECharts option */
  }"
/>

## Interactive Playground

The library includes a full interactive playground app for exploring every chart type and prop. It serves as both a demo and a tutorial for learning the API.

### Features

- **All 17 chart types** with live rendering and sample data
- **Complete prop controls** — every prop for every chart type is adjustable via the settings panel (toggles, sliders, dropdowns, color pickers, number inputs)
- **Three view modes**:
  - **Chart** — live rendered chart that updates as you change settings
  - **Code** — auto-generated Vue SFC that reproduces the current configuration (copy-paste ready)
  - **Data** — table view of the sample dataset powering the chart
- **Grouped settings** — props organized into collapsible sections (Chart-Specific, Titles, Axes, Display, Formatting, Zoom, Toolbox, Animation, Tooltip, Export)
- **Theme support** — light/dark toggle and theme preset selector
- **URL hash sync** — bookmark any chart type directly (e.g. `#scatter-plot`)

### Running the Playground

```bash
cd examples/demo-app
npm install
npm run dev

Layout

The playground uses a three-panel layout:

Maps

PointMap

Renders point markers at lat/long coordinates on an interactive Leaflet tile basemap. Works with any data that has latitude and longitude columns — cities, countries, addresses, etc.

<PointMap
  :data="data"
  lat="latitude"
  long="longitude"
  name="country"
  value="gdp"
  valueFmt="usd0k"
  title="GDP by Country"
  pointColor="#e63946"
  :pointSize="10"
  :pointOpacity="0.8"
/>

PointMap Props

BubbleMap

Like PointMap but with a size column that scales marker radius, useful for showing magnitude (population, revenue, etc.).

<BubbleMap
  :data="data"
  lat="latitude"
  long="longitude"
  name="country"
  value="gdp"
  size="population"
  sizeFmt="num0k"
  title="World Population"
  :minSize="5"
  :maxSize="40"
  :pointOpacity="0.6"
/>

BubbleMap Props

Inherits all PointMap props, plus:

Custom Basemaps

Both PointMap and BubbleMap accept a basemap prop for custom tile layers:

<!-- OpenStreetMap -->
<PointMap
  :data="data"
  lat="lat"
  long="long"
  basemap="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>

<!-- CartoDB Dark -->
<PointMap
  :data="data"
  lat="lat"
  long="long"
  basemap="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
/>

API

Composables

• useTheme() - Theme management
• useECharts() - Direct ECharts instance management
• useLeafletMap() - Leaflet map lifecycle management (used internally by PointMap/BubbleMap)
• useFormatting() - Value formatting utilities
• useExport() - Export functionality

Core Components

• EChartsBase - Base ECharts wrapper component
• ChartProvider - Context provider for nested components
• ChartFooter - Download buttons component

Table Components

• DataTable - Full-featured data table with sorting, pagination, search, grouping, totals, and rich content types
• Column - Declarative column configuration (renderless, used as child of DataTable)

Value Components

• BigValue - KPI metric display with formatted value, sparkline chart, and comparison delta with percent/absolute toggle

License

MIT