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

package/src/Plot/Grid.svelte

@@ -1,68 +1,30 @@
 <script>
-	import { getContext } from 'svelte'
-	import { createGrid } from '../lib/brewing/axes.svelte.js'
+  import { getContext } from 'svelte'
 
-	let {
-		direction = 'both',
-		xTicks = null,
-		yTicks = null,
-		color = 'currentColor',
-		opacity = 0.1,
-		lineStyle = 'solid'
-	} = $props()
+  const state = getContext('plot-state')
 
-	// Get brewer from context
-	const brewer = getContext('chart-brewer')
+  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 }))
+  })
 
-	// Get grid data
-	let gridData = $derived(
-		brewer.createGrid({
-			direction,
-			xTickCount: xTicks,
-			yTickCount: yTicks
-		})
-	)
-
-	// Convert lineStyle to stroke-dasharray
-	let strokeDasharray = $derived(
-		lineStyle === 'dashed' ? '5,5' : lineStyle === 'dotted' ? '1,3' : 'none'
-	)
+  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="chart-grid" data-plot-grid={direction}>
-	{#if direction === 'x' || direction === 'both'}
-		{#each gridData.xLines as line, index (index)}
-			<line
-				data-plot-grid-line="x"
-				x1={line.x1}
-				y1={line.y1}
-				x2={line.x2}
-				y2={line.y2}
-				stroke={color}
-				stroke-opacity={opacity}
-				stroke-dasharray={strokeDasharray}
-			/>
-		{/each}
-	{/if}
-
-	{#if direction === 'y' || direction === 'both'}
-		{#each gridData.yLines as line, index (index)}
-			<line
-				data-plot-grid-line="y"
-				x1={line.x1}
-				y1={line.y1}
-				x2={line.x2}
-				y2={line.y2}
-				stroke={color}
-				stroke-opacity={opacity}
-				stroke-dasharray={strokeDasharray}
-			/>
-		{/each}
-	{/if}
+<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>
-	.chart-grid {
-		pointer-events: none;
-	}
+  [data-plot-grid-line] { stroke: var(--chart-grid-color, currentColor); opacity: 0.15; stroke-dasharray: 2 4; }
 </style>

package/src/Plot/Legend.svelte

@@ -1,127 +1,167 @@
 <script>
-	import { getContext } from 'svelte'
-	import { createLegend, createLegendItemAttributes } from '../lib/brewing/legends.svelte.js'
-
-	let {
-		title = '',
-		align = 'right',
-		verticalAlign = 'top',
-		shape = 'rect',
-		markerSize = 10,
-		onClick = null
-	} = $props()
-
-	// Get brewer from context
-	const brewer = getContext('chart-brewer')
-
-	// Get legend data
-	let legendData = $derived(
-		brewer.createLegend({
-			title,
-			align,
-			shape,
-			markerSize
-		})
-	)
-
-	// Track selected items (for filtering)
-	let selectedItems = $state([])
-
-	function toggleItem(item) {
-		if (!onClick) return
-
-		const isSelected = selectedItems.includes(item.value)
-
-		if (isSelected) {
-			selectedItems = selectedItems.filter((v) => v !== item.value)
-		} else {
-			selectedItems = [...selectedItems, item.value]
-		}
-
-		onClick(selectedItems)
-	}
+  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 legendData.items.length > 0}
-	<g class="chart-legend" transform={legendData.transform} data-plot-legend>
-		<!-- Legend title -->
-		{#if legendData.title}
-			<text
-				class="legend-title"
-				x="0"
-				y="-6"
-				text-anchor={align === 'left' ? 'start' : align === 'right' ? 'end' : 'middle'}
-				data-plot-legend-title
-			>
-				{legendData.title}
-			</text>
-		{/if}
-
-		<!-- Legend items -->
-		{#each legendData.items as item, index (index)}
-			{@const attrs = createLegendItemAttributes(item)}
-			{@const isSelected = selectedItems.includes(item.value)}
-			<g
-				{...attrs}
-				class="legend-item"
-				class:selected={isSelected}
-				onclick={() => toggleItem(item)}
-			>
-				<!-- Shape: circle or rect -->
-				{#if item.shape === 'circle'}
-					<circle
-						cx={item.markerSize / 2}
-						cy={item.markerSize / 2}
-						r={item.markerSize / 2}
-						fill={item.color}
-						stroke={isSelected ? 'currentColor' : 'none'}
-						stroke-width={isSelected ? 1 : 0}
-						data-plot-legend-marker="circle"
-					/>
-				{:else}
-					<rect
-						width={item.markerSize}
-						height={item.markerSize}
-						fill={item.color}
-						stroke={isSelected ? 'currentColor' : 'none'}
-						stroke-width={isSelected ? 1 : 0}
-						data-plot-legend-marker="rect"
-					/>
-				{/if}
-
-				<!-- Text label -->
-				<text
-					x={item.markerSize + 5}
-					y={item.markerSize - 2}
-					text-anchor="start"
-					data-plot-legend-label
-				>
-					{item.value}
-				</text>
-			</g>
-		{/each}
-	</g>
+{#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>
-	.chart-legend {
-		font-size: 12px;
-	}
-
-	.legend-title {
-		font-weight: bold;
-		font-size: 14px;
-	}
-
-	.legend-item {
-		cursor: pointer;
-	}
-
-	.legend-item:hover [data-plot-legend-label] {
-		font-weight: 500;
-	}
-
-	.legend-item.selected [data-plot-legend-label] {
-		font-weight: 700;
-	}
+  .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>

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

@@ -3,3 +3,7 @@ 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'