Skip to main content

@zuilib/charts · v0.4.0  +  @zuilib/data-grid · v0.4.0

From data to decision, fast.

As we increasingly get bombarded with more data, we need products that present data in an intuitive maner in a way that allows users to make impactful decisions. ZUI makes it easy to build such views.

DocumentationCross-filtering →
Artboard · revenue analytics
light · 100%

Q3 billing

Click a bar, slice or legend chip — the KPIs and the grid follow.

Billed

$508,633

all 200 invoices

Outstanding

$342,813

pending and overdue

Overdue invoices

74

need a chaser

Average invoice

$2,543

across the book

01A chart is a specOne serializable ChartSpec — type, keys, formats — renders any of ten chart types. Because it is plain JSON, end users and LLMs can build charts at runtime; nothing is locked into JSX.
02One filter links everythingClick a bar, slice or legend chip and the CrossFilterProvider holds {field, values}. applyFilters re-derives any aggregate from it, so every other chart recomputes — and a KPI card is just such an aggregate in a Card. No KPI component to learn.
03The grid closes the looptoColumnFilters turns the same state into DataGrid columnFilters, so a chart click becomes a server-side query. Selecting rows flows back through toHighlight: the other marks dim.
Ten chart typesBar, line, area, donut, pie, scatter, radar, funnel, treemap, composed — one component, one spec shape.The specA chart is data, validated at version 1. Store it, share it, let the assistant write it.Cross-filteringThe state object, the click semantics, and the applyFilters / toColumnFilters / toHighlight adapters.The data gridServer-driven sorting, filters, selection and pagination: controlled state in, a query object out.Themed by the contractSeries colours are --chart-1…8 in the token contract; a brand or the customizer restyles every chart, both modes.APIChart, the providers and every adapter, typed.

Install

pnpm add @zuilib/charts @zuilib/data-grid

# app.css (Tailwind v4 host)
@import "tailwindcss";
@import "@zuilib/primitives/tailwind.css";
@import "@zuilib/charts/tailwind.css";
@import "@zuilib/data-grid/tailwind.css";

Use

import Chart, {CrossFilterProvider, applyFilters,
  toColumnFilters, toHighlight} from '@zuilib/charts'
import DataGrid from '@zuilib/data-grid'

<CrossFilterProvider state={filter} onStateChange={onFilter}>
  <Stat value={sum(applyFilters(rows, filter))} />   {/* KPI card */}
  <Chart spec={spec} rows={aggregate(rows, filter)} />
  <DataGrid state={grid} onStateChange={onGrid} />   {/* toColumnFilters(filter) */}
</CrossFilterProvider>