Chart

Beautiful charts drawn directly in GPUI — no chart library.

Overview

分组柱状 + CartesianGrid + X 轴 + 悬停 tooltip + 带 totals 的 legend（文档页同款交互）。

GPUI · Live previewGPUI WASM

Installation

Chart 是单个 Rust 文件（src/chart.rs）—— 无图表库依赖：网格、柱、线、面积、环形全用 GPUI 的 div 与 canvas/PathBuilder 自绘。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# chart.rs is self-contained — no chart library dependency.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --chart34# Other demos:5cargo run --locked -- --chart stacked6cargo run --locked -- --chart line7cargo run --locked -- --chart area8cargo run --locked -- --chart donut

Usage

Chart::new(kind) 建实体，.config(..) 传 ChartSeries（ChartConfig 等价物：label + light/dark 色），.data(..) 传 (类目, 各系列值) 行。悬停即出 tooltip，无需接线。

Example.rs

1use justdo_command::chart::{Chart, ChartKind, ChartSeries};23let chart = cx.new(|_| {4    Chart::new(ChartKind::Bar)5        .title("Bar Chart - Interactive", "…last 6 months")6        .config(vec![7            ChartSeries::new("Desktop", 0x2563eb, 0x3b82f6),8            ChartSeries::new("Mobile", 0x60a5fa, 0x93c5fd),9        ])10        .data(vec![11            ("Jan", vec![186., 80.]),12            ("Feb", vec![305., 200.]),13            ("Mar", vec![237., 120.]),14            // …15        ])16        .dark(dark)17});

网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

组合结构对齐 shadcn/ui 的 ChartContainer / ChartTooltip / ChartLegend（Recharts）。

Structure

1Chart                 card-styled container — title + caption + plot + legend2├── plot              relative box, 220px tall3│   ├── canvas        grid lines / line+area paths / donut slices4│   ├── bars          flex bands (Bar | Stacked)5│   ├── hover bands   one transparent flex_1 column per x category6│   └── tooltip       absolute, follows the cursor7├── x axis            per-category flex_1 labels8└── legend            dot + label + series total

Notes

Chart config. ChartSeries 解耦 label 与 light/dark 色值 —— 与 shadcn 的 ChartConfig 对应，数据行只带数值。

Example.rs

1// ChartSeries is the ChartConfig equivalent — label plus2// light/dark colors, decoupled from the data rows.3const DESKTOP: (u32, u32) = (0x2563eb, 0x3b82f6); // light, dark4ChartSeries::new("Desktop", DESKTOP.0, DESKTOP.1)

Tooltip. 悬停命中按 x 分带（cartesian）或按极角+半径（donut）判定；.indicator(IndicatorStyle::Line) 换线性指示条，默认圆点。donut 悬停会把其余切片降到 35% 透明。

Scale. y 轴归一取单列最大值（Stacked 取列总和）。网格 4 条水平线、无纵向网格（对齐 CartesianGrid vertical={false}）。

Not ported. Recharts 的动画入场、刷选缩放、雷达/径向图未实现；RTL 文字依赖阿拉伯字形（Geist 不含）。

API Reference

Chart 实体与配置。

API	Signature	Notes
`Chart::new(kind)`	`ChartKind`	Bar \| Stacked \| Line \| Area \| Donut.
`.title(.., ..)`	`&str, &str`	Card-style heading + caption above the plot.
`.config(..)`	`Vec<ChartSeries>`	Series (or donut slice) labels + light/dark colors.
`.data(..)`	`Vec<(&str, Vec<f32>)>`	(category, per-series values); donut rows are slices.
`.indicator(..)`	`IndicatorStyle`	Tooltip indicator: Dot (default) \| Line.
`.legend(..)`	`bool`	Legend row with series totals.
`.center_label(..)`	`&str`	Donut hole label (e.g. total).
`.dark(..)`	`bool`	Dark theme (colors read from series' dark slots).

Source & inspiration

结构与视觉参考 shadcn/ui Chart (Recharts) 。本页交互由 Rust / GPUI 绘制，基础样式来自 gpui-kit 。