@rokkit/chart 1.0.0-next.12 → 1.0.0-next.122

package/src/Plot/Root.svelte

@@ -0,0 +1,114 @@
+<script>
+	import { setContext } from 'svelte'
+	import { ChartBrewer } from '../lib/brewing/index.svelte.js'
+
+	let {
+		data = [],
+		width = 600,
+		height = 400,
+		margin = { top: 20, right: 30, bottom: 40, left: 50 },
+		fill = null,
+		responsive = true,
+		animationDuration = 300
+	} = $props()
+
+	// Create chart brewer instance
+	let brewer = $state(
+		new ChartBrewer({
+			width,
+			height,
+			margin,
+			animationDuration
+		})
+	)
+
+	// Chart dimensions derived from brewer
+	let dimensions = $derived(brewer.getDimensions())
+
+	// Process data
+	$effect(() => {
+		// If data has a select method (dataset object), call it to get actual data
+		const chartData = data.select && typeof data.select === 'function' ? data.select() : data
+
+		// Update brewer with data and fields
+		brewer.setData(chartData)
+		brewer.setFields({ color: fill })
+
+		// Create scales after setting data
+		brewer.createScales()
+	})
+
+	// Update chart dimensions when props change
+	$effect(() => {
+		brewer.setDimensions({ width, height, margin })
+	})
+
+	// Provide chart context to child components
+	setContext('chart-brewer', brewer)
+
+	// Handle responsive behavior
+	let container
+
+	$effect(() => {
+		if (!responsive || !container || !document) return
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0]
+			if (!entry) return
+
+			const containerWidth = entry.contentRect.width
+			const aspectRatio = height / width
+
+			// Update chart dimensions while maintaining aspect ratio
+			brewer.setDimensions({
+				width: containerWidth,
+				height: containerWidth * aspectRatio
+			})
+
+			// Update scales after dimensions change
+			brewer.createScales()
+		})
+
+		// Start observing container size
+		resizeObserver.observe(container)
+
+		return () => {
+			resizeObserver.disconnect()
+		}
+	})
+</script>
+
+<div class="chart-container" bind:this={container} data-plot-root>
+	<svg
+		width={dimensions.width}
+		height={dimensions.height}
+		viewBox="0 0 {dimensions.width} {dimensions.height}"
+		role="img"
+		aria-label="Chart visualization"
+	>
+		<g
+			class="chart-area"
+			transform="translate({dimensions.margin.left}, {dimensions.margin.top})"
+			data-plot-canvas
+		>
+			<slot />
+		</g>
+	</svg>
+</div>
+
+<style>
+	.chart-container {
+		position: relative;
+		width: 100%;
+		height: auto;
+	}
+
+	svg {
+		display: block;
+		overflow: visible;
+	}
+
+	.chart-area {
+		pointer-events: all;
+	}
+</style>

package/src/Plot/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './Root.svelte'
+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'

package/src/Symbol.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { components } from './symbols'
+
+	let {
+		x = 0,
+		y = 0,
+		size = 10,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		name = 'circle',
+		...restProps
+	} = $props()
+
+	let RenderShape = $derived(components[name] ?? components.default)
+	let props = $derived({ ...restProps, x, y, size, fill, stroke })
+</script>
+
+<!-- {#snippet defaultSymbol(props)}
+	<circle cx={x} cy={y} r={size / 2} {fill} {stroke} />
+{/snippet} -->
+<RenderShape {...props} />

package/src/{chart/Texture.svelte → Texture.svelte}

@@ -1,8 +1,8 @@
 <script>
 	export let id
-	export let fill
 	export let path
-	export let contrast
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
 	export let thickness = 0.5
 	export let patternUnits = 'userSpaceOnUse'
 	export let size = 10
@@ -11,6 +11,6 @@
 <pattern {id} {patternUnits} width={size} height={size}>
 	<rect width={size} height={size} {fill} />
 	{#if path}
-		<path d={path} fill="none" stroke={contrast} stroke-width={thickness} />
+		<path d={path} fill="none" {stroke} stroke-width={thickness} />
 	{/if}
 </pattern>

package/src/elements/Bar.svelte

@@ -25,11 +25,5 @@
 
 <rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
 <rect x={$scales.x(0)} {y} width={5} {height} {fill} />
-<Label x={width} y={y + textHeight + 8} anchor={textAnchor} label={name} />
-<Label
-	x={width}
-	y={y + height - 14}
-	anchor={textAnchor}
-	label={formattedValue}
-	small
-/>
+<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

@@ -1,39 +1,37 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../lib/utils'
+	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,6 +1,6 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../components/lib/utils'
+	// import { id as uniqueId } from '@rokkit/core'
 
 	export let x = 0
 	export let y = 0
@@ -9,16 +9,15 @@
 	export let width = 100
 	export let tickCount = 5
 	export let scale
+	export let id = 'legend'
 
 	$: scaleTicks = scaleLinear()
 		.range([x, x + 100])
 		.domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), label: d }))
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
 
 	$: colors = scale.range()
-	$: id = uniqueId('legend-')
+	// $: id = uniqueId('legend-')
 </script>
 
 <defs>
@@ -28,7 +27,7 @@
 	</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}

package/src/elements/DefinePatterns.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { uniq } from 'ramda'
+
+	export let size = 10
+	export let patternUnits = 'userSpaceOnUse'
+	/** @type {Array<import('./types').Pattern>} */
+	export let patterns = []
+
+	$: names = uniq(patterns.map(({ id }) => id))
+</script>
+
+{#if names.length < patterns.length}
+	<error> Patterns should be an array and should have unique names for each pattern </error>
+{:else if patterns.length > 0}
+	<defs>
+		{#each patterns as { id, component, fill, stroke }, index (index)}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<svelte:component this={component} {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -6,17 +6,15 @@
 	export let space = 2
 	export let padding = 5
 	export let scale
-	export let tickCount
+	export let tickCount = 10
 
 	$: sizeWithSpace = size + space
 	$: ticks = scale.ticks.apply(scale, [tickCount])
 </script>
 
-{#each ticks as tick, i}
-	<text
-		x={x + padding + i * sizeWithSpace + size / 2}
-		y={y + size / 2}
-		font-size={textSize}>{tick}</text
+{#each ticks as tick, i (i)}
+	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
+		>{tick}</text
 	>
 	<rect
 		x={x + padding + i * sizeWithSpace}

package/src/elements/Label.svelte

@@ -1,12 +1,13 @@
 <script>
-	export let small = false
-	export let label
-	export let angle = 0
-	export let anchor = 'middle'
 	export let x
 	export let y
+	export let text
+	export let angle = 0
+	export let small = false
+	export let anchor = 'middle'
 
 	$: transform = `translate(${x},${y}) rotate(${angle})`
+	$: anchor = ['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle'
 </script>
 
-<text class="label" class:small text-anchor={anchor} {transform}>{label}</text>
+<text class="label" class:small text-anchor={anchor} {transform}>{text}</text>

package/src/elements/SymbolGrid.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { swatch, swatchGrid } from '../old_lib'
+	import Symbol from '../Symbol.svelte'
+
+	export let base = 'teal'
+	export let size = 4
+	export let shade = 600
+
+	$: grid = swatchGrid($swatch.keys.symbol.length, size, 10)
+</script>
+
+<svg viewBox="0 0 {grid.width} {grid.height}">
+	{#each grid.data as { x, y, r }, index (index)}
+		<Symbol
+			{x}
+			{y}
+			size={r * 2}
+			name={$swatch.keys.symbol[index]}
+			fill={$swatch.palette[base][shade]}
+			stroke={$swatch.palette[base][shade]}
+		/>
+	{/each}
+</svg>

package/src/elements/index.js

@@ -0,0 +1,6 @@
+export { default as Bar } from './Bar.svelte'
+export { default as ColorRamp } from './ColorRamp.svelte'
+export { default as ContinuousLegend } from './ContinuousLegend.svelte'
+export { default as Label } from './Label.svelte'
+export { default as DefinePatterns } from './DefinePatterns.svelte'
+export { default as SymbolGrid } from './SymbolGrid.svelte'

package/src/examples/BarChartExample.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { Plot } from '../index.js'
+	import { dataset } from '@rokkit/data'
+
+	// Sample data
+	const sampleData = [
+		{ model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+		{ model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+		{ model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+		{ model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+		{ model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+		{ model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+		{ model: 'Model G', name: 'Product 7', category: 'Home', count: 35 }
+	]
+
+	// Use the dataset class to process the data
+	const data = dataset(sampleData)
+		.groupBy('category')
+		.summarize('name', { count: (values) => values.length })
+		.rollup()
+
+	// Chart dimensions
+	const width = 600
+	const height = 400
+	const margin = { top: 20, right: 100, bottom: 60, left: 60 }
+
+	// Click handler for bars
+	function handleBarClick(item) {
+		console.log('Bar clicked:', item)
+		alert(`Clicked on ${item.category} with count ${item.count}`)
+	}
+</script>
+
+<div class="example">
+	<h2>Bar Chart Example</h2>
+
+	<div class="chart-wrapper">
+		<Plot.Root {data} {width} {height} {margin} fill="category">
+			<Plot.Grid direction="y" lineStyle="dashed" />
+			<Plot.Axis type="x" field="category" label="Product Category" />
+			<Plot.Axis type="y" field="count" label="Number of Products" />
+			<Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} />
+			<Plot.Legend title="Categories" />
+		</Plot.Root>
+	</div>
+
+	<div class="code-example">
+		<h3>Example Code:</h3>
+		<pre>
+<!-- &lt;script&gt;
+  import { Plot } from '@rokkit/chart';
+  import { dataset } from '@rokkit/data';
+
+  // Sample data
+  const sampleData = [
+    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+    { model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+    { model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+    { model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+    { model: 'Model G', name: 'Product 7', category: 'Home', count: 35 },
+  ];
+
+  // Use the dataset class to process the data
+  const data = dataset(sampleData)
+    .groupBy('category')
+    .summarize('name', { count: values => values.length })
+    .rollup();
+&lt;/script&gt;
+
+&lt;Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 100, bottom: 60, left: 60 }} fill="category"&gt;
+  &lt;Plot.Grid direction="y" lineStyle="dashed" /&gt;
+  &lt;Plot.Axis type="x" field="category" label="Product Category" /&gt;
+  &lt;Plot.Axis type="y" field="count" label="Number of Products" /&gt;
+  &lt;Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} /&gt;
+  &lt;Plot.Legend title="Categories" /&gt;
+&lt;/Plot.Root&gt; -->
+    </pre>
+	</div>
+</div>

package/src/index.js

@@ -1,16 +1,18 @@
-// export { aes } from './lib/aes'
-// export { timelapse } from './lib/timelapse'
-// export { axisTicks } from './lib/axis'
-export { timer, elapsed } from './lib/timer'
-// export { default as Chart } from './chart/Chart.svelte'
-// export { default as Axis } from './chart/Axis.svelte'
-export { default as Swatch } from './chart/Swatch.svelte'
-// export { default as AxisTicks } from './chart/AxisTicks.svelte'
-// export { default as AxisGrid } from './chart/AxisGrid.svelte'
-// export { default as AxisLabels } from './chart/AxisLabels.svelte'
-export { default as BarPlot } from './plots/BarPlot.svelte'
-export { default as LinePlot } from './plots/LinePlot.svelte'
-export { default as BoxPlot } from './plots/BoxPlot.svelte'
-export { default as ViolinPlot } from './plots/ViolinPlot.svelte'
-export { default as ScatterPlot } from './plots/ScatterPlot.svelte'
-export * from './components/lib'
+import Root from './Plot/Root.svelte'
+import Axis from './Plot/Axis.svelte'
+import Bar from './Plot/Bar.svelte'
+import Grid from './Plot/Grid.svelte'
+import Legend from './Plot/Legend.svelte'
+
+// Export components
+export const Plot = {
+	Root,
+	Axis,
+	Bar,
+	Grid,
+	Legend
+}
+
+// Export utilities
+export { ChartBrewer } from './lib/brewing/index.svelte.js'
+export * from './lib/brewing/index.svelte.js'

package/src/lib/brewing/axes.svelte.js

@@ -0,0 +1,177 @@
+// import { scaleBand } from 'd3-scale'
+
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').TickData} TickData
+ * @typedef {import('./types').AxisData} AxisData
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Creates x-axis tick data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.x - X-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createXAxis(scales, dimensions, options = {}) {
+	if (!scales.x) return { ticks: [] }
+
+	const { tickCount = null, tickFormat = null, label = '' } = options
+	const xScale = scales.x
+
+	// Determine tick values
+	let tickValues
+	if (xScale.ticks) {
+		// For continuous scales (linear, time)
+		tickValues = tickCount !== null ? xScale.ticks(tickCount) : xScale.ticks()
+	} else {
+		// For band scales
+		tickValues = xScale.domain()
+		if (tickCount !== null && tickCount < tickValues.length) {
+			const step = Math.max(1, Math.floor(tickValues.length / tickCount))
+			tickValues = tickValues.filter((_, i) => i % step === 0)
+		}
+	}
+
+	// Format ticks
+	const formatter = tickFormat || ((v) => v)
+
+	// Generate tick data
+	const ticks = tickValues.map((value) => {
+		const position = xScale.bandwidth ? xScale(value) + xScale.bandwidth() / 2 : xScale(value)
+
+		return {
+			value,
+			position,
+			formattedValue: formatter(value)
+		}
+	})
+
+	return {
+		ticks,
+		label,
+		transform: `translate(0, ${dimensions.innerHeight})`,
+		labelTransform: `translate(${dimensions.innerWidth / 2}, 35)`
+	}
+}
+
+/**
+ * Creates y-axis tick data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.y - Y-axis scale
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Axis options
+ * @param {number} [options.tickCount] - Number of ticks to show
+ * @param {Function} [options.tickFormat] - Tick formatting function
+ * @param {string} [options.label] - Axis label
+ * @returns {AxisData} Axis rendering data
+ */
+export function createYAxis(scales, dimensions, options = {}) {
+	if (!scales.y) return { ticks: [] }
+
+	const { tickCount = null, tickFormat = null, label = '' } = options
+	const yScale = scales.y
+
+	// Determine tick values
+	let tickValues = []
+
+	if (yScale.ticks) {
+		tickValues = tickCount !== null ? yScale.ticks(tickCount) : yScale.ticks()
+	} else if (yScale.domain) {
+		tickValues = yScale.domain()
+		if (tickCount !== null && tickValues.length > tickCount) {
+			const step = Math.max(1, Math.floor(tickValues.length / tickCount))
+			tickValues = tickValues.filter((_, i) => i % step === 0)
+		}
+	}
+
+	// Format ticks
+	const formatter = tickFormat || ((v) => v)
+
+	// Generate tick data
+	const ticks = tickValues.map((value) => ({
+		value,
+		position: yScale(value),
+		formattedValue: formatter(value)
+	}))
+
+	return {
+		ticks,
+		label,
+		transform: 'translate(0, 0)',
+		labelTransform: `translate(-40, ${dimensions.innerHeight / 2}) rotate(-90)`
+	}
+}
+
+/**
+ * Creates grid line data for rendering
+ *
+ * @param {Object} scales - Chart scales
+ * @param {Object} dimensions - Chart dimensions
+ * @param {Object} options - Grid options
+ * @param {string} [options.direction='both'] - Grid direction ('x', 'y', or 'both')
+ * @param {number} [options.xTickCount] - Number of x-axis ticks
+ * @param {number} [options.yTickCount] - Number of y-axis ticks
+ * @returns {Object} Grid rendering data
+ */
+export function createGrid(scales, dimensions, options = {}) {
+	const { direction = 'both', xTickCount = null, yTickCount = null } = options
+	const result = { xLines: [], yLines: [] }
+
+	// Generate X grid lines (vertical)
+	if ((direction === 'x' || direction === 'both') && scales.x) {
+		const xAxis = createXAxis(scales, dimensions, { tickCount: xTickCount })
+		result.xLines = xAxis.ticks.map((tick) => ({
+			x1: tick.position,
+			y1: 0,
+			x2: tick.position,
+			y2: dimensions.innerHeight
+		}))
+	}
+
+	// Generate Y grid lines (horizontal)
+	if ((direction === 'y' || direction === 'both') && scales.y) {
+		const yAxis = createYAxis(scales, dimensions, { tickCount: yTickCount })
+		result.yLines = yAxis.ticks.map((tick) => ({
+			x1: 0,
+			y1: tick.position,
+			x2: dimensions.innerWidth,
+			y2: tick.position
+		}))
+	}
+
+	return result
+}
+
+/**
+ * Creates DOM attributes for a tick element
+ *
+ * @param {TickData} tick - Tick data
+ * @param {string} axis - Axis type ('x' or 'y')
+ * @returns {Object} Attributes for the tick
+ */
+export function createTickAttributes(tick, axis) {
+	if (axis === 'x') {
+		return {
+			'data-plot-tick': 'major',
+			transform: `translate(${tick.position}, 0)`,
+			'text-anchor': 'middle'
+		}
+	} else {
+		return {
+			'data-plot-tick': 'major',
+			transform: `translate(0, ${tick.position})`,
+			'text-anchor': 'end',
+			'dominant-baseline': 'middle'
+		}
+	}
+}