@rokkit/chart 1.0.0-next.16 → 1.0.0-next.160

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/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/Texture.svelte

@@ -1,16 +0,0 @@
-<script>
-	export let id
-	export let fill
-	export let path
-	export let contrast
-	export let thickness = 0.5
-	export let patternUnits = 'userSpaceOnUse'
-	export let size = 10
-</script>
-
-<pattern {id} {patternUnits} width={size} height={size}>
-	<rect width={size} height={size} {fill} />
-	{#if path}
-		<path d={path} fill="none" stroke={contrast} stroke-width={thickness} />
-	{/if}
-</pattern>

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>

package/src/chart/TimelapseChart.svelte

@@ -1,97 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { slidingWindow, uniques, brewer } from '../lib'
-
-	import Grid from './Grid.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
-		console.log(temp)
-		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)
-	// $: console.log(current, phased, chart)
-
-	// 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="flex chart">
-	<Grid />
-	<Axis orient="bottom" />
-	<Axis orient="left" />
-	<BoxPlot />
-	<ViolinPlot />
-	<ScatterPlot jitterWidth={50} offset={50} />
-</svg>

package/src/chart/Timer.svelte

@@ -1,27 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { elapsed, timer } from '../lib/timer.js'
-
-	const dispatch = createEventDispatcher()
-
-	export let isEnabled = false
-	export let currentKeyframe = 0
-	export let keyframeCount = 0
-	export let duration = 1000
-
-	$: if (isEnabled) currentKeyframe = Math.floor($elapsed / duration)
-	$: if (currentKeyframe === keyframeCount) dispatch('end')
-	$: isEnabled && currentKeyframe < keyframeCount ? timer.start() : timer.stop()
-
-	function onReset() {
-		timer.reset()
-		isEnabled = false
-		currentKeyframe = 0
-	}
-</script>
-
-<div class="flex flex-row gap-2 timer">
-	<button on:click|preventDefault={() => (isEnabled = true)}>play</button>
-	<button on:click|preventDefault={() => (isEnabled = false)}>pause</button>
-	<button on:click|preventDefault={onReset}>reset</button>
-</div>

package/src/chart.js

@@ -1,9 +0,0 @@
-export function scales(data, aes, opts) {
-	const { x, y } = aes
-	const { width, height, flipCoords } = {
-		width: 800,
-		height: 600,
-		flipCoords: false,
-		...opts
-	}
-}

package/src/components/charts/Axis.svelte

@@ -1,66 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-	export let orient = 'bottom'
-
-	let chart = getContext('chart')
-
-	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 tickSizeInner = $chart.theme.tick.size.inner || 6
-	let tickSizeOuter = $chart.theme.tick.size.outer || 6
-	let tickPadding = $chart.theme.tick.size.padding || 3
-
-	function axisPath(vertical, scale) {
-		const range = scale.range()
-		return vertical
-			? `M${k * tickSizeOuter},${range[0]}H0V${range[1]}H${k * tickSizeOuter}`
-			: `M${range[0]},${k * tickSizeOuter}V0H${range[1]}V${k * tickSizeOuter}`
-	}
-
-	$: 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'
-	// $: range = axis.scale.range()
-	$: axis = vertical ? $chart.axis.y : $chart.axis.x
-</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, axis.scale)}}"
-	/>
-	{#each axis.ticks as tick}
-		<g
-			class="tick"
-			transform="translate({vertical ? 0 : tick.position},{vertical
-				? tick.position
-				: 0})"
-		>
-			<line
-				stroke="currentColor"
-				y2={vertical ? 0 : k * tickSizeInner}
-				x2={vertical ? k * tickSizeInner : 0}
-			/>
-			<text
-				fill="currentColor"
-				y={vertical ? 0 : k * (tickSizeInner + tickPadding)}
-				x={vertical ? k * (tickSizeInner + tickPadding) : 0}
-				{dy}>{tick.label}</text
-			>
-		</g>
-	{/each}
-</g>