@rokkit/chart 1.0.0-next.99 → 1.0.2

package/src/crossfilter/FilterHistogram.svelte

@@ -0,0 +1,290 @@
+<script>
+	// @ts-nocheck
+	import { getContext } from 'svelte'
+	import { bin, extent, max } from 'd3-array'
+	import { scaleLinear } from 'd3-scale'
+	import { format } from 'd3-format'
+
+	/**
+	 * Interactive histogram with brush selection for crossfilter range dimensions.
+	 * Renders bins as bars; mouse drag selects a range and calls cf.setRange().
+	 * Click without dragging clears the filter.
+	 */
+	let {
+		data = [],
+		field = '',
+		label = '',
+		bins: binCount = 20,
+		width = 280,
+		height = 120,
+		color = 'rgb(var(--color-primary, 249 115 22))',
+		dimColor = 'rgb(var(--color-surface-z3, 203 213 225))'
+	} = $props()
+
+	const cf = getContext('crossfilter')
+
+	const margin = { top: 8, right: 10, bottom: 22, left: 32 }
+
+	const innerWidth = $derived(width - margin.left - margin.right)
+	const innerHeight = $derived(height - margin.top - margin.bottom)
+
+	// Compute histogram bins from data
+	const binner = $derived(
+		bin()
+			.value((d) => d[field])
+			.thresholds(binCount)
+	)
+	const binned = $derived(data.length > 0 ? binner(data) : [])
+	const domainExtent = $derived(data.length > 0 ? extent(data, (d) => d[field]) : [0, 1])
+
+	// Scales
+	const xScale = $derived(
+		scaleLinear()
+			.domain(domainExtent)
+			.range([0, innerWidth])
+			.nice()
+	)
+	const yScale = $derived(
+		binned.length > 0
+			? scaleLinear()
+					.domain([0, max(binned, (d) => d.length) ?? 1])
+					.range([innerHeight, 0])
+					.nice()
+			: scaleLinear().domain([0, 1]).range([innerHeight, 0])
+	)
+
+	// Active range from crossfilter
+	const activeRange = $derived(cf?.filters?.get(field))
+
+	// Brush state
+	let brushStartPx = $state(null)
+	let brushEndPx = $state(null)
+	let brushing = $state(false)
+
+	// Brush rect in pixel space
+	const brushRect = $derived.by(() => {
+		// Show committed range if not currently brushing
+		if (brushStartPx === null && activeRange) {
+			const [lo, hi] = activeRange
+			return {
+				x: xScale(lo),
+				width: Math.max(1, xScale(hi) - xScale(lo))
+			}
+		}
+		if (brushStartPx === null) return null
+		const lo = Math.min(brushStartPx, brushEndPx ?? brushStartPx)
+		const hi = Math.max(brushStartPx, brushEndPx ?? brushStartPx)
+		return { x: lo, width: Math.max(1, hi - lo) }
+	})
+
+	function pixelToValue(px) {
+		return xScale.invert(Math.max(0, Math.min(innerWidth, px)))
+	}
+
+	function getLocalX(e) {
+		const svgEl = e.currentTarget.closest('svg')
+		const rect = svgEl.getBoundingClientRect()
+		return e.clientX - rect.left - margin.left
+	}
+
+	function onMouseDown(e) {
+		brushStartPx = getLocalX(e)
+		brushEndPx = brushStartPx
+		brushing = true
+	}
+
+	function onMouseMove(e) {
+		if (!brushing) return
+		brushEndPx = getLocalX(e)
+	}
+
+	function onMouseUp() {
+		if (!brushing) return
+		brushing = false
+		const lo = Math.min(brushStartPx, brushEndPx)
+		const hi = Math.max(brushStartPx, brushEndPx)
+		if (hi - lo < 3) {
+			// Treat as click — clear filter
+			cf?.clearFilter(field)
+			brushStartPx = null
+			brushEndPx = null
+			return
+		}
+		const loVal = pixelToValue(lo)
+		const hiVal = pixelToValue(hi)
+		cf?.setRange(field, [loVal, hiVal])
+		brushStartPx = null
+		brushEndPx = null
+	}
+
+	// Check if a bin is within active range
+	function binInRange(b) {
+		if (!activeRange) return true
+		const [lo, hi] = activeRange
+		return b.x1 > lo && b.x0 < hi
+	}
+
+	// Y-axis tick values (2-3 ticks)
+	const yTicks = $derived(yScale.ticks(3))
+	// X-axis tick values (4 ticks)
+	const xTicks = $derived(xScale.ticks(4))
+
+	const fmt = format('.2~s')
+</script>
+
+<div data-filter-histogram data-filter-field={field} style="width:{width}px">
+	{#if label}
+		<div data-filter-histogram-label>{label}</div>
+	{/if}
+	<svg
+		{width}
+		{height}
+		style="display:block;cursor:crosshair;user-select:none"
+		role="img"
+		aria-label="Histogram filter for {label || field}"
+		onmousedown={onMouseDown}
+		onmousemove={onMouseMove}
+		onmouseup={onMouseUp}
+		onmouseleave={onMouseUp}
+	>
+		<g transform="translate({margin.left},{margin.top})">
+			<!-- Y axis ticks -->
+			{#each yTicks as tick}
+				<line
+					x1={0}
+					x2={innerWidth}
+					y1={yScale(tick)}
+					y2={yScale(tick)}
+					stroke="currentColor"
+					stroke-opacity="0.1"
+					stroke-width="1"
+				/>
+				<text
+					x={-4}
+					y={yScale(tick)}
+					text-anchor="end"
+					dominant-baseline="middle"
+					font-size="9"
+					fill="currentColor"
+					opacity="0.5">{tick}</text
+				>
+			{/each}
+
+			<!-- X axis line -->
+			<line
+				x1={0}
+				x2={innerWidth}
+				y1={innerHeight}
+				y2={innerHeight}
+				stroke="currentColor"
+				stroke-opacity="0.2"
+			/>
+
+			<!-- X axis ticks -->
+			{#each xTicks as tick}
+				<text
+					x={xScale(tick)}
+					y={innerHeight + 12}
+					text-anchor="middle"
+					font-size="9"
+					fill="currentColor"
+					opacity="0.5">{fmt(tick)}</text
+				>
+			{/each}
+
+			<!-- Bars -->
+			{#each binned as b}
+				{@const bx = xScale(b.x0) + 1}
+				{@const bw = Math.max(0, xScale(b.x1) - xScale(b.x0) - 1)}
+				{@const by = yScale(b.length)}
+				{@const bh = innerHeight - by}
+				<rect
+					x={bx}
+					y={by}
+					width={bw}
+					height={bh}
+					fill={activeRange ? (binInRange(b) ? color : dimColor) : color}
+					opacity="0.85"
+					data-filter-histogram-bar
+				/>
+			{/each}
+
+			<!-- Brush overlay rect -->
+			{#if brushRect}
+				<rect
+					x={brushRect.x}
+					y={0}
+					width={brushRect.width}
+					height={innerHeight}
+					fill={color}
+					opacity="0.15"
+					pointer-events="none"
+				/>
+				<rect
+					x={brushRect.x}
+					y={0}
+					width={1}
+					height={innerHeight}
+					fill={color}
+					opacity="0.6"
+					pointer-events="none"
+				/>
+				<rect
+					x={brushRect.x + brushRect.width - 1}
+					y={0}
+					width={1}
+					height={innerHeight}
+					fill={color}
+					opacity="0.6"
+					pointer-events="none"
+				/>
+			{/if}
+		</g>
+	</svg>
+	{#if activeRange}
+		<div data-filter-histogram-range>
+			{fmt(activeRange[0])} – {fmt(activeRange[1])}
+			<button
+				data-filter-histogram-clear
+				onclick={() => cf?.clearFilter(field)}
+				aria-label="Clear {label || field} filter"
+			>✕</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-filter-histogram] {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		font-size: 12px;
+		color: rgb(var(--color-surface-z6, 100 116 139));
+	}
+	[data-filter-histogram-label] {
+		font-weight: 600;
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		opacity: 0.7;
+	}
+	[data-filter-histogram-range] {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 11px;
+		opacity: 0.8;
+	}
+	[data-filter-histogram-clear] {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0 2px;
+		font-size: 10px;
+		opacity: 0.6;
+		line-height: 1;
+	}
+	[data-filter-histogram-clear]:hover {
+		opacity: 1;
+	}
+</style>

package/src/crossfilter/FilterSlider.svelte

@@ -0,0 +1,83 @@
+<script>
+	import { getContext } from 'svelte'
+
+	/**
+	 * Dual range slider for a continuous crossfilter dimension.
+	 * NOTE: Interim implementation using HTML range inputs.
+	 * The spec calls for a Plot+Point+brush architecture, deferred until brush geom is implemented.
+	 */
+	let { field, min, max, step = 0.1, label = '' } = $props()
+
+	const cf = getContext('crossfilter')
+
+	// Initialize from props; $effect keeps in sync when min/max change
+	let low = $state(0)
+	let high = $state(100)
+
+	$effect(() => {
+		low = min ?? 0
+		high = max ?? 100
+	})
+
+	function handleLow(e) {
+		low = Math.min(Number(e.currentTarget.value), high)
+		cf?.setRange(field, [low, high])
+	}
+
+	function handleHigh(e) {
+		high = Math.max(Number(e.currentTarget.value), low)
+		cf?.setRange(field, [low, high])
+	}
+</script>
+
+<div data-filter-slider data-filter-field={field}>
+	{#if label}
+		<span data-filter-slider-label>{label}</span>
+	{/if}
+	<div data-filter-slider-inputs>
+		<input
+			type="range"
+			{min}
+			{max}
+			{step}
+			value={low}
+			oninput={handleLow}
+			aria-label="Minimum {label || field}"
+			data-filter-slider-low
+		/>
+		<input
+			type="range"
+			{min}
+			{max}
+			{step}
+			value={high}
+			oninput={handleHigh}
+			aria-label="Maximum {label || field}"
+			data-filter-slider-high
+		/>
+	</div>
+	<div data-filter-slider-display>
+		{low} – {high}
+	</div>
+</div>
+
+<style>
+	[data-filter-slider] {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		font-size: 12px;
+	}
+	[data-filter-slider-inputs] {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	[data-filter-slider-label] {
+		font-weight: 600;
+	}
+	[data-filter-slider-display] {
+		color: currentColor;
+		opacity: 0.7;
+	}
+</style>

package/src/crossfilter/createCrossFilter.svelte.js

@@ -0,0 +1,124 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+
+/**
+ * Creates a reactive cross-filter state object.
+ *
+ * Filter values follow the spec type:
+ *   FilterState = Map<string, Set<unknown> | [number, number]>
+ *   - categorical: raw Set of selected values
+ *   - continuous:  [min, max] tuple
+ *
+ * Exposes a `filters` getter so CrossFilter.svelte can bind to current state.
+ * Exposes a `version` counter that increments on every mutation, giving
+ * components a simple reactive signal to watch for filter changes.
+ *
+ * @returns {CrossFilter}
+ */
+
+function toggleCategoricalInMap(filters, dimension, value) {
+	const existing = filters.get(dimension)
+	const set = existing instanceof Set ? new SvelteSet(existing) : new SvelteSet()
+	if (set.has(value)) {
+		set.delete(value)
+	} else {
+		set.add(value)
+	}
+	if (set.size === 0) {
+		filters.delete(dimension)
+	} else {
+		filters.set(dimension, set)
+	}
+}
+
+export function createCrossFilter() {
+	// Map<dimension, Set<unknown> | [number, number]>
+	const filters = new SvelteMap()
+
+	// Simple counter incremented on every mutation. Components read cf.version
+	// inside $effect to reactively recompute when any filter changes.
+	let version = $state(0)
+
+	/**
+	 * Returns true if any filter is active on this dimension.
+	 * @param {string} dimension
+	 */
+	function isFiltered(dimension) {
+		const f = filters.get(dimension)
+		if (!f) return false
+		if (f instanceof Set) return f.size > 0
+		return true // range: always active if present
+	}
+
+	/**
+	 * Returns true if a value on this dimension is NOT in the active filter.
+	 * Returns false when no filter is active on this dimension.
+	 *
+	 * @param {string} dimension
+	 * @param {unknown} value
+	 */
+	function isDimmed(dimension, value) {
+		const f = filters.get(dimension)
+		if (!f) return false
+		if (f instanceof Set) {
+			return !f.has(value)
+		}
+		// [min, max] range
+		const [lo, hi] = f
+		return Number(value) < lo || Number(value) > hi
+	}
+
+	/**
+	 * Toggles a categorical value for a dimension.
+	 * Adds when absent, removes when present.
+	 * Clears the dimension filter when the last value is removed.
+	 *
+	 * @param {string} dimension
+	 * @param {unknown} value
+	 */
+	function toggleCategorical(dimension, value) {
+		toggleCategoricalInMap(filters, dimension, value)
+		version++
+	}
+
+	/**
+	 * Sets a continuous range filter for a dimension.
+	 * @param {string} dimension
+	 * @param {[number, number]} range
+	 */
+	function setRange(dimension, range) {
+		filters.set(dimension, [range[0], range[1]])
+		version++
+	}
+
+	/**
+	 * Clears the filter for a single dimension.
+	 * @param {string} dimension
+	 */
+	function clearFilter(dimension) {
+		filters.delete(dimension)
+		version++
+	}
+
+	/** Clears all active filters. */
+	function clearAll() {
+		filters.clear()
+		version++
+	}
+
+	return {
+		/** @readonly — reactive Map of current filter state */
+		get filters() {
+			return filters
+		},
+		/** @readonly — increments on every mutation; read inside $effect to react to any filter change */
+		get version() {
+			return version
+		},
+		isFiltered,
+		isDimmed,
+		toggleCategorical,
+		setRange,
+		clearFilter,
+		clearAll
+	}
+}

package/src/elements/Bar.svelte

@@ -1,29 +1,33 @@
 <script>
 	import { format } from 'd3-format'
+	import { get } from 'svelte/store'
 	import Label from './Label.svelte'
 
-	export let rank
-	export let value
-	export let name
-	export let formatString = '.1%'
-	export let scales
-	export let height = 60
-	export let fill
-	export let spaceBetween = 5
+	let {
+		rank,
+		value,
+		name,
+		formatString = '.1%',
+		scales,
+		height = 60,
+		fill,
+		spaceBetween = 5
+	} = $props()
 
 	const textHeight = 16
 	const charWidth = 12
-	$: y = rank * (height + spaceBetween)
-	$: width = $scales.x(value)
+	let y = $derived(rank * (height + spaceBetween))
+	let width = $derived(get(scales).x(value))
 
-	$: textWidth = name.length * charWidth
-	$: textOffset = width <= textWidth ? width + charWidth : width
-	$: textAnchor = textOffset > width ? 'start' : 'end'
+	let textWidth = $derived(name.length * charWidth)
+	let textOffset = $derived(width <= textWidth ? width + charWidth : width)
+	let textAnchor = $derived(textOffset > width ? 'start' : 'end')
 
-	$: formattedValue = format(formatString)(value)
+	let formattedValue = $derived(format(formatString)(value))
+	let xOrigin = $derived(get(scales).x(0))
 </script>
 
-<rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
-<rect x={$scales.x(0)} {y} width={5} {height} {fill} />
+<rect x={xOrigin} {y} {width} {height} {fill} opacity={0.5} />
+<rect x={xOrigin} {y} width={5} {height} {fill} />
 <Label x={width} y={y + textHeight + 8} anchor={textAnchor} text={name} />
 <Label x={width} y={y + height - 14} anchor={textAnchor} text={formattedValue} small />

package/src/elements/ColorRamp.svelte

@@ -2,36 +2,36 @@
 	import { scaleLinear } from 'd3-scale'
 	import { id as uniqueId } from '@rokkit/core'
 
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let height = 10
-	export let width = 100
-	export let tickCount = 5
-	export let scale
+	let { x = 0, y = 0, textSize = 5, height = 10, width = 100, tickCount = 5, scale } = $props()
 
-	$: scaleTicks = scaleLinear()
-		.range([x, x + width])
-		.domain(scale.domain())
-	$: scalePercent = scaleLinear().range([0, 100]).domain(scale.domain())
-	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + width])
+			.domain(scale.domain())
+	)
+	let scalePercent = $derived(scaleLinear().range([0, 100]).domain(scale.domain()))
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+	)
 
-	$: colors = ticks.map(({ value }) => ({
-		color: scale(value),
-		offset: `${scalePercent(value)}%`
-	}))
-	$: id = uniqueId('legend-')
+	let colors = $derived(
+		ticks.map(({ value }) => ({
+			color: scale(value),
+			offset: `${scalePercent(value)}%`
+		}))
+	)
+	let id = $state(uniqueId('legend-'))
 </script>
 
 <defs>
 	<linearGradient {id}>
-		{#each colors as { color, offset }}
+		{#each colors as { color, offset }, index (index)}
 			<stop stop-color={color} {offset} />
 		{/each}
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, value }}
+{#each ticks as { x, value }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{value}</text>
 {/each}

package/src/elements/ContinuousLegend.svelte

@@ -1,37 +1,59 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	// import { id as uniqueId } from '@rokkit/core'
 
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let height = 10
-	export let width = 100
-	export let tickCount = 5
-	export let scale
-	export let id = 'legend'
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		height = 10,
+		width = 100,
+		tickCount = 5,
+		scale,
+		id = 'legend'
+	} = $props()
 
-	$: scaleTicks = scaleLinear()
-		.range([x, x + 100])
-		.domain(scale.domain())
-	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + width])
+			.domain(scale.domain())
+	)
 
-	$: colors = scale.range()
-	// $: id = uniqueId('legend-')
+	let ticks = $derived.by(() => {
+		// scaleSequential/scaleDiverging have .ticks(); scaleLinear does too
+		const rawTicks = typeof scale.ticks === 'function'
+			? scale.ticks(tickCount)
+			: scale.domain()
+		return rawTicks.map((d) => ({ x: scaleTicks(d), label: d }))
+	})
+
+	// Generate gradient stops by sampling the scale at even intervals.
+	// Works for scaleSequential, scaleDiverging, and scaleLinear with range().
+	const STOP_COUNT = 10
+	let stops = $derived.by(() => {
+		const domain = scale.domain()
+		const min = domain[0]
+		const max = domain[domain.length - 1]
+		return Array.from({ length: STOP_COUNT + 1 }, (_, i) => {
+			const t = i / STOP_COUNT
+			const value = min + t * (max - min)
+			return { offset: `${(t * 100).toFixed(1)}%`, color: scale(value) }
+		})
+	})
 </script>
 
 <defs>
 	<linearGradient {id}>
-		<stop stop-color={colors[0]} offset="0%" />
-		<stop stop-color={colors[1]} offset="100%" />
+		{#each stops as { offset, color } (offset)}
+			<stop stop-color={color} {offset} />
+		{/each}
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, label }}
+{#each ticks as { x, label }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{label}</text>
 {/each}
-<line x1={x} y1={y + 2 * height} x2={x + 100} y2={y + 2 * height} />
+<line x1={x} y1={y + 2 * height} x2={x + width} y2={y + 2 * height} />
 
 <style>
 	line {