@rokkit/chart 1.0.0-next.146 → 1.0.0-next.148

package/dist/template/shapes/index.d.ts

@@ -1,4 +0,0 @@
-export { default as Circles } from "./Circles.svelte";
-export { default as Lines } from "./Lines.svelte";
-export { default as Path } from "./Path.svelte";
-export { default as Polygons } from "./Polygons.svelte";

package/src/old_lib/index.js

@@ -1,4 +0,0 @@
-export { swatch } from './swatch'
-export { swatchGrid } from './grid'
-export * from './chart'
-export * from './brewer'

package/src/old_lib/plots.js

@@ -1,27 +0,0 @@
-// skipcq: JS-C1003 - Importing all plots from observablehq/plot
-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({
-			color: { scheme: 'turbo', range: [0.1, 0.9] },
-			...opts
-		})
-		node.firstChild?.remove() // remove old chart, if any
-		node.append(chart)
-	}
-	render()
-
-	return {
-		update: (input) => {
-			data = input.data
-			aes = input.aes
-			type = input.type
-			opts = input.opts
-			render()
-		}
-	}
-}

package/src/old_lib/swatch.js

@@ -1,16 +0,0 @@
-import { writable } from 'svelte/store'
-import palette from './palette.json'
-// skipcq: JS-C1003 - Importing all patterns
-import * as patterns from '../patterns'
-import { shapes } from '../symbols'
-
-export const swatch = writable({
-	palette,
-	patterns,
-	keys: {
-		gray: ['gray'],
-		color: Object.keys(palette).filter((name) => name !== 'gray'),
-		symbol: shapes,
-		pattern: Object.keys(patterns)
-	}
-})

package/src/old_lib/utils.js

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

package/src/patterns/Brick.svelte

@@ -1,15 +0,0 @@
-<script>
-	let { size = 10, thickness = 0.5, stroke = 'currentColor' } = $props()
-
-	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)}
-	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
-{/each}

package/src/patterns/Circles.svelte

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

package/src/patterns/CrossHatch.svelte

@@ -1,12 +0,0 @@
-<script>
-	let { size = 10, thickness = 0.5, stroke = 'currentColor' } = $props()
-
-	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)}
-	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
-{/each}

package/src/patterns/CurvedWave.svelte

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

package/src/patterns/Dots.svelte

@@ -1,20 +0,0 @@
-<script>
-	let { size = 10, fill = 'currentColor' } = $props()
-
-	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)}
-	<circle {cx} {cy} {r} {fill} />
-{/each}

package/src/patterns/OutlineCircles.svelte

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

package/src/patterns/Tile.svelte

@@ -1,16 +0,0 @@
-<script>
-	const thickness = 0.5
-	let { size = 10, stroke = 'currentColor' } = $props()
-
-	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)}
-	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
-{/each}

package/src/patterns/Triangles.svelte

@@ -1,13 +0,0 @@
-<script>
-	let { size = 10, fill = 'currentColor', stroke = 'currentColor' } = $props()
-
-	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)}
-	<polygon points={points.join(', ')} {fill} {stroke} stroke-width="0" />
-{/each}

package/src/patterns/Waves.svelte

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

package/src/patterns/paths/NamedPattern.svelte

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

package/src/patterns/paths/constants.js

@@ -1,4 +0,0 @@
-import { scaledPathCollection } from '../../old_lib/utils'
-import paths from './patterns.json'
-
-export const patterns = scaledPathCollection(paths)

package/src/template/Texture.svelte

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

package/src/template/constants.js

@@ -1,43 +0,0 @@
-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/template/shapes/Circles.svelte

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

package/src/template/shapes/Lines.svelte

@@ -1,16 +0,0 @@
-<script>
-	let { size = 10, thickness = 0.5, stroke = 'currentColor', data = [] } = $props()
-
-	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)}
-	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
-{/each}

package/src/template/shapes/Path.svelte

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

package/src/template/shapes/Polygons.svelte

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

package/src/template/shapes/index.js

@@ -1,4 +0,0 @@
-export { default as Circles } from './Circles.svelte'
-export { default as Lines } from './Lines.svelte'
-export { default as Path } from './Path.svelte'
-export { default as Polygons } from './Polygons.svelte'