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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.36",
+  "version": "1.0.0-next.38",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,35 +13,37 @@
     "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.38"
   },
   "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/atoms": "1.0.0-next.38",
+    "@rokkit/core": "1.0.0-next.38",
+    "@rokkit/molecules": "1.0.0-next.38",
+    "@rokkit/stores": "1.0.0-next.38"
   },
   "files": [
     "src/**/*.js",
     "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/mocks",
-    "!src/**/*.spec.js"
+    "!spec"
   ],
   "exports": {
     "./src": "./src",

package/src/chart/Chart.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { setContext } from 'svelte'
 	import { writable } from 'svelte/store'
-	import { compact } from '../lib/utils'
+	import { compact } from '@rokkit/core'
 	import { builtIn } from '../lib/theme'
 
 	let chart = writable({})

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/lib/axis.js

@@ -1,11 +1,13 @@
+function getOrigin(scale, axis) {
+	const origin = scale[axis].ticks
+		? scale(Math.max(0, Math.min(...scale[axis].domain())))
+		: scale[axis].range()[0]
+	return origin
+}
 export function axis(scale) {
 	const origin = {
-		x: scale.x.ticks
-			? scale.x(Math.max(0, Math.min(...scale.x.domain())))
-			: scale.x.range()[0],
-		y: scale.y.ticks
-			? scale.y(Math.max(0, Math.min(...scale.y.domain())))
-			: scale.y.range()[0]
+		x: getOrigin(scale, 'x'),
+		y: getOrigin(scale, 'y')
 	}
 	const ticks = {
 		x: axisTicks(scale.x, { axis: 'x', origin }),

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/lib/constants.js

@@ -0,0 +1,41 @@
+import patterns__ from './patterns.json'
+import __palette from './palette.json'
+
+export const __patterns__ = patterns__
+export const palette = __palette
+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 colors = [
+	'#FFDE6B',
+	'#EF89EE',
+	'#F79F1E',
+	'#02B8FF',
+	'#9F84EC',
+	'#15CBC4',
+	'#0092FD',
+	'#F63A57',
+	'#A2CB39',
+	'#FF6E2F',
+	'#FEB8B9',
+	'#af7aa1',
+	'#7EFFF5'
+]

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

@@ -1,6 +1,6 @@
 import { clamp } from 'yootils'
 import { ColorBrewer } from './color'
-import { toHexString, uniqueId } from './utils'
+import { toHexString, uniqueId, addToArray, toArray } from './utils'
 
 export const builtIn = [
 	{ path: 'M0 5A6 6 0 0 0 10 5', minAngle: 0, maxAngle: 90 },
@@ -125,20 +125,18 @@ export class PatternBrewer {
 	}
 
 	add(path) {
-		let paths = Array.isArray(path) ? path : [path]
-		this.paths = [...this.paths, ...paths]
-
+		this.paths = addToArray(this.pathc, path)
 		return this
 	}
 
 	filter(indices) {
-		indices = Array.isArray(indices) ? indices : [indices]
+		indices = toArray(indices)
 		this.indices = indices.filter((i) => i >= 0 && i < this.paths.length)
 		return this
 	}
 
 	colors(shades, repeat = false) {
-		this.shades = Array.isArray(shades) ? shades : [shades]
+		this.shades = toArray(shades)
 		this.repeat = repeat
 		return this
 	}

package/src/lib/shape.js

@@ -0,0 +1,46 @@
+import { ColorBrewer } from './color'
+import { symbols } from '@rokkit/atoms/symbols'
+import { addToArray, toArray } from './utils'
+export class ShapeBrewer {
+	constructor() {
+		this.shapes = Object.keys(symbols)
+		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) {
+		this.shapes = addToArray(this.shapes, shape)
+
+		return this
+	}
+
+	filter(keys) {
+		this.keys = toArray(keys).filter((key) => key in this.shapes)
+
+		return this
+	}
+
+	colors(shades, repeat = false) {
+		this.shades = toArray(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/lib/utils.js

@@ -4,6 +4,12 @@ import { ascending, quantile } from 'd3-array'
 import { nest } from 'd3-collection'
 import { omit } from 'ramda'
 
+export function toArray(value) {
+	return Array.isArray(value) ? value : [value]
+}
+export function addToArray(array, value) {
+	return [...array, ...toArray(value)]
+}
 /**
  * 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')
 

package/src/plots/FunnelPlot.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { getContext } from 'svelte'
-	import { compact } from '../components/lib/utils'
-	import { funnel } from '../components/lib/funnel'
+	import { compact } from '@rokkit/core'
+	import { funnel } from '../lib/funnel'
 
 	const chart = getContext('chart')
 
@@ -13,7 +13,6 @@
 
 	$: aes = { ...$chart.aes, ...compact({ x, y, fill, stat, curve }) }
 	$: data = funnel($chart.data, aes, $chart.width, $chart.height)
-
 </script>
 
 {#each data.stats as stat, i}

package/src/plots/HeatMapCalendar.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { summarize, heatmap } from './heatmap'
+	import { summarize, heatmap } from '../lib/heatmap'
 	import { interpolateHsl } from 'd3-interpolate'
 	import { scaleLinear } from 'd3-scale'
 	// import ContinuousLegend from '../elements/ContinuousLegend.svelte'

package/src/plots/LinePlot.svelte

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

package/src/plots/Plot.svelte

@@ -2,7 +2,7 @@
 	import { aggregate, getScales } from '../lib/utils'
 
 	import BoxPlot from './BoxPlot.svelte'
-	import ScatterPlot from './old_ScatterPlot.svelte'
+	import ScatterPlot from './ScatterPlot.svelte'
 
 	export let data
 	export let width

package/src/plots/ScatterPlot.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { clamp } from 'yootils'
-	import Symbol from '../chart/Symbol.svelte'
+	import {Symbol} from '@rokkit/molecules'
 	import { getContext } from 'svelte'
 
 	const chart = getContext('chart')

package/src/chart/Symbol.svelte

@@ -1,40 +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
-	role="option"
-	aria-selected={false}
-	tabindex="0"
-/>

package/src/chart.js

@@ -1,11 +0,0 @@
-// 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 }
-// }

package/src/components/index.js

@@ -1,2 +0,0 @@
-export { toHexString, initCap, uniqueId, toNested } from './lib/utils'
-export { brewer, uniques, slidingWindow, colors } from './lib/index'