@rokkit/chart 1.0.0-next.12 → 1.0.0-next.122

package/src/old_lib/chart.js

@@ -0,0 +1,213 @@
+import { min, max } from 'd3-array'
+import { scaleBand, scaleLinear, scaleTime } from 'd3-scale'
+
+function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
+}
+
+function getScale(domain, range, padding = 0) {
+	if (domain.some(isNaN)) {
+		return scaleBand().domain(domain).range(range).padding(padding)
+	} else if (domain[0] instanceof Date) {
+		return scaleTime()
+			.domain([min(domain), max(domain)])
+			.range(range)
+			.nice()
+	}
+
+	return scaleLinear()
+		.domain([min([0, ...domain]), max([0, ...domain])])
+		.range(range)
+		.nice()
+}
+
+class Chart {
+	// data = []
+	// width = 512
+	// height = 512
+	// origin = { x: 0, y: 0 }
+	// range = {
+	// 	x: [0, this.width],
+	// 	y: [this.height, 0]
+	// }
+	// x
+	// y
+	// stat = 'identity'
+	// scale
+	// fill
+	// color
+	// value
+	// shape
+	// valueFormat
+	// valueLabel
+	// domain
+	// margin
+	// spacing
+	// padding
+	// flipCoords = false
+
+	constructor(data, opts) {
+		this.width = Number(opts.width) || 2048
+		this.height = Number(opts.height) || 2048
+		this.flipCoords = opts.flipCoords || false
+		this.x = opts.x
+		this.y = opts.y
+		this.value = opts.value || opts.y
+		this.valueLabel = opts.valueLabel || this.value
+		this.valueFormat = opts.valueFormat || ((d) => d)
+		this.fill = opts.fill || opts.x
+		this.color = opts.color || opts.fill
+		this.shape = opts.shape || opts.fill
+
+		this.padding = opts.padding !== undefined ? Number(opts.padding) : 32
+
+		this.spacing =
+			Number(opts.spacing) >= 0 && Number(opts.spacing) <= 0.5 ? Number(opts.spacing) : 0
+		this.margin = {
+			top: Number(opts.margin?.top) || 0,
+			left: Number(opts.margin?.left) || 0,
+			right: Number(opts.margin?.right) || 0,
+			bottom: Number(opts.margin?.bottom) || 0
+		}
+		this.domain = {
+			x: [...new Set(data.map((d) => d[this.x]))],
+			y: [...new Set(data.map((d) => d[this.y]))]
+		}
+		if (this.flipCoords) {
+			this.domain = { y: this.domain.x, x: this.domain.y }
+		}
+		this.stat = opts.stat || 'identity'
+
+		this.data = data.map((d) => ({
+			x: this.flipCoords ? d[this.y] : d[this.x],
+			y: this.flipCoords ? d[this.x] : d[this.y],
+			// fill: d[this.fill],
+			color: d[this.color]
+			// shape: d[this.shape]
+		}))
+
+		this.refresh()
+	}
+
+	padding(value) {
+		this.padding = value
+		return this.refresh()
+	}
+
+	margin(value) {
+		this.margin = value
+		return this.refresh()
+	}
+
+	refresh() {
+		this.range = {
+			x: [this.margin.left + this.padding, this.width - this.margin.right - this.padding],
+			y: [this.height - this.padding - this.margin.bottom, this.margin.top + this.padding]
+		}
+
+		const scale = {
+			x: getScale(this.domain.x, this.range.x, this.spacing),
+			y: getScale(this.domain.y, this.range.y, this.spacing)
+		}
+
+		// scale['value'] = this.value === this.x ? scale.x : scale.y
+
+		this.origin = {
+			x: getOriginValue(scale.x),
+			y: getOriginValue(scale.y)
+		}
+
+		this.scale = scale
+
+		return this
+	}
+
+	// get scale() {
+	// 	return this.scale
+	// }
+	// get origin() {
+	// 	return this.origin
+	// }
+	// get margin() {
+	// 	return this.margin
+	// }
+	// get range() {
+	// 	const [x1, x2] = this.scale.x.range()
+	// 	const [y1, y2] = this.scale.y.range()
+
+	// 	return { x1, y1, x2, y2 }
+	// }
+	// get data() {
+	// 	// aggregate data group by x,y,fill,shape, color
+	// 	// stat = [min, max, avg, std, q1, q3, median, sum, count, box, all]
+
+	// 	return this.data
+	// }
+	// get width() {
+	// 	return this.width
+	// }
+	// get height() {
+	// 	return this.height
+	// }
+	// set width(value) {
+	// 	this.width = value
+	// }
+	// set height(value) {
+	// 	this.height = value
+	// }
+	// get domain() {
+	// 	return this.domain
+	// }
+	// get flipCoords() {
+	// 	return this.flipCoords
+	// }
+	aggregate(value, stat) {
+		this.value = value
+		this.stat = stat
+
+		// this.data = nest(this.data)
+	}
+
+	ticks(axis, count, fontSize = 8) {
+		const scale = this.scale[axis]
+		const [minRange, maxRange] = scale.range()
+		let ticks = []
+		let offset = 0
+
+		count = count || Math.abs((maxRange - minRange) / (fontSize * (axis === 'y' ? 8 : 8)))
+
+		if (scale.ticks) {
+			ticks = scale.ticks(Math.round(count))
+		} else {
+			offset = scale.bandwidth() / 2
+			count = Math.min(Math.round(count), scale.domain().length)
+
+			ticks = scale.domain()
+			if (count < scale.domain().length) {
+				const diff = scale.domain().length - count
+				ticks = ticks.filter((d, i) => i % diff === 0)
+			}
+		}
+
+		ticks = ticks
+			.map((t) => ({
+				label: t,
+				pos: scale(t)
+			}))
+			.map(({ label, pos }) => ({
+				label,
+				offset: {
+					x: axis === 'x' ? offset : 0,
+					y: axis === 'y' ? offset : 0
+				},
+				x: axis === 'x' ? pos : this.origin.x,
+				y: axis === 'y' ? pos : this.origin.y
+			}))
+
+		return ticks
+	}
+}
+
+export function chart(data, aes) {
+	return new Chart(data, aes)
+}

package/src/old_lib/grid.js

@@ -0,0 +1,85 @@
+/**
+ * @typedef GridPoint
+ * @property {number} x - x-coordinate of the point
+ * @property {number} y - y-coordinate of the point
+ * @property {number} r - radius of the point
+ */
+
+/**
+ * @typedef SwatchGrid
+ * @property {number}      width  - width of the grid
+ * @property {number}      height - height of the grid
+ * @property {GridPoint[]} data   - data points of the grid
+ */
+
+/**
+ * @tyoedef {Object} GridOptions
+ * @property {number} [pad=0]     - The padding between the items
+ * @property {number} [columns=0] - The number of columns
+ * @property {number} [rows=0]    - The number of rows
+ */
+
+/**
+ * Calculates a grid of centres to fit a list of items of `size` within the number of `columns` and `rows`.
+ *
+ * - Attempts to find a best fit square if both columns and rows are not specified
+ * - Value in columns is prioritized over rows for recalculating the grid
+ * - Supports padding between the items
+ *
+ * @param {number}      count   - number of items
+ * @param {number}      size    - size of the items
+ * @param {GridOptions} options - options for the grid
+ * @returns {SwatchGrid}
+ */
+export function swatchGrid(count, size, options) {
+	const { pad = 0 } = options || {}
+	let { columns = 0, rows = 0 } = options || {}
+	if (columns > 0) {
+		rows = Math.ceil(count / columns)
+	} else if (rows > 0) {
+		columns = Math.ceil(count / rows)
+	} else {
+		columns = Math.ceil(Math.sqrt(count))
+		rows = Math.ceil(count / columns)
+	}
+
+	const width = (size + pad) * columns + pad
+	const height = (size + pad) * rows + pad
+	const radius = size / 2
+	const data = [...Array(count).keys()].map((index) => ({
+		x: pad + radius + (index % columns) * (size + pad),
+		y: pad + radius + Math.floor(index / columns) * (size + pad),
+		r: radius
+	}))
+
+	return { width, height, data }
+}
+
+/**
+ * Spreads values as patterns with colors from a palette
+ *
+ * @param {number[]} values   - values to spread
+ * @param {string[]} patterns - patterns to spread
+ * @param {string[]} palette  - colors to spread
+ * @returns {Record<number, { id: string, pattern: string, color: string }>}
+ */
+export function spreadValuesAsPatterns(values, patterns, palette) {
+	const result = values
+		.map((value, index) => ({
+			pattern: patterns[index % patterns.length],
+			color: palette[index % palette.length],
+			value
+		}))
+		.reduce(
+			(acc, { value, pattern, color }) => ({
+				...acc,
+				[value]: {
+					id: `${pattern}_${color}`,
+					pattern,
+					color
+				}
+			}),
+			{}
+		)
+	return result
+}

package/src/old_lib/index.js

@@ -0,0 +1,4 @@
+export { swatch } from './swatch'
+export { swatchGrid } from './grid'
+export * from './chart'
+export * from './brewer'

package/src/old_lib/plots.js

@@ -0,0 +1,27 @@
+// skipcq: JS-C1003 - Importing all plots from observablehq/plot
+import * as Plot from '@observablehq/plot'
+
+export function plotter(node, options) {
+	let { data, aes, type, opts } = options
+	// let chart = Plot.lineY(options.data).plot({ grid: true })
+
+	function render() {
+		const chart = Plot[type](data, aes).plot({
+			color: { scheme: 'turbo', range: [0.1, 0.9] },
+			...opts
+		})
+		node.firstChild?.remove() // remove old chart, if any
+		node.append(chart)
+	}
+	render()
+
+	return {
+		update: (input) => {
+			data = input.data
+			aes = input.aes
+			type = input.type
+			opts = input.opts
+			render()
+		}
+	}
+}

package/src/old_lib/swatch.js

@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store'
+import palette from './palette.json'
+// skipcq: JS-C1003 - Importing all patterns
+import * as patterns from '../patterns'
+import { shapes } from '../symbols'
+
+export const swatch = writable({
+	palette,
+	patterns,
+	keys: {
+		gray: ['gray'],
+		color: Object.keys(palette).filter((name) => name !== 'gray'),
+		symbol: shapes,
+		pattern: Object.keys(patterns)
+	}
+})

package/src/old_lib/ticks.js

@@ -0,0 +1,46 @@
+/**
+ * @typedef {Object} TickSteps
+ * @property {number} major - count of major ticks
+ * @property {number} minor - count of minor ticks
+ */
+
+/**
+ * Generate an array of ticks for a given axis and the tick type
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ * @param {string}    type  - The type of tick to generate
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function ticksByType(lower, upper, steps, type) {
+	if (steps <= 0) return []
+	return Array.from({ length: Math.floor((upper - lower) / steps) + 1 }, (_, i) => ({
+		position: i * steps,
+		label: i * steps,
+		type
+	})).filter((tick) => tick.position > lower && tick.position < upper)
+}
+
+/**
+ * Generate an array of ticks for a given axis
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function getTicks(lower, upper, steps = { major: 10, minor: 0 }) {
+	const majorTicks = ticksByType(lower, upper, steps.major, 'major')
+	const minorTicks = ticksByType(lower, upper, steps.minor, 'minor').filter(
+		(tick) => !majorTicks.find((major) => major.position === tick.position)
+	)
+	const end = [
+		{ position: upper, label: upper, type: 'end' },
+		{ position: lower, label: lower, type: 'end' }
+	]
+
+	return [...minorTicks, ...majorTicks, ...end].sort((a, b) => a.position - b.position)
+}

package/src/old_lib/utils.js

@@ -0,0 +1,8 @@
+import { scaledPath } from '@rokkit/core'
+
+export function scaledPathCollection(paths) {
+	return Object.entries(paths).reduce(
+		(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
+		{}
+	)
+}

package/src/patterns/Brick.svelte

@@ -0,0 +1,17 @@
+<script>
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+
+	$: lines = [
+		{ x1: 0, y1: 0.25 * size, x2: 0.5 * size, y2: 0.25 * size },
+		{ x1: 0.5 * size, y1: 0.75 * size, x2: size, y2: 0.75 * size },
+		{ x1: 0, y1: 0, x2: 0, y2: size },
+		{ x1: size, y1: 0, x2: size, y2: size },
+		{ x1: 0.5 * size, y1: 0, x2: 0.5 * size, y2: size }
+	]
+</script>
+
+{#each lines as line, index (index)}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}

package/src/patterns/Circles.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	$: data = [
+		{ cx: 0, cy: 0, r: 0.5 },
+		{ cx: 1, cy: 1, r: 0.5 }
+	].map(({ cx, cy, r }) => ({
+		cx: cx * size,
+		cy: cy * size,
+		r: r * size
+	}))
+</script>
+
+{#each data as { cx, cy, r }, index (index)}
+	<circle {cx} {cy} {r} {fill} {stroke} />
+{/each}

package/src/patterns/CrossHatch.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+
+	$: lines = [
+		{ x1: 0, y1: 0, x2: size, y2: size },
+		{ x1: 0, y1: size, x2: size, y2: 0 }
+	]
+</script>
+
+{#each lines as line, index (index)}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}

package/src/patterns/CurvedWave.svelte

@@ -0,0 +1,9 @@
+<script>
+	import NamedPattern from './paths/NamedPattern.svelte'
+
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+</script>
+
+<NamedPattern {size} {thickness} {stroke} name="curvedWave" />

package/src/patterns/Dots.svelte

@@ -0,0 +1,19 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+
+	$: data = [
+		{ cx: 0.2 * size, cy: 0.2 * size },
+		{ cx: 0.4 * size, cy: 0.4 * size },
+		{ cx: 0.6 * size, cy: 0.6 * size },
+		{ cx: 0.8 * size, cy: 0.8 * size },
+		{ cx: 0.8 * size, cy: 0.2 * size },
+		{ cx: 0.6 * size, cy: 0.4 * size },
+		{ cx: 0.4 * size, cy: 0.6 * size },
+		{ cx: 0.2 * size, cy: 0.8 * size }
+	].map((x) => ({ ...x, r: 0.08 * size }))
+</script>
+
+{#each data as { cx, cy, r }, index (index)}
+	<circle {cx} {cy} {r} {fill} />
+{/each}

package/src/patterns/OutlineCircles.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	const centres = [
+		{ cx: 0, cy: 0 },
+		{ cx: size, cy: size }
+	]
+	$: r = 0.5 * size
+</script>
+
+{#each centres as { cx, cy }, index (index)}
+	<circle {cx} {cy} {r} {fill} {stroke} />
+{/each}

package/src/patterns/Tile.svelte

@@ -0,0 +1,17 @@
+<script>
+	const thickness = 0.5
+	export let size = 10
+	export let stroke = 'currentColor'
+
+	const lines = [
+		{ x1: 0, y1: 0.25 * size, x2: 0.5 * size, y2: 0.25 * size },
+		{ x1: 0.5 * size, y1: 0.75 * size, x2: size, y2: 0.75 * size },
+		{ x1: 0, y1: 0, x2: 0, y2: size },
+		{ x1: size, y1: 0, x2: size, y2: size },
+		{ x1: 0.5 * size, y1: 0, x2: 0.5 * size, y2: size }
+	]
+</script>
+
+{#each lines as line, index (index)}
+	<line {...line} {stroke} stroke-width={thickness} stroke-linecap="round" />
+{/each}

package/src/patterns/Triangles.svelte

@@ -0,0 +1,15 @@
+<script>
+	export let size = 10
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	const polygons = [
+		[0, 0.5 * size, 0.5 * size, size, 0, size],
+		[0.5 * size, 0, 0, 0, 0, 0.5 * size],
+		[size, 0, 0.5 * size, 0.5 * size, size, size]
+	]
+</script>
+
+{#each polygons as points, index (index)}
+	<polygon points={points.join(', ')} {fill} {stroke} stroke-width="0" />
+{/each}

package/src/patterns/Waves.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { scaledPath } from '@rokkit/core'
+
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+	export let fill = 'none'
+	export let data = []
+
+	$: d = scaledPath(size, data)
+</script>
+
+<path {d} {stroke} stroke-width={thickness} {fill} />

package/src/patterns/index.js

@@ -0,0 +1,14 @@
+export { default as Brick } from './Brick.svelte'
+export { default as Circles } from './Circles.svelte'
+export { default as Dots } from './Dots.svelte'
+export { default as CrossHatch } from './CrossHatch.svelte'
+export { default as Waves } from './Waves.svelte'
+// export { default as Squares } from './Squares.svelte'
+export { default as Tile } from './Tile.svelte'
+export { default as Triangles } from './Triangles.svelte'
+// export { default as Waves } from './Waves.svelte'
+// export { default as ZigZag } from './ZigZag.svelte'
+// export { default as Flower } from './Flower.svelte'
+// export { default as NamedPath } from './NamedPath.svelte'
+export { default as CurvedWave } from './CurvedWave.svelte'
+export { default as OutlineCircles } from './OutlineCircles.svelte'

package/src/patterns/paths/NamedPattern.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { patterns } from './constants'
+
+	export let size = 10
+	export let thickness = 0.5
+	export let stroke = 'currentColor'
+	export let name = 'cross-hatch'
+
+	$: d = patterns[name](size)
+</script>
+
+<path {d} {stroke} stroke-width={thickness} fill="none" />

package/src/patterns/paths/constants.js

@@ -0,0 +1,4 @@
+import { scaledPathCollection } from '../../old_lib/utils'
+import paths from './patterns.json'
+
+export const patterns = scaledPathCollection(paths)

package/src/symbols/RoundedSquare.svelte

@@ -0,0 +1,26 @@
+<script>
+	export let x = 0
+	export let y = 0
+	export let size = 1
+	export let fill = 'currentColor'
+	export let stroke = 'currentColor'
+
+	$: r = size * 3.534
+	$: props = { rx: r * 0.1, ry: r * 0.1, ...$$restProps }
+</script>
+
+<rect
+	x={x - r}
+	y={y - r}
+	width={r * 2}
+	height={r * 2}
+	{fill}
+	{stroke}
+	{...props}
+	role="button"
+	on:click
+	on:mouseover
+	on:mouseleave
+	on:focus
+	tabindex="0"
+/>

package/src/symbols/Shape.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { namedShapes } from './constants'
+
+	export let x = 0
+	export let y = 0
+	export let size = 1
+	export let fill = 'none'
+	export let stroke = 'currentColor'
+	export let thickness = 1
+
+	export let name = 'circle'
+
+	$: d = name in namedShapes ? namedShapes[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"
+	role="button"
+	on:click
+	on:mouseover
+	on:mouseleave
+	on:focus
+	on:blur
+	tabindex="0"
+/>

package/src/symbols/constants/index.js

@@ -0,0 +1,4 @@
+import { scaledPathCollection } from '../../old_lib/utils'
+import paths from './shapes.json' with { type: 'json' }
+
+export const namedShapes = scaledPathCollection(paths)

package/src/symbols/index.js

@@ -0,0 +1,9 @@
+import { namedShapes } from './constants'
+import { default as Shape } from './Shape.svelte'
+import { default as RoundedSquare } from './RoundedSquare.svelte'
+
+export const shapes = [...Object.keys(namedShapes), 'rounded-square']
+export const components = {
+	default: Shape,
+	'rounded-square': RoundedSquare
+}