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

package/src/Sparkline.svelte

@@ -1,69 +1,108 @@
 <script>
-  import { scaleLinear } from 'd3-scale'
-  import { line as d3line, area as d3area, curveCatmullRom } from 'd3-shape'
+	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',
-    width = 80,
-    height = 24,
-    min = undefined,
-    max = undefined
-  } = $props()
+	/**
+	 * @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 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 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 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 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 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 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 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 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={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}
-      />
-    {/each}
-  {/if}
+	{#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/charts/AreaChart.svelte

@@ -1,25 +1,27 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Area from '../geoms/Area.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend}>
-  <Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
+<Plot {data} {width} {height} {mode} {grid} {legend} {xFormat} {yFormat}>
+	<Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
 </Plot>

package/src/charts/BarChart.svelte

@@ -1,26 +1,28 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Bar from '../geoms/Bar.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
-  <Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat}>
+	<Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
 </Plot>

package/src/charts/BoxPlot.svelte

@@ -1,21 +1,21 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Box from '../geoms/Box.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend}>
-  <Box {x} {y} {fill} />
+	<Box {x} {y} {fill} />
 </Plot>

package/src/charts/BubbleChart.svelte

@@ -1,23 +1,23 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Point from '../geoms/Point.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend}>
-  <Point {x} {y} {color} {size} />
+	<Point {x} {y} {color} {size} />
 </Plot>

package/src/charts/LineChart.svelte

@@ -1,26 +1,26 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Line from '../geoms/Line.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
-  <Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
+	<Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
 </Plot>

package/src/charts/PieChart.svelte

@@ -1,25 +1,35 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Arc from '../geoms/Arc.svelte'
+	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()
+	/** @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
+	{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

@@ -1,25 +1,26 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Point from '../geoms/Point.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip}>
-  <Point {x} {y} {color} {size} {symbol} {label} />
+	<Point {x} {y} {color} {size} {symbol} {label} options={{ jitter }} />
 </Plot>

package/src/charts/ViolinPlot.svelte

@@ -1,21 +1,21 @@
 <script>
-  import Plot from '../Plot.svelte'
-  import Violin from '../geoms/Violin.svelte'
+	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
-  } = $props()
+	/** @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
+	} = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend}>
-  <Violin {x} {y} {fill} />
+	<Violin {x} {y} {fill} />
 </Plot>

package/src/crossfilter/CrossFilter.svelte

@@ -1,38 +1,42 @@
 <script>
-  import { setContext, untrack } from 'svelte'
-  import { createCrossFilter } from './createCrossFilter.svelte.js'
+	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()
+	/**
+	 * @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())
+	// 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
-  })
+	// 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)
+	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?.()}
+	{@render children?.()}
 </div>

package/src/crossfilter/FilterBar.svelte

@@ -1,32 +1,24 @@
 <script>
-  import PlotChart from '../Plot.svelte'
-  import Bar from '../geoms/Bar.svelte'
+	import PlotChart from '../Plot.svelte'
+	import Bar from '../geoms/Bar.svelte'
 
-  let {
-    data = [],
-    field,
-    valueField,
-    stat = 'sum',
-    width = 300,
-    height = 120,
-    mode = 'light'
-  } = $props()
+	let {
+		data = [],
+		field,
+		valueField,
+		stat = 'sum',
+		width = 300,
+		height = 120,
+		mode = 'light'
+	} = $props()
 
-  const spec = $derived({
-    x: field,
-    y: valueField
-  })
+	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 {data} {spec} {width} {height} {mode} grid={false} legend={false}>
+	<Bar x={field} y={valueField} {stat} filterable={true} />
 </PlotChart>