@rokkit/chart 1.0.0-next.11

package/src/components/lib/funnel.js

@@ -0,0 +1,204 @@
+import { sum, median, max, mean, min, quantile, cumsum } from 'd3-array'
+import { nest } from 'd3-collection'
+import { pick, flatten } from 'ramda'
+import { area, curveBasis, curveBumpX, curveBumpY } from 'd3-shape'
+import { scaleLinear } from 'd3-scale'
+
+const aggregate = {
+	count: (values) => values.length,
+	sum: (values) => sum(values),
+	min: (values) => min(values),
+	max: (values) => max(values),
+	mean: (values) => mean(values),
+	median: (values) => median(values),
+	q1: (values) => quantile(values, 0.25),
+	q3: (values) => quantile(values, 0.75)
+}
+
+export function summarize(data, by, attr, stat = 'count') {
+	const stats = Array.isArray(stat) ? stat : [stat]
+	const grouped = nest()
+		.key((d) => by.map((f) => d[f]).join('|'))
+		.rollup((rows) => {
+			let agg = pick(by, rows[0])
+			stats.map(
+				(stat) => (agg[stat] = aggregate[stat](rows.map((d) => d[attr])))
+			)
+			return [agg]
+		})
+		.entries(data)
+	return flatten(grouped.map((group) => group.value))
+}
+
+export function getUniques(input, aes) {
+	const attrs = ['x', 'y', 'fill']
+	let values = {}
+
+	attrs.map((attr) => {
+		if (attr in aes) {
+			values[attr] = [...new Set(input.map((d) => d[aes[attr]]))]
+		}
+	})
+	return values
+}
+
+export function fillMissing(fill, rows, key, aes) {
+	const filled = fill.map((f) => {
+		let matched = rows.filter((r) => r[aes.fill] === f)
+		if (matched.length == 0) {
+			let row = {}
+			row[key] = rows[0][key]
+			row[aes.fill] = f
+			row[aes.stat] = 0
+			return row
+		} else {
+			return matched[0]
+		}
+	})
+	return filled
+}
+
+export function convertToPhases(input, aes) {
+	const uniques = getUniques(input, aes)
+	let vertical = 'y' in uniques && uniques.y.some(isNaN)
+	const horizontal = 'x' in uniques && uniques.x.some(isNaN)
+
+	let summary = []
+
+	if (horizontal && vertical) {
+		if ((aes.stat || 'count') === 'count') {
+			vertical = false
+			console.warn('Assuming horizontal layout becuse stat is count')
+		} else {
+			console.error(
+				'cannot plot without at least one axis having numeric values'
+			)
+			return { uniques, vertical }
+		}
+	}
+
+	const key = vertical ? aes.y : aes.x
+	const value = vertical ? aes.x : aes.y
+
+	let by = [key]
+	if ('fill' in aes) {
+		by.push(aes.fill)
+	}
+	summary = summarize(input, by, value, aes.stat)
+	const phases = nest()
+		.key((d) => d[key])
+		.rollup((rows) => {
+			return 'fill' in aes ? fillMissing(uniques.fill, rows, key, aes) : rows
+		})
+		.entries(summary)
+
+	return { phases, uniques, vertical }
+}
+
+export function mirror(input, aes) {
+	let domain = 0
+
+	const stats = input.phases.map((phase) => {
+		const stat = cumsum(phase.value.map((row) => row[aes.stat]))
+		const midpoint = max(stat) / 2
+		domain = Math.max(domain, midpoint)
+
+		const rows = phase.value.map((row, index) => {
+			if (input.vertical) {
+				return {
+					...row,
+					y: input.uniques.y.indexOf(row[aes.y]),
+					x1: stat[index] - midpoint,
+					x0: stat[index] - midpoint - row[aes.stat]
+				}
+			} else {
+				return {
+					...row,
+					x: input.uniques.x.indexOf(row[aes.x]),
+					y1: stat[index] - midpoint,
+					y0: stat[index] - midpoint - row[aes.stat]
+				}
+			}
+		})
+
+		phase.value = rows
+		return phase
+	})
+
+	return { ...input, stats, domain }
+}
+
+export function getScales(input, width, height) {
+	let scale
+	if (input.vertical) {
+		scale = {
+			x: scaleLinear()
+				.domain([-input.domain * 1.4, input.domain * 1.4])
+				.range([0, width]),
+			y: scaleLinear().domain([0, input.uniques.y.length]).range([0, height])
+		}
+	} else {
+		scale = {
+			x: scaleLinear().domain([0, input.uniques.x.length]).range([0, width]),
+			y: scaleLinear()
+				.domain([-input.domain, input.domain * 1.4])
+				.range([height - 20, 0])
+		}
+	}
+	return scale
+}
+
+function getLabels(data) {
+	let key = data.vertical ? 'y' : 'x'
+	let opp = key === 'x' ? 'y' : 'x'
+
+	let labels = data.uniques[key].map((label, index) => {
+		let row = { label }
+		let domain = data.scale[opp].domain()
+		row[`${key}1`] = row[`${key}2`] = data.scale[key](index + 1)
+		row[`${opp}1`] = data.scale[opp](domain[0])
+		row[`${opp}2`] = data.scale[opp](domain[1])
+		row[opp] = 20
+		row[key] = data.scale[key](index) + 20
+		return row
+	})
+	return labels
+}
+
+export function getPaths(vertical, scale, curve) {
+	return vertical
+		? area()
+				.x0((d) => scale.x(d.x0))
+				.x1((d) => scale.x(d.x1))
+				.y((d) => scale.y(d.y))
+				.curve(curve)
+		: area()
+				.x((d) => scale.x(d.x))
+				.y0((d) => scale.y(d.y0))
+				.y1((d) => scale.y(d.y1))
+				.curve(curve)
+}
+export function funnel(input, aes, width, height) {
+	let data = convertToPhases(input, aes)
+	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])
+			.rollup((rows) => {
+				let last = data.vertical ? { y: rows.length } : { x: rows.length }
+				return [...rows, { ...rows[rows.length - 1], ...last }]
+			})
+			.entries(stats)
+	}
+	data.scale = getScales(data, width, height)
+	data.path = getPaths(data.vertical, data.scale, curve)
+	data.labels = getLabels(data)
+	return data
+}

package/src/components/lib/index.js

@@ -0,0 +1,19 @@
+import { ChartBrewer } from './chart'
+import { ColorBrewer } from './color'
+import { ShapeBrewer } from './shape'
+import { ThemeBrewer } from './theme'
+import { PatternBrewer } from './pattern'
+
+export { toHexString, swatch } from './utils'
+export { uniques, slidingWindow } from './rollup'
+export { colors } from './color'
+
+export function brewer() {
+	return {
+		pattern: () => new PatternBrewer(),
+		color: () => new ColorBrewer(),
+		theme: () => new ThemeBrewer(),
+		shape: () => new ShapeBrewer(),
+		chart: (data, x, y) => new ChartBrewer(data, x, y)
+	}
+}

package/src/components/lib/pattern.js

@@ -0,0 +1,190 @@
+import { clamp } from 'yootils'
+import { ColorBrewer } from './color'
+import { toHexString, uniqueId } from './utils'
+
+export const builtIn = [
+	{ path: 'M0 5A6 6 0 0 0 10 5', minAngle: 0, maxAngle: 90 },
+	{ path: 'M0 10L10 0', minAngle: 0, maxAngle: 90 },
+	{ path: 'M0 0A10 10 0 0 0 10 10', minAngle: 0, maxAngle: 90 },
+	{ path: 'M0 0L10 10', minAngle: 0, maxAngle: 90 },
+	{ path: 'M10 5A6 6 0 0 0 0 5', minAngle: 0, maxAngle: 90 },
+
+	{ path: 'M10 10A10 10 0 0 0 0 0', minAngle: 0, maxAngle: 90 },
+	{ path: 'M0 0L10 10ZM10 0L0 10Z', minAngle: 0, maxAngle: 90 },
+	{ path: 'M1 1L9 1L9 9L1 9Z', minAngle: 0, maxAngle: 90 },
+	{ path: 'M4 0L4 10M6 10L6 0M0 4L10 4M10 6L0 6', minAngle: 0, maxAngle: 90 },
+	{ path: 'M0 2L8 10M2 0L10 8M0 8L8 0M2 10L10 2', minAngle: 0, maxAngle: 90 },
+
+	{
+		path: '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',
+		minAngle: 0,
+		maxAngle: 45
+	},
+	{ path: 'M1 3L7 9M3 1L9 7M1 7L7 1M3 9L9 3', minAngle: 0, maxAngle: 90 },
+	{
+		path: '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',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path: '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',
+		minAngle: 0,
+		maxAngle: 45
+	},
+	{
+		path: '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',
+		minAngle: 0,
+		maxAngle: 90
+	},
+
+	{ path: 'M2 5L5 2L8 5L5 8Z', minAngle: 0, maxAngle: 90 },
+	{
+		path: 'M3 5A2 2 0 0 0 7 5A2 2 0 0 0 3 5M1 5L9 5M5 1L5 9',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path: 'M2 8L8 2ZM1.5 3.5L3.5 1.5ZM6.5 8.5L8.5 6.5ZM0 0L10 10Z',
+		minAngle: 0,
+		maxAngle: 90
+	},
+
+	{
+		path:
+			'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',
+		minAngle: 0,
+		maxAngle: 90
+	},
+
+	{
+		path:
+			'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',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path:
+			'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',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path:
+			'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',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path:
+			'M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' + 'M2 1V3M1 2H3' + 'M8 9V7M9 8H7',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{ path: 'M5 2L2.5 9L8.8 4.6L1.2 4.6L7.5 9Z', minAngle: 0, maxAngle: 90 },
+	{
+		path: 'M0 5A5 5 0 0 0 5 0' + 'M5 10A5 5 0 0 0 0 5' + 'M5 10A5 5 0 0 0 5 0',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path: 'M0 0L10 10M5 0L10 5M0 5 L5 10',
+		minAngle: 0,
+		maxAngle: 90
+	},
+	{
+		path: 'M0 0L10 10M3 0L10 7M0 7 L3 10',
+		minAngle: 0,
+		maxAngle: 90
+	}
+]
+
+export class PatternBrewer {
+	constructor() {
+		this.paths = builtIn
+		this.shades = []
+		this.gray = new ColorBrewer().gray()
+		this.bw = false
+		this.repeat = false
+		this.indices = [...this.paths.keys()]
+	}
+
+	clear() {
+		this.paths = []
+	}
+
+	add(path) {
+		let paths = Array.isArray(path) ? path : [path]
+		this.paths = [...this.paths, ...paths]
+
+		return this
+	}
+
+	filter(indices) {
+		indices = Array.isArray(indices) ? indices : [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.repeat = repeat
+		return this
+	}
+
+	variants(count) {
+		count = clamp(count, 1, 15)
+		this.paths = this.paths.map((path) => ({
+			...path,
+			angles: [...Array(count).keys()].map(
+				(i) => (i * (path.maxAngle - path.minAngle)) / count
+			)
+		}))
+		return this
+	}
+
+	brew() {
+		// const hexPrefix = toHexString(prefix)
+		const hexPrefix = uniqueId()
+
+		let patterns = []
+
+		// apply filter and add angle variations
+		this.indices
+			.map((i) => this.paths[i])
+			.map((path) => {
+				if ('angles' in path) {
+					path.angles.map((angle) => patterns.push({ ...path, angle }))
+				} else {
+					patterns.push(path)
+				}
+			})
+
+		patterns = patterns
+			// Add reference ids
+			.map((path, index) => ({
+				id: hexPrefix + '-' + toHexString(index),
+				...path,
+				fillUrl: `url(#${hexPrefix}-${toHexString(index)})`
+			}))
+			// Add colors
+			.map((pattern, i) => {
+				return i < this.shades.length || this.repeat
+					? { ...pattern, ...this.shades[i % this.shades.length] }
+					: { ...pattern, ...this.gray }
+			})
+
+		return patterns
+	}
+}

package/src/components/lib/rollup.js

@@ -0,0 +1,55 @@
+import { min, max, add, format } from 'date-fns'
+
+export function uniques(data, attr) {
+	return data && attr ? [...new Set(data.map((item) => item[attr]))] : []
+}
+
+export function slidingWindow(values, size, step, offset, fmt) {
+	return size && typeof size === 'object'
+		? slidingWindowForDates(values, size, step, offset, fmt)
+		: slidingWindowForNumbers(values, size, step, offset, fmt)
+}
+
+function slidingWindowForNumbers(values, size, step, offset = 0, fmt = 0) {
+	const smallest = Number(Math.min(...values).toFixed(fmt))
+	let largest = Math.max(...values)
+	let count = Math.ceil((largest - smallest + offset) / step)
+
+	if (smallest + count * step + offset == largest) {
+		count += 1
+	}
+	// console.log('count:', count)
+	const range = [...Array(count).keys()]
+
+	const result = range.map((key) => ({
+		key: smallest + key * step,
+		lowerBound: smallest + key * step + offset,
+		upperBound: smallest + key * step + offset + size
+	}))
+	return result
+}
+
+function slidingWindowForDates(
+	values,
+	size,
+	step,
+	offset = {},
+	fmt = 'yyyy-MM-dd'
+) {
+	const largest = max(values)
+	let current = new Date(format(min(values), fmt))
+	let blocks = []
+	let lowerBound = current
+
+	while (lowerBound <= largest) {
+		lowerBound = add(current, offset)
+
+		blocks.push({
+			key: current,
+			lowerBound,
+			upperBound: add(lowerBound, size)
+		})
+		current = add(current, step)
+	}
+	return blocks
+}

package/src/components/lib/shape.js

@@ -0,0 +1,199 @@
+import { ColorBrewer } from './color'
+
+export const namedShapes = {
+	square: (s) =>
+		`M${0.1 * s} 0` +
+		`A${0.1 * s} ${0.1 * s} 0 0 0 0 ${0.1 * s}V${0.9 * s}` +
+		`A${0.1 * s} ${0.1 * s} 0 0 0 ${0.1 * s} ${s}H${0.9 * s}` +
+		`A${0.1 * s} ${0.1 * s} 0 0 0 ${s} ${0.9 * s}V${0.1 * s}` +
+		`A${0.1 * s} ${0.1 * s} 0 0 0 ${0.9 * s} 0Z`,
+	circle: (s) =>
+		`M0 ${0.5 * s}` +
+		`A${0.5 * s} ${0.5 * s} 0 0 0 ${s} ${0.5 * s}` +
+		`A${0.5 * s} ${0.5 * s} 0 0 0 0 ${0.5 * s}`,
+	diamond: (s) =>
+		`M${0.5 * s} 0` +
+		`A${0.6 * s} ${0.6 * s} 0 0 0 ${s} ${0.5 * s}` +
+		`A${0.6 * s} ${0.6 * s} 0 0 0 ${0.5 * s} ${s}` +
+		`A${0.6 * s} ${0.6 * s} 0 0 0 0 ${0.5 * s}` +
+		`A${0.6 * s} ${0.6 * s} 0 0 0 ${0.5 * s} 0`,
+	triangle: (s) =>
+		`M${0.5 * s} ${0.0866 * s}L0 ${0.9234 * s}L${s} ${0.9234 * s}Z`,
+	rhombus: (s) =>
+		`M${0.5 * s} 0` +
+		`L${s} ${0.5 * s}` +
+		`L${0.5 * s} ${s}` +
+		`L0 ${0.5 * s}Z`,
+	star: (s) =>
+		`M${0.5 * s} ${0.05 * s}` +
+		`L${0.606 * s} ${0.36 * s}` +
+		`L${s} ${0.36 * s}` +
+		`L${0.685 * s} ${0.59 * s}` +
+		`L${0.81 * s} ${0.95 * s}` +
+		`L${0.5 * s} ${0.725 * s}` +
+		`L${0.19 * s} ${0.95 * s}` +
+		`L${0.315 * s} ${0.59 * s}` +
+		`L0 ${0.36 * s}` +
+		`L${0.394 * s} ${0.36 * s}Z`,
+	heart: (s) =>
+		`M${0.9 * s} ${0.5 * s}` +
+		`A${0.08 * s} ${0.08 * s} 0 0 0 ${0.5 * s} ${0.2 * s}` +
+		`A${0.08 * s} ${0.08 * s} 0 0 0 ${0.1 * s} ${0.5 * s}` +
+		`L${0.5 * s} ${0.9 * s}` +
+		`L${0.9 * s} ${0.5 * s}`,
+	shurikan: (s) =>
+		`M${0.3 * s} ${0.1 * s}L${0.5 * s} 0L${0.7 * s} ${0.1 * s}` +
+		`A ${0.05 * s} ${0.05 * s} 0 0 0 ${0.9 * s} ${0.35 * s}` +
+		`L${s} ${0.5 * s}L${0.9 * s} ${0.7 * s}` +
+		`A ${0.05 * s} ${0.05 * s} 0 0 0 ${0.7 * s} ${0.9 * s}` +
+		`L${0.5 * s} ${s}L${0.3 * s} ${0.9 * s}` +
+		`A${0.05 * s} ${0.05 * s} 0 0 0 ${0.1 * s} ${0.7 * s}` +
+		`L0 ${0.5 * s}L${0.1 * s} ${0.3 * s}` +
+		`A${0.05 * s} ${0.05 * s} 0 0 0 ${0.3 * s} ${0.1 * s}` +
+		`M${0.4 * s} ${0.5 * s}` +
+		`A${0.1 * s} ${0.1 * s} 0 0 0 ${0.6 * s} ${0.5 * s}` +
+		`A${0.1 * s} ${0.1 * s} 0 0 0 ${0.4 * s} ${0.5 * s}`,
+	target: (s) =>
+		`M${0.2 * s} ${0.5 * s}` +
+		`A${0.3 * s} ${0.3 * s} 0 0 0 ${0.8 * s} ${0.5 * s}` +
+		`A${0.3 * s} ${0.3 * s} 0 0 0 ${0.2 * s} ${0.5 * s}` +
+		`M0 ${0.5 * s}` +
+		`L${s} ${0.5 * s}` +
+		`M${0.5 * s} 0` +
+		`L${0.5 * s} ${s}`
+}
+
+export const builtIn = [
+	...Object.keys(namedShapes).map((key) => ({ shape: namedShapes[key] })),
+	{
+		shape: (s) =>
+			`M${0.1 * s} ${0.1 * s}` +
+			`A${0.5 * s} ${0.5 * s} 0 0 0 ${0.9 * s} ${0.1 * s}` +
+			`A${0.5 * s} ${0.5 * s} 0 0 0 ${0.9 * s} ${0.9 * s}` +
+			`A${0.5 * s} ${0.5 * s} 0 0 0 ${0.1 * s} ${0.9 * s}` +
+			`A${0.5 * s} ${0.5 * s} 0 0 0 ${0.1 * s} ${0.1 * s}`
+	},
+	{
+		shape: (s) =>
+			`M${0.5 * s} ${0.3 * s}` +
+			`A${0.2 * s} ${0.1 * s} 0 0 0 ${0.5 * s} ${0.1 * s}` +
+			`L${0.5 * s} ${0.9 * s}` +
+			`M${0.5 * s} ${0.7 * s}` +
+			`A${0.2 * s} ${0.1 * s} 0 0 0 ${0.5 * s} ${0.9 * s}` +
+			`M${0.3 * s} ${0.5 * s}` +
+			`A${0.1 * s} ${0.2 * s} 0 0 0 ${0.1 * s} ${0.5 * s}` +
+			`L${0.9 * s} ${0.5 * s}` +
+			`M${0.7 * s} ${0.5 * s}` +
+			`A${0.1 * s} ${0.2 * s} 0 0 0 ${0.9 * s} ${0.5 * s}`
+	},
+	{
+		shape: (s) =>
+			`M${0.1 * s} ${0.3 * s}` +
+			`L${0.7 * s} ${0.9 * s}` +
+			`L${0.9 * s} ${0.7 * s}` +
+			`L${0.3 * s} ${0.1 * s}Z` +
+			`M${0.1 * s} ${0.7 * s}` +
+			`L${0.7 * s} ${0.1 * s}` +
+			`L${0.9 * s} ${0.3 * s}` +
+			`L${0.3 * s} ${0.9 * s}Z`
+	},
+	{
+		shape: (s) =>
+			`M${0.1 * s} ${0.4 * s}` +
+			`L${0.9 * s} ${0.4 * s}` +
+			`L${0.9 * s} ${0.6 * s}` +
+			`L${0.1 * s} ${0.6 * s}Z` +
+			`M${0.4 * s} ${0.1 * s}` +
+			`L${0.4 * s} ${0.9 * s}` +
+			`L${0.6 * s} ${0.9 * s}` +
+			`L${0.6 * s} ${0.1 * s}Z`
+	},
+	{
+		shape: (s) =>
+			`M${0.5 * s} ${0.05 * s}` +
+			`L${0.19 * s} ${0.95 * s}` +
+			`L${s} ${0.36 * s}` +
+			`L0 ${0.36 * s}` +
+			`L${0.81 * s} ${0.95 * s}Z`
+	},
+	{
+		shape: (s) =>
+			`M${0.1 * s} ${0.1 * s}` +
+			`L${0.1 * s} ${0.9 * s}` +
+			`L${0.9 * s} ${0.9 * s}` +
+			`L${0.9 * s} ${0.1 * s}Z` +
+			`M${0.1 * s} ${0.1 * s}` +
+			`L${0.1 * s} ${0.5 * s}` +
+			`L${0.5 * s} ${0.5 * s}` +
+			`L${0.5 * s} ${0.1 * s}Z` +
+			`M${0.5 * s} ${0.5 * s}` +
+			`L${0.5 * s} ${0.9 * s}` +
+			`L${0.9 * s} ${0.9 * s}` +
+			`L${0.9 * s} ${0.5 * s}Z`
+	},
+	{
+		shape: (s) =>
+			`M${0.5 * s} 0` +
+			`L${s} ${0.5 * s}` +
+			`L${0.5 * s} ${s}` +
+			`L0 ${0.5 * s}Z` +
+			`M${0.5 * s} 0` +
+			`L${s} ${0.5 * s}` +
+			`L${0.5 * s} ${s}Z`
+	},
+	{
+		shape: (s) =>
+			`M0 ${0.5 * s}` +
+			`A${0.6 * s} ${0.4 * s} 0 0 0 ${s} ${0.5 * s}` +
+			`A${0.6 * s} ${0.4 * s} 0 0 0 0 ${0.5 * s}` +
+			`M${0.5 * s} 0` +
+			`A${0.4 * s} ${0.6 * s} 0 0 0 ${0.5 * s} ${s}` +
+			`A${0.4 * s} ${0.6 * s} 0 0 0 ${0.5 * s} 0`
+	}
+]
+
+export class ShapeBrewer {
+	constructor() {
+		this.shapes = builtIn
+		this.repeat = false
+		this.indices = [...this.shapes.keys()]
+		this.gray = new ColorBrewer().gray()
+		this.shades = []
+		this.repeat = false
+	}
+
+	clear() {
+		this.shapes = []
+		return this
+	}
+
+	add(shape) {
+		const shapes = Array.isArray(shape) ? shape : [shape]
+		this.shapes = [...shapes]
+
+		return this
+	}
+
+	filter(indices) {
+		indices = Array.isArray(indices) ? indices : [indices]
+		this.indices = indices.filter((i) => i > 0 && i < this.shapes.length)
+
+		return this
+	}
+
+	colors(shades, repeat = false) {
+		this.shades = Array.isArray(shades) ? shades : [shades]
+		this.repeat = repeat
+		return this
+	}
+
+	brew() {
+		return this.indices
+			.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 }
+			})
+	}
+}