@rokkit/chart 1.0.0-next.100

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,71 @@
+{
+  "name": "@rokkit/chart",
+  "version": "1.0.0-next.100",
+  "description": "Components for making interactive charts.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@testing-library/svelte": "^5.2.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "~2.1.1",
+    "js-yaml": "^4.1.0",
+    "jsdom": "^25.0.0",
+    "svelte": "^4.2.19",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vitest": "~2.1.1",
+    "shared-config": "1.0.0-next.100"
+  },
+  "dependencies": {
+    "@observablehq/plot": "^0.6.16",
+    "d3-array": "^3.2.4",
+    "d3-collection": "^1.0.7",
+    "d3-format": "^3.1.0",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "date-fns": "^4.1.0",
+    "ramda": "^0.30.1",
+    "yootils": "^0.3.1",
+    "@rokkit/atoms": "1.0.0-next.100",
+    "@rokkit/core": "1.0.0-next.100",
+    "@rokkit/molecules": "1.0.0-next.100",
+    "@rokkit/stores": "1.0.0-next.100"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "!spec"
+  ],
+  "exports": {
+    "./src": "./src",
+    "./package.json": "./package.json",
+    "./lib": "./src/lib/index.js",
+    "./patterns": "./src/patterns/index.js",
+    "./symbols": "./src/symbols/index.js",
+    "./elements": "./src/elements/index.js",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    }
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint --fix .",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "latest": "pnpm upgrade --latest && pnpm test:ci",
+    "release": "pnpm publish --access public"
+  }
+}

package/src/Chart.svelte

@@ -0,0 +1,67 @@
+<script>
+	import { setContext } from 'svelte'
+	import { writable } from 'svelte/store'
+	import { chart } from './lib'
+
+	let config = writable({})
+	setContext('chart', config)
+
+	export let data
+	export let x
+	export let y
+	export let value = y
+	export let color = x
+	export let fill = x
+	// export let pattern = x
+	export let width = 2048
+	export let height = 2048
+	export let padding = height / 16
+	export let marginLeft = 0
+	export let marginRight = 0
+	export let marginTop = 0
+	export let marginBottom = 0
+	export let flipCoords = false
+	export let spacing = 0.1
+
+	$: margin = {
+		left: marginLeft,
+		right: marginRight,
+		top: marginTop,
+		bottom: marginBottom
+	}
+	// $: patterns = [...new Set(data.map((d) => d[pattern]))]
+	// $: fills = [...new Set(data.map((d) => d[fill]))]
+	// $: colors = [...new Set(data.map((d) => d[color]))]
+	$: config.set(
+		chart(data, {
+			x,
+			y,
+			value,
+			color,
+			fill,
+			width,
+			height,
+			padding,
+			margin,
+			flipCoords,
+			spacing
+		})
+	)
+</script>
+
+<svg
+	viewBox="0 0 {$config.width} {$config.height}"
+	width={$config.width}
+	height={$config.height}
+	class="w-full h-full chart"
+>
+	<rect
+		x="0"
+		y="0"
+		width={$config.width}
+		height={$config.height}
+		fill="none"
+		stroke="currentColor"
+	/>
+	<slot />
+</svg>

package/src/Symbol.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { components } from './symbols'
+
+	export let x = 0
+	export let y = 0
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+	export let name = 'circle'
+	/** @type Object<string, any> */
+	export let using = components
+
+	$: component = using[name] || using.default
+	$: props = using[name] ? $$restProps : { name, ...$$restProps }
+</script>
+
+<svelte:component this={component} {x} {y} {size} {fill} {stroke} {...props} />

package/src/Texture.svelte

@@ -0,0 +1,16 @@
+<script>
+	export let id
+	export let path
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+	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} stroke-width={thickness} />
+	{/if}
+</pattern>

package/src/elements/Bar.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { format } from 'd3-format'
+	import Label from './Label.svelte'
+
+	export let rank
+	export let value
+	export let name
+	export let formatString = '.1%'
+	export let scales
+	export let height = 60
+	export let fill
+	export let spaceBetween = 5
+
+	const textHeight = 16
+	const charWidth = 12
+	$: y = rank * (height + spaceBetween)
+	$: width = $scales.x(value)
+
+	$: textWidth = name.length * charWidth
+	$: textOffset = width <= textWidth ? width + charWidth : width
+	$: textAnchor = textOffset > width ? 'start' : 'end'
+
+	$: formattedValue = format(formatString)(value)
+</script>
+
+<rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
+<rect x={$scales.x(0)} {y} width={5} {height} {fill} />
+<Label x={width} y={y + textHeight + 8} anchor={textAnchor} text={name} />
+<Label x={width} y={y + height - 14} anchor={textAnchor} text={formattedValue} small />

package/src/elements/ColorRamp.svelte

@@ -0,0 +1,49 @@
+<script>
+	import { scaleLinear } from 'd3-scale'
+	import { id as uniqueId } from '@rokkit/core'
+
+	export let x = 0
+	export let y = 0
+	export let textSize = 5
+	export let height = 10
+	export let width = 100
+	export let tickCount = 5
+	export let scale
+
+	$: scaleTicks = scaleLinear()
+		.range([x, x + width])
+		.domain(scale.domain())
+	$: scalePercent = scaleLinear().range([0, 100]).domain(scale.domain())
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
+
+	$: colors = ticks.map(({ value }) => ({
+		color: scale(value),
+		offset: `${scalePercent(value)}%`
+	}))
+	$: id = uniqueId('legend-')
+</script>
+
+<defs>
+	<linearGradient {id}>
+		{#each colors as { color, offset }}
+			<stop stop-color={color} {offset} />
+		{/each}
+	</linearGradient>
+</defs>
+<rect {x} y={y + height} {width} {height} fill="url(#{id})" />
+{#each ticks as { x, value }}
+	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
+	<text {x} y={y + height / 2} font-size={textSize}>{value}</text>
+{/each}
+<line x1={x} y1={y + 2 * height} x2={x + 100} y2={y + 2 * height} />
+
+<style>
+	line {
+		stroke: currentColor;
+		stroke-width: 0.2;
+	}
+	text {
+		fill: currentColor;
+		text-anchor: middle;
+	}
+</style>

package/src/elements/ContinuousLegend.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { scaleLinear } from 'd3-scale'
+	// import { id as uniqueId } from '@rokkit/core'
+
+	export let x = 0
+	export let y = 0
+	export let textSize = 5
+	export let height = 10
+	export let width = 100
+	export let tickCount = 5
+	export let scale
+	export let id = 'legend'
+
+	$: scaleTicks = scaleLinear()
+		.range([x, x + 100])
+		.domain(scale.domain())
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
+
+	$: colors = scale.range()
+	// $: id = uniqueId('legend-')
+</script>
+
+<defs>
+	<linearGradient {id}>
+		<stop stop-color={colors[0]} offset="0%" />
+		<stop stop-color={colors[1]} offset="100%" />
+	</linearGradient>
+</defs>
+<rect {x} y={y + height} {width} {height} fill="url(#{id})" />
+{#each ticks as { x, label }}
+	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
+	<text {x} y={y + height / 2} font-size={textSize}>{label}</text>
+{/each}
+<line x1={x} y1={y + 2 * height} x2={x + 100} y2={y + 2 * height} />
+
+<style>
+	line {
+		stroke: currentColor;
+		stroke-width: 0.2;
+	}
+	text {
+		fill: currentColor;
+		text-anchor: middle;
+	}
+</style>

package/src/elements/DefinePatterns.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { uniq } from 'ramda'
+
+	export let size = 10
+	export let patternUnits = 'userSpaceOnUse'
+	/** @type {Array<import('./types').Pattern>} */
+	export let patterns = []
+
+	$: names = uniq(patterns.map(({ id }) => id))
+</script>
+
+{#if names.length < patterns.length}
+	<error> Patterns should be an array and should have unique names for each pattern </error>
+{:else if patterns.length > 0}
+	<defs>
+		{#each patterns as { id, component, fill, stroke }}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<svelte:component this={component} {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -0,0 +1,39 @@
+<script>
+	export let x = 0
+	export let y = 0
+	export let textSize = 5
+	export let size = 10
+	export let space = 2
+	export let padding = 5
+	export let scale
+	export let tickCount = 10
+
+	$: sizeWithSpace = size + space
+	$: ticks = scale.ticks.apply(scale, [tickCount])
+</script>
+
+{#each ticks as tick, i}
+	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
+		>{tick}</text
+	>
+	<rect
+		x={x + padding + i * sizeWithSpace}
+		y={y + padding + textSize}
+		width={size}
+		height={size}
+		fill={scale(tick)}
+		rx="1"
+		ry="1"
+	/>
+{/each}
+
+<style>
+	rect {
+		stroke: currentColor;
+		stroke-width: 0.2;
+	}
+	text {
+		fill: currentColor;
+		text-anchor: middle;
+	}
+</style>

package/src/elements/Label.svelte

@@ -0,0 +1,13 @@
+<script>
+	export let x
+	export let y
+	export let text
+	export let angle = 0
+	export let small = false
+	export let anchor = 'middle'
+
+	$: transform = `translate(${x},${y}) rotate(${angle})`
+	$: anchor = ['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle'
+</script>
+
+<text class="label" class:small text-anchor={anchor} {transform}>{text}</text>

package/src/elements/SymbolGrid.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { swatch, swatchGrid } from '../lib'
+	import Symbol from '../Symbol.svelte'
+
+	export let base = 'teal'
+	export let size = 4
+	export let shade = 600
+
+	$: grid = swatchGrid($swatch.keys.symbol.length, size, 10)
+</script>
+
+<svg viewBox="0 0 {grid.width} {grid.height}">
+	{#each grid.data as { x, y, r }, index}
+		<Symbol
+			{x}
+			{y}
+			size={r * 2}
+			name={$swatch.keys.symbol[index]}
+			fill={$swatch.palette[base][shade]}
+			stroke={$swatch.palette[base][shade]}
+		/>
+	{/each}
+</svg>

package/src/elements/index.js

@@ -0,0 +1,6 @@
+export { default as Bar } from './Bar.svelte'
+export { default as ColorRamp } from './ColorRamp.svelte'
+export { default as ContinuousLegend } from './ContinuousLegend.svelte'
+export { default as Label } from './Label.svelte'
+export { default as DefinePatterns } from './DefinePatterns.svelte'
+export { default as SymbolGrid } from './SymbolGrid.svelte'

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as Chart } from './Chart.svelte'
+export { default as Symbol } from './Symbol.svelte'
+export * from './plots'

package/src/lib/brewer.js

@@ -0,0 +1,25 @@
+/**
+ * Get fill patterns for a set of values
+ *
+ * @param {Array} values - Array of values
+ * @param {Object} swatch - Object with keys for color, gray, and pattern
+ * @param {Boolean} gray - Boolean to determine if gray or color
+ * @returns {Object} - Object with keys for pattern and color
+ */
+export function getFillPatterns(values, swatch, gray = false) {
+	const colors = gray ? swatch.keys.gray : swatch.keys.color
+	const max_colors = colors.length
+	const max_patterns = swatch.keys.pattern.length
+
+	const mix = values
+		.map((value, index) => ({
+			[value]: {
+				pattern: swatch.keys.pattern[index % max_patterns],
+				color: colors[index % max_colors]
+			}
+		}))
+		.reduce((acc, current) => ({ ...acc, ...current }), {})
+	return mix
+}
+
+// export function getStrokePatterns() {}