@rokkit/chart 1.0.0-next.147 → 1.0.0-next.148

package/src/Plot.svelte

@@ -0,0 +1,189 @@
+<script>
+  import { setContext, untrack } from 'svelte'
+  import { PlotState } from './PlotState.svelte.js'
+  import Axis from './Plot/Axis.svelte'
+  import Grid from './Plot/Grid.svelte'
+  import Legend from './Plot/Legend.svelte'
+  import Tooltip from './Plot/Tooltip.svelte'
+  import DefinePatterns from './patterns/DefinePatterns.svelte'
+  import Bar from './geoms/Bar.svelte'
+  import Line from './geoms/Line.svelte'
+  import Area from './geoms/Area.svelte'
+  import Point from './geoms/Point.svelte'
+  import Arc from './geoms/Arc.svelte'
+  import Box from './geoms/Box.svelte'
+  import Violin from './geoms/Violin.svelte'
+
+  /**
+   * @type {{
+   *   data?: Object[],
+   *   spec?: import('./lib/plot/types.js').PlotSpec,
+   *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   grid?: boolean,
+   *   axes?: boolean,
+   *   margin?: { top: number, right: number, bottom: number, left: number },
+   *   legend?: boolean,
+   *   title?: string,
+   *   tooltip?: boolean | ((data: Record<string, unknown>) => string),
+   *   children?: import('svelte').Snippet,
+   * }}
+   */
+  let {
+    data = [],
+    spec = undefined,
+    helpers = {},
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    axes = true,
+    margin = undefined,
+    legend = false,
+    title = '',
+    tooltip = false,
+    children
+  } = $props()
+
+  // Create PlotState with initial values and provide as context.
+  // untrack() suppresses "captures initial value" warnings — intentional:
+  // the $effect below handles all subsequent reactive updates.
+  const plotState = untrack(() => new PlotState({
+    data: spec?.data ?? data,
+    width: spec?.width ?? width,
+    height: spec?.height ?? height,
+    mode,
+    margin,
+    channels: spec ? { x: spec.x, y: spec.y, color: spec.color ?? spec.fill } : {},
+    labels: spec?.labels ?? {},
+    helpers,
+    xDomain: spec?.xDomain,
+    yDomain: spec?.yDomain,
+    colorDomain: spec?.colorDomain
+  }))
+  setContext('plot-state', plotState)
+
+  // Keep state in sync when reactive config changes
+  $effect(() => {
+    plotState.update({
+      data: spec?.data ?? data,
+      width: spec?.width ?? width,
+      height: spec?.height ?? height,
+      mode,
+      margin,
+      channels: spec ? { x: spec.x, y: spec.y, color: spec.color ?? spec.fill } : {},
+      labels: spec?.labels ?? {},
+      helpers,
+      xDomain: spec?.xDomain,
+      yDomain: spec?.yDomain,
+      colorDomain: spec?.colorDomain
+    })
+  })
+
+  const svgWidth  = $derived(spec?.width ?? width)
+  const svgHeight = $derived(spec?.height ?? height)
+  const showGrid  = $derived(spec?.grid ?? grid)
+  const showLegend = $derived(spec?.legend ?? legend)
+  const chartTitle = $derived(spec?.title ?? title)
+
+  // Geoms from spec (spec-driven API)
+  const specGeoms = $derived(spec?.geoms ?? [])
+
+  // Geom component resolver for spec-driven mode
+  const GEOM_COMPONENTS = { bar: Bar, line: Line, area: Area, point: Point, arc: Arc, box: Box, violin: Violin }
+
+  /**
+   * @param {string} type
+   */
+  function resolveGeomComponent(type) {
+    return helpers?.geoms?.[type] ?? GEOM_COMPONENTS[type]
+  }
+</script>
+
+<div class="plot-root" data-plot-root data-mode={mode}>
+  {#if chartTitle}
+    <div class="plot-title" data-plot-title>{chartTitle}</div>
+  {/if}
+
+  <svg
+    width={svgWidth}
+    height={svgHeight}
+    viewBox="0 0 {svgWidth} {svgHeight}"
+    role="img"
+    aria-label={chartTitle || 'Chart visualization'}
+  >
+    <!-- SVG pattern defs -->
+    <DefinePatterns />
+
+    <g
+      class="plot-canvas"
+      transform="translate({plotState.margin.left}, {plotState.margin.top})"
+      data-plot-canvas
+    >
+      <!-- Grid (behind everything) -->
+      {#if showGrid}
+        <Grid />
+      {/if}
+
+      <!-- Declarative children (geom components) -->
+      {@render children?.()}
+
+      <!-- Spec-driven geoms -->
+      {#each specGeoms as geomSpec}
+        {@const GeomComponent = resolveGeomComponent(geomSpec.type)}
+        {#if GeomComponent}
+          <GeomComponent
+            x={geomSpec.x ?? spec?.x}
+            y={geomSpec.y ?? spec?.y}
+            color={geomSpec.color ?? spec?.color}
+            fill={geomSpec.fill ?? spec?.fill}
+            stat={geomSpec.stat}
+            options={geomSpec.options}
+          />
+        {/if}
+      {/each}
+
+      <!-- Axes -->
+      {#if axes}
+        <Axis type="x" label={spec?.labels?.[spec?.x ?? ''] ?? ''} />
+        <Axis type="y" label={spec?.labels?.[spec?.y ?? ''] ?? ''} />
+      {/if}
+    </g>
+  </svg>
+
+  <!-- Legend (HTML, outside SVG) -->
+  {#if showLegend}
+    <Legend labels={spec?.labels ?? {}} />
+  {/if}
+
+  <!-- Tooltip (HTML, fixed-position overlay) -->
+  {#if tooltip}
+    <Tooltip {tooltip} />
+  {/if}
+</div>
+
+<style>
+  .plot-root {
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+
+  svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .plot-canvas {
+    pointer-events: all;
+  }
+
+  .plot-title {
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 4px;
+  }
+</style>

package/src/PlotState.svelte.js

@@ -0,0 +1,278 @@
+import { untrack } from 'svelte'
+import { applyGeomStat } from './lib/plot/stat.js'
+import { inferFieldType, inferOrientation, buildUnifiedXScale, buildUnifiedYScale, inferColorScaleType } from './lib/plot/scales.js'
+import { resolvePreset } from './lib/plot/preset.js'
+import { resolveFormat, resolveTooltip, resolveGeom } from './lib/plot/helpers.js'
+import { distinct, assignColors } from './lib/brewing/colors.js'
+import { assignPatterns } from './lib/brewing/patterns.js'
+import { assignSymbols } from './lib/brewing/marks/points.js'
+
+let nextId = 0
+
+export class PlotState {
+  #data          = $state([])
+  #rawData       = []
+  #channels      = $state({})
+  #labels        = $state({})
+  #helpers       = $state({})
+  #presetName    = $state(undefined)
+  #colorMidpoint = $state(undefined)
+  #colorSpec     = $state(undefined)
+  #colorDomain   = $state(undefined)
+  #xDomain       = $state(undefined)
+  #yDomain       = $state(undefined)
+  #width         = $state(600)
+  #height        = $state(400)
+  #margin        = $state({ top: 20, right: 20, bottom: 40, left: 50 })
+  #marginOverride = $state(undefined)
+
+  #geoms   = $state([])
+  #mode    = $state('light')
+  #hovered = $state(null)
+
+  axisOrigin = $state([undefined, undefined])
+
+  #effectiveMargin = $derived(this.#marginOverride ?? this.#margin)
+  #innerWidth  = $derived(this.#width  - this.#effectiveMargin.left - this.#effectiveMargin.right)
+  #innerHeight = $derived(this.#height - this.#effectiveMargin.top  - this.#effectiveMargin.bottom)
+
+  // Effective channels: prefer top-level channels; fall back to first geom's channels
+  // for the declarative API where no spec is provided.
+  #effectiveChannels = $derived.by(() => {
+    const tc = this.#channels
+    if (tc.x && tc.y) return tc
+    const firstGeom = this.#geoms[0]
+    if (!firstGeom) return tc
+    return {
+      x:       tc.x       ?? firstGeom.channels?.x,
+      y:       tc.y       ?? firstGeom.channels?.y,
+      color:   tc.color   ?? firstGeom.channels?.color,
+      pattern: tc.pattern ?? firstGeom.channels?.pattern,
+      symbol:  tc.symbol  ?? firstGeom.channels?.symbol,
+    }
+  })
+
+  orientation = $derived.by(() => {
+    const xField = this.#effectiveChannels.x
+    const yField = this.#effectiveChannels.y
+    if (!xField || !yField) return 'none'
+    const rawXType = inferFieldType(this.#data, xField)
+    const yType = inferFieldType(this.#data, yField)
+    // Bar geoms treat numeric X as categorical (e.g. year on X → vertical bars).
+    const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
+    const xType = (hasBarGeom && rawXType === 'continuous' && yType === 'continuous') ? 'band' : rawXType
+    return inferOrientation(xType, yType)
+  })
+
+  colorScaleType = $derived.by(() => {
+    const field = this.#effectiveChannels.color
+    if (!field) return 'categorical'
+    return inferColorScaleType(this.#data, field, {
+      colorScale: this.#colorSpec,
+      colorMidpoint: this.#colorMidpoint
+    })
+  })
+
+  xScale = $derived.by(() => {
+    const field = this.#effectiveChannels.x
+    if (!field) return null
+    const datasets = this.#geoms.length > 0
+      ? this.#geoms.map((g) => this.geomData(g.id))
+      : [this.#rawData]
+    const includeZero = this.orientation === 'horizontal'
+    // For vertical bar charts, force scaleBand even when X values are numeric (e.g. year).
+    // Horizontal bar charts keep X as a continuous value axis.
+    const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
+    const bandX = hasBarGeom && this.orientation !== 'horizontal'
+    return buildUnifiedXScale(datasets, field, this.#innerWidth, {
+      domain: this.#xDomain,
+      includeZero,
+      band: bandX
+    })
+  })
+
+  yScale = $derived.by(() => {
+    const field = this.#effectiveChannels.y
+    if (!field) return null
+    const datasets = this.#geoms.length > 0
+      ? this.#geoms.map((g) => this.geomData(g.id))
+      : [this.#rawData]
+    const includeZero = this.orientation === 'vertical'
+
+    // For stacked bars, the y domain must cover the per-x column *total*, not the
+    // per-row max — otherwise bars overflow the plot area.
+    // For box/violin geoms, the processed data has iqr_min/iqr_max instead of raw y values.
+    let yDomain = this.#yDomain
+    if (!yDomain) {
+      const boxGeom = this.#geoms.find((g) => g.type === 'box' || g.type === 'violin')
+      if (boxGeom) {
+        const boxData = this.geomData(boxGeom.id)
+        const mins = boxData.map((d) => d.iqr_min).filter((v) => v !== null && v !== undefined && !isNaN(v))
+        const maxs = boxData.map((d) => d.iqr_max).filter((v) => v !== null && v !== undefined && !isNaN(v))
+        if (mins.length > 0 && maxs.length > 0) {
+          yDomain = [Math.min(...mins), Math.max(...maxs)]
+        }
+      }
+    }
+    if (!yDomain) {
+      const stackGeom = this.#geoms.find((g) => g.options?.stack)
+      if (stackGeom) {
+        const xField = this.#effectiveChannels.x
+        const stackData = this.geomData(stackGeom.id)
+        if (xField && stackData.length > 0) {
+          // Mirror buildStackedBars/subBandFields: stack dimension is the first
+          // non-x field among [color, pattern]. Summing all raw rows (stat=identity)
+          // would overcount when multiple rows share the same (x, stack) key.
+          const colorField = this.#effectiveChannels.color
+          const patternField = this.#effectiveChannels.pattern
+          const stackField = [colorField, patternField].find((f) => f && f !== xField) ?? colorField
+          const lookup = new Map()
+          for (const d of stackData) {
+            const xVal = d[xField]
+            const cKey = stackField ? String(d[stackField]) : '_'
+            if (!lookup.has(xVal)) lookup.set(xVal, new Map())
+            lookup.get(xVal).set(cKey, Number(d[field]) || 0)
+          }
+          const totals = new Map()
+          for (const [xVal, colorMap] of lookup) {
+            totals.set(xVal, [...colorMap.values()].reduce((s, v) => s + v, 0))
+          }
+          const maxStack = Math.max(0, ...totals.values())
+          yDomain = [0, maxStack]
+        }
+      }
+    }
+
+    return buildUnifiedYScale(datasets, field, this.#innerHeight, {
+      domain: yDomain,
+      includeZero
+    })
+  })
+
+  // Colors: Map<colorKey, { fill, stroke }> for all distinct color field values.
+  // If a colorDomain is provided (e.g. from FacetPlot for cross-panel consistency),
+  // use it instead of deriving distinct values from the local panel data.
+  colors = $derived.by(() => {
+    const field = this.#effectiveChannels.color
+    const values = this.#colorDomain ?? distinct(this.#data, field)
+    return assignColors(values, this.#mode)
+  })
+
+  // Patterns: Map<patternKey, patternName> — only populated when a pattern channel is set
+  // and the pattern field is categorical (continuous fields can't be discretely patterned).
+  patterns = $derived.by(() => {
+    const pf = this.#effectiveChannels.pattern
+    if (!pf) return new Map()
+    if (inferFieldType(this.#data, pf) === 'continuous') return new Map()
+    return assignPatterns(distinct(this.#data, pf))
+  })
+
+  // Symbols: Map<symbolKey, shapeName> — only populated when a symbol channel is set.
+  symbols = $derived.by(() => {
+    const sf = this.#effectiveChannels.symbol
+    if (!sf) return new Map()
+    return assignSymbols(distinct(this.#data, sf))
+  })
+
+  // Expose effective channel fields for consumers (e.g. Legend)
+  colorField = $derived(this.#effectiveChannels.color)
+  patternField = $derived(this.#effectiveChannels.pattern)
+  symbolField = $derived(this.#effectiveChannels.symbol)
+
+  // Set of geom types currently registered (used by Legend to pick swatch style)
+  geomTypes = $derived(new Set(this.#geoms.map((g) => g.type)))
+
+  xAxisY = $derived.by(() => {
+    if (!this.yScale || typeof this.yScale !== 'function') return this.#innerHeight
+    const crossVal = this.axisOrigin[1]
+    if (crossVal !== undefined) return this.yScale(crossVal)
+    const domain = this.yScale.domain?.()
+    return domain ? this.yScale(domain[0]) : this.#innerHeight
+  })
+
+  yAxisX = $derived.by(() => {
+    if (!this.xScale || typeof this.xScale !== 'function') return 0
+    const crossVal = this.axisOrigin[0]
+    if (crossVal !== undefined) return this.xScale(crossVal)
+    const domain = this.xScale.domain?.()
+    return domain ? this.xScale(domain[0]) : 0
+  })
+
+  constructor(config = {}) {
+    this.#rawData       = config.data          ?? []
+    this.#data          = config.data          ?? []
+    this.#channels      = config.channels      ?? {}
+    this.#labels        = config.labels        ?? {}
+    this.#helpers       = config.helpers       ?? {}
+    this.#presetName    = config.preset
+    this.#colorMidpoint = config.colorMidpoint
+    this.#colorSpec     = config.colorScale
+    this.#colorDomain   = config.colorDomain
+    this.#xDomain       = config.xDomain
+    this.#yDomain       = config.yDomain
+    this.#width         = config.width         ?? 600
+    this.#height        = config.height        ?? 400
+    this.#mode          = config.mode          ?? 'light'
+    this.#marginOverride = config.margin       ?? undefined
+  }
+
+  update(config) {
+    if (config.data          !== undefined) { this.#rawData = config.data; this.#data = config.data }
+    if (config.channels      !== undefined) this.#channels      = config.channels
+    if (config.labels        !== undefined) this.#labels        = config.labels
+    if (config.helpers       !== undefined) this.#helpers       = config.helpers
+    if (config.preset        !== undefined) this.#presetName    = config.preset
+    if (config.colorMidpoint !== undefined) this.#colorMidpoint = config.colorMidpoint
+    if (config.colorScale    !== undefined) this.#colorSpec     = config.colorScale
+    this.#colorDomain = config.colorDomain
+    this.#xDomain = config.xDomain
+    this.#yDomain = config.yDomain
+    if (config.width         !== undefined) this.#width         = config.width
+    if (config.height        !== undefined) this.#height        = config.height
+    if (config.mode          !== undefined) this.#mode          = config.mode
+    this.#marginOverride = config.margin ?? undefined
+  }
+
+  registerGeom(config) {
+    const id = `geom-${nextId++}`
+    this.#geoms = [...this.#geoms, { id, ...config }]
+    return id
+  }
+
+  updateGeom(id, config) {
+    // untrack the read of #geoms to avoid effect_update_depth_exceeded when
+    // called from a geom's $effect (which would otherwise track #geoms as a dependency)
+    this.#geoms = untrack(() => this.#geoms).map((g) => g.id === id ? { ...g, ...config } : g)
+  }
+
+  unregisterGeom(id) {
+    this.#geoms = this.#geoms.filter((g) => g.id !== id)
+  }
+
+  geomData(id) {
+    const geom = this.#geoms.find((g) => g.id === id)
+    if (!geom) return []
+    const stat = geom.stat ?? 'identity'
+    if (stat === 'identity') return this.#rawData
+    const mergedChannels = { ...this.#channels, ...geom.channels }
+    return applyGeomStat(this.#rawData, { stat, channels: mergedChannels }, this.#helpers)
+  }
+
+  label(field) {
+    return this.#labels?.[field] ?? field
+  }
+
+  format(field)       { return resolveFormat(field, this.#helpers) }
+  tooltip()           { return resolveTooltip(this.#helpers) }
+  geomComponent(type) { return resolveGeom(type, this.#helpers) }
+  preset()            { return resolvePreset(this.#presetName, this.#helpers) }
+
+  get margin()      { return this.#effectiveMargin }
+  get innerWidth()  { return this.#innerWidth }
+  get innerHeight() { return this.#innerHeight }
+  get mode()        { return this.#mode }
+  get hovered()     { return this.#hovered }
+
+  setHovered(data)  { this.#hovered = data }
+  clearHovered()    { this.#hovered = null }
+}

package/src/Sparkline.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { scaleLinear } from 'd3-scale'
+  import { line as d3line, area as d3area, curveCatmullRom } from 'd3-shape'
+
+  /**
+   * @type {number[] | object[]}
+   */
+  let {
+    data = [],
+    field = undefined,
+    type = 'line',
+    curve = 'linear',
+    color = 'primary',
+    width = 80,
+    height = 24,
+    min = undefined,
+    max = undefined
+  } = $props()
+
+  const values = $derived(
+    field ? data.map((d) => Number(d[field])) : data.map(Number)
+  )
+
+  const yMin = $derived(min ?? Math.min(...values))
+  const yMax = $derived(max ?? Math.max(...values))
+
+  const xScale = $derived(
+    scaleLinear().domain([0, values.length - 1]).range([0, width])
+  )
+  const yScale = $derived(
+    scaleLinear().domain([yMin, yMax]).range([height, 0])
+  )
+
+  const linePath = $derived.by(() => {
+    const gen = d3line().x((_, i) => xScale(i)).y((v) => yScale(v))
+    if (curve === 'smooth') gen.curve(curveCatmullRom)
+    return gen(values)
+  })
+
+  const areaPath = $derived.by(() => {
+    const gen = d3area().x((_, i) => xScale(i)).y0(height).y1((v) => yScale(v))
+    if (curve === 'smooth') gen.curve(curveCatmullRom)
+    return gen(values)
+  })
+
+  const barWidth = $derived(Math.max(1, width / values.length - 1))
+
+  const strokeColor = $derived(`rgb(var(--color-${color}-500, 100,116,139))`)
+  const fillColor = $derived(`rgba(var(--color-${color}-300), 0.25)`)
+</script>
+
+<svg {width} {height} style="overflow: visible; display: block;">
+  {#if type === 'line'}
+    <path d={linePath} fill="none" stroke={strokeColor} stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+  {:else if type === 'area'}
+    <path d={areaPath} fill={fillColor} stroke="none" />
+    <path d={linePath} fill="none" stroke={strokeColor} stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+  {:else if type === 'bar'}
+    {#each values as v, i}
+      <rect
+        x={xScale(i) - barWidth / 2}
+        y={yScale(v)}
+        width={barWidth}
+        height={height - yScale(v)}
+        fill={strokeColor}
+      />
+    {/each}
+  {/if}
+</svg>

package/src/charts/AreaChart.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Area from '../geoms/Area.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    fill = undefined,
+    stat = 'identity',
+    curve = undefined,
+    pattern = undefined,
+    stack = false,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend}>
+  <Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
+</Plot>

package/src/charts/BarChart.svelte

@@ -0,0 +1,26 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Bar from '../geoms/Bar.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').BarChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    fill = undefined,   // mapped to color channel
+    pattern = undefined,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false,
+    stat = 'identity',
+    stack = false,
+    label = false,
+    tooltip = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
+  <Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
+</Plot>

package/src/charts/BoxPlot.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Box from '../geoms/Box.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').BoxViolinChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    fill = undefined,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend}>
+  <Box {x} {y} {fill} />
+</Plot>

package/src/charts/BubbleChart.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Point from '../geoms/Point.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').ScatterBubbleChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    color = undefined,
+    symbol: _symbol = undefined,
+    size,               // required: field name for bubble radius
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend}>
+  <Point {x} {y} {color} {size} />
+</Plot>

package/src/charts/LineChart.svelte

@@ -0,0 +1,26 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Line from '../geoms/Line.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+  let {
+    data = [],
+    x = undefined,
+    y = undefined,
+    color = undefined,
+    stat = 'identity',
+    symbol = undefined,
+    curve = undefined,   // forwarded to Line options
+    label = false,
+    tooltip = false,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    grid = true,
+    legend = false
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
+  <Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
+</Plot>

package/src/charts/PieChart.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Plot from '../Plot.svelte'
+  import Arc from '../geoms/Arc.svelte'
+
+  /** @type {import('../lib/plot/chartProps.js').PieChartProps} */
+  let {
+    data = [],
+    label = undefined,
+    y = undefined,
+    fill = undefined,
+    pattern = undefined,
+    innerRadius = 0,
+    labelFn = undefined,
+    tooltip = false,
+    width = 400,
+    height = 400,
+    mode = 'light',
+    legend = false,
+    stat = 'sum'
+  } = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} grid={false} axes={false} margin={{ top: 10, right: 10, bottom: 10, left: 10 }} {legend} {tooltip}>
+  <Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} options={{ innerRadius }} />
+</Plot>