Skip to main content

Recipes

End-to-end worked examples. Each recipe is a complete, runnable pattern — data fixture, transforms, chart interop — not a fragment. Skim the list to find the closest match to your use case, then steal.

Available recipes:

  • CPU metrics dashboard — rolling averages, band charts, outlier detection
  • Error-rate dashboard — aggregated counts bucketed by time, per-host breakdown
  • Streaming dashboard — live-series ingest from a WebSocket-style source, throttled React rendering
  • Incremental ±σ baselines — move a per-host rolling baseline onto the ingest path (partitionBy.rolling().collect()) so each render is a gather, not a re-walk (~16× at dashboard scale)
  • Frontend telemetry reporting — collect high-frequency timing events, sample p95 latency to a backend every 30 s, display the live p95 in React
  • Resizable multi-panel layout — a full-height @pond-ts/charts chart split into a large top panel over a smaller bottom one, with a draggable divider; extra vertical space flows to the top
  • Theming charts — the ChartTheme model, semantic identifiers, per-series dash, and binding to a design system's CSS tokens with cssVarTheme / useChartTheme (dark/light that follows a data-theme toggle)
  • Using @pond-ts/charts — install, the Storybook react-docgen gotcha, the repaint contract, and co-developing against an unreleased build without breaking CI