@rokkit/chart 1.0.0-next.11

package/LICENSE

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

@@ -0,0 +1,55 @@
+# Charts for Svelte
+
+The core idea behind the implementation is to use the respective strengths of both D3 and Svelte to build Themable, Composable, Animated, Responsive, Accessible, and Reactive Data Visualization components.
+
+- [D3](https://d3js.org/) makes working with SVG a breeze. It provides a large set of utility functions for graph visualization that includes the computation of scales, interpolation, shapes, and more.
+- [Svelte](https://svelte.dev/) makes UI development fun again. It provides modularization, interactivity, reactivity, and responsiveness.
+
+This component library borrows concepts from the following articles, products, and repositories.
+
+- [Introduction to Accessible Contrast and Color for Data Visualization](https://observablehq.com/@frankelavsky/chartability-contrast-series) by [Frank Elavsky](https://observablehq.com/@frankelavsky)
+- [Animated, Responsive, and Reactive Data Visualization with Svelte](https://www.infoq.com/news/2020/10/svelte-d3-animation-data-vis/)
+- [Barchart Race using Svelte & D3](https://t.co/iIoJw4f7Jc?amp=1) by [Amelia Wattenberger](https://mobile.twitter.com/Wattenberger) & [Russell Goldenberg](https://mobile.twitter.com/codenberg)
+- [The D3.js Graph Gallery](https://www.d3-graph-gallery.com/index.html)
+- [DC.js](https://dc-js.github.io/dc.js/) is an awesome implementation of interactive animated charts using D3.
+
+## Getting Started
+
+Get started quickly using [degit](https://github.com/Rich-Harris/degit).
+
+```bash
+degit jerrythomas/sparsh-ui/sites/playground my-app
+```
+
+## Features
+
+- [x] Fill patterns
+- [x] Symbols
+- [x] Colors
+- [ ] Themes
+
+### Plots
+
+- [x] Box
+- [ ] Violin
+- [x] Scatter
+- [ ] Line
+- [ ] Histogram
+- [ ] StackedBar
+- [ ] Funnel
+
+### Chart
+
+- [x] Axis
+  - [x] Labels
+  - [x] Grid
+  - [x] Ticks
+- [ ] Margins
+- [ ] Legend
+- [ ] Composable
+- [ ] Facet Grid
+- [ ] Combine multiple plots
+- [ ] Animation
+- [ ] Time lapse
+  - [ ] Sliding window
+  - [ ] Rolling window

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@rokkit/chart",
+  "version": "1.0.0-next.11",
+  "description": "Components for making interactive charts.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "main": "index.js",
+  "svelte": "src/index.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@testing-library/svelte": "^3.2.2",
+    "@vitest/ui": "~0.12.10",
+    "eslint": "^8.33.0",
+    "js-yaml": "^4.1.0",
+    "jsdom": "^19.0.0",
+    "svelte": "^3.55.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1",
+    "vitest": "~0.19.1",
+    "shared-config": "1.0.0",
+    "eslint-config-shared": "1.0.0"
+  },
+  "dependencies": {
+    "d3-array": "^3.2.2",
+    "d3-collection": "^1.0.7",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "date-fns": "^2.29.3",
+    "ramda": "^0.28.0",
+    "yootils": "^0.3.1",
+    "@rokkit/core": "1.0.0-next.11"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "!src/fixtures",
+    "!src/mocks",
+    "!src/**/*.spec.js"
+  ],
+  "exports": {
+    "./src": "./src",
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.js"
+    }
+  },
+  "scripts": {
+    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
+    "format": "prettier --write --plugin-search-dir=. .",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "upgrade": "pnpm upgrade"
+  }
+}

package/src/chart/FacetGrid.svelte

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

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

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

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

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

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

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

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

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

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

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

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

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