@rokkit/chart 1.0.0-next.14 → 1.0.0-next.140

package/src/old_lib/utils.js

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+<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/README.md

@@ -0,0 +1,3 @@
+# Patterns
+
+These patterns are inspired from https://superdesigner.co/tools/svg-backgrounds

package/src/patterns/Tile.svelte

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

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

@@ -0,0 +1,9 @@
+<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/index.js

@@ -0,0 +1,14 @@
+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'
+export { default as OutlineCircles } from './OutlineCircles.svelte'

package/src/patterns/paths/NamedPattern.svelte

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

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

package/src/symbols/RoundedSquare.svelte

@@ -0,0 +1,33 @@
+<script>
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		...restProps
+	} = $props()
+
+	let r = $derived(size * 3.534)
+	let props = $derived({ rx: r * 0.1, ry: r * 0.1, ...restProps })
+</script>
+
+<rect
+	x={x - r}
+	y={y - r}
+	width={r * 2}
+	height={r * 2}
+	{fill}
+	{stroke}
+	{...props}
+	role="button"
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	tabindex="0"
+/>

package/src/symbols/Shape.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { namedShapes } from './constants'
+
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'none',
+		stroke = 'currentColor',
+		thickness = 1,
+		name = 'circle',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		onblur
+	} = $props()
+
+	let d = $derived(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<path
+	{d}
+	{fill}
+	{stroke}
+	transform="translate({x},{y})"
+	stroke-width={thickness}
+	fill-rule="evenodd"
+	role="button"
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	{onblur}
+	tabindex="0"
+/>

package/src/symbols/constants/index.js

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

package/src/symbols/index.js

@@ -0,0 +1,9 @@
+import { namedShapes } from './constants'
+import { default as Shape } from './Shape.svelte'
+import { default as RoundedSquare } from './RoundedSquare.svelte'
+
+export const shapes = [...Object.keys(namedShapes), 'rounded-square']
+export const components = {
+	default: Shape,
+	'rounded-square': RoundedSquare
+}

package/src/symbols/outline.svelte

@@ -0,0 +1,60 @@
+<svg
+	class="plot"
+	fill="currentColor"
+	font-family="system-ui, sans-serif"
+	font-size="10"
+	text-anchor="middle"
+	width="688"
+	height="60"
+	viewBox="0 0 688 60"
+>
+	<style>
+		:where(.plot) {
+			--plot-background: white;
+			display: block;
+			height: auto;
+			height: intrinsic;
+			max-width: 100%;
+		}
+		:where(.plot text),
+		:where(.plot tspan) {
+			white-space: pre;
+		}
+	</style>
+	<g aria-label="x-axis tick" fill="none" stroke="currentColor"
+		><path transform="translate(68,30)" d="M0,0L0,6"></path><path
+			transform="translate(160,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
+			transform="translate(344,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
+			transform="translate(528,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
+	><g aria-label="x-axis tick label" transform="translate(0,9)"
+		><text y="0.71em" transform="translate(68,30)">asterisk</text><text
+			y="0.71em"
+			transform="translate(160,30)">circle</text
+		><text y="0.71em" transform="translate(252,30)">diamond2</text><text
+			y="0.71em"
+			transform="translate(344,30)">plus</text
+		><text y="0.71em" transform="translate(436,30)">square2</text><text
+			y="0.71em"
+			transform="translate(528,30)">times</text
+		><text y="0.71em" transform="translate(620,30)">triangle2</text></g
+	><g aria-label="dot" fill="none" stroke="currentColor" stroke-width="1.5"
+		><path transform="translate(160,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
+		></path><path transform="translate(344,15.25)" d="M-6.873,0L6.873,0M0,6.873L0,-6.873"
+		></path><path transform="translate(528,15.25)" d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"
+		></path><path transform="translate(620,15.25)" d="M0,-5.443L4.714,2.721L-4.714,2.721Z"
+		></path><path
+			transform="translate(68,15.25)"
+			d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"
+		></path><path
+			transform="translate(436,15.25)"
+			d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"
+		></path><path transform="translate(252,15.25)" d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"
+		></path></g
+	></svg
+>

package/src/symbols/solid.svelte

@@ -0,0 +1,60 @@
+<svg
+	class="plot"
+	fill="currentColor"
+	font-family="system-ui, sans-serif"
+	font-size="10"
+	text-anchor="middle"
+	width="688"
+	height="60"
+	viewBox="0 0 688 60"
+	><style>
+		:where(.plot) {
+			--plot-background: white;
+			display: block;
+			height: auto;
+			height: intrinsic;
+			max-width: 100%;
+		}
+		:where(.plot text),
+		:where(.plot tspan) {
+			white-space: pre;
+		}
+	</style><g aria-label="x-axis tick" fill="none" stroke="currentColor"
+		><path transform="translate(68,30)" d="M0,0L0,6"></path><path
+			transform="translate(160,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
+			transform="translate(344,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
+			transform="translate(528,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
+	><g aria-label="x-axis tick label" transform="translate(0,9)"
+		><text y="0.71em" transform="translate(68,30)">circle</text><text
+			y="0.71em"
+			transform="translate(160,30)">cross</text
+		><text y="0.71em" transform="translate(252,30)">diamond</text><text
+			y="0.71em"
+			transform="translate(344,30)">square</text
+		><text y="0.71em" transform="translate(436,30)">star</text><text
+			y="0.71em"
+			transform="translate(528,30)">triangle</text
+		><text y="0.71em" transform="translate(620,30)">wye</text></g
+	><g aria-label="dot"
+		><path transform="translate(68,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
+		></path><path
+			transform="translate(160,15.25)"
+			d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z"
+		></path><path transform="translate(252,15.25)" d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z"
+		></path><path transform="translate(344,15.25)" d="M-3.988,-3.988h7.976v7.976h-7.976Z"
+		></path><path
+			transform="translate(436,15.25)"
+			d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z"
+		></path><path transform="translate(528,15.25)" d="M0,-6.998L6.06,3.499L-6.06,3.499Z"
+		></path><path
+			transform="translate(620,15.25)"
+			d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"
+		></path></g
+	></svg
+>

package/src/template/Texture.svelte

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

@@ -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/template/shapes/Circles.svelte

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

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

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

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

@@ -0,0 +1,4 @@
+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/chart/FacetGrid.svelte

@@ -1,51 +0,0 @@
-<script>
-	import Chart from './Chart.svelte'
-	import AxisGrid from './AxisGrid.svelte'
-	import Axis from './Axis.svelte'
-	import AxisTicks from './AxisTicks.svelte'
-	import AxisLabels from './AxisLabels.svelte'
-
-	export let data
-	export let row
-	export let col
-	export let plot
-	export let x
-	export let y
-	export let labels = { x: true, y: true }
-
-	$: rowValues = [...new Set(data.map((d) => d[row]))]
-	$: colValues = [...new Set(data.map((d) => d[col]))]
-</script>
-
-<div class="flex flex-col">
-	{#each rowValues as rowItem}
-		{@const dataFilteredByRow = data.filter((d) => d[row] === rowItem)}
-
-		<div class="flex flex-row">
-			{#each colValues as colItem}
-				{@const dataFilteredByCol = dataFilteredByRow.filter(
-					(d) => d[col] === colItem
-				)}
-
-				<Chart data={dataFilteredByCol} {x} {y}>
-					<Axis name="x" count={7} gap={10}>
-						<AxisTicks side="bottom">
-							{#if labels.x}
-								<AxisLabels angle={-60} />
-							{/if}
-						</AxisTicks>
-					</Axis>
-					<Axis name="y" gap={10}>
-						<AxisTicks side="left">
-							{#if labels.y}
-								<AxisLabels />
-							{/if}
-						</AxisTicks>
-						<AxisGrid />
-					</Axis>
-					<svelte:component this={plot} />
-				</Chart>
-			{/each}
-		</div>
-	{/each}
-</div>

package/src/chart/Grid.svelte

@@ -1,34 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-
-	export let opacity = 1
-	export let hideVertical = false
-	export let hideHorizontal = false
-	let chart = getContext('chart')
-
-	$: opacityV = hideVertical ? 0 : opacity
-	$: opacityH = hideHorizontal ? 0 : opacity
-	$: xRange = $chart.axis.x.scale.range()
-	$: yRange = $chart.axis.y.scale.range()
-</script>
-
-<g class="grid">
-	{#each $chart.axis.x.ticks as tick}
-		<line
-			x1={tick.position}
-			x2={tick.position}
-			y1={yRange[0]}
-			y2={yRange[1]}
-			opacity={opacityV}
-		/>
-	{/each}
-	{#each $chart.axis.y.ticks as tick}
-		<line
-			y1={tick.position}
-			y2={tick.position}
-			x1={xRange[0]}
-			x2={xRange[1]}
-			opacity={opacityH}
-		/>
-	{/each}
-</g>

package/src/chart/Legend.svelte

@@ -1,16 +0,0 @@
-<script>
-	export let title
-	export let items = []
-</script>
-
-<ul class="flex flex-col">
-	<p>{title}</p>
-	{#each items as item}
-		<li class="flex flex-row gap-5">
-			<svg width="42" height="42" viewBox="0 0 42 42">
-				<rect width="42" height="42" fill={item.fillUrl || item.fill} />
-			</svg>
-			<p class="flex flex-grow">{item.label}</p>
-		</li>
-	{/each}
-</ul>

package/src/chart/PatternDefs.svelte

@@ -1,13 +0,0 @@
-<script>
-	import Texture from './Texture.svelte'
-	const size = 10
-
-	export let thickness = 0.5
-	export let patterns
-</script>
-
-<defs>
-	{#each patterns as pattern}
-		<Texture {...pattern} {thickness} {size} />
-	{/each}
-</defs>