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

package/src/Plot/Point.svelte

@@ -1,27 +1,40 @@
 <script>
 	import { getContext } from 'svelte'
 
-	const brewer = getContext('chart-brewer')
-</script>
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		r = 4,
+		fill = 'steelblue',
+		stroke = 'white',
+		strokeWidth = 1
+	} = $props()
+
+	const state = getContext('plot-state')
 
-{#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}
+	const points = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale || !data?.length) return []
+		return data
+			.map((d) => ({
+				cx: state.xScale(x ? d[x] : d) ?? null,
+				cy: state.yScale(y ? d[y] : d) ?? null,
+				label: `(${x ? d[x] : d}, ${y ? d[y] : d})`
+			}))
+			.filter((p) => p.cx !== null && p.cy !== null)
+	})
+</script>
 
-<style>
-	.chart-points {
-		pointer-events: none;
-	}
-</style>
+{#each points as pt, i (i)}
+	<circle
+		cx={pt.cx}
+		cy={pt.cy}
+		{r}
+		{fill}
+		{stroke}
+		stroke-width={strokeWidth}
+		data-plot-element="point"
+		role="graphics-symbol"
+		aria-label={pt.label}
+	/>
+{/each}

package/src/Plot/Root.svelte

@@ -1,107 +1,62 @@
 <script>
-	import { setContext } from 'svelte'
-	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
+	import { setContext, untrack } from 'svelte'
+	import { PlotState } from '../PlotState.svelte.js'
+	import { defaultPreset } from '../lib/preset.js'
 
 	let {
 		data = [],
+		x = undefined,
+		y = undefined,
+		color = undefined,
 		width = 600,
 		height = 400,
-		margin = { top: 20, right: 30, bottom: 40, left: 50 },
-		fill = null,
-		responsive = true,
-		animationDuration = 300,
+		margin = undefined,
+		mode = 'light',
 		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
+	const plotState = untrack(
+		() =>
+			new PlotState({
+				data,
+				channels: { x, y, color },
+				width,
+				height,
+				margin,
+				mode,
+				chartPreset: defaultPreset
 			})
+	)
 
-			// Update scales after dimensions change
-			brewer.createScales()
+	$effect(() => {
+		plotState.update({
+			data,
+			channels: { x, y, color },
+			width,
+			height,
+			margin,
+			mode,
+			chartPreset: defaultPreset
 		})
-
-		// 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>
+	setContext('plot-state', plotState)
 
-<style>
-	.chart-container {
-		position: relative;
-		width: 100%;
-		height: auto;
-	}
-
-	svg {
-		display: block;
-		overflow: visible;
-	}
+	const svgWidth = $derived(plotState.innerWidth + (margin?.left ?? 50) + (margin?.right ?? 30))
+	const svgHeight = $derived(plotState.innerHeight + (margin?.top ?? 20) + (margin?.bottom ?? 40))
+	const marginLeft = $derived(margin?.left ?? 50)
+	const marginTop = $derived(margin?.top ?? 20)
+</script>
 
-	.chart-area {
-		pointer-events: all;
-	}
-</style>
+<svg
+	{width}
+	{height}
+	viewBox="0 0 {svgWidth} {svgHeight}"
+	role="img"
+	aria-label="Chart visualization"
+	data-plot-root
+>
+	<g transform="translate({marginLeft}, {marginTop})" data-plot-canvas>
+		{@render children?.()}
+	</g>
+</svg>

package/src/Plot/Timeline.svelte

@@ -1,95 +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()
+	/**
+	 * @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 safeIndex = $derived(
+		frameKeys.length === 0 ? 0 : Math.min(currentIndex, frameKeys.length - 1)
+	)
 
-  const SPEEDS = [0.5, 1, 1.5, 2, 4]
+	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>
+	<!-- 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>
+	<!-- 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
-  />
+	<!-- 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>
+	<!-- 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;
-  }
+	.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

@@ -1,81 +1,87 @@
 <script>
-  import { getContext } from 'svelte'
+	import { getContext } from 'svelte'
 
-  /** @type {{ tooltip?: boolean | ((data: Record<string, unknown>) => string) }} */
-  let { tooltip = true } = $props()
+	/** @type {{ tooltip?: boolean | ((data: Record<string, unknown>) => string) }} */
+	let { tooltip = true } = $props()
 
-  const plotState = getContext('plot-state')
+	const plotState = getContext('plot-state')
 
-  let mouseX = $state(0)
-  let mouseY = $state(0)
+	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)
-  })
+	$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)
+	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('')
-  }
+	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)
-  })
+	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>
+	<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 {
+		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;
-  }
+	.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-row) {
+		display: flex;
+		gap: 10px;
+		justify-content: space-between;
+	}
 
-  :global(.tt-key) {
-    opacity: 0.65;
-  }
+	:global(.tt-key) {
+		opacity: 0.65;
+	}
 
-  :global(.tt-val) {
-    font-weight: 600;
-  }
+	:global(.tt-val) {
+		font-weight: 600;
+	}
 </style>