@rokkit/chart 1.0.0-next.16 → 1.0.0-next.160

package/src/components/lib/funnel.js

@@ -1,204 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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 }
-			})
-	}
-}