@rokkit/chart 1.0.0-next.12 → 1.0.0-next.121

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'

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

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>

package/src/chart/Swatch.svelte

@@ -1,93 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-
-	import { swatch } from '../lib/utils'
-	import { clamp } from 'yootils'
-	import Symbol from './Symbol.svelte'
-	import PatternDefs from './PatternDefs.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let label
-	export let size = 30
-	export let items = []
-	export let type = 'square'
-	export let pad = 10
-	export let columns
-	export let rows
-	export let limit
-	export let start = 0
-	export let autoscale = false
-	export let interactive = false
-	export let activeIndex = -1
-
-	function fill(item) {
-		return item.fillUrl || item.fill || item
-	}
-
-	function stroke(item) {
-		return item.stroke || item
-	}
-
-	function swapType(inputType) {
-		return inputType === 'square'
-			? 'circle'
-			: inputType === 'circle'
-			? 'square'
-			: type
-	}
-
-	function click(index) {
-		if (interactive) {
-			activeIndex = start + index
-			dispatch('click', { index: activeIndex, item: items[activeIndex] })
-		}
-	}
-
-	function forwardEvent(event, index) {
-		if (interactive)
-			dispatch(event, {
-				index: start + index,
-				item: items[start + index]
-			})
-	}
-
-	$: grid = swatch(limit || items.length, size, pad, columns, rows)
-	$: data = grid.data.map((item, i) => ({
-		...item,
-		type: i == activeIndex ? swapType(type) : type
-	}))
-	$: start = clamp(start, 0, items.length - (limit || 0))
-</script>
-
-<div class="flex flex-col leading-loose">
-	{#if label}
-		<span class="py-2">{label}</span>
-	{/if}
-	<svg
-		viewBox="0 0 {grid.width} {grid.height}"
-		width="100%"
-		class="cursor-pointer"
-	>
-		{#if label}
-			<title>A swatch with label {label}</title>
-		{/if}
-
-		{#each data as { cx, cy, r, type }, i}
-			<Symbol
-				x={cx}
-				y={cy}
-				{size}
-				fill={fill(items[i + start])}
-				stroke={stroke(items[i + start])}
-				shape={items[i + start].shape || type}
-				thickness={i + start == activeIndex ? 2 : 0.5}
-				on:click={click(i + start)}
-				on:mouseover={forwardEvent('mouseover', i + start)}
-				on:mouseleave={forwardEvent('mouseleave', i + start)}
-				on:focus={forwardEvent('focus', i + start)}
-			/>
-		{/each}
-		<PatternDefs patterns={items} />
-	</svg>
-</div>

package/src/chart/SwatchButton.svelte

@@ -1,29 +0,0 @@
-<script>
-	import TexturedShape from './TexturedShape.svelte'
-
-	export let pattern
-	export let shape = 'circle'
-	// export let type
-	export let fill
-	export let stroke
-	export let isCurrent = false
-
-	const size = 40
-</script>
-
-<button
-	class="bg-gray-100 rounded shadow-md w-10 h-10 p-1 flex items-center justify-center hover:bg-primary-300"
-	class:isCurrent
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
->
-	<TexturedShape {pattern} {fill} {stroke} {shape} {size} />
-</button>
-
-<style>
-	.isCurrent {
-		@apply bg-primary-200;
-	}
-</style>

package/src/chart/SwatchGrid.svelte

@@ -1,55 +0,0 @@
-<script>
-  import SwatchButton from './SwatchButton.svelte'
-
-  export let columns
-  export let rows
-  export let items
-  let grid
-
-  function toGrid(columns, rows, patterns) {
-    const count = patterns.length
-    if (columns > 0) {
-      rows = Math.ceil(count / columns)
-    } else if (rows > 0) {
-      columns = Math.ceil(count / rows)
-    } else {
-      columns = Math.ceil(Math.sqrt(count))
-      rows = Math.ceil(count / columns)
-    }
-    const grid = [...Array(rows).keys()].map((row) =>
-      [...Array(columns).keys()]
-        .filter((column) => row * columns + column < count)
-        .map((column) => ({
-          item: patterns[row * columns + column],
-          isCurrent: false,
-        }))
-    )
-    return grid
-  }
-  let previous
-  function handleClick(row, column) {
-    console.log(row, column, grid)
-    if (previous) {
-      grid[previous.row][previous.column].isCurrent = false
-    }
-    grid[row][column].isCurrent = true
-    previous = { row, column }
-  }
-  $: grid = toGrid(columns, rows, items)
-  $: console.log(grid)
-</script>
-
-<row class="flex flex-col gap-2">
-  {#each grid as items, row}
-    <div class="flex flex-row gap-2">
-      {#each items as { item, isCurrent }, column}
-        <SwatchButton
-          shape="shurikan"
-          pattern={item}
-          on:click={() => handleClick(row, column)}
-          {isCurrent}
-        />
-      {/each}
-    </div>
-  {/each}
-</row>

package/src/chart/Symbol.svelte

@@ -1,37 +0,0 @@
-<script>
-	import { namedShapes } from '../components/lib/shape'
-
-	export let x = 0
-	export let y = 0
-	export let size = 10
-	export let fill = 'none'
-	export let stroke = 'currentColor'
-	export let thickness = 0.5
-
-	export let name = null
-	export let shape = null
-
-	$: x = x - size / 2
-	$: y = y - size / 2
-
-	$: d =
-		typeof shape === 'function'
-			? shape(size)
-			: (shape || name) in namedShapes
-			? namedShapes[shape || 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"
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
-/>

package/src/chart/TexturedShape.svelte

@@ -1,27 +0,0 @@
-<script>
-	import Symbol from './Symbol.svelte'
-	import Texture from './Texture.svelte'
-
-	export let pattern
-	export let shape = 'circle'
-	export let fill
-	export let stroke
-
-	const size = 40
-</script>
-
-<svg viewBox="0 0 {size} {size}">
-	<Symbol
-		x={size / 2}
-		y={size / 2}
-		{size}
-		fill={pattern.fillUrl || fill}
-		{stroke}
-		{shape}
-	/>
-	{#if pattern}
-		<defs>
-			<Texture {...pattern} />
-		</defs>
-	{/if}
-</svg>