@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/components/data/DataChart.tsx

@@ -0,0 +1,913 @@
+import {
+  arc,
+  area,
+  extent,
+  line,
+  max,
+  pie,
+  quantile,
+  scaleBand,
+  scaleLinear,
+  scalePoint,
+} from 'd3'
+
+export type DataChartType =
+  | 'line'
+  | 'bar'
+  | 'area'
+  | 'scatter'
+  | 'donut'
+  | 'lollipop'
+  | 'histogram'
+  | 'boxplot'
+  | 'heatmap'
+  | 'stackedBar'
+  | 'horizontalBar'
+  | 'bubble'
+
+export type DataCellValue = string | number | boolean | null
+
+export interface DataColumnInfo {
+  name: string
+  type: 'number' | 'text' | 'boolean' | 'empty'
+}
+
+export interface DataChartTable {
+  columns: DataColumnInfo[]
+  rows: Record<string, DataCellValue>[]
+}
+
+export interface DataChartView {
+  id?: string
+  title?: string
+  sourceId?: string
+  filterText: string
+  x?: string
+  y: string[]
+  groupBy?: string
+  limit?: number
+}
+
+export interface DataChartBlock {
+  title: string
+  chartType?: DataChartType
+}
+
+const INK = '#2e3338'
+const MUTED = '#757e8a'
+const FAINT = '#a5adb8'
+const GRID = '#e5e9ee'
+const AXIS = '#8d96a2'
+
+function valueLabel(value: DataCellValue): string {
+  return value === null ? '' : String(value)
+}
+
+function numeric(value: DataCellValue): number {
+  return typeof value === 'number' ? value : Number(value) || 0
+}
+
+function compactLabel(label: string, length = 14): string {
+  return label.length > length ? `${label.slice(0, length - 2)}…` : label
+}
+
+function chartHeightFor(
+  chartType: string,
+  rowCount: number,
+  seriesCount: number,
+): number {
+  const visibleRows = Math.max(1, rowCount)
+  if (chartType === 'horizontalBar')
+    return Math.min(320, Math.max(188, 112 + Math.min(10, visibleRows) * 28))
+  if (chartType === 'lollipop')
+    return Math.min(340, Math.max(196, 116 + Math.min(9, visibleRows) * 30))
+  if (chartType === 'donut') return 318
+  if (chartType === 'histogram') return 300
+  if (chartType === 'boxplot') return 318
+  if (chartType === 'heatmap')
+    return Math.min(420, Math.max(270, 150 + Math.min(10, visibleRows) * 18))
+  if (chartType === 'scatter' || chartType === 'bubble') return 340
+  if (chartType === 'stackedBar')
+    return visibleRows <= 4 && seriesCount <= 3 ? 306 : 348
+  if (chartType === 'bar') return visibleRows <= 4 ? 286 : 342
+  if (chartType === 'line' || chartType === 'area')
+    return visibleRows <= 4 ? 292 : 340
+  return 340
+}
+
+function chartMarginsFor(chartType: string) {
+  if (chartType === 'horizontalBar' || chartType === 'lollipop')
+    return { top: 52, right: 54, bottom: 28, left: 58 }
+  if (chartType === 'donut') return { top: 52, right: 54, bottom: 36, left: 54 }
+  return { top: 52, right: 72, bottom: 52, left: 58 }
+}
+
+function quartiles(values: number[]): {
+  min: number
+  q1: number
+  median: number
+  q3: number
+  max: number
+} | null {
+  const sorted = values.filter(Number.isFinite).sort((a, b) => a - b)
+  if (!sorted.length) return null
+  return {
+    min: sorted[0],
+    q1: quantile(sorted, 0.25) ?? sorted[0],
+    median: quantile(sorted, 0.5) ?? sorted[0],
+    q3: quantile(sorted, 0.75) ?? sorted.at(-1) ?? sorted[0],
+    max: sorted.at(-1) ?? sorted[0],
+  }
+}
+
+interface DataChartProps {
+  block: DataChartBlock
+  view: DataChartView
+  table: DataChartTable
+  palette: readonly string[]
+}
+
+function includesSearch(
+  row: Record<string, DataCellValue>,
+  search: string,
+): boolean {
+  if (!search.trim()) return true
+  const needle = search.toLowerCase()
+  return Object.values(row).some(value =>
+    String(value ?? '')
+      .toLowerCase()
+      .includes(needle),
+  )
+}
+
+function chartRowsForView({
+  view,
+  table,
+  xKey,
+  yKeys,
+  aggregate = true,
+}: {
+  view: DataChartView
+  table: DataChartTable
+  xKey: string | undefined
+  yKeys: string[]
+  aggregate?: boolean
+}): Record<string, DataCellValue>[] {
+  const rows = table.rows.filter(row => includesSearch(row, view.filterText))
+  const limitRows = (items: Record<string, DataCellValue>[]) =>
+    typeof view.limit === 'number' ? items.slice(0, view.limit) : items
+  const groupKey = view.groupBy ?? xKey
+  if (!aggregate || !groupKey) return limitRows(rows)
+
+  const groups = new Map<string, Record<string, DataCellValue>>()
+  let hasRepeatedGroup = false
+  for (const row of rows) {
+    const label = String(row[groupKey] ?? '')
+    const existing = groups.get(label)
+    if (existing) {
+      hasRepeatedGroup = true
+      for (const key of yKeys) existing[key] = numeric(existing[key]) + numeric(row[key])
+      continue
+    }
+    const groupedRow: Record<string, DataCellValue> = { ...row, [groupKey]: label }
+    for (const key of yKeys) groupedRow[key] = numeric(row[key])
+    groups.set(label, groupedRow)
+  }
+
+  return limitRows(
+    hasRepeatedGroup || view.groupBy ? [...groups.values()] : rows,
+  )
+}
+
+export function DataChart({ block, view, table, palette }: DataChartProps) {
+  const chartType = block.chartType ?? 'line'
+  const xKey = view.groupBy ?? view.x ?? table.columns[0]?.name
+  const yKeys =
+    view.y.length > 0
+      ? view.y
+      : table.columns
+          .filter(column => column.type === 'number')
+          .map(column => column.name)
+          .slice(0, 1)
+  const rows = chartRowsForView({
+    view: { ...view, limit: view.limit ?? 40 },
+    table,
+    xKey,
+    yKeys,
+    aggregate: chartType !== 'scatter' && chartType !== 'bubble',
+  })
+  const width = 760
+  const height = chartHeightFor(chartType, rows.length, yKeys.length)
+  const margin = chartMarginsFor(chartType)
+  const innerWidth = width - margin.left - margin.right
+  const innerHeight = height - margin.top - margin.bottom
+  const values = rows.flatMap(row => yKeys.map(key => numeric(row[key])))
+  const primaryKey = yKeys[0] ?? ''
+  const yDomain = [Math.min(0, extent(values)[0] ?? 0), max(values) ?? 1] as [
+    number,
+    number,
+  ]
+  const y = scaleLinear().domain(yDomain).nice().range([innerHeight, 0])
+  const zeroY = y(Math.max(0, y.domain()[0] ?? 0))
+  const labels = rows.map(row => valueLabel(row[xKey]))
+  // Scales are keyed by row index, not label text: band/point scales intern
+  // their domain, so duplicate labels would otherwise collapse onto one slot.
+  const rowKeys = rows.map((_, index) => String(index))
+  const pointX = scalePoint<string>()
+    .domain(rowKeys)
+    .range([0, innerWidth])
+    .padding(0.35)
+  const barX = scaleBand<string>()
+    .domain(rowKeys)
+    .range([0, innerWidth])
+    .padding(0.28)
+  const barSeries = scaleBand<string>()
+    .domain(yKeys)
+    .range([0, barX.bandwidth()])
+    .padding(0.16)
+
+  const colors = palette.length
+    ? palette
+    : ['#4f74a8', '#b47b3f', '#6f9278', '#8a738d']
+  const visibleXStep = Math.max(1, Math.ceil(labels.length / 7))
+  const showInlineLegend =
+    yKeys.length > 1 &&
+    ![
+      'donut',
+      'lollipop',
+      'horizontalBar',
+      'histogram',
+      'boxplot',
+      'heatmap',
+    ].includes(chartType)
+  const donutValues = rows
+    .map((row, index) => ({
+      index,
+      label: labels[index] ?? '',
+      value: Math.max(0, numeric(row[primaryKey])),
+    }))
+    .filter(item => item.value > 0)
+  const donutTotal = donutValues.reduce((sum, item) => sum + item.value, 0)
+  const donutPie = pie<(typeof donutValues)[number]>()
+    .sort(null)
+    .value(item => item.value)(donutValues)
+  const donutArc = arc<(typeof donutPie)[number]>()
+    .innerRadius(78)
+    .outerRadius(126)
+    .cornerRadius(5)
+    .padAngle(0.018)
+  const lollipopX = scaleLinear()
+    .domain([0, max(rows, row => Math.max(0, numeric(row[primaryKey]))) ?? 1])
+    .nice()
+    .range([0, Math.max(180, innerWidth - 230)])
+  const horizontalBarX = scaleLinear()
+    .domain([0, max(rows, row => Math.max(0, numeric(row[primaryKey]))) ?? 1])
+    .nice()
+    .range([0, Math.max(180, innerWidth - 240)])
+  const bubbleKey = yKeys[1] ?? yKeys[0] ?? ''
+  const bubbleSize = scaleLinear()
+    .domain([0, max(rows, row => Math.max(0, numeric(row[bubbleKey]))) ?? 1])
+    .range([4, 14])
+  const histogramValues = rows
+    .map(row => numeric(row[primaryKey]))
+    .filter(Number.isFinite)
+  const histogramDomain = extent(histogramValues) as [number, number]
+  const histogramBinCount = Math.min(
+    12,
+    Math.max(4, Math.ceil(Math.sqrt(histogramValues.length || 1))),
+  )
+  const histogramStep =
+    histogramDomain[0] === histogramDomain[1]
+      ? 1
+      : (histogramDomain[1] - histogramDomain[0]) / histogramBinCount
+  const histogramBins = Array.from({ length: histogramBinCount }, (_, index) => {
+    const start = (histogramDomain[0] ?? 0) + histogramStep * index
+    const end =
+      index === histogramBinCount - 1
+        ? histogramDomain[1] ?? start
+        : start + histogramStep
+    const count = histogramValues.filter(value =>
+      index === histogramBinCount - 1
+        ? value >= start && value <= end
+        : value >= start && value < end,
+    ).length
+    return { start, end, count }
+  })
+  const histogramY = scaleLinear()
+    .domain([0, max(histogramBins, bin => bin.count) ?? 1])
+    .nice()
+    .range([innerHeight, 0])
+  const histogramX = scaleBand<string>()
+    .domain(histogramBins.map((_, index) => String(index)))
+    .range([0, innerWidth])
+    .padding(0.08)
+  const boxGroups = rows.reduce<Map<string, number[]>>((groups, row) => {
+    const label = valueLabel(row[xKey])
+    const valuesForGroup = groups.get(label) ?? []
+    valuesForGroup.push(numeric(row[primaryKey]))
+    groups.set(label, valuesForGroup)
+    return groups
+  }, new Map())
+  const boxStats = Array.from(boxGroups, ([label, valuesForGroup]) => ({
+    label,
+    stats: quartiles(valuesForGroup),
+  })).filter(
+    (
+      item,
+    ): item is {
+      label: string
+      stats: NonNullable<ReturnType<typeof quartiles>>
+    } =>
+      item.stats !== null,
+  )
+  const boxY = scaleLinear()
+    .domain([
+      Math.min(0, minValue(boxStats.map(item => item.stats.min))),
+      max(boxStats, item => item.stats.max) ?? 1,
+    ])
+    .nice()
+    .range([innerHeight, 0])
+  const boxX = scaleBand<string>()
+    .domain(boxStats.map(item => item.label))
+    .range([0, innerWidth])
+    .padding(0.36)
+  const heatmapYKey =
+    table.columns.find(
+      column => column.type !== 'number' && column.name !== xKey,
+    )?.name ?? table.columns.find(column => column.name !== xKey)?.name
+  const heatmapColumns = Array.from(
+    new Set(rows.map(row => valueLabel(row[xKey]))),
+  ).slice(0, 12)
+  const heatmapRows = Array.from(
+    new Set(rows.map(row => valueLabel(row[heatmapYKey ?? '']))),
+  ).slice(0, 10)
+  const heatmapValues = new Map<string, number>()
+  rows.forEach(row => {
+    const column = valueLabel(row[xKey])
+    const rowLabel = valueLabel(row[heatmapYKey ?? ''])
+    const key = `${column}::${rowLabel}`
+    heatmapValues.set(
+      key,
+      (heatmapValues.get(key) ?? 0) + numeric(row[primaryKey]),
+    )
+  })
+  const heatmapMax = max(Array.from(heatmapValues.values())) ?? 1
+  const heatmapX = scaleBand<string>()
+    .domain(heatmapColumns)
+    .range([0, innerWidth])
+    .padding(0.08)
+  const heatmapY = scaleBand<string>()
+    .domain(heatmapRows)
+    .range([0, innerHeight])
+    .padding(0.08)
+  const stackedTotals = rows.map(row =>
+    yKeys.reduce((sum, key) => sum + Math.max(0, numeric(row[key])), 0),
+  )
+  const stackedY = scaleLinear()
+    .domain([0, max(stackedTotals) ?? 1])
+    .nice()
+    .range([innerHeight, 0])
+  const valueY = chartType === 'stackedBar' ? stackedY : y
+  const ticks = valueY.ticks(4)
+
+  function minValue(valuesForScale: number[]): number {
+    return valuesForScale.length ? Math.min(...valuesForScale) : 0
+  }
+
+  return (
+    <svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label={block.title}>
+      <text
+        x={margin.left}
+        y={26}
+        fill={INK}
+        fontFamily="Source Sans 3, system-ui, sans-serif"
+        fontSize="18"
+        fontWeight="700"
+      >
+        {block.title}
+      </text>
+      <text
+        x={margin.left}
+        y={44}
+        fill={MUTED}
+        fontFamily="Source Sans 3, system-ui, sans-serif"
+        fontSize="11"
+        fontWeight="600"
+      >
+        {compactLabel(yKeys.join(' / '), 44)} by {compactLabel(xKey ?? '', 20)}
+      </text>
+      <g transform={`translate(${margin.left},${margin.top})`}>
+        {showInlineLegend ? (
+          <g transform={`translate(${Math.max(0, innerWidth - 168)},-30)`}>
+            {yKeys.slice(0, 4).map((key, index) => (
+              <g key={key} transform={`translate(${(index % 2) * 84},${Math.floor(index / 2) * 16})`}>
+                <line
+                  x1={0}
+                  x2={14}
+                  y1={0}
+                  y2={0}
+                  stroke={colors[index % colors.length]}
+                  strokeWidth={3}
+                  strokeLinecap="round"
+                />
+                <text
+                  x={20}
+                  y={4}
+                  fill={MUTED}
+                  fontFamily="Source Sans 3, system-ui, sans-serif"
+                  fontSize="10"
+                  fontWeight="700"
+                >
+                  {compactLabel(key, 10)}
+                </text>
+              </g>
+            ))}
+          </g>
+        ) : null}
+        {chartType === 'donut' ? (
+          <g
+            transform={`translate(${innerWidth / 2 - 115},${innerHeight / 2})`}
+          >
+            {donutPie.map((slice, index) => (
+              <path
+                key={`${slice.data.label}-${index}`}
+                d={donutArc(slice) ?? ''}
+                fill={colors[index % colors.length]}
+                opacity={0.86}
+              />
+            ))}
+            <text
+              textAnchor="middle"
+              y={-4}
+              fill={INK}
+              fontFamily="Source Sans 3, system-ui, sans-serif"
+              fontSize="22"
+              fontWeight="800"
+            >
+              {donutTotal.toLocaleString()}
+            </text>
+            <text
+              textAnchor="middle"
+              y={17}
+              fill={MUTED}
+              fontFamily="Source Sans 3, system-ui, sans-serif"
+              fontSize="11"
+              fontWeight="700"
+            >
+              total {primaryKey}
+            </text>
+          </g>
+        ) : null}
+        {chartType === 'donut' ? (
+          <g transform={`translate(${innerWidth / 2 + 60},42)`}>
+            {donutValues.slice(0, 7).map((item, index) => {
+              const share = donutTotal > 0 ? item.value / donutTotal : 0
+              return (
+                <g key={item.label} transform={`translate(0,${index * 30})`}>
+                  <circle
+                    cx={0}
+                    cy={0}
+                    r={6}
+                    fill={colors[index % colors.length]}
+                    opacity={0.86}
+                  />
+                  <text
+                    x={16}
+                    y={4}
+                    fill={INK}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="12"
+                    fontWeight="700"
+                  >
+                    {compactLabel(item.label, 18)}
+                  </text>
+                  <text
+                    x={190}
+                    y={4}
+                    textAnchor="end"
+                    fill={MUTED}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="11"
+                    fontWeight="700"
+                  >
+                    {Math.round(share * 100)}%
+                  </text>
+                </g>
+              )
+            })}
+          </g>
+        ) : null}
+        {chartType !== 'donut' &&
+        chartType !== 'lollipop' &&
+        chartType !== 'horizontalBar' &&
+        chartType !== 'heatmap' &&
+        chartType !== 'boxplot'
+          ? ticks.map(tick => (
+              <g key={tick} transform={`translate(0,${valueY(tick)})`}>
+                <line
+                  x1={0}
+                  x2={innerWidth}
+                  stroke={GRID}
+                  strokeDasharray="2 9"
+                />
+                <text
+                  x={-12}
+                  y={4}
+                  textAnchor="end"
+                  fill={MUTED}
+                  fontFamily="Source Sans 3, system-ui, sans-serif"
+                  fontSize="11"
+                  fontWeight="600"
+                >
+                  {tick}
+                </text>
+              </g>
+            ))
+          : null}
+        {chartType !== 'donut' &&
+        chartType !== 'lollipop' &&
+        chartType !== 'horizontalBar' &&
+        chartType !== 'heatmap' &&
+        chartType !== 'boxplot' ? (
+          <>
+            <line
+              y1={innerHeight}
+              x2={innerWidth}
+              y2={innerHeight}
+              stroke={AXIS}
+            />
+            <line y1={0} y2={innerHeight} stroke={AXIS} />
+          </>
+        ) : null}
+        {chartType === 'lollipop'
+          ? rows.slice(0, 9).map((row, rowIndex) => {
+              const rowY = 20 + rowIndex * 27
+              const value = Math.max(0, numeric(row[primaryKey]))
+              const color = colors[rowIndex % colors.length]
+              return (
+                <g key={`${rowIndex}-${labels[rowIndex]}`}>
+                  <text
+                    x={0}
+                    y={rowY + 4}
+                    fill={INK}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="12"
+                    fontWeight="700"
+                  >
+                    {compactLabel(labels[rowIndex] ?? '', 20)}
+                  </text>
+                  <line
+                    x1={170}
+                    x2={170 + lollipopX(value)}
+                    y1={rowY}
+                    y2={rowY}
+                    stroke={GRID}
+                    strokeWidth={5}
+                    strokeLinecap="round"
+                  />
+                  <circle
+                    cx={170 + lollipopX(value)}
+                    cy={rowY}
+                    r={7}
+                    fill={color}
+                    opacity={0.84}
+                  />
+                  <text
+                    x={180 + lollipopX(value)}
+                    y={rowY + 4}
+                    fill={MUTED}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="11"
+                    fontWeight="700"
+                  >
+                    {value.toLocaleString()}
+                  </text>
+                </g>
+              )
+            })
+          : null}
+        {chartType === 'horizontalBar'
+          ? rows.slice(0, 10).map((row, rowIndex) => {
+              const rowY = 18 + rowIndex * 25
+              const value = Math.max(0, numeric(row[primaryKey]))
+              const color = colors[rowIndex % colors.length]
+              const barWidth = horizontalBarX(value)
+              return (
+                <g key={`${rowIndex}-${labels[rowIndex]}`}>
+                  <text
+                    x={0}
+                    y={rowY + 4}
+                    fill={INK}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="11"
+                    fontWeight="700"
+                  >
+                    {compactLabel(labels[rowIndex] ?? '', 22)}
+                  </text>
+                  <rect
+                    x={178}
+                    y={rowY - 8}
+                    width={barWidth}
+                    height={16}
+                    rx={8}
+                    fill={color}
+                    opacity={0.72}
+                  />
+                  <text
+                    x={Math.min(innerWidth - 28, 188 + barWidth)}
+                    y={rowY + 4}
+                    fill={MUTED}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="10"
+                    fontWeight="700"
+                  >
+                    {value.toLocaleString()}
+                  </text>
+                </g>
+              )
+            })
+          : null}
+        {chartType === 'histogram'
+          ? histogramBins.map((bin, index) => {
+              const x = histogramX(String(index)) ?? 0
+              return (
+                <g key={`${bin.start}-${bin.end}`}>
+                  <rect
+                    x={x}
+                    y={histogramY(bin.count)}
+                    width={histogramX.bandwidth()}
+                    height={innerHeight - histogramY(bin.count)}
+                    rx={5}
+                    fill={colors[0]}
+                    opacity={0.72}
+                  />
+                  <text
+                    x={x + histogramX.bandwidth() / 2}
+                    y={innerHeight + 24}
+                    textAnchor="middle"
+                    fill={FAINT}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="10"
+                    fontWeight="700"
+                  >
+                    {Math.round(bin.start).toLocaleString()}
+                  </text>
+                </g>
+              )
+            })
+          : null}
+        {chartType === 'boxplot'
+          ? boxStats.slice(0, 10).map((item, index) => {
+              const x = boxX(item.label) ?? 0
+              const mid = x + boxX.bandwidth() / 2
+              const color = colors[index % colors.length]
+              return (
+                <g key={item.label}>
+                  <line
+                    x1={mid}
+                    x2={mid}
+                    y1={boxY(item.stats.min)}
+                    y2={boxY(item.stats.max)}
+                    stroke={color}
+                    strokeWidth={2}
+                  />
+                  <rect
+                    x={x}
+                    y={boxY(item.stats.q3)}
+                    width={boxX.bandwidth()}
+                    height={Math.max(2, boxY(item.stats.q1) - boxY(item.stats.q3))}
+                    rx={5}
+                    fill={color}
+                    opacity={0.22}
+                    stroke={color}
+                    strokeWidth={1.5}
+                  />
+                  <line
+                    x1={x}
+                    x2={x + boxX.bandwidth()}
+                    y1={boxY(item.stats.median)}
+                    y2={boxY(item.stats.median)}
+                    stroke={color}
+                    strokeWidth={2.4}
+                  />
+                  <text
+                    x={mid}
+                    y={innerHeight + 24}
+                    textAnchor="middle"
+                    fill={FAINT}
+                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontSize="10"
+                    fontWeight="700"
+                  >
+                    {compactLabel(item.label, 12)}
+                  </text>
+                </g>
+              )
+            })
+          : null}
+        {chartType === 'heatmap'
+          ? heatmapRows.flatMap(rowLabel =>
+              heatmapColumns.map(columnLabel => {
+                const value = heatmapValues.get(`${columnLabel}::${rowLabel}`) ?? 0
+                const opacity = heatmapMax > 0 ? 0.12 + (value / heatmapMax) * 0.72 : 0.12
+                return (
+                  <g key={`${columnLabel}-${rowLabel}`}>
+                    <rect
+                      x={heatmapX(columnLabel) ?? 0}
+                      y={heatmapY(rowLabel) ?? 0}
+                      width={heatmapX.bandwidth()}
+                      height={heatmapY.bandwidth()}
+                      rx={4}
+                      fill={colors[0]}
+                      opacity={opacity}
+                    />
+                    {heatmapX.bandwidth() > 46 && heatmapY.bandwidth() > 24 ? (
+                      <text
+                        x={(heatmapX(columnLabel) ?? 0) + heatmapX.bandwidth() / 2}
+                        y={(heatmapY(rowLabel) ?? 0) + heatmapY.bandwidth() / 2 + 4}
+                        textAnchor="middle"
+                        fill={INK}
+                        fontFamily="Source Sans 3, system-ui, sans-serif"
+                        fontSize="10"
+                        fontWeight="700"
+                      >
+                        {value ? value.toLocaleString() : ''}
+                      </text>
+                    ) : null}
+                  </g>
+                )
+              }),
+            )
+          : null}
+        {chartType === 'heatmap'
+          ? heatmapColumns.map(columnLabel => (
+              <text
+                key={columnLabel}
+                x={(heatmapX(columnLabel) ?? 0) + heatmapX.bandwidth() / 2}
+                y={innerHeight + 24}
+                textAnchor="middle"
+                fill={FAINT}
+                fontFamily="Source Sans 3, system-ui, sans-serif"
+                fontSize="10"
+                fontWeight="700"
+              >
+                {compactLabel(columnLabel, 10)}
+              </text>
+            ))
+          : null}
+        {chartType === 'heatmap'
+          ? heatmapRows.map(rowLabel => (
+              <text
+                key={rowLabel}
+                x={-10}
+                y={(heatmapY(rowLabel) ?? 0) + heatmapY.bandwidth() / 2 + 4}
+                textAnchor="end"
+                fill={MUTED}
+                fontFamily="Source Sans 3, system-ui, sans-serif"
+                fontSize="10"
+                fontWeight="700"
+              >
+                {compactLabel(rowLabel, 12)}
+              </text>
+            ))
+          : null}
+        {chartType === 'stackedBar'
+          ? rows.map((row, rowIndex) => {
+              let cursor = 0
+              return (
+                <g key={`${rowIndex}-${labels[rowIndex]}`}>
+                  {yKeys.map((key, index) => {
+                    const value = Math.max(0, numeric(row[key]))
+                    const y0 = stackedY(cursor)
+                    cursor += value
+                    const y1 = stackedY(cursor)
+                    return (
+                      <rect
+                        key={key}
+                        x={barX(String(rowIndex)) ?? 0}
+                        y={y1}
+                        width={barX.bandwidth()}
+                        height={Math.max(0, y0 - y1)}
+                        rx={index === yKeys.length - 1 ? 4 : 0}
+                        fill={colors[index % colors.length]}
+                        opacity={0.78}
+                      />
+                    )
+                  })}
+                </g>
+              )
+            })
+          : null}
+        {chartType === 'bar'
+          ? rows.flatMap((row, rowIndex) =>
+              yKeys.map((key, index) => {
+                const x0 = barX(String(rowIndex)) ?? 0
+                const x1 = barSeries(key) ?? 0
+                const value = numeric(row[key])
+                return (
+                  <rect
+                    key={`${rowIndex}-${valueLabel(row[xKey])}-${key}`}
+                    x={x0 + x1}
+                    y={Math.min(y(value), zeroY)}
+                    width={barSeries.bandwidth()}
+                    height={Math.abs(zeroY - y(value))}
+                    rx={4}
+                    fill={colors[index % colors.length]}
+                    opacity={0.78}
+                  />
+                )
+              }),
+            )
+          : chartType === 'donut' ||
+            chartType === 'lollipop' ||
+            chartType === 'horizontalBar' ||
+            chartType === 'histogram' ||
+            chartType === 'boxplot' ||
+            chartType === 'heatmap' ||
+            chartType === 'stackedBar'
+          ? null
+          : (chartType === 'bubble' ? yKeys.slice(0, 1) : yKeys).map((key, index) => {
+              const path = line<Record<string, DataCellValue>>()
+                .x((_, rowIndex) => pointX(String(rowIndex)) ?? 0)
+                .y(row => y(numeric(row[key])))(rows)
+              const areaPath = area<Record<string, DataCellValue>>()
+                .x((_, rowIndex) => pointX(String(rowIndex)) ?? 0)
+                .y0(zeroY)
+                .y1(row => y(numeric(row[key])))(rows)
+              const color = colors[index % colors.length]
+              return (
+                <g key={key}>
+                  {chartType === 'area' ? (
+                    <path d={areaPath ?? ''} fill={color} opacity={0.18} />
+                  ) : null}
+                  {chartType !== 'scatter' && chartType !== 'bubble' ? (
+                    <path
+                      d={path ?? ''}
+                      fill="none"
+                      stroke={color}
+                      strokeWidth={2.2}
+                    />
+                  ) : null}
+                  {rows.map((row, rowIndex) => (
+                    <g key={`${key}-${rowIndex}-${valueLabel(row[xKey])}`}>
+                      <circle
+                        cx={pointX(String(rowIndex)) ?? 0}
+                        cy={y(numeric(row[key]))}
+                        r={
+                          chartType === 'bubble'
+                            ? bubbleSize(numeric(row[bubbleKey]))
+                            : chartType === 'scatter'
+                            ? 4
+                            : rowIndex === rows.length - 1
+                            ? 3.8
+                            : 2.7
+                        }
+                        fill={chartType === 'area' ? '#fff' : color}
+                        stroke={color}
+                        strokeWidth={chartType === 'area' ? 1.8 : 0}
+                        opacity={
+                          chartType === 'line' && rowIndex !== rows.length - 1
+                            ? 0.82
+                            : 1
+                        }
+                      />
+                    </g>
+                  ))}
+                </g>
+              )
+            })}
+        {chartType !== 'donut' &&
+        chartType !== 'lollipop' &&
+        chartType !== 'horizontalBar' &&
+        chartType !== 'histogram' &&
+        chartType !== 'boxplot' &&
+        chartType !== 'heatmap'
+          ? labels.map((label, index) => {
+              const x =
+                chartType === 'bar'
+                  ? (barX(String(index)) ?? 0) + barX.bandwidth() / 2
+                  : pointX(String(index)) ?? 0
+              const visible =
+                labels.length <= 7 ||
+                index % visibleXStep === 0 ||
+                index === labels.length - 1
+              return visible ? (
+                <text
+                  key={`${index}-${label}`}
+                  x={x}
+                  y={innerHeight + 25}
+                  textAnchor="middle"
+                  fill={FAINT}
+                  fontFamily="Source Sans 3, system-ui, sans-serif"
+                  fontSize="11"
+                  fontWeight="600"
+                >
+                  {compactLabel(label)}
+                </text>
+              ) : null
+            })
+          : null}
+      </g>
+    </svg>
+  )
+}