@rokkit/chart 1.0.0-next.124 → 1.0.0-next.127

package/README.md

@@ -5,7 +5,7 @@ Data-driven chart components for Svelte inspired by [dc.js](https://dc-js.github
 ## Installation
 
 ```bash
-npm install @rokkit/chart
+bun add @rokkit/chart
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.124",
+  "version": "1.0.0-next.127",
   "type": "module",
   "description": "Data-driven chart components",
   "author": "Jerry Thomas <me@jerrythomas.name>",
@@ -35,13 +35,13 @@
     "@rokkit/core": "latest",
     "@rokkit/data": "latest",
     "@rokkit/states": "latest",
-    "bits-ui": "^2.10.0",
     "d3-array": "^3.2.4",
+    "d3-format": "^3.1.2",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "^3.0.0",
     "d3-transition": "^3.0.1",
-    "ramda": "^0.31.3"
+    "ramda": "^0.32.0"
   }
 }

package/src/Plot/Bar.svelte

@@ -60,6 +60,7 @@
 			{@const barY = initialY > 0 ? brewer.getDimensions().innerHeight : bar.y}
 			{@const barHeight = initialHeight > 0 ? 0 : bar.height}
 
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_click_events_have_key_events -->
 			<rect
 				class="bar"
 				x={bar.x}
@@ -68,11 +69,11 @@
 				height={barHeight}
 				fill={bar.color}
 				{opacity}
-				on:click={(event) => handleClick(event, bar)}
-				on:mouseenter={(event) => {
+				onclick={(event) => handleClick(event, bar)}
+				onmouseenter={(event) => {
 					event.target.setAttribute('opacity', Math.min(opacity + 0.2, 1))
 				}}
-				on:mouseleave={(event) => {
+				onmouseleave={(event) => {
 					event.target.setAttribute('opacity', opacity)
 				}}
 				style="transition: y {animationDuration}ms ease, height {animationDuration}ms ease;"

package/src/Plot/Root.svelte

@@ -9,18 +9,16 @@
 		margin = { top: 20, right: 30, bottom: 40, left: 50 },
 		fill = null,
 		responsive = true,
-		animationDuration = 300
+		animationDuration = 300,
+		children
 	} = $props()
 
 	// Create chart brewer instance
-	let brewer = $state(
-		new ChartBrewer({
-			width,
-			height,
-			margin,
-			animationDuration
-		})
-	)
+	let brewer = $state(new ChartBrewer())
+
+	$effect(() => {
+		brewer.setDimensions({ width, height, margin })
+	})
 
 	// Chart dimensions derived from brewer
 	let dimensions = $derived(brewer.getDimensions())
@@ -38,11 +36,6 @@
 		brewer.createScales()
 	})
 
-	// Update chart dimensions when props change
-	$effect(() => {
-		brewer.setDimensions({ width, height, margin })
-	})
-
 	// Provide chart context to child components
 	setContext('chart-brewer', brewer)
 
@@ -91,7 +84,7 @@
 			transform="translate({dimensions.margin.left}, {dimensions.margin.top})"
 			data-plot-canvas
 		>
-			<slot />
+			{@render children?.()}
 		</g>
 	</svg>
 </div>

package/src/Texture.svelte

@@ -1,11 +1,5 @@
 <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/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/ContinuousLegend.svelte

@@ -1,23 +1,27 @@
 <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 + 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>

package/src/elements/DefinePatterns.svelte

@@ -1,21 +1,23 @@
 <script>
 	import { uniq } from 'ramda'
 
-	export let size = 10
-	export let patternUnits = 'userSpaceOnUse'
-	/** @type {Array<import('./types').Pattern>} */
-	export let patterns = []
+	let {
+		size = 10,
+		patternUnits = 'userSpaceOnUse',
+		/** @type {Array<import('./types').Pattern>} */
+		patterns = []
+	} = $props()
 
-	$: names = uniq(patterns.map(({ id }) => id))
+	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, fill, stroke }, index (index)}
+		{#each patterns as { id, component: Component, fill, stroke }, index (index)}
 			<pattern {id} {patternUnits} width={size} height={size}>
-				<svelte:component this={component} {size} {fill} {stroke} />
+				<Component {size} {fill} {stroke} />
 			</pattern>
 		{/each}
 	</defs>

package/src/elements/DiscreteLegend.svelte

@@ -1,15 +1,17 @@
 <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 = 10
+	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 (i)}

package/src/elements/Label.svelte

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

package/src/elements/SymbolGrid.svelte

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

package/src/patterns/Brick.svelte

@@ -1,15 +1,13 @@
 <script>
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
+	let { size = 10, thickness = 0.5, stroke = 'currentColor' } = $props()
 
-	$: lines = [
+	let lines = $derived([
 		{ x1: 0, y1: 0.25 * size, x2: 0.5 * size, y2: 0.25 * size },
 		{ x1: 0.5 * size, y1: 0.75 * size, x2: size, y2: 0.75 * size },
 		{ x1: 0, y1: 0, x2: 0, y2: size },
 		{ x1: size, y1: 0, x2: size, y2: size },
 		{ x1: 0.5 * size, y1: 0, x2: 0.5 * size, y2: size }
-	]
+	])
 </script>
 
 {#each lines as line, index (index)}

package/src/patterns/Circles.svelte

@@ -1,16 +1,16 @@
 <script>
-	export let size = 10
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
+	let { size = 10, fill = 'currentColor', stroke = 'currentColor' } = $props()
 
-	$: data = [
-		{ cx: 0, cy: 0, r: 0.5 },
-		{ cx: 1, cy: 1, r: 0.5 }
-	].map(({ cx, cy, r }) => ({
-		cx: cx * size,
-		cy: cy * size,
-		r: r * size
-	}))
+	let data = $derived(
+		[
+			{ cx: 0, cy: 0, r: 0.5 },
+			{ cx: 1, cy: 1, r: 0.5 }
+		].map(({ cx, cy, r }) => ({
+			cx: cx * size,
+			cy: cy * size,
+			r: r * size
+		}))
+	)
 </script>
 
 {#each data as { cx, cy, r }, index (index)}

package/src/patterns/CrossHatch.svelte

@@ -1,12 +1,10 @@
 <script>
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
+	let { size = 10, thickness = 0.5, stroke = 'currentColor' } = $props()
 
-	$: lines = [
+	let lines = $derived([
 		{ x1: 0, y1: 0, x2: size, y2: size },
 		{ x1: 0, y1: size, x2: size, y2: 0 }
-	]
+	])
 </script>
 
 {#each lines as line, index (index)}

package/src/patterns/CurvedWave.svelte

@@ -1,9 +1,7 @@
 <script>
 	import NamedPattern from './paths/NamedPattern.svelte'
 
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
+	let { size = 10, thickness = 0.5, stroke = 'currentColor' } = $props()
 </script>
 
 <NamedPattern {size} {thickness} {stroke} name="curvedWave" />

package/src/patterns/Dots.svelte

@@ -1,17 +1,18 @@
 <script>
-	export let size = 10
-	export let fill = 'currentColor'
+	let { size = 10, fill = 'currentColor' } = $props()
 
-	$: data = [
-		{ cx: 0.2 * size, cy: 0.2 * size },
-		{ cx: 0.4 * size, cy: 0.4 * size },
-		{ cx: 0.6 * size, cy: 0.6 * size },
-		{ cx: 0.8 * size, cy: 0.8 * size },
-		{ cx: 0.8 * size, cy: 0.2 * size },
-		{ cx: 0.6 * size, cy: 0.4 * size },
-		{ cx: 0.4 * size, cy: 0.6 * size },
-		{ cx: 0.2 * size, cy: 0.8 * size }
-	].map((x) => ({ ...x, r: 0.08 * size }))
+	let data = $derived(
+		[
+			{ cx: 0.2 * size, cy: 0.2 * size },
+			{ cx: 0.4 * size, cy: 0.4 * size },
+			{ cx: 0.6 * size, cy: 0.6 * size },
+			{ cx: 0.8 * size, cy: 0.8 * size },
+			{ cx: 0.8 * size, cy: 0.2 * size },
+			{ cx: 0.6 * size, cy: 0.4 * size },
+			{ cx: 0.4 * size, cy: 0.6 * size },
+			{ cx: 0.2 * size, cy: 0.8 * size }
+		].map((x) => ({ ...x, r: 0.08 * size }))
+	)
 </script>
 
 {#each data as { cx, cy, r }, index (index)}

package/src/patterns/OutlineCircles.svelte

@@ -1,13 +1,11 @@
 <script>
-	export let size = 10
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
+	let { size = 10, fill = 'currentColor', stroke = 'currentColor' } = $props()
 
-	const centres = [
+	let centres = $derived([
 		{ cx: 0, cy: 0 },
 		{ cx: size, cy: size }
-	]
-	$: r = 0.5 * size
+	])
+	let r = $derived(0.5 * size)
 </script>
 
 {#each centres as { cx, cy }, index (index)}

package/src/patterns/Tile.svelte

@@ -1,15 +1,14 @@
 <script>
 	const thickness = 0.5
-	export let size = 10
-	export let stroke = 'currentColor'
+	let { size = 10, stroke = 'currentColor' } = $props()
 
-	const lines = [
+	let lines = $derived([
 		{ x1: 0, y1: 0.25 * size, x2: 0.5 * size, y2: 0.25 * size },
 		{ x1: 0.5 * size, y1: 0.75 * size, x2: size, y2: 0.75 * size },
 		{ x1: 0, y1: 0, x2: 0, y2: size },
 		{ x1: size, y1: 0, x2: size, y2: size },
 		{ x1: 0.5 * size, y1: 0, x2: 0.5 * size, y2: size }
-	]
+	])
 </script>
 
 {#each lines as line, index (index)}

package/src/patterns/Triangles.svelte

@@ -1,13 +1,11 @@
 <script>
-	export let size = 10
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
+	let { size = 10, fill = 'currentColor', stroke = 'currentColor' } = $props()
 
-	const polygons = [
+	let polygons = $derived([
 		[0, 0.5 * size, 0.5 * size, size, 0, size],
 		[0.5 * size, 0, 0, 0, 0, 0.5 * size],
 		[size, 0, 0.5 * size, 0.5 * size, size, size]
-	]
+	])
 </script>
 
 {#each polygons as points, index (index)}

package/src/patterns/Waves.svelte

@@ -1,13 +1,9 @@
 <script>
 	import { scaledPath } from '@rokkit/core'
 
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
-	export let fill = 'none'
-	export let data = []
+	let { size = 10, thickness = 0.5, stroke = 'currentColor', fill = 'none', data = [] } = $props()
 
-	$: d = scaledPath(size, data)
+	let d = $derived(scaledPath(size, data))
 </script>
 
 <path {d} {stroke} stroke-width={thickness} {fill} />

package/src/patterns/paths/NamedPattern.svelte

@@ -1,12 +1,9 @@
 <script>
 	import { patterns } from './constants'
 
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
-	export let name = 'cross-hatch'
+	let { size = 10, thickness = 0.5, stroke = 'currentColor', name = 'cross-hatch' } = $props()
 
-	$: d = patterns[name](size)
+	let d = $derived(patterns[name](size))
 </script>
 
 <path {d} {stroke} stroke-width={thickness} fill="none" />

package/src/symbols/RoundedSquare.svelte

@@ -1,12 +1,8 @@
 <script>
-	export let x = 0
-	export let y = 0
-	export let size = 1
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
+	let { x = 0, y = 0, size = 1, fill = 'currentColor', stroke = 'currentColor', onclick, onmouseover, onmouseleave, onfocus, ...restProps } = $props()
 
-	$: r = size * 3.534
-	$: props = { rx: r * 0.1, ry: r * 0.1, ...$$restProps }
+	let r = $derived(size * 3.534)
+	let props = $derived({ rx: r * 0.1, ry: r * 0.1, ...restProps })
 </script>
 
 <rect
@@ -18,9 +14,9 @@
 	{stroke}
 	{...props}
 	role="button"
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
 	tabindex="0"
 />

package/src/symbols/Shape.svelte

@@ -1,19 +1,12 @@
 <script>
 	import { namedShapes } from './constants'
 
-	export let x = 0
-	export let y = 0
-	export let size = 1
-	export let fill = 'none'
-	export let stroke = 'currentColor'
-	export let thickness = 1
+	let { x = 0, y = 0, size = 1, fill = 'none', stroke = 'currentColor', thickness = 1, name = 'circle', onclick, onmouseover, onmouseleave, onfocus, onblur } = $props()
 
-	export let name = 'circle'
-
-	$: d = name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size)
+	let d = $derived(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <path
 	{d}
 	{fill}
@@ -22,10 +15,10 @@
 	stroke-width={thickness}
 	fill-rule="evenodd"
 	role="button"
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
-	on:blur
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	{onblur}
 	tabindex="0"
 />

package/src/template/Texture.svelte

@@ -3,14 +3,11 @@
 	import * as templates from './shapes'
 	import { pick } from 'ramda'
 
-	export let size = 10
-	export let fill = 'none'
-	export let stroke = 'none'
-	export let thickness = 0.5
-	export let name = 'Waves'
+	let { size = 10, fill = 'none', stroke = 'none', thickness = 0.5, name = 'Waves' } = $props()
 
-	$: pattern = library[name]
-	$: props = pick(pattern.allowed ?? [], { fill, stroke, thickness })
+	let pattern = $derived(library[name])
+	let props = $derived(pick(pattern.allowed ?? [], { fill, stroke, thickness }))
+	let Component = $derived(templates[pattern.component])
 </script>
 
-<svelte:component this={templates[pattern.component]} {size} {...props} data={pattern.data} />
+<Component {size} {...props} data={pattern.data} />

package/src/template/shapes/Circles.svelte

@@ -1,14 +1,11 @@
 <script>
-	export let size = 10
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
-	export let data
+	let { size = 10, fill = 'currentColor', stroke = 'currentColor', data } = $props()
 
-	$: circles = data.map(({ cx, cy, r }) => ({
+	let circles = $derived(data.map(({ cx, cy, r }) => ({
 		cx: cx * size,
 		cy: cy * size,
 		r: r * size
-	}))
+	})))
 </script>
 
 {#each circles as { cx, cy, r }, index (index)}

package/src/template/shapes/Lines.svelte

@@ -1,15 +1,12 @@
 <script>
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
-	export let data = []
+	let { size = 10, thickness = 0.5, stroke = 'currentColor', data = [] } = $props()
 
-	$: lines = data.map(({ x1, y1, x2, y2 }) => ({
+	let lines = $derived(data.map(({ x1, y1, x2, y2 }) => ({
 		x1: x1 * size,
 		y1: y1 * size,
 		x2: x2 * size,
 		y2: y2 * size
-	}))
+	})))
 </script>
 
 {#each lines as line, index (index)}

package/src/template/shapes/Path.svelte

@@ -1,12 +1,9 @@
 <script>
 	import { scaledPath } from '@rokkit/core'
 
-	export let size = 10
-	export let thickness = 0.5
-	export let stroke = 'currentColor'
-	export let data = []
+	let { size = 10, thickness = 0.5, stroke = 'currentColor', data = [] } = $props()
 
-	$: d = scaledPath(size, data)
+	let d = $derived(scaledPath(size, data))
 </script>
 
 <path {d} {stroke} stroke-width={thickness} fill="none" />

package/src/template/shapes/Polygons.svelte

@@ -1,16 +1,7 @@
 <script>
-	export let size = 10
-	export let thickness = 0.5
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
-	export let data = []
+	let { size = 10, thickness = 0.5, fill = 'currentColor', stroke = 'currentColor', data = [] } = $props()
 
-	const polygons = data.map((points) => points.map((point) => point * size).join(', '))
-	// [
-	// 	[0, 0.5 * size, 0.5 * size, size, 0, size],
-	// 	[0.5 * size, 0, 0, 0, 0, 0.5 * size],
-	// 	[size, 0, 0.5 * size, 0.5 * size, size, size]
-	// ]
+	let polygons = $derived(data.map((points) => points.map((point) => point * size).join(', ')))
 </script>
 
 {#each polygons as points, index (index)}