Install

pnpm add @semilayer/headless

Why headless?

The same primitives power @semilayer/charts (vanilla SVG renderer) and @semilayer/react-charts (React wrapper). If you're using your own chart library — Recharts, ECharts, Plotly, D3, observable plot, victory, your bespoke Canvas/WebGL setup — pull these in directly and skip the rendering layer.

Usage

import { toLineSeries, toStackedSeries, toFunnelSteps } from '@semilayer/headless'
import { beam } from './generated/beam'

const result = await beam.recipes.analyze.publishedByDay({ where: { status: 'published' } })

// Tidy → 1+ line series, ready for Recharts / ECharts / D3 / etc.
const series = toLineSeries(result, {
  xField: 'day',
  yField: 'count',
  seriesField: 'cuisine',
})
// [{ series: 'italian', points: [{ x: '2026-04-26', y: 5, bucketKey: 'k1' }, ...] },
//  { series: 'french',  points: [...] }]

Available shapes

| Function | For chart shape | Returns | |---|---|---| | toLineSeries | line, area, scatter | LineSeries[] — one series per measure or seriesField value | | toStackedSeries | stackedArea, stackedBar | StackedSeries — pivoted on seriesField, with totals + bucketKeys | | toScatterPoints | scatter | ScatterPoint[] — x/y/optional size + category | | toBars | bar | BarsResult — one bar per bucket | | toPieSlices | pie, donut, treemap | PieSlice[] — label + value + bucketKey | | toHeatmapMatrix | heatmap | dense HeatmapMatrix with row-major cells | | toGeoFeatures | geo | GeoFeature[] — cell id + value pairs | | toFunnelSteps | funnel | FunnelStep[] in stepIndex order | | toCohortMatrix | cohort | sparse cohort × interval matrix |

Drill-down friendly

Every reshape preserves the bucket's signed bucketKey so callers can wire chart-element clicks straight to analyze.<name>.rows({ bucketKey }):

const series = toLineSeries(result, { xField: 'day', yField: 'count' })
for (const s of series) {
  for (const point of s.points) {
    // point.bucketKey is round-trippable to the rows endpoint
  }
}

See Also

• Analyze facet docs
• @semilayer/charts — vanilla SVG renderer using these primitives
• @semilayer/react-charts — React wrapper
• @semilayer/react — also re-exports this surface at @semilayer/react/headless

License

MIT