@rokkit/chart 1.0.0-next.14 → 1.0.0-next.141

package/src/Plot/Root.svelte

@@ -0,0 +1,107 @@
+<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,
+		children
+	} = $props()
+
+	// Create chart brewer instance
+	let brewer = $state(new ChartBrewer())
+
+	$effect(() => {
+		brewer.setDimensions({ width, height, margin })
+	})
+
+	// 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()
+	})
+
+	// 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
+		>
+			{@render children?.()}
+		</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/Texture.svelte

@@ -0,0 +1,18 @@
+<script>
+	let {
+		id,
+		path,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		thickness = 0.5,
+		patternUnits = 'userSpaceOnUse',
+		size = 10
+	} = $props()
+</script>
+
+<pattern {id} {patternUnits} width={size} height={size}>
+	<rect width={size} height={size} {fill} />
+	{#if path}
+		<path d={path} fill="none" {stroke} stroke-width={thickness} />
+	{/if}
+</pattern>

package/src/elements/Bar.svelte

@@ -1,35 +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} />
-<Label x={width} y={y + textHeight + 8} anchor={textAnchor} label={name} />
-<Label
-	x={width}
-	y={y + height - 14}
-	anchor={textAnchor}
-	label={formattedValue}
-	small
-/>
+<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

@@ -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,24 +1,27 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../components/lib/utils'
 
-	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,
+		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 + 100])
+			.domain(scale.domain())
+	)
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
+	)
 
-	$: colors = scale.range()
-	$: id = uniqueId('legend-')
+	let colors = $derived(scale.range())
 </script>
 
 <defs>
@@ -28,7 +31,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,24 @@
+<script>
+	import { uniq } from 'ramda'
+
+	let {
+		size = 10,
+		patternUnits = 'userSpaceOnUse',
+		/** @type {Array<import('./types').Pattern>} */
+		patterns = []
+	} = $props()
+
+	let names = $derived(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: Component, fill, stroke }, index (index)}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<Component {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -1,22 +1,22 @@
 <script>
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let size = 10
-	export let space = 2
-	export let padding = 5
-	export let scale
-	export let tickCount
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		size = 10,
+		space = 2,
+		padding = 5,
+		scale,
+		tickCount = 10
+	} = $props()
 
-	$: sizeWithSpace = size + space
-	$: ticks = scale.ticks.apply(scale, [tickCount])
+	let sizeWithSpace = $derived(size + space)
+	let ticks = $derived(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,8 @@
 <script>
-	export let small = false
-	export let label
-	export let angle = 0
-	export let anchor = 'middle'
-	export let x
-	export let y
+	let { x, y, text, angle = 0, small = false, anchor = 'middle' } = $props()
 
-	$: transform = `translate(${x},${y}) rotate(${angle})`
+	let transform = $derived(`translate(${x},${y}) rotate(${angle})`)
+	let validAnchor = $derived(['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={validAnchor} {transform}>{text}</text>

package/src/elements/SymbolGrid.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { get } from 'svelte/store'
+	import { swatch, swatchGrid } from '../old_lib'
+	import Symbol from '../Symbol.svelte'
+
+	let { base = 'teal', size = 4, shade = 600 } = $props()
+
+	let swatchValue = $derived(get(swatch))
+	let grid = $derived(swatchGrid(swatchValue.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={swatchValue.keys.symbol[index]}
+			fill={swatchValue.palette[base][shade]}
+			stroke={swatchValue.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'