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

package/src/patterns/templates/Path.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { scaledPath } from '@rokkit/core'
+
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+
+	const paths = [
+		['M', 0, 0.25],
+		['A', 0.6, 0.5, 0, 0, 0, 1, 0.25]
+		// ['M', 0, 0.75],
+		// ['A', 0.6, 0.5, 0, 0, 0, 1, 0.75]
+	]
+	$: d = scaledPath(size, paths)
+</script>
+
+<path {d} {stroke} stroke-width={thickness} fill="none" />

package/src/patterns/templates/index.js

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

package/src/plots/Plot.svelte

@@ -1,25 +1,40 @@
 <script>
-	import { aggregate, getScales } from '../lib/utils'
+	import { plotter } from '../lib/plots'
+	import { compact } from '@rokkit/core'
+	export let data = []
+	/** @type {'lineY'|'lineX'|'dot'|'plot'|'bar'} */
+	export let type = 'dot'
+	export let width = null
+	export let height = null
+	export let x = 'x'
+	export let y = 'y'
+	export let fill = null
+	export let stroke = null
+	export let symbol = null
+	export let grid = true
+	export let legend = false
+	export let labels = {}
+	export let tip = true
+	export let channels = null
 
-	import BoxPlot from './BoxPlot.svelte'
-	import ScatterPlot from './ScatterPlot.svelte'
-
-	export let data
-	export let width
-	export let height
-	export let x
-	export let y
-	export let plots = []
-
-	$: nested = aggregate(data, x, y)
-	$: scales = getScales(data, x, y, width, height)
+	$: showLegend = compact({
+		stroke: stroke ? { legend } : null,
+		color: fill && !symbol ? { legend } : null,
+		symbol: symbol ? { legend } : null
+	})
+	$: config = {
+		data,
+		type,
+		aes: compact({ x, y, fill, stroke, symbol, tip, channels }),
+		opts: compact({
+			width,
+			height,
+			grid,
+			...showLegend,
+			x: { label: labels?.x ?? x },
+			y: { label: labels?.y ?? y }
+		})
+	}
 </script>
 
-<svg viewBox="0 0 {width} {height}">
-	{#if plots.includes('box')}
-		<BoxPlot data={nested} {...scales} />
-	{/if}
-	{#if plots.includes('scatter')}
-		<ScatterPlot {data} {x} {y} {...scales} />
-	{/if}
-</svg>
+<plot use:plotter={config} />

package/src/plots/index.js

@@ -1,10 +1 @@
-export { default as Box } from './BoxPlot.svelte'
-export { default as BoxPlot } from './BoxPlot.svelte'
-export { default as Bar } from './BarPlot.svelte'
-export { default as BarPlot } from './BarPlot.svelte'
-export { default as Line } from './LinePlot.svelte'
-export { default as LinePlot } from './LinePlot.svelte'
-export { default as Violin } from './ViolinPlot.svelte'
-export { default as ViolinPlot } from './ViolinPlot.svelte'
-export { default as Scatter } from './old_ScatterPlot.svelte'
-export { default as ScatterPlot } from './old_ScatterPlot.svelte'
+export { default as Plot } from './Plot.svelte'

package/src/symbols/RoundedSquare.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let x = 0
+	export let y = 0
+	export let size = 1
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	$: r = size * 3.534
+	$: props = { rx: r * 0.1, ry: r * 0.1, ...$$restProps }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<rect
+	x={x - r}
+	y={y - r}
+	width={r * 2}
+	height={r * 2}
+	{fill}
+	{stroke}
+	{...props}
+	role="button"
+	on:click
+	on:mouseover
+	on:mouseleave
+	on:focus
+	tabindex="0"
+/>

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['star'](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,7 @@
+import { scaledPath } from '@rokkit/core'
+import paths from './shapes.json'
+
+export const namedShapes = Object.entries(paths).reduce(
+	(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
+	{}
+)

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/chart/Axis.svelte

@@ -1,81 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-	const chart = getContext('chart')
-
-	export let orient = 'bottom'
-	export let majorTickStep = 0
-	export let minorTickStep = 0
-	export let lower = 0
-	export let upper = 100
-
-	function getTicks(lower, upper, majorTickStep, minorTickStep) {
-		if (majorTickStep === 0 && minorTickStep === 0) return []
-		const minorTicks = Array.from(
-			{ length: Math.floor((upper - lower) / minorTickStep) + 1 },
-			(_, i) => ({
-				position: i * minorTickStep,
-				label: i * minorTickStep,
-				type: 'minor'
-			})
-		)
-		const majorTicks = Array.from(
-			{ length: Math.floor((upper - lower) / majorTickStep) + 1 },
-			(_, i) => ({
-				position: i * majorTickStep,
-				label: i * majorTickStep,
-				type: 'major'
-			})
-		)
-		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)
-	}
-
-	let top = orient === 'bottom' ? $chart.height - $chart.margin.bottom : $chart.margin.top
-	let left = orient === 'right' ? $chart.width - $chart.margin.right : $chart.margin.left
-
-	let tickPadding = $chart.theme.tick.size.padding
-
-	function axisPath(vertical) {
-		const range = [lower, upper]
-		const size = $chart.theme.tick.size.end
-		return vertical
-			? `M${k * size},${range[0]}H0V${range[1]}H${k * size}`
-			: `M${range[0]},${k * size}V0H${range[1]}V${k * size}`
-	}
-
-	$: anchor = orient === 'right' ? 'start' : orient === 'left' ? 'end' : 'middle'
-	$: k = orient === 'top' || orient === 'left' ? -1 : 1
-	$: dy = orient === 'top' ? '0em' : orient === 'bottom' ? '0.71em' : '0.32em'
-	$: vertical = orient === 'left' || orient === 'right'
-	$: ticks = getTicks(lower, upper, majorTickStep, minorTickStep)
-</script>
-
-<g
-	transform="translate({vertical ? left : 0},{vertical ? 0 : top})"
-	fill="none"
-	font-size="10"
-	font-family="sans-serif"
-	text-anchor={anchor}
-	class="axis"
->
-	<path class="domain" stroke="currentColor" d="{axisPath(vertical)}}" />
-	{#each ticks as tick}
-		{@const size = $chart.theme.tick.size[tick.type]}
-		<g
-			class="tick"
-			transform="translate({vertical ? 0 : tick.position},{vertical ? tick.position : 0})"
-		>
-			<line stroke="currentColor" y2={vertical ? 0 : k * size} x2={vertical ? k * size : 0} />
-			<text
-				fill="currentColor"
-				y={vertical ? 0 : k * (size + tickPadding)}
-				x={vertical ? k * (size + tickPadding) : 0}
-				{dy}>{tick.label}</text
-			>
-		</g>
-	{/each}
-</g>

package/src/chart/AxisGrid.svelte

@@ -1,22 +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/Chart.svelte

@@ -1,40 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { compact } from '@rokkit/core'
-	import { builtIn } from '../lib/theme'
-
-	let chart = writable({})
-
-	setContext('chart', chart)
-
-	export let data
-	export let width = 800
-	export let height = 450
-	export let theme = builtIn
-	export let x = 'x'
-	export let y = 'y'
-	export let fill = null
-	export let color = null
-	export let padding = 20
-	export let curve = 'basis'
-	export let stat = 'identity'
-
-	$: aes = compact({ x, y, fill, color, stat, curve, padding })
-	$: chart.set({
-		width,
-		height,
-		data,
-		theme,
-		aes,
-		axis: {
-			x: { scale: 'linear', orient: 'bottom' },
-			y: { scale: 'linear', orient: 'left' }
-		},
-		margin: { top: 10, right: 10, bottom: 10, left: 10 }
-	})
-</script>
-
-<svg viewBox="0 0 {width} {height}" class="chart" width="100%">
-	<slot />
-</svg>

package/src/chart/FacetGrid.svelte

@@ -1,49 +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/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/Swatch.svelte

@@ -1,84 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-
-	import { swatch } from '../lib/utils'
-	import { clamp } from 'yootils'
-	import { Symbol, DefinePatterns } from '@rokkit/molecules'
-
-	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, 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}
-		<DefinePatterns 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="h-10 w-10 flex items-center justify-center rounded bg-gray-100 p-1 shadow-md 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,53 +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) {
-		if (previous) {
-			grid[previous.row][previous.column].isCurrent = false
-		}
-		grid[row][column].isCurrent = true
-		previous = { row, column }
-	}
-	$: grid = toGrid(columns, rows, items)
-</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/TexturedShape.svelte

@@ -1,20 +0,0 @@
-<script>
-	import { Symbol } from '@rokkit/molecules'
-	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>

package/src/chart/TimelapseChart.svelte

@@ -1,90 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { slidingWindow, uniques, brewer } from '../lib'
-
-	import Grid from './AxisGrid.svelte'
-	import Axis from './Axis.svelte'
-	import BoxPlot from '../plots/BoxPlot.svelte'
-	import ViolinPlot from '../plots/ViolinPlot.svelte'
-	import ScatterPlot from '../plots/ScatterPlot.svelte'
-
-	let chart = writable({})
-	let axis
-	setContext('chart', chart)
-
-	export let data
-	export let x
-	export let y
-	export let time
-	export let theme
-
-	export let current
-	export let stages
-
-	function base(data, x, y) {
-		return {
-			data,
-			x,
-			y,
-			width: 800,
-			height: 350,
-			values: {
-				x: uniques(data, x),
-				y: uniques(data, y)
-			}
-		}
-	}
-
-	function sliceBy(data, attr, size, step, offset) {
-		const values = uniques(data, attr)
-		const groups = slidingWindow(values, size, step, offset).map((x) => ({
-			...x,
-			data: data.filter((y) => y.Petal_Length >= x.lowerBound && y.Petal_Length < x.upperBound)
-		}))
-
-		return groups
-	}
-
-	function timed(data, x, y, time) {
-		let chart = base(data, x, y)
-		let temp = brewer().chart(data, x, y).use(theme).computeAxis()
-		axis = temp.axis
-		chart.data = sliceBy(chart.data, time, 3, 1)
-		stages = chart.data.length - 1
-		return chart
-	}
-
-	function switchChart(index) {
-		let chart = {}
-		if (index != null) {
-			chart = brewer().chart(phased.data[index].data, x, y).use(theme).computeAxis()
-			chart.axis = axis
-			// chart.margin = { left: 40, right: 10, top: 10, bottom: 30 }
-		}
-		return chart
-	}
-	let phased
-
-	$: phased = timed(data, x, y, time)
-	$: $chart = switchChart(current)
-
-	// setup chart attributes that do not change over time
-	// get scales for x & y
-	// set margins
-
-	// nest data by time attribute
-	// set up sequence based on ascending values of time
-	// set up the timer to switch between data values
-	// On change set the context with new data set
-	// Old data set needs exit animation, new data set needs entry animation
-</script>
-
-<svg viewBox="0 0 {phased.width} {phased.height}" class="chart flex">
-	<Grid />
-	<Axis orient="bottom" />
-	<Axis orient="left" />
-	<BoxPlot />
-	<ViolinPlot />
-	<ScatterPlot jitterWidth={50} offset={50} />
-</svg>