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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.35",
+  "version": "1.0.0-next.37",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,34 +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/ui": "~0.32.3",
+    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/ui": "~0.33.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.1",
+    "svelte": "^4.1.1",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
-    "vitest": "~0.32.3",
-    "shared-config": "1.0.0-next.35"
+    "vite": "^4.4.7",
+    "vitest": "~0.33.0",
+    "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.35"
+    "@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/SwatchGrid.svelte

@@ -28,7 +28,7 @@
 	}
 	let previous
 	function handleClick(row, column) {
-		console.log(row, column, grid)
+
 		if (previous) {
 			grid[previous.row][previous.column].isCurrent = false
 		}
@@ -36,7 +36,6 @@
 		previous = { row, column }
 	}
 	$: grid = toGrid(columns, rows, items)
-	$: console.log(grid)
 </script>
 
 <row class="flex flex-col gap-2">

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
@@ -52,7 +52,6 @@
 		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
@@ -74,7 +73,7 @@
 
 	$: 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

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'
@@ -134,7 +146,6 @@ export class ChartBrewer {
 			.rollup((d) => histogramBins(d.map((g) => +g[this.y])))
 			.entries(this.data)
 
-		// console.log(sumstat)
 		// What is the biggest number of value in a bin? We need it cause this value will have a width of 100% of the bandwidth.
 		var maxNum = 0
 		for (let i in sumstat) {
@@ -145,11 +156,6 @@ export class ChartBrewer {
 				maxNum = longest
 			}
 		}
-		// console.log(
-		//   maxNum,
-		//   this.axis.x.scale.bandwidth(),
-		//   this.axis.x.scale('setosa')
-		// )
 
 		// The maximum width of a violin must be x.bandwidth = the width dedicated to a group
 		var xNum = scaleLinear()

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/{components/lib → lib}/funnel.js

@@ -183,11 +183,9 @@ export function funnel(input, aes, width, height) {
 	data = mirror(data, aes)
 	const curve =
 		aes.curve === 'basis' ? curveBasis : data.vertical ? curveBumpY : curveBumpX
-	//  console.log(data)
 
 	if ('fill' in aes) {
 		let stats = flatten(data.stats.map((phase) => phase.value))
-		// console.log(stats)
 
 		data.stats = nest()
 			.key((d) => d[aes.fill])

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/{plots → lib}/heatmap.js

@@ -25,7 +25,7 @@ export function summarize(data, dateField = 'date', valueField) {
 				: d.length
 		)
 		.entries(data)
-	// console.log(Object.fromEntries(nested))
+
 	return nested.reduce((obj, item) => ((obj[item.key] = item.value), obj), {})
 }
 
@@ -40,7 +40,7 @@ export function heatmap(data, numberOfMonths) {
 
 	grid.map((d) => {
 		const month = format(endOfWeek(new Date(d.date)), 'MMM')
-		// console.log(month)
+
 		if (!(month in months)) {
 			months[month] = d.x
 		}

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/{components/lib → lib}/rollup.js

@@ -18,7 +18,7 @@ function slidingWindowForNumbers(values, size, step, offset = 0, fmt = 0) {
 	if (smallest + count * step + offset == largest) {
 		count += 1
 	}
-	// console.log('count:', count)
+
 	const range = [...Array(count).keys()]
 
 	const result = range.map((key) => ({