@rokkit/chart 1.0.0-next.100

package/src/symbols/Shape.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { namedShapes } from './constants'
+
+	export let x = 0
+	export let y = 0
+	export let size = 1
+	export let fill = 'none'
+	export let stroke = 'currentColor'
+	export let thickness = 1
+
+	export let name = 'circle'
+
+	$: d = 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"
+	on:click
+	on:mouseover
+	on:mouseleave
+	on:focus
+	on:blur
+	tabindex="0"
+/>

package/src/symbols/constants/index.js

@@ -0,0 +1,4 @@
+import { scaledPathCollection } from '../../lib/utils'
+import paths from './shapes.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,16 @@
+<script>
+	import { library } from './constants'
+	import * as templates from './shapes'
+	import { pick } from 'ramda'
+
+	export let size = 10
+	export let fill = 'none'
+	export let stroke = 'none'
+	export let thickness = 0.5
+	export let name = 'Waves'
+
+	$: pattern = library[name]
+	$: props = pick(pattern.allowed ?? [], { fill, stroke, thickness })
+</script>
+
+<svelte:component this={templates[pattern.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,16 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+	export let data
+
+	$: circles = data.map(({ cx, cy, r }) => ({
+		cx: cx * size,
+		cy: cy * size,
+		r: r * size
+	}))
+</script>
+
+{#each circles as { cx, cy, r }}
+	<circle {cx} {cy} {r} {fill} {stroke} />
+{/each}

package/src/template/shapes/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}

package/src/template/shapes/Path.svelte

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

package/src/template/shapes/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/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'