@rokkit/chart 1.0.0-next.87 → 1.0.0-next.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.87",
+  "version": "1.0.0-next.89",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,9 +22,10 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.87"
+    "shared-config": "1.0.0-next.89"
   },
   "dependencies": {
+    "@observablehq/plot": "^0.6.13",
     "d3-array": "^3.2.4",
     "d3-collection": "^1.0.7",
     "d3-format": "^3.1.0",
@@ -34,10 +35,10 @@
     "date-fns": "^3.3.1",
     "ramda": "^0.29.1",
     "yootils": "^0.3.1",
-    "@rokkit/atoms": "1.0.0-next.87",
-    "@rokkit/core": "1.0.0-next.87",
-    "@rokkit/molecules": "1.0.0-next.87",
-    "@rokkit/stores": "1.0.0-next.87"
+    "@rokkit/atoms": "1.0.0-next.89",
+    "@rokkit/core": "1.0.0-next.89",
+    "@rokkit/molecules": "1.0.0-next.89",
+    "@rokkit/stores": "1.0.0-next.89"
   },
   "files": [
     "src/**/*.js",
@@ -47,6 +48,10 @@
   "exports": {
     "./src": "./src",
     "./package.json": "./package.json",
+    "./lib": "./src/lib/index.js",
+    "./patterns": "./src/patterns/index.js",
+    "./symbols": "./src/symbols/index.js",
+    "./elements": "./src/elements/index.js",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./src/index.js",

package/src/Chart.svelte

@@ -0,0 +1,67 @@
+<script>
+	import { setContext } from 'svelte'
+	import { writable } from 'svelte/store'
+	import { chart } from './lib'
+
+	let config = writable({})
+	setContext('chart', config)
+
+	export let data
+	export let x
+	export let y
+	export let value = y
+	export let color = x
+	export let fill = x
+	export let pattern = x
+	export let width = 2048
+	export let height = 2048
+	export let padding = height / 16
+	export let marginLeft = 0
+	export let marginRight = 0
+	export let marginTop = 0
+	export let marginBottom = 0
+	export let flipCoords = false
+	export let spacing = 0.1
+
+	$: margin = {
+		left: marginLeft,
+		right: marginRight,
+		top: marginTop,
+		bottom: marginBottom
+	}
+	$: patterns = [...new Set(data.map((d) => d[pattern]))]
+	$: fills = [...new Set(data.map((d) => d[fill]))]
+	$: colors = [...new Set(data.map((d) => d[color]))]
+	$: config.set(
+		chart(data, {
+			x,
+			y,
+			value,
+			color,
+			fill,
+			width,
+			height,
+			padding,
+			margin,
+			flipCoords,
+			spacing
+		})
+	)
+</script>
+
+<svg
+	viewBox="0 0 {$config.width} {$config.height}"
+	width={$config.width}
+	height={$config.height}
+	class="w-full h-full chart"
+>
+	<rect
+		x="0"
+		y="0"
+		width={$config.width}
+		height={$config.height}
+		fill="none"
+		stroke="currentColor"
+	/>
+	<slot />
+</svg>

package/src/PatternDefs.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Texture from './Texture.svelte'
+
+	export let thickness = 0.5
+	export let patterns = []
+	export let size = 10
+</script>
+
+<defs>
+	{#each patterns as { id, path, fill, stroke }}
+		{@const p = typeof path === 'function' ? path(size) : path}
+		<Texture {id} path={p} {fill} {stroke} {thickness} {size} />
+	{/each}
+</defs>

package/src/Symbol.svelte

@@ -0,0 +1,17 @@
+<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
+
+	$: component = using[name] || using.default
+	$: props = using[name] ? $$restProps : { name, ...$$restProps }
+</script>
+
+<svelte:component this={component} {x} {y} {size} {fill} {stroke} {...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,5 +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/ContinuousLegend.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { id as uniqueId } from '@rokkit/core'
+	// import { id as uniqueId } from '@rokkit/core'
 
 	export let x = 0
 	export let y = 0
@@ -9,6 +9,7 @@
 	export let width = 100
 	export let tickCount = 5
 	export let scale
+	export let id = 'legend'
 
 	$: scaleTicks = scaleLinear()
 		.range([x, x + 100])
@@ -16,7 +17,7 @@
 	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
 
 	$: colors = scale.range()
-	$: id = uniqueId('legend-')
+	// $: id = uniqueId('legend-')
 </script>
 
 <defs>

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 }}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<svelte:component this={component} {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -6,7 +6,7 @@
 	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])

package/src/elements/Label.svelte

@@ -1,12 +1,14 @@
 <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 '../lib'
+	import Symbol from '../Symbol.svelte'
+
+	export let base = 'teal'
+	export let size = 4
+	export let shade = 600
+
+	$: grid = swatchGrid(Object.keys($swatch.symbols).length, size, 10)
+</script>
+
+<svg viewBox="0 0 {grid.width} {grid.height}">
+	{#each grid.data as { x, y, r }, index}
+		<Symbol
+			{x}
+			{y}
+			r={(index + 1) / 2}
+			shape={$swatch.keys.symbol[6]}
+			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/index.js

@@ -1,15 +1,5 @@
-// 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 * from './lib'
+export { default as Chart } from './Chart.svelte'
+export { default as Symbol } from './Symbol.svelte'
+// export { default as Texture } from './Texture.svelte'
+// export { default as PatternDefs } from './PatternDefs.svelte'
+export * from './plots'

package/src/lib/brewer.js

@@ -0,0 +1,17 @@
+export function getFillPatterns(values, swatch, gray = false) {
+	const colors = gray ? swatch.keys.gray : swatch.keys.color
+	const max_colors = colors.length
+	const max_patterns = swatch.keys.pattern.length
+
+	const mix = values
+		.map((value, index) => ({
+			[value]: {
+				pattern: swatch.keys.pattern[index % max_patterns],
+				color: colors[index % max_colors]
+			}
+		}))
+		.reduce((acc, current) => ({ ...acc, ...current }), {})
+	return mix
+}
+
+export function getStrokePatterns() {}