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

package/src/lib/palette.js

@@ -1,32 +1,283 @@
-// import { writable } from 'svelte/store'
-import { repeatAcross } from './utils'
+/**
+ * @typedef {Object<50|100|200|300|400|500|600|700|800|900|950,string>} Shades
+ */
+/**
+ * @type {Object<string,Shades>} }
+ */
+export const palette = {
+	gold: {
+		50: '#fffef7',
+		100: '#fffdf0',
+		200: '#fffadb',
+		300: '#fff6c4',
+		400: '#ffec96',
+		500: '#ffde6b',
+		600: '#e6c257',
+		700: '#bf953b',
+		800: '#996f26',
+		900: '#734a16',
+		950: '#4a2909'
+	},
+	lavender: {
+		50: '#fffaff',
+		100: '#fcf2fc',
+		200: '#fce1fc',
+		300: '#facff9',
+		400: '#f5abf4',
+		500: '#ef89ee',
+		600: '#d96fd2',
+		700: '#b34da5',
+		800: '#8f317a',
+		900: '#6b1c55',
+		950: '#450c30'
+	},
+	teal: {
+		50: '#f2fcfc',
+		100: '#e3fafa',
+		200: '#bdf2f1',
+		300: '#96ebe9',
+		400: '#51dbd7',
+		500: '#15cbc4',
+		600: '#11b8aa',
+		700: '#0b9984',
+		800: '#077a60',
+		900: '#045c41',
+		950: '#023b25'
+	},
+	rose: {
+		50: '#fffbf7',
+		100: '#fcf6f0',
+		200: '#fce8dc',
+		300: '#fad7c8',
+		400: '#f5aa9d',
+		500: '#f07575',
+		600: '#d95f5f',
+		700: '#b34242',
+		800: '#8f2929',
+		900: '#6b1818',
+		950: '#450a0a'
+	},
+	sky: {
+		50: '#f2fdff',
+		100: '#e6fbff',
+		200: '#bff3ff',
+		300: '#99ebff',
+		400: '#4fd6ff',
+		500: '#02b8ff',
+		600: '#029ee6',
+		700: '#027abf',
+		800: '#025799',
+		900: '#003b73',
+		950: '#00234a'
+	},
+	yellow: {
+		50: '#fffef2',
+		100: '#fffce8',
+		200: '#fff8c4',
+		300: '#fcf09f',
+		400: '#fce25b',
+		500: '#facc15',
+		600: '#e0b010',
+		700: '#ba860b',
+		800: '#966208',
+		900: '#704304',
+		950: '#472601'
+	},
+	pink: {
+		50: '#fef5ff',
+		100: '#fbebfc',
+		200: '#f9cffc',
+		300: '#f3b4fa',
+		400: '#e77af5',
+		500: '#d946ef',
+		600: '#bb38d9',
+		700: '#9227b3',
+		800: '#6b188f',
+		900: '#490e6b',
+		950: '#290645'
+	},
 
-const palette = [
-	'#FFDE6B',
-	'#EF89EE',
-	'#F79F1E',
-	'#02B8FF',
-	'#9F84EC',
-	'#15CBC4',
-	'#0092FD',
-	'#F63A57',
-	'#A2CB39',
-	'#FF6E2F',
-	'#FEB8B9',
-	'#af7aa1',
-	'#7EFFF5'
-]
+	lime: {
+		50: '#fbfcf2',
+		100: '#f7fae8',
+		200: '#eaf2c7',
+		300: '#ddeba7',
+		400: '#c2db6e',
+		500: '#a2cb39',
+		600: '#8cb82e',
+		700: '#6d9920',
+		800: '#4e7a15',
+		900: '#355c0c',
+		950: '#1e3b05'
+	},
+	red: {
+		50: '#fff5fa',
+		100: '#ffebf5',
+		200: '#fccce3',
+		300: '#faafcd',
+		400: '#f77499',
+		500: '#f63a57',
+		600: '#db304a',
+		700: '#b82135',
+		800: '#941524',
+		900: '#6e0c17',
+		950: '#47050c'
+	},
+	cyan: {
+		50: '#f0fbfc',
+		100: '#e1f8fa',
+		200: '#baeff5',
+		300: '#91e4ed',
+		400: '#48cce0',
+		500: '#06b6d4',
+		600: '#069abf',
+		700: '#03779e',
+		800: '#035880',
+		900: '#013b5e',
+		950: '#01223d'
+	},
+	orange: {
+		50: '#fffdf5',
+		100: '#fffae8',
+		200: '#fcefc5',
+		300: '#fce3a4',
+		400: '#fac65f',
+		500: '#f79f1e',
+		600: '#de8818',
+		700: '#ba6b11',
+		800: '#944d0a',
+		900: '#703406',
+		950: '#471d02'
+	},
+	violet: {
+		50: '#fdfaff',
+		100: '#f8f2fc',
+		200: '#eedefa',
+		300: '#e0cbf7',
+		400: '#c4a7f2',
+		500: '#9f84ec',
+		600: '#866bd6',
+		700: '#634bb3',
+		800: '#45318f',
+		900: '#2b1b6b',
+		950: '#150b45'
+	},
+	emerald: {
+		50: '#f2fcf9',
+		100: '#e6faf3',
+		200: '#bdf0dc',
+		300: '#9be8c6',
+		400: '#5ad694',
+		500: '#22c55e',
+		600: '#1ab04f',
+		700: '#13943c',
+		800: '#0c752b',
+		900: '#07591d',
+		950: '#03380f'
+	},
+	wood: {
+		50: '#faf5f0',
+		100: '#f2e6dc',
+		200: '#e3c4b1',
+		300: '#d19c86',
+		400: '#ad5140',
+		500: '#890e0e',
+		600: '#7d0b0b',
+		700: '#660707',
+		800: '#520505',
+		900: '#3d0202',
+		950: '#290101'
+	},
+	blue: {
+		50: '#f2fcff',
+		100: '#e6f9ff',
+		200: '#bfeeff',
+		300: '#99e0ff',
+		400: '#4cbffc',
+		500: '#0092fd',
+		600: '#007de3',
+		700: '#0061bd',
+		800: '#004696',
+		900: '#003073',
+		950: '#001c4a'
+	},
 
-export class Palette {
-	constructor(palette) {
-		this.colors = palette
+	amber: {
+		50: '#fffbf5',
+		100: '#fff7eb',
+		200: '#ffe9cc',
+		300: '#ffd6ab',
+		400: '#ffa86e',
+		500: '#ff6e2f',
+		600: '#e65b25',
+		700: '#bf4519',
+		800: '#993111',
+		900: '#732009',
+		950: '#4a1204'
+	},
+	purple: {
+		50: '#fdf7ff',
+		100: '#faedff',
+		200: '#f0d4fc',
+		300: '#e7bbfc',
+		400: '#ca87fa',
+		500: '#a855f7',
+		600: '#8f45de',
+		700: '#6d2fba',
+		800: '#4f1e94',
+		900: '#341170',
+		950: '#1d0747'
+	},
+	zinc: {
+		50: '#f7f9fa',
+		100: '#edf2f5',
+		200: '#d3dde3',
+		300: '#bac8d1',
+		400: '#8d9eb0',
+		500: '#64748b',
+		600: '#536580',
+		700: '#384a69',
+		800: '#243454',
+		900: '#142140',
+		950: '#091129'
+	},
+	stone: {
+		50: '#f7f7f7',
+		100: '#f2f1f0',
+		200: '#dedcd9',
+		300: '#c9c6c1',
+		400: '#a19b95',
+		500: '#78716c',
+		600: '#6b5f57',
+		700: '#59473c',
+		800: '#473227',
+		900: '#361f15',
+		950: '#241009'
+	},
+	indigo: {
+		50: '#f7fbff',
+		100: '#f0f7ff',
+		200: '#d7e5fc',
+		300: '#bed1fa',
+		400: '#92a3f7',
+		500: '#6366f1',
+		600: '#5153db',
+		700: '#383ab5',
+		800: '#242691',
+		900: '#14156e',
+		950: '#090a47'
+	},
+	gray: {
+		50: '#f7f9fa',
+		100: '#edf0f2',
+		200: '#d7dde0',
+		300: '#c0c6cc',
+		400: '#949ba6',
+		500: '#6b7280',
+		600: '#576073',
+		700: '#3b455e',
+		800: '#26304d',
+		900: '#151d38',
+		950: '#090e24'
 	}
-
-	set colors(value) {
-		if (value && Array.isArray(value)) this.colors = value
-	}
-}
-
-export function colorBrewer(values) {
-	return repeatAcross(palette, [...new Set(values)])
 }

package/src/lib/plots.js

@@ -0,0 +1,23 @@
+import * as Plot from '@observablehq/plot'
+
+export function plotter(node, options) {
+	let { data, aes, type, opts } = options
+	// let chart = Plot.lineY(options.data).plot({ grid: true })
+
+	function render() {
+		const chart = Plot[type](data, aes).plot(opts)
+		node.firstChild?.remove() // remove old chart, if any
+		node.append(chart)
+	}
+	render()
+
+	return {
+		update: (options) => {
+			data = options.data
+			aes = options.aes
+			type = options.type
+			opts = options.opts
+			render()
+		}
+	}
+}

package/src/lib/swatch.js

@@ -1,11 +1,27 @@
+// 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'
 
-// import { __patterns__, __colors__, __shapes__ } from './constants'
+// const combinedPatterns = {
+// 	...patterns,
+// 	...omit(['NamedPattern'], components)
+// }
 
-export const swatchStore = writable({})
-
-// A set of 7 should be sufficient
-// set of patterns
-// set of shapes
-// set of colors
-// fill, stroke, text
+// const combinedShapes = {
+// 	...namedShapes,
+// 	...shapes
+// }
+export const swatch = writable({
+	palette,
+	patterns,
+	// symbols: combinedShapes,
+	keys: {
+		gray: ['gray'],
+		color: Object.keys(palette).filter((name) => name !== 'gray'),
+		symbol: shapes,
+		pattern: Object.keys(patterns)
+	}
+})

package/src/lib/ticks.js

@@ -0,0 +1,19 @@
+function ticksByType(lower, upper, steps, type) {
+	return Array.from({ length: Math.floor((upper - lower) / steps[type]) + 1 }, (_, i) => ({
+		position: i * steps[type],
+		label: i * steps[type],
+		type
+	}))
+}
+
+export function getTicks(lower, upper, steps = { major: 10, minor: 0 }) {
+	if (steps.major === 0 && steps.minor === 0) return []
+	const minorTicks = ticksByType(lower, upper, steps.major, 'major')
+	const majorTicks = ticksByType(lower, upper, steps.minor, 'minor')
+	const end = [
+		{ position: upper, label: upper, type: 'end' },
+		{ position: lower, label: lower, type: 'end' }
+	]
+
+	return [...minorTicks, ...majorTicks, ...end].sort((a, b) => a.position - b.position)
+}

package/src/patterns/Brick.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+
+	$: lines = [
+		{ 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}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}

package/src/patterns/Circles.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	$: 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
+	}))
+</script>
+
+{#each data as { cx, cy, r }}
+	<circle {cx} {cy} {r} {fill} {stroke} />
+{/each}

package/src/patterns/CrossHatch.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+
+	$: lines = [
+		{ x1: 0, y1: 0, x2: size, y2: size },
+		{ x1: 0, y1: size, x2: size, y2: 0 }
+	]
+</script>
+
+{#each lines as line}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}

package/src/patterns/CurvedWave.svelte

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

package/src/patterns/Dots.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+
+	$: 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 }))
+</script>
+
+{#each data as { cx, cy, r }}
+	<circle {cx} {cy} {r} {fill} />
+{/each}

package/src/patterns/OutlineCircles.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	const centres = [
+		{ cx: 0, cy: 0 },
+		{ cx: size, cy: size }
+	]
+	$: r = 0.5 * size
+</script>
+
+{#each centres as { cx, cy }}
+	<circle {cx} {cy} {r} {fill} {stroke} />
+{/each}

package/src/patterns/Texture.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { library } from './constants'
+	import templates from './templates'
+	import { pick } from 'ramda'
+
+	export let size = 10
+	export let fill = 'none'
+	export let stroke = 'none'
+	export let name = 'Waves'
+
+	$: pattern = library[name]
+	$: props = { fill, stroke }
+</script>
+
+<svelte:component
+	this={templates[pattern.component]}
+	{size}
+	{...pick(pattern.allowed, props)}
+	data={pattern.data}
+/>

package/src/patterns/Tile.svelte

@@ -0,0 +1,17 @@
+<script>
+	const thickness = 0.5
+	export let size = 10
+	export let stroke = 'currentColor'
+
+	const lines = [
+		{ 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}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}

package/src/patterns/Triangles.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	const polygons = [
+		[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={points.join(', ')} {fill} {stroke} stroke-width=0 />
+{/each}

package/src/patterns/Waves.svelte

@@ -0,0 +1,13 @@
+<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 = []
+
+	$: d = scaledPath(size, data)
+</script>
+
+<path {d} {stroke} stroke-width={thickness} {fill} />

package/src/patterns/constants.js

@@ -0,0 +1,43 @@
+export const library = {
+	Brick: {
+		component: 'Lines',
+		allowed: ['stroke'],
+		data: [
+			{ x1: 0, y1: 0.25, x2: 0.5, y2: 0.25 },
+			{ x1: 0.5, y1: 0.75, x2: 1, y2: 0.75 },
+			{ x1: 0, y1: 0, x2: 0, y2: 1 },
+			{ x1: 1, y1: 0, x2: 1, y2: 1 },
+			{ x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+		]
+	},
+	Circles: {
+		component: 'Circles',
+		allowed: ['fill', 'stroke'],
+		data: [
+			{ cx: 0, cy: 0, r: 0.5 },
+			{ cx: 1, cy: 1, r: 0.5 }
+		]
+	},
+	Dominoes: {
+		component: 'Circles',
+		allowed: ['fill'],
+		data: [
+			{ cx: 0.2, cy: 0.2, r: 0.8 },
+			{ cx: 0.4, cy: 0.4, r: 0.8 },
+			{ cx: 0.6, cy: 0.6, r: 0.8 },
+			{ cx: 0.8, cy: 0.8, r: 0.8 },
+			{ cx: 0.8, cy: 0.2, r: 0.8 },
+			{ cx: 0.6, cy: 0.4, r: 0.8 },
+			{ cx: 0.4, cy: 0.6, r: 0.8 },
+			{ cx: 0.2, cy: 0.8, r: 0.8 }
+		]
+	},
+	Waves: {
+		component: 'Path',
+		stroke: true,
+		data: [
+			['M', 0, 0.25],
+			['A', 0.6, 0.5, 0, 0, 0, 1, 0.25]
+		]
+	}
+}

package/src/patterns/index.js

@@ -0,0 +1,13 @@
+export { default as Brick } from './Brick.svelte'
+export { default as Circles } from './Circles.svelte'
+export { default as Dots } from './Dots.svelte'
+export { default as CrossHatch } from './CrossHatch.svelte'
+export { default as Waves } from './Waves.svelte'
+// export { default as Squares } from './Squares.svelte'
+export { default as Tile } from './Tile.svelte'
+export { default as Triangles } from './Triangles.svelte'
+// export { default as Waves } from './Waves.svelte'
+// export { default as ZigZag } from './ZigZag.svelte'
+// export { default as Flower } from './Flower.svelte'
+// export { default as NamedPath } from './NamedPath.svelte'
+export { default as CurvedWave } from './CurvedWave.svelte'

package/src/patterns/paths/NamedPattern.svelte

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

package/src/patterns/paths/constants.js

@@ -0,0 +1,7 @@
+import { scaledPath } from '@rokkit/core'
+import paths from './patterns.json'
+
+export const patterns = Object.entries(paths).reduce(
+	(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
+	{}
+)

package/src/patterns/templates/Circles.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	$: 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
+	}))
+</script>
+
+{#each data as { cx, cy, r }}
+	<circle {cx} {cy} {r} {fill} {stroke} />
+{/each}

package/src/patterns/templates/Lines.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+	export let data = []
+
+	$: lines = data.map(({ x1, y1, x2, y2 }) => ({
+		x1: x1 * size,
+		y1: y1 * size,
+		x2: x2 * size,
+		y2: y2 * size
+	}))
+</script>
+
+{#each lines as line}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}