@rokkit/chart 1.0.0-next.90 → 1.0.0-next.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.90",
+  "version": "1.0.0-next.91",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.90"
+    "shared-config": "1.0.0-next.91"
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.13",
@@ -35,10 +35,10 @@
     "date-fns": "^3.3.1",
     "ramda": "^0.29.1",
     "yootils": "^0.3.1",
-    "@rokkit/atoms": "1.0.0-next.90",
-    "@rokkit/core": "1.0.0-next.90",
-    "@rokkit/molecules": "1.0.0-next.90",
-    "@rokkit/stores": "1.0.0-next.90"
+    "@rokkit/atoms": "1.0.0-next.91",
+    "@rokkit/core": "1.0.0-next.91",
+    "@rokkit/molecules": "1.0.0-next.91",
+    "@rokkit/stores": "1.0.0-next.91"
   },
   "files": [
     "src/**/*.js",

package/src/Chart.svelte

@@ -29,9 +29,9 @@
 		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]))]
+	// $: 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,

package/src/elements/Label.svelte

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

package/src/elements/SymbolGrid.svelte

@@ -6,7 +6,7 @@
 	export let size = 4
 	export let shade = 600
 
-	$: grid = swatchGrid(Object.keys($swatch.symbols).length, size, 10)
+	$: grid = swatchGrid($swatch.keys.symbol.length, size, 10)
 </script>
 
 <svg viewBox="0 0 {grid.width} {grid.height}">
@@ -14,8 +14,8 @@
 		<Symbol
 			{x}
 			{y}
-			r={(index + 1) / 2}
-			shape={$swatch.keys.symbol[6]}
+			size={r * 2}
+			name={$swatch.keys.symbol[index]}
 			fill={$swatch.palette[base][shade]}
 			stroke={$swatch.palette[base][shade]}
 		/>

package/src/index.js

@@ -1,5 +1,3 @@
 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/chart.js

@@ -76,9 +76,9 @@ class Chart {
 		this.data = data.map((d) => ({
 			x: this.flipCoords ? d[this.y] : d[this.x],
 			y: this.flipCoords ? d[this.x] : d[this.y],
-			fill: d[this.fill],
-			color: d[this.color],
-			shape: d[this.shape]
+			// fill: d[this.fill],
+			color: d[this.color]
+			// shape: d[this.shape]
 		}))
 
 		this.refresh()

package/src/lib/swatch.js

@@ -1,23 +1,11 @@
-// import { omit } from 'ramda'
 import { writable } from 'svelte/store'
 import { palette } from './palette'
-// import { patterns } from '../patterns/constants'
 import * as patterns from '../patterns'
 import { shapes } from '../symbols'
 
-// const combinedPatterns = {
-// 	...patterns,
-// 	...omit(['NamedPattern'], components)
-// }
-
-// const combinedShapes = {
-// 	...namedShapes,
-// 	...shapes
-// }
 export const swatch = writable({
 	palette,
 	patterns,
-	// symbols: combinedShapes,
 	keys: {
 		gray: ['gray'],
 		color: Object.keys(palette).filter((name) => name !== 'gray'),

package/src/patterns/Triangles.svelte

@@ -11,5 +11,5 @@
 </script>
 
 {#each polygons as points}
-	<polygon points={points.join(', ')} {fill} {stroke} stroke-width=0 />
+	<polygon points={points.join(', ')} {fill} {stroke} stroke-width="0" />
 {/each}

package/src/patterns/templates/Circles.svelte

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

package/src/patterns/templates/Path.svelte

@@ -4,14 +4,9 @@
 	export let size = 10
 	export let thickness = 0.5
 	export let stroke = 'currentColor'
+	export let data = []
 
-	const paths = [
-		['M', 0, 0.25],
-		['A', 0.6, 0.5, 0, 0, 0, 1, 0.25]
-		// ['M', 0, 0.75],
-		// ['A', 0.6, 0.5, 0, 0, 0, 1, 0.75]
-	]
-	$: d = scaledPath(size, paths)
+	$: d = scaledPath(size, data)
 </script>
 
 <path {d} {stroke} stroke-width={thickness} fill="none" />

package/src/patterns/templates/Polygons.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let size = 10
+	export let thickness = 0.5
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+	export let data = []
+
+	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]
+	// ]
+</script>
+
+{#each polygons as points}
+	<polygon {points} {fill} {stroke} stroke-width={thickness} />
+{/each}

package/src/PatternDefs.svelte

@@ -1,14 +0,0 @@
-<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>