@barefootjs/chart 0.1.0

package/src/types.ts

@@ -0,0 +1,270 @@
+import type { ScaleBand, ScaleLinear, ScalePoint } from 'd3-scale'
+
+/** Color and label configuration for chart data series */
+export type ChartConfig = Record<
+  string,
+  {
+    label: string
+    color: string
+  }
+>
+
+/** Registration info for a bar series */
+export interface BarRegistration {
+  dataKey: string
+  fill: string
+  radius: number
+}
+
+/** Props for ChartContainer */
+export interface ChartContainerProps {
+  config: ChartConfig
+  className?: string
+  children?: unknown
+}
+
+/** Props for BarChart */
+export interface BarChartProps {
+  data: Record<string, unknown>[]
+  children?: unknown
+}
+
+/** Props for Bar */
+export interface BarProps {
+  dataKey: string
+  fill?: string
+  radius?: number
+}
+
+/** Props for CartesianGrid */
+export interface CartesianGridProps {
+  vertical?: boolean
+  horizontal?: boolean
+}
+
+/** Props for XAxis */
+export interface XAxisProps {
+  dataKey: string
+  tickFormatter?: (value: string) => string
+  hide?: boolean
+}
+
+/** Props for YAxis */
+export interface YAxisProps {
+  hide?: boolean
+  tickFormatter?: (value: number) => string
+}
+
+/** Props for LineChart */
+export interface LineChartProps {
+  data: Record<string, unknown>[]
+  children?: unknown
+}
+
+/** Props for Line */
+export interface LineProps {
+  dataKey: string
+  stroke?: string
+  strokeWidth?: number
+  type?: 'linear' | 'monotone'
+  dot?: boolean
+}
+
+/** Props for ChartTooltip */
+export interface ChartTooltipProps {
+  labelFormatter?: (label: string) => string
+}
+
+/** Registration info for a radial bar series */
+export interface RadialBarRegistration {
+  dataKey: string
+  fill: string
+}
+
+/** Registration info for a pie slice */
+export interface PieRegistration {
+  dataKey: string
+  fill: string
+}
+
+/** Props for RadialChart */
+export interface RadialChartProps {
+  data: Record<string, unknown>[]
+  innerRadius?: number
+  outerRadius?: number
+  startAngle?: number
+  endAngle?: number
+  children?: unknown
+}
+
+/** Props for RadialBar */
+export interface RadialBarProps {
+  dataKey: string
+  fill?: string
+  stackId?: string
+}
+
+/** Props for RadialChartLabel */
+export interface RadialChartLabelProps {
+  children?: unknown
+}
+
+/** Context value shared between RadialChart and its children */
+export interface RadialChartContextValue {
+  svgGroup: () => SVGGElement | null
+  container: () => HTMLElement | null
+  data: () => Record<string, unknown>[]
+  innerRadius: () => number
+  outerRadius: () => number
+  startAngle: () => number
+  endAngle: () => number
+  config: () => ChartConfig
+  centerX: () => number
+  centerY: () => number
+  radialBars: () => RadialBarRegistration[]
+  registerRadialBar: (bar: RadialBarRegistration) => void
+  unregisterRadialBar: (dataKey: string) => void
+}
+
+/** Props for PieChart */
+export interface PieChartProps {
+  data: Record<string, unknown>[]
+  children?: unknown
+}
+
+/** Props for Pie */
+export interface PieProps {
+  dataKey: string
+  nameKey: string
+  fill?: string
+  innerRadius?: number
+  outerRadius?: number
+  paddingAngle?: number
+}
+
+/** Props for PieTooltip */
+export interface PieTooltipProps {
+  labelFormatter?: (label: string) => string
+}
+
+/** Context value shared between PieChart and its children */
+export interface PieChartContextValue {
+  svgGroup: () => SVGGElement | null
+  container: () => HTMLElement | null
+  data: () => Record<string, unknown>[]
+  width: () => number
+  height: () => number
+  config: () => ChartConfig
+  pies: () => PieRegistration[]
+  registerPie: (pie: PieRegistration) => void
+  unregisterPie: (dataKey: string) => void
+}
+
+/** Context value shared between BarChart and its children */
+export interface BarChartContextValue {
+  svgGroup: () => SVGGElement | null
+  container: () => HTMLElement | null
+  data: () => Record<string, unknown>[]
+  xDataKey: () => string
+  xScale: () => ScaleBand<string> | null
+  yScale: () => ScaleLinear<number, number> | null
+  innerWidth: () => number
+  innerHeight: () => number
+  config: () => ChartConfig
+  bars: () => BarRegistration[]
+  registerBar: (bar: BarRegistration) => void
+  unregisterBar: (dataKey: string) => void
+  setXDataKey: (key: string) => void
+}
+
+/** Registration info for a radar series */
+export interface RadarRegistration {
+  dataKey: string
+  fill: string
+  fillOpacity: number
+}
+
+/** Registration info for an area series */
+export interface AreaRegistration {
+  dataKey: string
+  fill: string
+  stroke: string
+  fillOpacity: number
+}
+
+/** Props for RadarChart */
+export interface RadarChartProps {
+  data: Record<string, unknown>[]
+  children?: unknown
+}
+
+/** Props for AreaChart */
+export interface AreaChartProps {
+  data: Record<string, unknown>[]
+  children?: unknown
+}
+
+/** Props for Radar */
+export interface RadarProps {
+  dataKey: string
+  fill?: string
+  fillOpacity?: number
+}
+
+/** Props for PolarGrid */
+export interface PolarGridProps {
+  gridType?: 'polygon' | 'circle'
+  show?: boolean
+}
+
+/** Props for PolarAngleAxis */
+export interface PolarAngleAxisProps {
+  dataKey: string
+  tickFormatter?: (value: string) => string
+  hide?: boolean
+}
+
+/** Props for RadarTooltip */
+export interface RadarTooltipProps {
+  labelFormatter?: (label: string) => string
+}
+
+/** Context value shared between RadarChart and its children */
+export interface RadarChartContextValue {
+  svgGroup: () => SVGGElement | null
+  container: () => HTMLElement | null
+  data: () => Record<string, unknown>[]
+  dataKey: () => string
+  radius: () => number
+  radialScale: () => ScaleLinear<number, number> | null
+  config: () => ChartConfig
+  radars: () => RadarRegistration[]
+  registerRadar: (radar: RadarRegistration) => void
+  unregisterRadar: (dataKey: string) => void
+  setDataKey: (key: string) => void
+}
+
+/** Props for Area */
+export interface AreaProps {
+  dataKey: string
+  fill?: string
+  stroke?: string
+  fillOpacity?: number
+}
+
+/** Context value shared between AreaChart and its children */
+export interface AreaChartContextValue {
+  svgGroup: () => SVGGElement | null
+  container: () => HTMLElement | null
+  data: () => Record<string, unknown>[]
+  xDataKey: () => string
+  xScale: () => ScalePoint<string> | null
+  yScale: () => ScaleLinear<number, number> | null
+  innerWidth: () => number
+  innerHeight: () => number
+  config: () => ChartConfig
+  areas: () => AreaRegistration[]
+  registerArea: (area: AreaRegistration) => void
+  unregisterArea: (dataKey: string) => void
+  setXDataKey: (key: string) => void
+}

package/src/utils/arcs.ts

@@ -0,0 +1,149 @@
+import { arc as d3Arc, pie as d3Pie } from 'd3-shape'
+import type { PieArcDatum } from 'd3-shape'
+import { scaleLinear } from 'd3-scale'
+import { max } from 'd3-array'
+
+export interface PieSliceSpec {
+  /** Slice path generated by `d3-shape`'s `arc()`. */
+  d: string
+  /** Resolved fill — datum override, then ChartConfig color, then fallback. */
+  fill: string
+  /** Datum's name used for tooltip lookup and as the stable map key. */
+  name: string
+  /** Numeric value used to size the slice. */
+  value: number
+}
+
+export interface RadialBarArcSpec {
+  /** Background-track path (full sweep, dim). */
+  trackD: string | null
+  /** Foreground value path (proportional to data value). */
+  arcD: string | null
+  /** Numeric value used to size the arc. */
+  value: number
+  /** Optional per-datum fill override (when datum.fill is set). */
+  itemFill?: string
+  /** Index in the input data, used as a stable identifier for SVG. */
+  index: number
+}
+
+/**
+ * Build the arc geometry for a single radial-bar series. Each input datum
+ * becomes a concentric ring within `[innerR, outerR]`, with the value arc
+ * sweeping from `startDeg` (top) to a fraction of the dataset max.
+ *
+ * Pure data — caller renders one `<path d={track.trackD}>` plus one
+ * `<path d={track.arcD}>` per spec, keeping the d3-shape dependency inside
+ * `@barefootjs/chart` and out of consumer bundles.
+ */
+export function buildRadialBarArcs(
+  data: Record<string, unknown>[],
+  dataKey: string,
+  innerR: number,
+  outerR: number,
+  startDeg: number,
+  endDeg: number,
+): RadialBarArcSpec[] {
+  if (data.length === 0) return []
+
+  // SVG arc convention: 0° = top, clockwise. d3-shape uses 0 = right, ccw,
+  // so subtract 90° before converting to radians.
+  const startRad = (startDeg - 90) * (Math.PI / 180)
+  const endRad = (endDeg - 90) * (Math.PI / 180)
+
+  const maxValue =
+    max(data, (d) => {
+      const v = d[dataKey]
+      return typeof v === 'number' ? v : 0
+    }) ?? 1
+
+  const angleScale = scaleLinear().domain([0, maxValue]).range([startRad, endRad])
+
+  const ringCount = data.length
+  const ringThickness = (outerR - innerR) / ringCount
+  const ringPadding = Math.max(1, ringThickness * 0.1)
+
+  const arcGenerator = d3Arc<{
+    innerR: number
+    outerR: number
+    startAngle: number
+    endAngle: number
+  }>()
+    .innerRadius((d) => d.innerR)
+    .outerRadius((d) => d.outerR)
+    .startAngle((d) => d.startAngle)
+    .endAngle((d) => d.endAngle)
+    .cornerRadius(4)
+
+  return data.map((datum, i) => {
+    const value = Number(datum[dataKey]) || 0
+    const rInner = innerR + i * ringThickness + ringPadding / 2
+    const rOuter = innerR + (i + 1) * ringThickness - ringPadding / 2
+    const itemFill = datum.fill as string | undefined
+
+    return {
+      trackD: arcGenerator({
+        innerR: rInner,
+        outerR: rOuter,
+        startAngle: startRad,
+        endAngle: endRad,
+      }),
+      arcD: arcGenerator({
+        innerR: rInner,
+        outerR: rOuter,
+        startAngle: startRad,
+        endAngle: angleScale(value),
+      }),
+      value,
+      itemFill,
+      index: i,
+    }
+  })
+}
+
+/**
+ * Build the slice geometry for a single pie/donut series. Each input datum
+ * becomes one path with its `d` string generated from `d3-shape`'s `arc()`.
+ *
+ * Pure data — caller renders one `<path d={slice.d}>` per spec, keeping the
+ * d3-shape dependency inside `@barefootjs/chart` and out of consumer bundles.
+ */
+export function buildPieSlices(
+  data: Record<string, unknown>[],
+  dataKey: string,
+  nameKey: string,
+  config: Record<string, { label: string; color: string }>,
+  width: number,
+  height: number,
+  innerRadiusRatio: number,
+  outerRadiusRatio: number,
+  paddingAngleDeg: number,
+): PieSliceSpec[] {
+  if (data.length === 0) return []
+
+  const radius = Math.min(width, height) / 2
+
+  const pieData = data.map((d) => {
+    const name = String(d[nameKey] ?? '')
+    const value = Number(d[dataKey]) || 0
+    const configEntry = config[name]
+    const fill = configEntry?.color ?? 'currentColor'
+    return { name, value, fill }
+  })
+
+  const pieLayout = d3Pie<{ name: string; value: number; fill: string }>()
+    .value((d) => d.value)
+    .padAngle((paddingAngleDeg * Math.PI) / 180)
+    .sort(null)
+
+  const arcGenerator = d3Arc<PieArcDatum<{ name: string; value: number; fill: string }>>()
+    .innerRadius(radius * innerRadiusRatio)
+    .outerRadius(radius * outerRadiusRatio)
+
+  return pieLayout(pieData).map((arcDatum) => ({
+    d: arcGenerator(arcDatum) ?? '',
+    fill: arcDatum.data.fill,
+    name: arcDatum.data.name,
+    value: arcDatum.data.value,
+  }))
+}

package/src/utils/areas.ts

@@ -0,0 +1,69 @@
+import { area as d3Area, curveLinear } from 'd3-shape'
+import type { ScalePoint, ScaleLinear } from 'd3-scale'
+
+export interface AreaPaths {
+  /** Filled area path from the bottom of the chart up to each y value. */
+  area: string
+  /** Stroke-only path along the top of the area (degenerate area where y0 === y1). */
+  line: string
+}
+
+export interface AreaDot {
+  key: string
+  cx: number
+  cy: number
+  xValue: string
+  yValue: number
+}
+
+/**
+ * Build the SVG `d` attributes for an area series. Pure helper — d3-shape
+ * stays inside `@barefootjs/chart` so consumer bundles avoid pulling in bare
+ * specifiers the browser import map does not resolve.
+ */
+export function buildAreaPaths(
+  data: Record<string, unknown>[],
+  xKey: string,
+  yKey: string,
+  xs: ScalePoint<string>,
+  ys: ScaleLinear<number, number>,
+  innerHeight: number,
+): AreaPaths {
+  const fillGen = d3Area<Record<string, unknown>>()
+    .x((d) => xs(String(d[xKey])) ?? 0)
+    .y0(innerHeight)
+    .y1((d) => ys(Number(d[yKey]) || 0))
+    .curve(curveLinear)
+
+  const lineGen = d3Area<Record<string, unknown>>()
+    .x((d) => xs(String(d[xKey])) ?? 0)
+    .y0((d) => ys(Number(d[yKey]) || 0))
+    .y1((d) => ys(Number(d[yKey]) || 0))
+    .curve(curveLinear)
+
+  return {
+    area: fillGen(data) ?? '',
+    line: lineGen(data) ?? '',
+  }
+}
+
+/** Build the per-point geometry used to render invisible hover-target dots. */
+export function buildAreaDots(
+  data: Record<string, unknown>[],
+  xKey: string,
+  yKey: string,
+  xs: ScalePoint<string>,
+  ys: ScaleLinear<number, number>,
+): AreaDot[] {
+  return data.map((datum) => {
+    const xValue = String(datum[xKey])
+    const yValue = Number(datum[yKey]) || 0
+    return {
+      key: `${yKey}-${xValue}`,
+      cx: xs(xValue) ?? 0,
+      cy: ys(yValue),
+      xValue,
+      yValue,
+    }
+  })
+}

package/src/utils/classes.ts

@@ -0,0 +1,24 @@
+/**
+ * Stable CSS class names for chart primitives.
+ *
+ * Exported as constants so consumers can reference them via
+ * `<g className={CHART_CLASS_X_AXIS}>` in `"use client"` files. The compiler's
+ * `cssLayerPrefixer` only rewrites locally-declared constants and static
+ * className literals; imported identifiers are left alone, which keeps the
+ * names un-prefixed for the e2e test selectors (`.chart-x-axis text`, ...).
+ */
+
+export const CHART_CLASS_GRID = 'chart-grid'
+export const CHART_CLASS_X_AXIS = 'chart-x-axis'
+export const CHART_CLASS_Y_AXIS = 'chart-y-axis'
+export const CHART_CLASS_POLAR_GRID = 'chart-polar-grid'
+export const CHART_CLASS_POLAR_ANGLE_AXIS = 'chart-polar-angle-axis'
+export const CHART_CLASS_RADIAL_BAR = 'chart-radial-bar'
+export const CHART_CLASS_RADIAL_LABEL = 'chart-radial-label'
+export const CHART_CLASS_BAR = 'chart-bar'
+export const CHART_CLASS_LINE = 'chart-line'
+export const CHART_CLASS_AREA = 'chart-area'
+export const CHART_CLASS_AREA_DOT = 'chart-area-dot'
+export const CHART_CLASS_RADAR = 'chart-radar'
+export const CHART_CLASS_PIE = 'chart-pie'
+export const CHART_CLASS_TOOLTIP = 'chart-tooltip'

package/src/utils/lines.ts

@@ -0,0 +1,61 @@
+import { line as d3Line, curveMonotoneX, curveLinear } from 'd3-shape'
+import type { ScaleBand } from 'd3-scale'
+import type { ScaleLinear } from 'd3-scale'
+
+export interface LinePoint {
+  key: string
+  cx: number
+  cy: number
+  xValue: string
+  yValue: number
+}
+
+/**
+ * Build the SVG `d` attribute for a line series. Pure helper — d3-shape stays
+ * inside `@barefootjs/chart` so consumer bundles avoid pulling in bare
+ * specifiers the browser import map does not resolve.
+ */
+export function buildLinePath(
+  data: Record<string, unknown>[],
+  xKey: string,
+  yKey: string,
+  xs: ScaleBand<string>,
+  ys: ScaleLinear<number, number>,
+  type: 'linear' | 'monotone',
+): string {
+  const bandwidth = xs.bandwidth()
+  const points: [number, number][] = data.map((datum) => {
+    const xValue = String(datum[xKey])
+    const yValue = Number(datum[yKey]) || 0
+    return [(xs(xValue) ?? 0) + bandwidth / 2, ys(yValue)]
+  })
+
+  const generator = d3Line<[number, number]>()
+    .x((d) => d[0])
+    .y((d) => d[1])
+  generator.curve(type === 'monotone' ? curveMonotoneX : curveLinear)
+
+  return generator(points) ?? ''
+}
+
+/** Build the per-point geometry used to render hover/visual dots. */
+export function buildLinePoints(
+  data: Record<string, unknown>[],
+  xKey: string,
+  yKey: string,
+  xs: ScaleBand<string>,
+  ys: ScaleLinear<number, number>,
+): LinePoint[] {
+  const bandwidth = xs.bandwidth()
+  return data.map((datum) => {
+    const xValue = String(datum[xKey])
+    const yValue = Number(datum[yKey]) || 0
+    return {
+      key: `${yKey}-${xValue}`,
+      cx: (xs(xValue) ?? 0) + bandwidth / 2,
+      cy: ys(yValue),
+      xValue,
+      yValue,
+    }
+  })
+}

package/src/utils/radar.ts

@@ -0,0 +1,53 @@
+import type { ScaleLinear } from 'd3-scale'
+
+export interface RadarVertex {
+  /** Stable identifier — combines axis index and label for keyed mapArray. */
+  key: string
+  /** Polar angle in radians; 0 points up, increases clockwise. */
+  angle: number
+  /** Polar radius from the chart centre. */
+  r: number
+  /** Cartesian x coordinate (radius * cos(angle)). */
+  x: number
+  /** Cartesian y coordinate (radius * sin(angle)). */
+  y: number
+  /** Axis label drawn from `data[i][axisKey]`. */
+  label: string
+  /** Numeric series value drawn from `data[i][dataKey]`. */
+  value: number
+}
+
+/**
+ * Compute the per-axis vertices for a radar series. Each input datum becomes
+ * one vertex placed at angle = `(2π / n) * i - π/2` and radius = `radialScale(value)`.
+ */
+export function buildRadarVertices(
+  data: Record<string, unknown>[],
+  dataKey: string,
+  axisKey: string,
+  radialScale: ScaleLinear<number, number>,
+): RadarVertex[] {
+  const n = data.length
+  if (n === 0) return []
+  const angleStep = (2 * Math.PI) / n
+  return data.map((datum, i) => {
+    const value = Number(datum[dataKey]) || 0
+    const label = String(datum[axisKey])
+    const angle = angleStep * i - Math.PI / 2
+    const r = radialScale(value)
+    return {
+      key: `${i}-${label}`,
+      angle,
+      r,
+      x: r * Math.cos(angle),
+      y: r * Math.sin(angle),
+      label,
+      value,
+    }
+  })
+}
+
+/** Convert vertices into the `points` attribute of a `<polygon>`. */
+export function buildRadarPolygonPoints(vertices: RadarVertex[]): string {
+  return vertices.map((v) => `${v.x},${v.y}`).join(' ')
+}

package/src/utils/scales.ts

@@ -0,0 +1,64 @@
+import { scaleBand, scaleLinear, scalePoint, type ScaleBand, type ScaleLinear, type ScalePoint } from 'd3-scale'
+import { max } from 'd3-array'
+
+export function createBandScale(
+  data: Record<string, unknown>[],
+  dataKey: string,
+  width: number,
+): ScaleBand<string> {
+  return scaleBand<string>()
+    .domain(data.map((d) => String(d[dataKey])))
+    .range([0, width])
+    .padding(0.2)
+}
+
+export function createLinearScale(
+  data: Record<string, unknown>[],
+  dataKeys: string[],
+  height: number,
+): ScaleLinear<number, number> {
+  const maxValue =
+    max(data, (d) =>
+      max(dataKeys, (key) => {
+        const v = d[key]
+        return typeof v === 'number' ? v : 0
+      }),
+    ) ?? 0
+  return scaleLinear()
+    .domain([0, maxValue])
+    .nice()
+    .range([height, 0])
+}
+
+export function createPointScale(
+  data: Record<string, unknown>[],
+  dataKey: string,
+  width: number,
+): ScalePoint<string> {
+  return scalePoint<string>()
+    .domain(data.map((d) => String(d[dataKey])))
+    .range([0, width])
+    .padding(0.5)
+}
+
+/**
+ * Linear scale spanning `[0, max(data values across dataKeys)]`, mapped to
+ * `[0, radius]`. Used by RadarChart to convert numeric series values into
+ * polar radii. Returns null when no dataKeys are supplied so callers can
+ * cheaply gate downstream rendering on registration completing.
+ */
+export function createRadarRadialScale(
+  data: Record<string, unknown>[],
+  dataKeys: string[],
+  radius: number,
+): ScaleLinear<number, number> | null {
+  if (dataKeys.length === 0) return null
+  const maxValue =
+    max(data, (d) =>
+      max(dataKeys, (key) => {
+        const v = d[key]
+        return typeof v === 'number' ? v : 0
+      }),
+    ) ?? 0
+  return scaleLinear<number, number>().domain([0, maxValue]).nice().range([0, radius])
+}