@rokkit/chart 1.0.0-next.15 → 1.0.0-next.151

package/src/Chart.svelte

@@ -0,0 +1,98 @@
+<script>
+  import { setContext } from 'svelte'
+  import { ChartBrewer } from './lib/brewing/brewer.svelte.js'
+
+  /**
+   * @type {{
+   *   spec?: import('./spec/chart-spec.js').ChartSpec,
+   *   data?: Object[],
+   *   x?: string,
+   *   y?: string,
+   *   color?: string,
+   *   pattern?: string,
+   *   fill?: string,
+   *   size?: string,
+   *   label?: string,
+   *   symbol?: string,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    spec = undefined,
+    data = [],
+    x = undefined,
+    y = undefined,
+    color = undefined,
+    pattern = undefined,
+    fill = undefined,
+    size = undefined,
+    label = undefined,
+    symbol = undefined,
+    width = 600,
+    height = 400,
+    mode = 'light',
+    children
+  } = $props()
+
+  const brewer = new ChartBrewer()
+  setContext('chart-brewer', brewer)
+
+  function buildChannels() {
+    const channels = {}
+    if (x)       channels.x = x
+    if (y)       channels.y = y
+    if (color)   channels.color = color
+    if (pattern) channels.pattern = pattern
+    if (fill)    channels.fill = fill
+    if (size)    channels.size = size
+    if (label)   channels.label = label
+    if (symbol)  channels.symbol = symbol
+    return channels
+  }
+
+  $effect(() => {
+    if (spec) {
+      brewer.update({ data: spec.data, channels: spec.channels, width, height, mode, layers: spec.layers })
+    } else {
+      brewer.update({ data, channels: buildChannels(), width, height, mode })
+    }
+  })
+
+</script>
+
+<div class="chart-container" data-chart-root>
+  <svg
+    {width}
+    {height}
+    viewBox="0 0 {width} {height}"
+    role="img"
+    aria-label="Chart visualization"
+  >
+    <g
+      class="chart-area"
+      data-chart-canvas
+    >
+      {@render children?.()}
+    </g>
+  </svg>
+</div>
+
+<style>
+  .chart-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+
+  svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .chart-area {
+    pointer-events: all;
+  }
+</style>

package/src/FacetPlot/Panel.svelte

@@ -0,0 +1,23 @@
+<script>
+  import PlotChart from '../Plot.svelte'
+
+  let {
+    data, x, y, color, geoms = [], helpers = {},
+    width, height, mode, grid, legend,
+    xDomain, yDomain, colorDomain,
+    children
+  } = $props()
+
+  // Build spec with domain overrides so PlotState uses them
+  const spec = $derived({
+    data, x, y, color,
+    geoms,
+    xDomain,
+    yDomain,
+    colorDomain
+  })
+</script>
+
+<PlotChart {spec} {helpers} {width} {height} {mode} {grid} {legend}>
+  {@render children?.()}
+</PlotChart>

package/src/FacetPlot.svelte

@@ -0,0 +1,90 @@
+<script>
+  import { splitByField, getFacetDomains } from './lib/plot/facet.js'
+  import { distinct } from './lib/brewing/colors.js'
+  import PlotPanel from './FacetPlot/Panel.svelte'
+
+  /**
+   * @type {{
+   *   data: Object[],
+   *   facet: { by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' },
+   *   x?: string,
+   *   y?: string,
+   *   color?: string,
+   *   geoms?: import('./lib/plot/types.js').GeomSpec[],
+   *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+   *   panelWidth?: number,
+   *   panelHeight?: number,
+   *   width?: number,
+   *   height?: number,
+   *   mode?: 'light' | 'dark',
+   *   grid?: boolean,
+   *   legend?: boolean,
+   *   children?: import('svelte').Snippet
+   * }}
+   */
+  let {
+    data = [],
+    facet,
+    x,
+    y,
+    fill,
+    color,
+    geoms = [],
+    helpers = {},
+    panelWidth,
+    panelHeight,
+    width = 900,
+    height = 300,
+    mode = 'light',
+    grid = true,
+    legend = false,
+    children
+  } = $props()
+
+  // `fill` is accepted as an alias for `color` (bar/area semantics vs line/point)
+  const colorChannel = $derived(fill ?? color)
+
+  const panels  = $derived(splitByField(data, facet.by))
+  const scales  = $derived(facet.scales ?? 'fixed')
+  const domains = $derived(
+    x && y ? getFacetDomains(panels, { x, y }, scales) : new Map()
+  )
+
+  // Global color domain ensures the same value maps to the same color in every panel.
+  const colorDomain = $derived(colorChannel ? distinct(data, colorChannel) : undefined)
+
+  const cols = $derived(facet.cols ?? Math.min(panels.size, 3))
+  const pw   = $derived(panelWidth  ?? Math.floor(width / cols))
+  const ph   = $derived(panelHeight ?? height)
+</script>
+
+<div data-facet-grid style:--facet-cols={cols}>
+  {#each [...panels.entries()] as [facetValue, panelData] (`${facetValue}`)}
+    <div data-facet-panel data-facet-value={facetValue}>
+      <div data-facet-title>{facetValue}</div>
+      <PlotPanel
+        data={panelData}
+        {x} {y} color={colorChannel}
+        {geoms} {helpers}
+        width={pw}
+        height={ph}
+        {mode} {grid}
+        legend={false}
+        xDomain={domains.get(facetValue)?.xDomain}
+        yDomain={domains.get(facetValue)?.yDomain}
+        {colorDomain}
+      >
+        <!-- Render caller-supplied geoms inside every panel (each gets its own PlotState context) -->
+        {@render children?.()}
+      </PlotPanel>
+    </div>
+  {/each}
+</div>
+
+<!-- Single shared legend outside the grid -->
+{#if legend}
+  <div data-facet-legend>
+    <!-- Legend content rendered by first panel; simplified for now -->
+  </div>
+{/if}
+

package/src/Plot/Arc.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.arcs && brewer.arcs.length > 0}
+	<g
+		class="chart-arcs"
+		data-plot-type="arc"
+		transform="translate({brewer.width / 2}, {brewer.height / 2})"
+	>
+		{#each brewer.arcs as arc (arc.key)}
+			<path
+				d={arc.d}
+				fill={arc.fill}
+				stroke={arc.stroke}
+				stroke-width="1"
+				data-plot-element="arc"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-arcs {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Area.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.areas && brewer.areas.length > 0}
+	<g class="chart-areas" data-plot-type="area">
+		{#each brewer.areas as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill={seg.fill}
+				stroke={seg.stroke}
+				opacity="0.7"
+				data-plot-element="area"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-areas {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Axis.svelte

@@ -0,0 +1,73 @@
+<script>
+  import { getContext } from 'svelte'
+
+  /** @type {'x' | 'y'} */
+  let { type = 'x', label = '' } = $props()
+
+  const state = getContext('plot-state')
+
+  const xTicks = $derived.by(() => {
+    const s = state.xScale
+    if (!s) return []
+    if (typeof s.bandwidth === 'function') {
+      return s.domain().map((val) => ({
+        value: val,
+        pos: (s(val) ?? 0) + s.bandwidth() / 2
+      }))
+    }
+    return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+  })
+
+  const yTicks = $derived.by(() => {
+    const s = state.yScale
+    if (!s) return []
+    if (typeof s.bandwidth === 'function') {
+      return s.domain().map((val) => ({
+        value: val,
+        pos: (s(val) ?? 0) + s.bandwidth() / 2
+      }))
+    }
+    return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+  })
+
+  const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
+  const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
+</script>
+
+{#if type === 'x'}
+  <g class="axis x-axis" transform={xTransform} data-plot-axis="x">
+    <line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
+    {#each xTicks as tick (tick.value)}
+      <g transform="translate({tick.pos}, 0)" data-plot-tick>
+        <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" />
+        <text x="0" y="9" text-anchor="middle" dominant-baseline="hanging" data-plot-tick-label>
+          {tick.value}
+        </text>
+      </g>
+    {/each}
+    {#if label}
+      <text x={state.innerWidth / 2} y="36" text-anchor="middle" class="axis-label" data-plot-axis-label>{label}</text>
+    {/if}
+  </g>
+{:else}
+  <g class="axis y-axis" transform={yTransform} data-plot-axis="y">
+    <line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
+    {#each yTicks as tick (tick.value)}
+      <g transform="translate(0, {tick.pos})" data-plot-tick>
+        <line x1="-6" y1="0" x2="0" y2="0" stroke="currentColor" />
+        <text x="-9" y="0" text-anchor="end" dominant-baseline="middle" data-plot-tick-label>
+          {tick.value}
+        </text>
+      </g>
+    {/each}
+    {#if label}
+      <text transform="rotate(-90)" x={-(state.innerHeight / 2)} y="-40" text-anchor="middle" class="axis-label" data-plot-axis-label>{label}</text>
+    {/if}
+  </g>
+{/if}
+
+<style>
+  .axis { font-size: 11px; fill: currentColor; stroke: currentColor; }
+  .axis-label { font-size: 13px; font-weight: 500; }
+  [data-plot-axis-line] { stroke: currentColor; }
+</style>

package/src/Plot/Bar.svelte

@@ -0,0 +1,96 @@
+<script>
+	import { getContext } from 'svelte'
+	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
+
+	let {
+		x = null,
+		y = null,
+		fill = null,
+		color = '#4682b4',
+		opacity = 1,
+		animationDuration = 300,
+		onClick = null
+	} = $props()
+
+	// Get brewer from context
+	const brewer = getContext('chart-brewer')
+
+	// Set field mappings in the brewer
+	$effect(() => {
+		brewer.setFields({
+			x,
+			y,
+			color: fill
+		})
+
+		// Ensure scales are updated
+		brewer.createScales()
+	})
+
+	// Compute bars whenever data or fields change
+	let bars = $derived(brewer.createBars())
+
+	// Animation transition values
+	let initialY = $state(0)
+	let initialHeight = $state(0)
+
+	// Handle resetting animation state for new bars
+	$effect(() => {
+		if (bars && bars.length > 0) {
+			initialY = brewer.getDimensions().innerHeight
+			initialHeight = 0
+
+			// Reset to actual positions after a delay
+			setTimeout(() => {
+				initialY = 0
+				initialHeight = 0
+			}, 10)
+		}
+	})
+
+	// Handle bar click
+	function handleClick(event, bar) {
+		if (onClick) onClick(bar.data, event)
+	}
+</script>
+
+{#if bars && bars.length > 0}
+	<g class="chart-bars" data-plot-type="bar">
+		{#each bars as bar, i (bar.data[x])}
+			{@const barY = initialY > 0 ? brewer.getDimensions().innerHeight : bar.y}
+			{@const barHeight = initialHeight > 0 ? 0 : bar.height}
+
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_click_events_have_key_events -->
+			<rect
+				class="bar"
+				x={bar.x}
+				y={barY}
+				width={bar.width}
+				height={barHeight}
+				fill={bar.color}
+				{opacity}
+				onclick={(event) => handleClick(event, bar)}
+				onmouseenter={(event) => {
+					event.target.setAttribute('opacity', Math.min(opacity + 0.2, 1))
+				}}
+				onmouseleave={(event) => {
+					event.target.setAttribute('opacity', opacity)
+				}}
+				style="transition: y {animationDuration}ms ease, height {animationDuration}ms ease;"
+				role="graphics-symbol"
+				aria-label="Bar representing {bar.data[x]} with value {bar.data[y]}"
+				data-plot-element="bar"
+				data-plot-value={bar.data[y]}
+				data-plot-category={bar.data[x]}
+			>
+				<title>{bar.data[x]}: {bar.data[y]}</title>
+			</rect>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-bars .bar {
+		cursor: pointer;
+	}
+</style>

package/src/Plot/Grid.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { getContext } from 'svelte'
+
+  const state = getContext('plot-state')
+
+  const xGridLines = $derived.by(() => {
+    const s = state.xScale
+    if (!s || typeof s.bandwidth !== 'function') return []
+    return s.domain().map((val) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
+  })
+
+  const yGridLines = $derived.by(() => {
+    const s = state.yScale
+    if (!s || typeof s.ticks !== 'function') return []
+    return s.ticks(6).map((val) => ({ pos: s(val) }))
+  })
+</script>
+
+<g class="grid" data-plot-grid>
+  {#each yGridLines as line (line.pos)}
+    <line x1="0" y1={line.pos} x2={state.innerWidth} y2={line.pos} data-plot-grid-line />
+  {/each}
+  {#each xGridLines as line (line.pos)}
+    <line x1={line.pos} y1="0" x2={line.pos} y2={state.innerHeight} data-plot-grid-line="x" />
+  {/each}
+</g>
+
+<style>
+  [data-plot-grid-line] { stroke: var(--chart-grid-color, currentColor); opacity: 0.15; stroke-dasharray: 2 4; }
+</style>

package/src/Plot/Legend.svelte

@@ -0,0 +1,167 @@
+<script>
+  import { getContext } from 'svelte'
+  import { toPatternId } from '../lib/brewing/patterns.js'
+  import { buildSymbolPath } from '../lib/brewing/marks/points.js'
+
+  /** @type {Record<string, string>} */
+  let { labels = {} } = $props()
+
+  const state = getContext('plot-state')
+
+  const isCategorical = $derived(state.colorScaleType === 'categorical')
+  const isLineGeom    = $derived(state.geomTypes?.has('line') ?? false)
+  const isPointGeom   = $derived(state.geomTypes?.has('point') ?? false)
+  const hasSymbols    = $derived((state.symbols?.size ?? 0) > 0)
+
+  // Split conditions
+  const splitPattern = $derived(
+    !!state.colorField && !!state.patternField && state.colorField !== state.patternField
+  )
+  const splitSymbol = $derived(
+    hasSymbols && !!state.colorField && !!state.symbolField && state.colorField !== state.symbolField
+  )
+  const symbolOnly = $derived(hasSymbols && !state.colorField)
+
+  // Color section items — combined with same-field pattern/symbol overlays
+  const colorItems = $derived(
+    [...(state.colors?.entries() ?? [])].map(([key, entry]) => ({
+      key,
+      label: labels[String(key)] ?? String(key),
+      fill: entry.fill,
+      stroke: entry.stroke,
+      patternId: !splitPattern && state.patterns?.has(key) ? toPatternId(String(key)) : null,
+      symbolShape: !splitSymbol && state.symbols?.get(key) ? state.symbols.get(key) : null
+    }))
+  )
+
+  // Pattern section — only when pattern encodes a different field than color
+  const patternItems = $derived(
+    splitPattern
+      ? [...(state.patterns?.entries() ?? [])].map(([key]) => ({
+          key,
+          label: labels[String(key)] ?? String(key),
+          patternId: toPatternId(String(key))
+        }))
+      : []
+  )
+
+  // Symbol section — only when symbol encodes a different field than color, or symbol-only
+  const symbolItems = $derived(
+    splitSymbol || symbolOnly
+      ? [...(state.symbols?.entries() ?? [])].map(([key, shape]) => ({
+          key,
+          label: labels[String(key)] ?? String(key),
+          shape,
+          fill: state.colors?.get(key)?.fill ?? '#888',
+          stroke: state.colors?.get(key)?.stroke ?? '#888'
+        }))
+      : []
+  )
+
+  const gradientStyle = $derived.by(() => {
+    if (isCategorical) return ''
+    return `background: linear-gradient(to right, #cfe2f3, #084594)`
+  })
+</script>
+
+{#if isCategorical}
+  <div class="legend-root" data-plot-legend>
+
+    <!-- Symbol-only: no color field, just symbol shapes -->
+    {#if symbolOnly}
+      <div class="legend categorical">
+        {#each symbolItems as item (item.key)}
+          <div class="legend-item" data-plot-legend-item>
+            <svg width="14" height="14" data-plot-legend-swatch>
+              <path transform="translate(7,7)" d={buildSymbolPath(item.shape, 5)} fill={item.fill} />
+            </svg>
+            <span class="label" data-plot-legend-label>{item.label}</span>
+          </div>
+        {/each}
+      </div>
+
+    <!-- Color section (line, point, or fill swatches) -->
+    {:else if colorItems.length > 0}
+      <div class="legend categorical">
+        {#each colorItems as item (item.key)}
+          <div class="legend-item" data-plot-legend-item>
+            {#if isLineGeom}
+              <!-- Line swatch with optional combined symbol -->
+              <svg width="24" height="14" data-plot-legend-swatch>
+                <line x1="2" y1="7" x2="22" y2="7" stroke={item.stroke} stroke-width="2" stroke-linecap="round" />
+                {#if item.symbolShape}
+                  <path transform="translate(12,7)" d={buildSymbolPath(item.symbolShape, 4)} fill={item.stroke} />
+                {/if}
+              </svg>
+            {:else if isPointGeom && item.symbolShape}
+              <!-- Symbol shape swatch for scatter -->
+              <svg width="14" height="14" data-plot-legend-swatch>
+                <path transform="translate(7,7)" d={buildSymbolPath(item.symbolShape, 5)} fill={item.fill} />
+              </svg>
+            {:else if item.patternId}
+              <!-- Fill + pattern overlay -->
+              <svg width="14" height="14" data-plot-legend-swatch>
+                <rect width="14" height="14" fill={item.fill} />
+                <rect width="14" height="14" fill="url(#{item.patternId})" />
+              </svg>
+            {:else}
+              <!-- Plain fill swatch -->
+              <span class="swatch" style:background-color={item.fill} data-plot-legend-swatch></span>
+            {/if}
+            <span class="label" data-plot-legend-label>{item.label}</span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Pattern section (different field from color) -->
+    {#if patternItems.length > 0}
+      <div class="legend categorical legend-section">
+        {#each patternItems as item (item.key)}
+          <div class="legend-item" data-plot-legend-item>
+            <svg width="14" height="14" data-plot-legend-swatch>
+              <rect width="14" height="14" fill="var(--color-surface-z2, #ccc)" />
+              <rect width="14" height="14" fill="url(#{item.patternId})" />
+            </svg>
+            <span class="label" data-plot-legend-label>{item.label}</span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Symbol section (different field from color) -->
+    {#if symbolItems.length > 0 && !symbolOnly}
+      <div class="legend categorical legend-section">
+        {#each symbolItems as item (item.key)}
+          <div class="legend-item" data-plot-legend-item>
+            {#if isLineGeom}
+              <svg width="24" height="14" data-plot-legend-swatch>
+                <line x1="2" y1="7" x2="22" y2="7" stroke={item.stroke ?? item.fill} stroke-width="2" stroke-linecap="round" stroke-dasharray="4 2" />
+                <path transform="translate(12,7)" d={buildSymbolPath(item.shape, 4)} fill={item.stroke ?? item.fill} />
+              </svg>
+            {:else}
+              <svg width="14" height="14" data-plot-legend-swatch>
+                <path transform="translate(7,7)" d={buildSymbolPath(item.shape, 5)} fill={item.fill} />
+              </svg>
+            {/if}
+            <span class="label" data-plot-legend-label>{item.label}</span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+  </div>
+{:else}
+  <div class="legend gradient" data-plot-legend>
+    <div class="gradient-bar" style={gradientStyle} data-plot-legend-gradient></div>
+  </div>
+{/if}
+
+<style>
+  .legend-root { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+  .legend { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
+  .legend-section { border-top: 1px solid var(--color-surface-z3, #e0e0e0); padding-top: 6px; }
+  .legend-item { display: flex; align-items: center; gap: 4px; }
+  .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }
+  .gradient-bar { width: 180px; height: 14px; border-radius: 2px; }
+</style>

package/src/Plot/Line.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.lines && brewer.lines.length > 0}
+	<g class="chart-lines" data-plot-type="line">
+		{#each brewer.lines as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill={seg.fill}
+				stroke={seg.stroke}
+				stroke-width="2"
+				stroke-linejoin="round"
+				stroke-linecap="round"
+				data-plot-element="line"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-lines {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Point.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.points && brewer.points.length > 0}
+	<g class="chart-points" data-plot-type="point">
+		{#each brewer.points as pt, i (i)}
+			<circle
+				cx={pt.cx}
+				cy={pt.cy}
+				r={pt.r}
+				fill={pt.fill}
+				stroke={pt.stroke}
+				stroke-width="1"
+				data-plot-element="point"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-points {
+		pointer-events: none;
+	}
+</style>