Install

pnpm add @semilayer/react-charts @semilayer/charts @semilayer/react

Quick start — component

import { AnalyzeChart } from '@semilayer/react-charts'
import { beam } from './generated/beam'

export function PublishedByDayTile() {
  return (
    <AnalyzeChart
      beam={beam.recipes.analyze.publishedByDay}
      shape="line"
      input={{ where: { status: 'published' } }}
      encoding={{ xField: 'day', yField: 'count', seriesField: 'cuisine' }}
      liveUpdates
      height={320}
      onBucketClick={(bucketKey) => openDrillDown(bucketKey)}
      fallback={<div>Loading…</div>}
    />
  )
}

Hook — useAnalyzeChart

When you need imperative access (export buttons, custom drilldown UIs, SSR re-hydration), reach for the hook directly:

import { useAnalyzeChart } from '@semilayer/react-charts'

export function Tile() {
  const { ref, exportCSV, exportPNG, refetch, evolved } = useAnalyzeChart(
    beam.recipes.analyze.publishedByDay,
    {
      shape: 'stackedArea',
      input: { where: { status: 'published' } },
      encoding: { xField: 'day', yField: 'count', seriesField: 'cuisine' },
      liveUpdates: true,
    },
  )

  return (
    <div>
      <div ref={ref} style={{ height: 320 }} />
      <button onClick={refetch}>Refresh</button>
      <button onClick={() => downloadCsv(exportCSV())}>Export CSV</button>
      {evolved && <span>Top-bucket reordered — fresh data is in.</span>}
    </div>
  )
}

What you get

The hook returns:

| Field | Description | |---|---| | ref | RefCallback to attach to the host element. | | chart | Underlying ChartInstance once mounted. | | loading | True while the first fetch is in flight. | | error | Captured fetch error, or null. | | refetch | Force a fresh fetch (replaces in-memory data). | | evolved | True when a live diff or refetch reordered the top buckets. | | exportCSV / exportJSON / exportSVG / exportPNG | Forwarded from the chart instance. | | result | The raw AnalyzeResult. |

SSR

<AnalyzeChart /> is SSR-safe — chart construction defers to a useEffect, so the server-rendered output is just the host <div> plus your fallback. Hydration mounts the chart imperatively against the live DOM.

See Also

• @semilayer/charts — the underlying renderer
• @semilayer/react — useAnalyze and the rest of the hook family
• @semilayer/headless — pure-function primitives if you'd rather drive your own SVG / Canvas / WebGL

License

MIT