@rokkit/chart 1.0.0-next.99 → 1.0.2

package/src/Sparkline.svelte

@@ -0,0 +1,108 @@
+<script>
+	import { scaleLinear } from 'd3-scale'
+	import { line as d3line, area as d3area, curveCatmullRom } from 'd3-shape'
+	import PatternDef from './patterns/PatternDef.svelte'
+	import { PATTERNS } from './patterns/patterns.js'
+
+	/**
+	 * @type {number[] | object[]}
+	 */
+	let {
+		data = [],
+		field = undefined,
+		type = 'line',
+		curve = 'linear',
+		color = 'primary',
+		pattern = undefined,
+		width = 80,
+		height = 24,
+		min = undefined,
+		max = undefined
+	} = $props()
+
+	const values = $derived(field ? data.map((d) => Number(d[field])) : data.map(Number))
+
+	const yMin = $derived(min ?? Math.min(...values))
+	const yMax = $derived(max ?? Math.max(...values))
+
+	const xScale = $derived(
+		scaleLinear()
+			.domain([0, values.length - 1])
+			.range([0, width])
+	)
+	const yScale = $derived(scaleLinear().domain([yMin, yMax]).range([height, 0]))
+
+	const linePath = $derived.by(() => {
+		const gen = d3line()
+			.x((_, i) => xScale(i))
+			.y((v) => yScale(v))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		return gen(values)
+	})
+
+	const areaPath = $derived.by(() => {
+		const gen = d3area()
+			.x((_, i) => xScale(i))
+			.y0(height)
+			.y1((v) => yScale(v))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		return gen(values)
+	})
+
+	const barWidth = $derived(Math.max(1, width / values.length - 1))
+
+	const strokeColor = $derived(`rgb(var(--color-${color}-500, 100,116,139))`)
+	const fillColor = $derived(`rgba(var(--color-${color}-300), 0.25)`)
+
+	const patternId = 'sparkline-pattern'
+	const patternMarks = $derived(pattern ? (PATTERNS[pattern] ?? null) : null)
+</script>
+
+<svg {width} {height} style="overflow: visible; display: block;">
+	{#if patternMarks}
+		<defs>
+			<PatternDef id={patternId} marks={patternMarks} stroke={strokeColor} />
+		</defs>
+	{/if}
+
+	{#if type === 'line'}
+		<path
+			d={linePath}
+			fill="none"
+			stroke={strokeColor}
+			stroke-width="1.5"
+			stroke-linejoin="round"
+			stroke-linecap="round"
+		/>
+	{:else if type === 'area'}
+		<path d={areaPath} fill={patternMarks ? `url(#${patternId})` : fillColor} stroke="none" />
+		<path
+			d={linePath}
+			fill="none"
+			stroke={strokeColor}
+			stroke-width="1.5"
+			stroke-linejoin="round"
+			stroke-linecap="round"
+		/>
+	{:else if type === 'bar'}
+		{#each values as v, i (i)}
+			<rect
+				x={xScale(i) - barWidth / 2}
+				y={yScale(v)}
+				width={barWidth}
+				height={height - yScale(v)}
+				fill={strokeColor}
+			/>
+			{#if patternMarks}
+				<rect
+					x={xScale(i) - barWidth / 2}
+					y={yScale(v)}
+					width={barWidth}
+					height={height - yScale(v)}
+					fill="url(#{patternId})"
+					pointer-events="none"
+				/>
+			{/if}
+		{/each}
+	{/if}
+</svg>

package/src/Symbol.svelte

@@ -1,17 +1,21 @@
 <script>
 	import { components } from './symbols'
 
-	export let x = 0
-	export let y = 0
-	export let size = 10
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
-	export let name = 'circle'
-	/** @type Object<string, any> */
-	export let using = components
+	let {
+		x = 0,
+		y = 0,
+		size = 10,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		name = 'circle',
+		...restProps
+	} = $props()
 
-	$: component = using[name] || using.default
-	$: props = using[name] ? $$restProps : { name, ...$$restProps }
+	let RenderShape = $derived(components[name] ?? components.default)
+	let props = $derived({ ...restProps, x, y, size, fill, stroke })
 </script>
 
-<svelte:component this={component} {x} {y} {size} {fill} {stroke} {...props} />
+<!-- {#snippet defaultSymbol(props)}
+	<circle cx={x} cy={y} r={size / 2} {fill} {stroke} />
+{/snippet} -->
+<RenderShape {...props} />

package/src/Texture.svelte

@@ -1,11 +1,13 @@
 <script>
-	export let id
-	export let path
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
-	export let thickness = 0.5
-	export let patternUnits = 'userSpaceOnUse'
-	export let size = 10
+	let {
+		id,
+		path,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		thickness = 0.5,
+		patternUnits = 'userSpaceOnUse',
+		size = 10
+	} = $props()
 </script>
 
 <pattern {id} {patternUnits} width={size} height={size}>

package/src/charts/AreaChart.svelte

@@ -0,0 +1,30 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Area from '../geoms/Area.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		fill = undefined,
+		stat = 'identity',
+		curve = undefined,
+		pattern = undefined,
+		stack = false,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		xFormat = undefined,
+		yFormat = undefined,
+		xTicks = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+	<Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
+</Plot>

package/src/charts/BarChart.svelte

@@ -0,0 +1,31 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Bar from '../geoms/Bar.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').BarChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		fill = undefined, // mapped to color channel
+		pattern = undefined,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		stat = 'identity',
+		stack = false,
+		label = false,
+		tooltip = false,
+		xFormat = undefined,
+		yFormat = undefined,
+		xTicks = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+	<Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
+</Plot>

package/src/charts/BoxPlot.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Box from '../geoms/Box.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').BoxViolinChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		fill = undefined,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		yFormat = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {yFormat} {yTicks} {minorTicks}>
+	<Box {x} {y} {fill} />
+</Plot>

package/src/charts/BubbleChart.svelte

@@ -0,0 +1,28 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Point from '../geoms/Point.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').ScatterBubbleChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		symbol: _symbol = undefined,
+		size, // required: field name for bubble radius
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		xFormat = undefined,
+		yFormat = undefined,
+		xTicks = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+	<Point {x} {y} {color} {size} />
+</Plot>

package/src/charts/LineChart.svelte

@@ -0,0 +1,31 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Line from '../geoms/Line.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		stat = 'identity',
+		symbol = undefined,
+		curve = undefined, // forwarded to Line options
+		label = false,
+		tooltip = false,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		xFormat = undefined,
+		yFormat = undefined,
+		xTicks = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+	<Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
+</Plot>

package/src/charts/PieChart.svelte

@@ -0,0 +1,35 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Arc from '../geoms/Arc.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').PieChartProps} */
+	let {
+		data = [],
+		label = undefined,
+		y = undefined,
+		fill = undefined,
+		pattern = undefined,
+		innerRadius = 0,
+		labelFn = undefined,
+		tooltip = false,
+		width = 400,
+		height = 400,
+		mode = 'light',
+		legend = false,
+		stat = 'sum'
+	} = $props()
+</script>
+
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	grid={false}
+	axes={false}
+	margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
+	{legend}
+	{tooltip}
+>
+	<Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} options={{ innerRadius }} />
+</Plot>

package/src/charts/ScatterPlot.svelte

@@ -0,0 +1,31 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Point from '../geoms/Point.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').ScatterBubbleChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		symbol = undefined,
+		size = undefined,
+		label = false,
+		tooltip = false,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		jitter = undefined,
+		xFormat = undefined,
+		yFormat = undefined,
+		xTicks = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+	<Point {x} {y} {color} {size} {symbol} {label} options={{ jitter }} />
+</Plot>

package/src/charts/ViolinPlot.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Plot from '../Plot.svelte'
+	import Violin from '../geoms/Violin.svelte'
+
+	/** @type {import('../lib/plot/chartProps.js').BoxViolinChartProps} */
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		fill = undefined,
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		yFormat = undefined,
+		yTicks = undefined,
+		minorTicks = false
+	} = $props()
+</script>
+
+<Plot {data} {width} {height} {mode} {grid} {legend} {yFormat} {yTicks} {minorTicks}>
+	<Violin {x} {y} {fill} />
+</Plot>

package/src/crossfilter/CrossFilter.svelte

@@ -0,0 +1,42 @@
+<script>
+	import { setContext, untrack } from 'svelte'
+	import { createCrossFilter } from './createCrossFilter.svelte.js'
+
+	/**
+	 * @type {{
+	 *   crossfilter?: ReturnType<typeof createCrossFilter>,
+	 *   mode?: 'dim' | 'hide',
+	 *   filters?: import('./createCrossFilter.svelte.js').FilterState,
+	 *   children?: import('svelte').Snippet
+	 * }}
+	 */
+	let {
+		crossfilter: externalCf = undefined,
+		mode = 'dim',
+		filters = $bindable(),
+		children
+	} = $props()
+
+	// Use an externally provided instance (spec/helpers API) or create one internally.
+	// untrack() suppresses "captures initial value" warning — intentional: the cf
+	// instance is locked in at construction time and must not recreate on prop changes.
+	const cf = untrack(() => externalCf ?? createCrossFilter())
+
+	// Expose the reactive filters Map to callers via bind:filters
+	$effect(() => {
+		filters = cf.filters
+	})
+
+	setContext('crossfilter', cf)
+	// Use a getter object so children can read .mode reactively
+	const modeRef = {
+		get mode() {
+			return mode
+		}
+	}
+	setContext('crossfilter-mode', modeRef)
+</script>
+
+<div data-crossfilter data-crossfilter-mode={mode}>
+	{@render children?.()}
+</div>

package/src/crossfilter/FilterBar.svelte

@@ -0,0 +1,24 @@
+<script>
+	import PlotChart from '../Plot.svelte'
+	import Bar from '../geoms/Bar.svelte'
+
+	let {
+		data = [],
+		field,
+		valueField,
+		stat = 'sum',
+		width = 300,
+		height = 120,
+		mode = 'light'
+	} = $props()
+
+	const spec = $derived({
+		x: field,
+		y: valueField
+	})
+</script>
+
+<!-- FilterBar must be used inside a <CrossFilter> parent. Does not create its own context. -->
+<PlotChart {data} {spec} {width} {height} {mode} grid={false} legend={false}>
+	<Bar x={field} y={valueField} {stat} filterable={true} />
+</PlotChart>