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

package/src/Plot/Root.svelte

@@ -0,0 +1,107 @@
+<script>
+	import { setContext } from 'svelte'
+	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
+
+	let {
+		data = [],
+		width = 600,
+		height = 400,
+		margin = { top: 20, right: 30, bottom: 40, left: 50 },
+		fill = null,
+		responsive = true,
+		animationDuration = 300,
+		children
+	} = $props()
+
+	// Create chart brewer instance
+	let brewer = $state(new ChartBrewer())
+
+	$effect(() => {
+		brewer.setDimensions({ width, height, margin })
+	})
+
+	// Chart dimensions derived from brewer
+	let dimensions = $derived(brewer.getDimensions())
+
+	// Process data
+	$effect(() => {
+		// If data has a select method (dataset object), call it to get actual data
+		const chartData = data.select && typeof data.select === 'function' ? data.select() : data
+
+		// Update brewer with data and fields
+		brewer.setData(chartData)
+		brewer.setFields({ color: fill })
+
+		// Create scales after setting data
+		brewer.createScales()
+	})
+
+	// Provide chart context to child components
+	setContext('chart-brewer', brewer)
+
+	// Handle responsive behavior
+	let container
+
+	$effect(() => {
+		if (!responsive || !container || !document) return
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0]
+			if (!entry) return
+
+			const containerWidth = entry.contentRect.width
+			const aspectRatio = height / width
+
+			// Update chart dimensions while maintaining aspect ratio
+			brewer.setDimensions({
+				width: containerWidth,
+				height: containerWidth * aspectRatio
+			})
+
+			// Update scales after dimensions change
+			brewer.createScales()
+		})
+
+		// Start observing container size
+		resizeObserver.observe(container)
+
+		return () => {
+			resizeObserver.disconnect()
+		}
+	})
+</script>
+
+<div class="chart-container" bind:this={container} data-plot-root>
+	<svg
+		width={dimensions.width}
+		height={dimensions.height}
+		viewBox="0 0 {dimensions.width} {dimensions.height}"
+		role="img"
+		aria-label="Chart visualization"
+	>
+		<g
+			class="chart-area"
+			transform="translate({dimensions.margin.left}, {dimensions.margin.top})"
+			data-plot-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/Plot/Timeline.svelte

@@ -0,0 +1,95 @@
+<script>
+  /**
+   * @type {{
+   *   frameKeys: unknown[],
+   *   currentIndex: number,
+   *   playing: boolean,
+   *   speed: number,
+   *   onplay: () => void,
+   *   onpause: () => void,
+   *   onscrub: (index: number) => void,
+   *   onspeed: (speed: number) => void
+   * }}
+   */
+  let {
+    frameKeys = [],
+    currentIndex = 0,
+    playing = false,
+    speed = 1,
+    onplay,
+    onpause,
+    onscrub,
+    onspeed
+  } = $props()
+
+  const safeIndex = $derived(
+    frameKeys.length === 0 ? 0 : Math.min(currentIndex, frameKeys.length - 1)
+  )
+
+  const SPEEDS = [0.5, 1, 1.5, 2, 4]
+</script>
+
+<div class="timeline" data-plot-timeline>
+  <!-- Play / Pause -->
+  <button
+    class="play-pause"
+    aria-label={playing ? 'Pause' : 'Play'}
+    onclick={() => playing ? onpause?.() : onplay?.()}
+    disabled={frameKeys.length === 0}
+    data-plot-timeline-playpause
+  >
+    {playing ? '⏸' : '▶'}
+  </button>
+
+  <!-- Frame label -->
+  <span class="frame-label" data-plot-timeline-label>{frameKeys[safeIndex] ?? ''}</span>
+
+  <!-- Scrub slider -->
+  <input
+    type="range"
+    min="0"
+    max={Math.max(0, frameKeys.length - 1)}
+    value={safeIndex}
+    disabled={frameKeys.length === 0}
+    class="scrub"
+    aria-label="Animation timeline"
+    oninput={(e) => onscrub?.(Number(e.currentTarget.value))}
+    data-plot-timeline-scrub
+  />
+
+  <!-- Speed selector -->
+  <select
+    aria-label="Playback speed"
+    value={speed}
+    onchange={(e) => onspeed?.(Number(e.currentTarget.value))}
+    data-plot-timeline-speed
+  >
+    {#each SPEEDS as s (s)}
+      <option value={s}>{s}×</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .timeline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    font-size: 12px;
+  }
+  .play-pause {
+    font-size: 16px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+  .scrub {
+    flex: 1;
+  }
+  .frame-label {
+    min-width: 4ch;
+    text-align: right;
+  }
+</style>

package/src/Plot/Tooltip.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { getContext } from 'svelte'
+
+  /** @type {{ tooltip?: boolean | ((data: Record<string, unknown>) => string) }} */
+  let { tooltip = true } = $props()
+
+  const plotState = getContext('plot-state')
+
+  let mouseX = $state(0)
+  let mouseY = $state(0)
+
+  $effect(() => {
+    function onMove(e) { mouseX = e.clientX; mouseY = e.clientY }
+    window.addEventListener('mousemove', onMove)
+    return () => window.removeEventListener('mousemove', onMove)
+  })
+
+  const hovered = $derived(plotState.hovered)
+  const mode    = $derived(plotState.mode)
+
+  function formatDefault(data) {
+    return Object.entries(data)
+      .filter(([, v]) => v !== undefined && v !== null)
+      .map(([k, v]) => `<div class="tt-row"><span class="tt-key">${k}</span><span class="tt-val">${v}</span></div>`)
+      .join('')
+  }
+
+  const content = $derived.by(() => {
+    if (!hovered) return ''
+    if (typeof tooltip === 'function') return String(tooltip(hovered) ?? '')
+    return formatDefault(hovered)
+  })
+</script>
+
+{#if hovered && content}
+  <div
+    class="plot-tooltip"
+    data-mode={mode}
+    style:left="{mouseX + 14}px"
+    style:top="{mouseY - 8}px"
+  >
+    {@html content}
+  </div>
+{/if}
+
+<style>
+  .plot-tooltip {
+    position: fixed;
+    pointer-events: none;
+    z-index: 1000;
+    padding: 8px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: nowrap;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    color: #1e293b;
+  }
+
+  .plot-tooltip[data-mode="dark"] {
+    background: #1e293b;
+    border-color: #334155;
+    color: #f1f5f9;
+  }
+
+  :global(.tt-row) {
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+  }
+
+  :global(.tt-key) {
+    opacity: 0.65;
+  }
+
+  :global(.tt-val) {
+    font-weight: 600;
+  }
+</style>

package/src/Plot/index.js

@@ -0,0 +1,9 @@
+export { default as Root } from './Root.svelte'
+export { default as Axis } from './Axis.svelte'
+export { default as Bar } from './Bar.svelte'
+export { default as Legend } from './Legend.svelte'
+export { default as Grid } from './Grid.svelte'
+export { default as Line } from './Line.svelte'
+export { default as Area } from './Area.svelte'
+export { default as Point } from './Point.svelte'
+export { default as Arc } from './Arc.svelte'

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>