@rokkit/chart 1.0.0-next.36 → 1.0.0-next.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.36",
+  "version": "1.0.0-next.37",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,35 +13,36 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@testing-library/svelte": "^4.0.3",
     "@vitest/coverage-v8": "^0.33.0",
     "@vitest/ui": "~0.33.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.5",
+    "svelte": "^4.1.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.4",
+    "vite": "^4.4.7",
     "vitest": "~0.33.0",
-    "shared-config": "1.0.0-next.36"
+    "shared-config": "1.0.0-next.37"
   },
   "dependencies": {
     "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": "^2.30.0",
     "ramda": "^0.29.0",
-    "rokkit": "latest",
     "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.36"
+    "@rokkit/core": "1.0.0-next.37",
+    "@rokkit/stores": "1.0.0-next.37",
+    "@rokkit/molecules": "1.0.0-next.37"
   },
   "files": [
     "src/**/*.js",
     "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "!spec"
   ],
   "exports": {
     "./src": "./src",

package/src/chart/FacetGrid.svelte

@@ -2,8 +2,8 @@
 	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'
+	// import AxisTicks from './AxisTicks.svelte'
+	// import AxisLabels from './AxisLabels.svelte'
 
 	export let data
 	export let row
@@ -29,18 +29,18 @@
 
 				<Chart data={dataFilteredByCol} {x} {y}>
 					<Axis name="x" count={7} gap={10}>
-						<AxisTicks side="bottom">
+						<!-- <AxisTicks side="bottom">
 							{#if labels.x}
 								<AxisLabels angle={-60} />
 							{/if}
-						</AxisTicks>
+						</AxisTicks> -->
 					</Axis>
 					<Axis name="y" gap={10}>
-						<AxisTicks side="left">
+						<!-- <AxisTicks side="left">
 							{#if labels.y}
 								<AxisLabels />
 							{/if}
-						</AxisTicks>
+						</AxisTicks> -->
 						<AxisGrid />
 					</Axis>
 					<svelte:component this={plot} />

package/src/chart/Swatch.svelte

@@ -3,8 +3,7 @@
 
 	import { swatch } from '../lib/utils'
 	import { clamp } from 'yootils'
-	import Symbol from './Symbol.svelte'
-	import PatternDefs from './PatternDefs.svelte'
+	import {Symbol, DefinePatterns} from '@rokkit/molecules'
 
 	const dispatch = createEventDispatcher()
 
@@ -88,6 +87,6 @@
 				on:focus={forwardEvent('focus', i + start)}
 			/>
 		{/each}
-		<PatternDefs patterns={items} />
+		<DefinePatterns patterns={items} />
 	</svg>
 </div>

package/src/chart/TexturedShape.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Symbol from './Symbol.svelte'
+	import {Symbol} from '@rokkit/molecules'
 	import Texture from './Texture.svelte'
 
 	export let pattern

package/src/chart/TimelapseChart.svelte

@@ -3,11 +3,11 @@
 	import { writable } from 'svelte/store'
 	import { slidingWindow, uniques, brewer } from '../lib'
 
-	import Grid from './Grid.svelte'
+	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/old_ScatterPlot.svelte'
+	import ScatterPlot from '../plots/ScatterPlot.svelte'
 
 	let chart = writable({})
 	let axis

package/src/elements/ColorRamp.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../lib/utils'
+	import { id as uniqueId } from '@rokkit/core'
 
 	export let x = 0
 	export let y = 0

package/src/elements/ContinuousLegend.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../components/lib/utils'
+	import { id as uniqueId } from '@rokkit/core'
 
 	export let x = 0
 	export let y = 0

package/src/index.js

@@ -12,5 +12,4 @@ export { default as BarPlot } from './plots/BarPlot.svelte'
 export { default as LinePlot } from './plots/LinePlot.svelte'
 export { default as BoxPlot } from './plots/BoxPlot.svelte'
 export { default as ViolinPlot } from './plots/ViolinPlot.svelte'
-export { default as ScatterPlot } from './plots/old_ScatterPlot.svelte'
-export * from './components/lib'
+export * from './lib'

package/src/{components/lib → lib}/chart.js

@@ -1,3 +1,15 @@
+// export function scales(data, aes, opts) {
+// 	const { x, y } = aes
+// 	const { width, height, flipCoords } = {
+// 		width: 800,
+// 		height: 600,
+// 		flipCoords: false,
+// 		...opts
+// 	}
+
+// 	return { x, y, width, height, flipCoords }
+// }
+
 import { nest } from 'd3-collection'
 import { max, quantile, ascending, bin } from 'd3-array'
 import { scaleLinear } from 'd3-scale'

package/src/lib/color.js

@@ -0,0 +1,59 @@
+import { palette } from './constants'
+
+export class ColorBrewer {
+	constructor() {
+		this.colors = ['blue', 'pink', 'teal', 'indigo', 'purple', 'amber', 'rose']
+		this.palette = palette
+		this.grayscale = this.palette['trueGray']
+		this.fill = 100
+		this.stroke = 600
+		this.contrast = 600
+	}
+
+	dark() {
+		this.fill = 500
+		this.stroke = 700
+		this.contrast = 100
+		return this
+	}
+
+	mix(fill, stroke, contrast) {
+		this.fill = Object.keys(this.grayscale).includes(fill) ? fill : this.fill
+		this.stroke = Object.keys(this.grayscale).includes(stroke)
+			? stroke
+			: this.stroke
+		this.contrast = Object.keys(this.grayscale).includes(contrast)
+			? contrast
+			: this.contrast
+
+		return this
+	}
+
+	swatch(colors) {
+		this.palette = colors
+		return this
+	}
+
+	filter(colors) {
+		this.colors = colors
+		return this
+	}
+
+	gray() {
+		return {
+			fill: this.grayscale[this.fill],
+			stroke: this.grayscale[this.stroke],
+			contrast: this.grayscale[this.contrast]
+		}
+	}
+
+	brew() {
+		const palette = this.colors.map((color) => ({
+			fill: this.palette[color][this.fill],
+			stroke: this.palette[color][this.stroke],
+			contrast: this.palette[color][this.contrast]
+		}))
+
+		return palette
+	}
+}

package/src/{components/lib/color.js → lib/constants.js}

@@ -1,3 +1,70 @@
+export const __muted__ = {
+	color: '#eeeeee',
+	fill: 'empty',
+	shape: 'circle'
+}
+export const __colors__ = [
+	'#FFDE6B',
+	'#EF89EE',
+	'#F79F1E',
+	'#02B8FF',
+	'#9F84EC',
+	'#15CBC4',
+	'#0092FD',
+	'#F63A57',
+	'#A2CB39',
+	'#FF6E2F',
+	'#FEB8B9',
+	'#af7aa1',
+	'#7EFFF5'
+]
+
+export const __patterns__ = {
+	A: 'M0 5A6 6 0 0 0 10 5',
+	B: 'M0 10L10 0',
+	C: 'M0 0A10 10 0 0 0 10 10',
+	D: 'M0 0L10 10',
+	E: 'M10 5A6 6 0 0 0 0 5',
+	F: 'M10 10A10 10 0 0 0 0 0',
+	G: 'M0 0L10 10ZM10 0L0 10Z',
+	H: 'M1 1L9 1L9 9L1 9Z',
+	I: 'M4 0L4 10M6 10L6 0M0 4L10 4M10 6L0 6',
+	J: 'M0 2L8 10M2 0L10 8M0 8L8 0M2 10L10 2',
+	K: 'M5 1A 4 4 0 0 0 9 5A4 4 0 0 0 5 9A4 4 0 0 0 1 5A4 4 0 0 0 5 1',
+	L: 'M1 3L7 9M3 1L9 7M1 7L7 1M3 9L9 3',
+	M: 'M2 2A4 4 0 0 0 8 2A4 4 0 0 0 8 8A4 4 0 0 0 2 8A4 4 0 0 0 2 2',
+	N: 'M0 0A5 5 0 0 0 10 0A5 5 0 0 0 10 10A5 5 0 0 0 0 10A5 5 0 0 0 0 0',
+	O: 'M5 2A 3 3 0 0 0 8 5A3 3 0 0 0 5 8A3 3 0 0 0 2 5A3 3 0 0 0 5 2',
+	P: 'M2 5L5 2L8 5L5 8Z',
+	Q: 'M3 5A2 2 0 0 0 7 5A2 2 0 0 0 3 5M1 5L9 5M5 1L5 9',
+	R: 'M2 8L8 2ZM1.5 3.5L3.5 1.5ZM6.5 8.5L8.5 6.5ZM0 0L10 10Z',
+	S:
+		'M2 8L8 2ZM1.5 3.5L3.5 1.5Z' +
+		'M6.5 8.5L8.5 6.5Z' +
+		'M2 2L8 8M1.5 6.5L3.5 8.5' +
+		'M6.5 1.5L8.5 3.5',
+	T:
+		'M5 1 A6 6 0 0 0 5 9' +
+		'A6 6 0 0 0 5 1' +
+		'M1 5A6 6 0 0 0 9 5A6 6 0 0 0 1 5',
+	U:
+		'M1.5 5A1 1 0 0 0 3.5 5A1 1 0 0 0 1.5 5' +
+		'M6.5 5A1 1 0 0 0 8.5 5A1 1 0 0 0 6.5 5' +
+		'M5 1.5A1 1 0 0 0 5 3.5A1 1 0 0 0 5 1.5' +
+		'M5 6.5A1 1 0 0 0 5 8.5A1 1 0 0 0 5 6.5',
+	V:
+		'M1.5 2.5A1 1 0 0 0 3.5 2.5A1 1 0 0 0 1.5 2.5' +
+		'M6.5 2.5A1 1 0 0 0 8.5 2.5A1 1 0 0 0 6.5 2.5' +
+		'M2.5 6.5A1 1 0 0 0 2.5 8.5A1 1 0 0 0 2.5 6.5' +
+		'M7.5 6.5A1 1 0 0 0 7.5 8.5A1 1 0 0 0 7.5 6.5' +
+		'M3.5 5A1 1 0 0 0 6.5 5A1 1 0 0 0 3.5 5',
+	W: 'M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' + 'M2 1V3M1 2H3' + 'M8 9V7M9 8H7',
+	X: 'M5 2L2.5 9L8.8 4.6L1.2 4.6L7.5 9Z',
+	Y: 'M0 5A5 5 0 0 0 5 0' + 'M5 10A5 5 0 0 0 0 5' + 'M5 10A5 5 0 0 0 5 0',
+	Z: 'M0 0L10 10M5 0L10 5M0 5 L5 10',
+	Z1: 'M0 0L10 10M3 0L10 7M0 7 L3 10'
+}
+
 export const colors = [
 	'#FFDE6B',
 	'#EF89EE',
@@ -268,60 +335,48 @@ export const palette = {
 	}
 }
 
-export class ColorBrewer {
-	constructor() {
-		this.colors = ['blue', 'pink', 'teal', 'indigo', 'purple', 'amber', 'rose']
-		this.palette = palette
-		this.grayscale = this.palette['trueGray']
-		this.fill = 100
-		this.stroke = 600
-		this.contrast = 600
-	}
-
-	dark() {
-		this.fill = 500
-		this.stroke = 700
-		this.contrast = 100
-		return this
-	}
-
-	mix(fill, stroke, contrast) {
-		this.fill = Object.keys(this.grayscale).includes(fill) ? fill : this.fill
-		this.stroke = Object.keys(this.grayscale).includes(stroke)
-			? stroke
-			: this.stroke
-		this.contrast = Object.keys(this.grayscale).includes(contrast)
-			? contrast
-			: this.contrast
-
-		return this
-	}
-
-	swatch(colors) {
-		this.palette = colors
-		return this
-	}
-
-	filter(colors) {
-		this.colors = colors
-		return this
-	}
-
-	gray() {
-		return {
-			fill: this.grayscale[this.fill],
-			stroke: this.grayscale[this.stroke],
-			contrast: this.grayscale[this.contrast]
-		}
-	}
-
-	brew() {
-		const palette = this.colors.map((color) => ({
-			fill: this.palette[color][this.fill],
-			stroke: this.palette[color][this.stroke],
-			contrast: this.palette[color][this.contrast]
-		}))
-
-		return palette
-	}
+export const shapePaths = {
+	// square: ['M', 1, 1, 'L', 9, 1, 'L', 9, 9, 'L', 1, 9, 'Z'],
+	square: [
+		['M', 0.1, 0],
+		['A', 0.1, 0.1, 0, 0, 0, 0, 0.1, 'V', 0.9],
+		['A', 0.1, 0.1, 0, 0, 0, 0.1, 1, 'H', 0.9],
+		['A', 0.1, 0.1, 0, 0, 0, 1, 0.9, 'V', 0.1],
+		['A', 0.1, 0.1, 0, 0, 0, 0.9, 0, 'Z']
+	],
+	circle: [
+		['M', 0, 5],
+		['A', 5, 5, 0, 0, 0, 10, 5],
+		['A', 5, 5, 0, 0, 0, 0, 5]
+	],
+	triangle: ['M', 5, 0, 'L', 10, 10, 'L', 0, 10, 'Z'],
+	diamond: [
+		['M', 5, 0],
+		['A', 7, 7, 0, 0, 0, 10, 5],
+		['A', 7, 7, 0, 0, 0, 5, 10],
+		['A', 7, 7, 0, 0, 0, 0, 5],
+		['A', 7, 7, 0, 0, 0, 5, 0]
+	],
+	rhombus: ['M', 0, 5, 'L', 5, 0, 'L', 10, 5, 'L', 5, 10, 'Z'],
+	heart: [
+		['M', 9, 5],
+		['A', 0.8, 0.8, 0, 0, 0, 5, 2],
+		['A', 0.8, 0.8, 0, 0, 0, 1, 5],
+		['L', 5, 9],
+		['L', 9, 5]
+	],
+	star: [
+		['M', 4.80001, 0],
+		['L', 5.92258, 3.45491],
+		['H', 9.55529],
+		['L', 6.61637, 5.59017],
+		['L', 7.73894, 9.04509],
+		['L', 4.80001, 6.90983],
+		['L', 1.86108, 9.04509],
+		['L', 2.98365, 5.59017],
+		['L', 0.0447266, 3.45491],
+		['H', 3.67744],
+		['L', 4.80001, 0],
+		['Z']
+	]
 }

package/src/lib/geom.js

@@ -1,3 +1,109 @@
+import {
+	sum,
+	min,
+	max,
+	mean,
+	mode,
+	median,
+	deviation,
+	variance,
+	flatRollup
+} from 'd3-array'
+
+const summaries = {
+	identity: (value) => value,
+	count: (values) => values.length,
+	sum: (values) => sum(values),
+	min: (values) => min(values),
+	max: (values) => max(values),
+	mean: (values) => mean(values),
+	median: (values) => median(values),
+	mode: (values) => mode(values),
+	variance: (values) => variance(values),
+	deviation: (values) => deviation(values)
+}
+
+/**
+ * Returns an aggregator function for an input string or function.
+ *
+ * @param {string|function} stat
+ * @returns
+ */
+export function rollup(stat) {
+	if (typeof stat === 'function') return stat
+	if (typeof stat !== 'string')
+		throw new TypeError('stat must be a string or function')
+	if (!(stat in summaries)) throw new TypeError('Unknown stat: ' + stat)
+
+	return summaries[stat]
+}
+
+/**
+ * Aesthetics for a chart.
+ *
+ * @typedef Aesthetics
+ * @property {string} x
+ * @property {string} y
+ * @property {string} [fill]
+ * @property {string} [size]
+ * @property {string} [color]
+ * @property {string} [shape]
+ * @property {string} [pattern]
+ */
+
+/**
+ *
+ * @param {Array<any>} data
+ * @param {Aesthetics} aes
+ * @param {function|string} stat
+ * @returns
+ */
+export function aggregate(data, aes, stat = 'identity') {
+	const agg = rollup(stat)
+	const keys = ['color', 'fill', 'pattern', 'shape', 'size'].filter((k) =>
+		Object.keys(aes).includes(k)
+	)
+
+	let groups = keys.map((k) => (d) => d[aes[k]])
+
+	return flatRollup(
+		data,
+		(v) => agg(v.map((d) => d[aes.y])),
+		(d) => d[aes.x],
+		...groups
+	)
+}
+
+// export function geomBars(chart, aes) {
+// 	const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
+// 	return aggregate(chart.data, { x, y, fill, color, pattern })
+// }
+
+// export function geomLines(chart, aes) {
+// 	const { x, y, color } = { ...aes, ...chart.aes }
+// 	return aggregate(chart.data, { x, y, color })
+// }
+
+// export function geomViolin(chart, aes) {
+// 	const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
+// 	return { x, y, fill, color, pattern, ...opts }
+// }
+
+// export function geomArea(chart, aes) {
+// 	const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
+// 	return { x, y, fill, color, pattern, ...opts }
+// }
+
+// export function geomTrend(chart, aes) {
+// 	const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
+// 	return { x, y, fill, color, pattern, ...opts }
+// }
+
+// export function geomPoints(chart, aes) {
+// 	const { x, y, fill, color, shape, size } = { ...aes, ...chart.aes }
+// 	return { x, y, fill, color, shape, size, ...opts }
+// }
+
 // export function violin(data, mapping) {}
 // export function bar(data, mapping) {}
 // export function scatter(data, mapping) {}

package/src/lib/{colors.js → palette.js}

@@ -1,5 +1,5 @@
 // import { writable } from 'svelte/store'
-import { repeatAcross } from '../lib/utils'
+import { repeatAcross } from './utils'
 
 const palette = [
 	'#FFDE6B',
@@ -18,8 +18,8 @@ const palette = [
 ]
 
 export class Palette {
-	constructor(colors = palette) {
-		this.colors = colors
+	constructor(palette) {
+		this.colors = palette
 	}
 
 	set colors(value) {

package/src/lib/shape.js

@@ -0,0 +1,52 @@
+import { ColorBrewer } from './color'
+import { scaledPath } from './utils'
+import { shapePaths } from './constants'
+
+export class ShapeBrewer {
+	constructor() {
+		this.shapes = Object.entries(shapePaths).reduce(
+			(acc, [name, path]) => ({ ...acc, [name]: (s) => scaledPath(s, path) }),
+			{}
+		)
+		this.repeat = false
+		this.keys = Object.keys(this.shapes)
+		this.gray = new ColorBrewer().gray()
+		this.shades = []
+		this.repeat = false
+	}
+
+	clear() {
+		this.shapes = {}
+		return this
+	}
+
+	add(shape) {
+		const shapes = typeof shape === 'object' ? shape : { shape }
+		this.shapes = { ...this.shapes, ...shapes }
+
+		return this
+	}
+
+	filter(keys) {
+		keys = Array.isArray(keys) ? keys : [keys]
+		this.keys = keys.filter((key) => key in this.shapes)
+
+		return this
+	}
+
+	colors(shades, repeat = false) {
+		this.shades = Array.isArray(shades) ? shades : [shades]
+		this.repeat = repeat
+		return this
+	}
+
+	brew() {
+		return this.keys
+			.map((i) => this.shapes[i])
+			.map((shape, i) => {
+				return i < this.shades.length || this.repeat
+					? { shape, ...this.shades[i % this.shades.length] }
+					: { shape, ...this.gray }
+			})
+	}
+}

package/src/{swatch.js → lib/swatch.js}

@@ -5,7 +5,7 @@ import { writable } from 'svelte/store'
 export const swatchStore = writable({})
 
 // A set of 7 should be sufficient
-// array of names and patterns
-// array of names and shapes
-// array of colors
-// array of shades of one color.
+// set of patterns
+// set of shapes
+// set of colors
+// fill, stroke, text

package/src/{components/lib/utils.js → lib/utils-2.js}

@@ -2,47 +2,7 @@ import { scaleBand, scaleLinear } from 'd3-scale'
 import { min, max } from 'd3-array'
 import { ascending, quantile } from 'd3-array'
 import { nest } from 'd3-collection'
-import { omit, filter } from 'ramda'
-
-/**
- * Generates a unique id from current timestamp
- *
- * @returns {String} timestamp based unique id
- */
-export function uniqueId(prefix = '') {
-	return prefix + Date.now().toString(36)
-}
-
-/**
- * Capitalizes the first letter of input string
- *
- * @param {String} str
- * @returns {String}
- */
-export function initCap(str) {
-	return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-/**
- * Removes undefined and null values from the input object.
- *
- * @param {Object} obj
- * @returns {Object}
- */
-export function compact(obj) {
-	return filter((x) => x !== undefined && x !== null, obj)
-}
-
-/**
- * Converts an input number into it's hexadecimal representation, with optional left padded zeroes based on the `size`
- *
- * @param {number} value
- * @param {number} size
- * @returns
- */
-export function toHexString(value, size = 2) {
-	return value.toString(16).padStart(size, '0')
-}
+import { omit } from 'ramda'
 
 /**
  * Calculates a grid of centres to fit a list of items of `size` within the number of `columns` and `rows`.

package/src/lib/utils.js

@@ -4,6 +4,10 @@ import { ascending, quantile } from 'd3-array'
 import { nest } from 'd3-collection'
 import { omit } from 'ramda'
 
+export function scaledPath(size, x) {
+	if (Array.isArray(x)) return x.map((x) => scaledPath(size, x)).join(' ')
+	return typeof size === 'number' ? x * size : x
+}
 /**
  * Calculates a grid of centres to fit a list of items of `size` within the number of `columns` and `rows`.
  *

package/src/plots/BarPlot.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext } from 'svelte'
-	import { colorBrewer } from '../lib/colors'
+	import { colorBrewer } from '../lib/palette'
 
 	let chart = getContext('chart')