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

package/src/Plot/Bar.svelte

@@ -1,96 +1,54 @@
 <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
+	let { data = undefined, x = undefined, y = undefined, fill = 'steelblue', opacity = 1 } = $props()
+
+	const state = getContext('plot-state')
+
+	const bars = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale) return []
+		const xScale = state.xScale
+		const yScale = state.yScale
+		const innerHeight = state.innerHeight
+		const src = data ?? []
+		if (!src.length) return []
+
+		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
+		const padding = typeof xScale.bandwidth === 'function' ? bw * 0.05 : 0
+
+		// Baseline at y=0 when domain spans zero (supports negative bars)
+		const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
+		const baseline =
+			yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
+				? (yScale(0) ?? innerHeight)
+				: innerHeight
+
+		return src.map((d) => {
+			const xVal = x ? d[x] : d
+			const yVal = y ? d[y] : d
+			const xPos = (xScale(xVal) ?? 0) + padding
+			const yPos = yScale(yVal) ?? baseline
+			return {
+				x: xPos,
+				y: Math.min(yPos, baseline),
+				width: bw * 0.9,
+				height: Math.abs(baseline - yPos),
+				label: `${xVal}: ${yVal}`
+			}
 		})
-
-		// 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>
+{#each bars as bar, i (i)}
+	<rect
+		x={bar.x}
+		y={bar.y}
+		width={bar.width}
+		height={bar.height}
+		{fill}
+		{opacity}
+		data-plot-element="bar"
+		role="graphics-symbol"
+		aria-label={bar.label}
+	/>
+{/each}

package/src/Plot/Grid.svelte

@@ -1,30 +1,34 @@
 <script>
-  import { getContext } from 'svelte'
+	import { getContext } from 'svelte'
 
-  const state = getContext('plot-state')
+	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 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) }))
-  })
+	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}
+	{#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; }
+	[data-plot-grid-line] {
+		stroke: var(--chart-grid-color, currentColor);
+		opacity: 0.15;
+		stroke-dasharray: 2 4;
+	}
 </style>

package/src/Plot/Legend.svelte

@@ -1,167 +1,233 @@
 <script>
-  import { getContext } from 'svelte'
-  import { toPatternId } from '../lib/brewing/patterns.js'
-  import { buildSymbolPath } from '../lib/brewing/marks/points.js'
+	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()
+	/** @type {Record<string, string>} */
+	let { labels = {} } = $props()
 
-  const state = getContext('plot-state')
+	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)
+	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)
+	// 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
-    }))
-  )
+	// 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))
-        }))
-      : []
-  )
+	// 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'
-        }))
-      : []
-  )
+	// 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)`
-  })
+	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>
+	<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>
 
-    <!-- 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}
 
-    <!-- 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}
 
-    <!-- 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>
+		<!-- 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>
+	<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; }
+	.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

@@ -1,27 +1,37 @@
 <script>
 	import { getContext } from 'svelte'
+	import { line as d3Line } from 'd3-shape'
 
-	const brewer = getContext('chart-brewer')
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		stroke = 'steelblue',
+		strokeWidth = 2,
+		curve = undefined
+	} = $props()
+
+	const state = getContext('plot-state')
+
+	const path = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale || !data?.length) return null
+		const lineGen = d3Line()
+			.x((d) => state.xScale(x ? d[x] : d) ?? 0)
+			.y((d) => state.yScale(y ? d[y] : d) ?? 0)
+			.defined((d) => d != null)
+		if (curve) lineGen.curve(curve)
+		return lineGen(data)
+	})
 </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 path}
+	<path
+		d={path}
+		fill="none"
+		{stroke}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round"
+		stroke-linecap="round"
+		data-plot-element="line"
+	/>
 {/if}
-
-<style>
-	.chart-lines {
-		pointer-events: none;
-	}
-</style>