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

package/src/components/data/DataChart.tsx

@@ -1,913 +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>
-  )
-}
+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>
+  )
+}