@duckviz/dashboard

Embeddable dashboard with 50+ pre-built D3.js chart types, drag-and-drop grid layout, and automatic DuckDB-WASM data provider.

Install

npm install @duckviz/dashboard
# peer dependencies
npm install @duckviz/ui @duckviz/widgets react react-dom d3

Quick start

import { DuckvizDBProvider, useDuckDB } from "@duckviz/db";
import { Dashboard, type DashboardConfig } from "@duckviz/dashboard/react";
import "@duckviz/dashboard/styles.css";

const config: DashboardConfig = {
  widgets: [
    {
      id: "1",
      type: "bar",
      title: "Sales by Region",
      duckdbQuery:
        "SELECT region AS label, SUM(amount) AS value FROM sales GROUP BY region",
    },
  ],
};

function App() {
  return (
    <DuckvizDBProvider>
      <Dashboard config={config} />
    </DuckvizDBProvider>
  );
}

Exports

| Subpath | Description | | ------------------------------- | ----------------------------------------- | | @duckviz/dashboard/react | <Dashboard /> component and React hooks | | @duckviz/dashboard/styles.css | Required CSS for grid layout and charts | | @duckviz/dashboard/widget.css | Optional widget-level styles | | @duckviz/dashboard/theme.css | Optional theme CSS custom properties |

Chart types

50+ pre-built D3.js chart components across 15 categories: bar, line, area, scatter, pie, distribution, heatmap, hierarchy, network, radial, specialty, text, geo/spatial, composite, and more.

Peer dependencies

| Package | Version | | ------------- | -------- | | react | >=18 | | react-dom | >=18 | | d3 | ^7.0.0 | | @duckviz/db | optional |

License

MIT