@rokkit/chart 1.0.0-next.11

package/src/components/lib/summary.js

@@ -0,0 +1,145 @@
+// import { sum, median, max, mean, min, quantile, cumsum } from 'd3-array'
+// import { nest } from 'd3-collection'
+// import { pick, flatten } from 'ramda'
+
+// 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]]))]
+// 		}
+// 	})
+// 	// 	x: 'x' in aes ? [...new Set(input.map((d) => d[aes.x]))] : [],
+// 	// 	y: 'y' in aes ? [...new Set(input.map((d) => d[aes.y]))] : [],
+// 	// 	fill: 'fill' in aes ? [...new Set(input.map((d) => d[aes.fill]))] : [],
+// 	// }
+// 	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 }
+// }
+
+// export function funnel(input, aes) {
+// 	let data = convertToPhases(input, aes)
+// 	data = mirror(data, aes)
+// 	// 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) => [...rows, { ...rows[rows.length - 1], x: rows.length }])
+// 			.entries(stats)
+// 	}
+// 	return data
+// }

package/src/components/lib/theme.js

@@ -0,0 +1,23 @@
+import { builtIn as patterns } from './pattern'
+import { namedShapes as shapes } from './shape'
+import { builtIn as symbols } from './shape'
+import { colors, palette } from './color'
+/**
+ *
+ */
+export class ThemeBrewer {
+	constructor() {
+		this.patterns = []
+		this.shapes = []
+		this.palette = []
+		this.defaults = {}
+	}
+}
+
+export const builtIn = {
+	colors,
+	palette,
+	patterns,
+	shapes,
+	symbols
+}

package/src/components/lib/timer.js

@@ -0,0 +1,41 @@
+import { writable } from 'svelte/store'
+
+let req
+let prev
+const elapsed = writable(0)
+
+const tick = (timestamp) => {
+	if (!prev) prev = timestamp
+	const diff = Math.round(timestamp - prev)
+	prev = timestamp
+	elapsed.update((e) => e + diff)
+	req = window.requestAnimationFrame(tick)
+}
+
+const timer = {
+	start() {
+		if (typeof window === 'undefined') return
+		else if (!req) {
+			prev = null
+			req = window.requestAnimationFrame(tick)
+		}
+	},
+	stop() {
+		if (typeof window === 'undefined') return
+		else if (req) {
+			window.cancelAnimationFrame(req)
+			req = null
+		}
+	},
+	toggle() {
+		req ? timer.stop() : timer.start()
+	},
+	set(val) {
+		if (typeof val === 'number') elapsed.set(val)
+	},
+	reset() {
+		timer.set(0)
+	}
+}
+
+export { timer, elapsed }

package/src/components/lib/utils.js

@@ -0,0 +1,165 @@
+import { scaleBand, scaleLinear } from 'd3-scale'
+import { min, max } from 'd3-array'
+import { ascending, quantile } from 'd3-array'
+import { nest } from 'd3-collection'
+import { omit, filter } from 'ramda'
+
+/**
+ * Generates a unique id from current timestamp
+ *
+ * @returns {String} timestamp based unique id
+ */
+export function uniqueId(prefix = '') {
+	return prefix + Date.now().toString(36)
+}
+
+/**
+ * Capitalizes the first letter of input string
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+export function initCap(str) {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+/**
+ * Removes undefined and null values from the input object.
+ *
+ * @param {Object} obj
+ * @returns {Object}
+ */
+export function compact(obj) {
+	return filter((x) => x !== undefined && x !== null, obj)
+}
+
+/**
+ * Converts an input number into it's hexadecimal representation, with optional left padded zeroes based on the `size`
+ *
+ * @param {number} value
+ * @param {number} size
+ * @returns
+ */
+export function toHexString(value, size = 2) {
+	return value.toString(16).padStart(size, '0')
+}
+
+/**
+ * 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
+ * @param {number} size
+ * @param {number} pad
+ * @param {number} columns
+ * @param {number} rows
+ * @returns
+ */
+export function swatch(count, size, pad = 0, columns, rows) {
+	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 data = [...Array(count).keys()].map((index) => ({
+		cx: (size + pad) / 2 + (index % columns) * (size + pad),
+		cy: (size + pad) / 2 + Math.floor(index / columns) * (size + pad),
+		r: size / 2
+	}))
+
+	return { width, height, data }
+}
+/**
+ * Get a scale function mapping the values between a range of lower and upper values
+ *
+ * @param {array} values
+ * @param {array[2]} bounds
+ * @param {number} buffer
+ * @returns
+ */
+export function getScale(values, bounds, buffer = 0) {
+	if (values.some(isNaN)) {
+		return scaleBand().range(bounds).domain(values).padding(0.5)
+	} else {
+		// ensure that all numeric values are converted to numbers so that d3 min/max provide correct results
+		values = values.map((n) => +n)
+
+		let minValue = min(values)
+		let maxValue = max(values)
+
+		if (minValue < 0 && maxValue > 0) {
+			maxValue = max([-1 * minValue, maxValue])
+			minValue = -1 * maxValue
+		}
+		const margin = (maxValue - minValue) * buffer
+		return scaleLinear()
+			.domain([minValue - margin, maxValue + margin])
+			.range(bounds)
+	}
+}
+/**
+ * Obtain the scale function for the `x` and `y` fields in the data set.
+ *
+ * @param {array<dict>} data
+ * @param {string} x
+ * @param {string} y
+ * @param {number} width
+ * @param {number} height
+ * @returns
+ */
+export function getScales(data, x, y, width, height) {
+	const xValues = [...new Set(data.map((item) => item[x]))]
+	const yValues = [...new Set(data.map((item) => item[y]))]
+
+	return {
+		scaleX: getScale(xValues, [0, width]),
+		scaleY: getScale(yValues, [height, 0], 0.1)
+	}
+}
+
+/**
+ * Summarize `data` by fields `x` and `y` and return a nested array with
+ * key as unique `x` values and value as statistical summaries of `y` values
+ *
+ * @param {*} data
+ * @param {*} x
+ * @param {*} y
+ * @returns
+ */
+export function aggregate(data, x, y) {
+	const summary = nest()
+		.key((d) => d[x])
+		.rollup((d) => {
+			let values = d.map((g) => g[y]).sort(ascending)
+			let q1 = quantile(values, 0.25)
+			let q3 = quantile(values, 0.75)
+			let median = quantile(values, 0.5)
+			let interQuantileRange = q3 - q1
+			let min = q1 - 1.5 * interQuantileRange
+			let max = q3 + 1.5 * interQuantileRange
+			return { q1, q3, median, interQuantileRange, min, max }
+		})
+		.entries(data)
+	return summary
+}
+export function getPaletteForValues(values, { palette, fallback }) {
+	return values.map((value, index) =>
+		index < palette.length ? palette[index] : fallback
+	)
+}
+
+export function toNested(data, key, label) {
+	return nest()
+		.key((d) => d[key])
+		.rollup((values) => values.map((value) => omit([key], value)))
+		.entries(data.sort((a, b) => ascending(a[label], b[label])))
+}

package/src/components/plots/BarPlot.svelte

@@ -0,0 +1,36 @@
+<script>
+	import { getContext } from 'svelte'
+
+	let chart = getContext('chart')
+
+	// export let data = []
+	export let limit = 8
+	export let fields
+	// export let valueFormat
+	// export let scales
+	export let colors
+	export let h = 10
+
+	function size(value) {
+		// console.log($chart.axis.x.scale, value)
+		return $chart.axis.x.scale(value)
+	}
+	function top(value) {
+		// console.log('Y', value)
+		return $chart.axis.y.scale(value)
+	}
+
+	$: bars = $chart.data.slice(0, limit)
+</script>
+
+{#each bars as item}
+	<rect
+		x="0"
+		y={top(item[fields.y]) + h / 2}
+		width={size(item[fields.x])}
+		height={h * 3}
+		fill={colors[item[fields.label]]}
+	/>
+	<text x="10" y={top(item[fields.y]) + 2.5 * h}>{item[fields.label]}</text>
+	<!-- <text x="10" y={top(item[fields.y]) + 10}>{item[fields.x]}</text> -->
+{/each}

package/src/components/plots/BoxPlot.svelte

@@ -0,0 +1,54 @@
+<script>
+  import { getContext } from 'svelte'
+
+  let chart = getContext('chart')
+
+  export let whisker = true
+  export let boxWidth = 150
+  export let stroke = 'green'
+  export let fill = '#69b3a2' // fixed color or attribute to be used for color
+  export let scaleFill = () => fill // defaults to fill color
+
+  $: data = $chart.summary()
+</script>
+
+{#each data as { key, value }}
+  <rect
+    width={boxWidth}
+    height={$chart.axis.y.scale(value.q1) - $chart.axis.y.scale(value.q3)}
+    x={$chart.axis.x.scale(key) - boxWidth / 2}
+    y={$chart.axis.y.scale(value.q3)}
+    fill={scaleFill(value[fill])}
+    {stroke}
+  />
+  <line
+    x1={$chart.axis.x.scale(key) - boxWidth / 2}
+    x2={$chart.axis.x.scale(key) + boxWidth / 2}
+    y1={$chart.axis.y.scale(value.median)}
+    y2={$chart.axis.y.scale(value.median)}
+    {stroke}
+  />
+  <line
+    x1={$chart.axis.x.scale(key)}
+    x2={$chart.axis.x.scale(key)}
+    y1={$chart.axis.y.scale(value.min)}
+    y2={$chart.axis.y.scale(value.max)}
+    {stroke}
+  />
+  {#if whisker}
+    <line
+      x1={$chart.axis.x.scale(key) - boxWidth / 8}
+      x2={$chart.axis.x.scale(key) + boxWidth / 8}
+      y1={$chart.axis.y.scale(value.min)}
+      y2={$chart.axis.y.scale(value.min)}
+      {stroke}
+    />
+    <line
+      x1={$chart.axis.x.scale(key) - boxWidth / 8}
+      x2={$chart.axis.x.scale(key) + boxWidth / 8}
+      y1={$chart.axis.y.scale(value.max)}
+      y2={$chart.axis.y.scale(value.max)}
+      {stroke}
+    />
+  {/if}
+{/each}

package/src/components/plots/ScatterPlot.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { clamp } from 'yootils'
+  import Symbol from '../chart/Symbol.svelte'
+  import { getContext } from 'svelte'
+
+  const chart = getContext('chart')
+
+  export let size = 8
+  export let fill = '#c0c0c0'
+  export let stroke = '#3c3c3c'
+  export let jitterWidth = 50
+  export let offset
+
+  $: jitterWidth = clamp(jitterWidth, 0, 100 / 2)
+  $: offset = clamp(offset | (jitterWidth / 2), 0, 100)
+</script>
+
+{#if $chart.data}
+  {#each $chart.data as d}
+    <Symbol
+      x={$chart.axis.x.scale(d[$chart.x]) -
+        offset +
+        Math.random() * jitterWidth}
+      y={$chart.axis.y.scale(d[$chart.y])}
+      {fill}
+      {stroke}
+      {size}
+    />
+  {/each}
+{/if}

package/src/components/store.js

@@ -0,0 +1,70 @@
+import { writable } from 'svelte/store'
+
+function createChart() {
+	const { subscribe, set } = writable({
+		data: [],
+		x: '',
+		y: ''
+	})
+	return { subscribe, set }
+}
+
+export function animatedChart(input, key, valueFields = [], previous = []) {
+	const previousKeys = new Set(previous.map((item) => item[key]))
+	const currentKeys = new Set(input.map((item) => item[key]))
+	const toAdd = new Set(
+		[...currentKeys].filter((key) => !previousKeys.has(key))
+	)
+	const toRemove = new Set(
+		[...previousKeys].filter((key) => !currentKeys.has(key))
+	)
+	console.log(toAdd, toRemove)
+	let data = input
+		.filter((item) => toAdd.has(item[key]))
+		.map((item) => {
+			let el = { ...item }
+			valueFields.forEach(
+				({ field, initialValue, attrs }) =>
+					(el[field] =
+						typeof initialValue === 'function'
+							? initialValue(el, attrs)
+							: initialValue)
+			)
+			return el
+		})
+	let prev = previous
+		.filter((item) => !toRemove.has(item[key]))
+		.map((item) => {
+			let el = { ...item }
+			valueFields.forEach(
+				({ field, initialValue, attrs }) =>
+					(el[field] =
+						typeof initialValue === 'function'
+							? initialValue(el, { ...attrs, isPrevious: true })
+							: initialValue)
+			)
+			return el
+		})
+	data = [...prev, ...data]
+	console.log(data)
+	return tweened(data, { duration: 500, easing: cubicOut })
+}
+// function createAxis() {
+// 	const { subscribe, set } = writable({})
+
+// 	let data
+// 	let x = {}
+// 	let y = {}
+
+// 	// find origin & orientation
+// 	function getOriginAndOrientation(data, x, y) {
+// 		this.data = data
+// 		this.x = x
+// 		this.y = y
+// 	}
+// 	function init(config, data) {}
+// 	return { subscribe, init, set, getOriginAndOrientation }
+// }
+
+// export const chart = createChart()
+// export const axis = createAxis()

package/src/constants.js

@@ -0,0 +1,66 @@
+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'
+}

package/src/elements/Bar.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { format } from 'd3-format'
+	import Label from './Label.svelte'
+
+	export let rank
+	export let value
+	export let name
+	export let formatString = '.1%'
+	export let scales
+	export let height = 60
+	export let fill
+	export let spaceBetween = 5
+
+	const textHeight = 16
+	const charWidth = 12
+	$: y = rank * (height + spaceBetween)
+	$: width = $scales.x(value)
+
+	$: textWidth = name.length * charWidth
+	$: textOffset = width <= textWidth ? width + charWidth : width
+	$: textAnchor = textOffset > width ? 'start' : 'end'
+
+	$: formattedValue = format(formatString)(value)
+</script>
+
+<rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
+<rect x={$scales.x(0)} {y} width={5} {height} {fill} />
+<Label x={width} y={y + textHeight + 8} anchor={textAnchor} label={name} />
+<Label
+	x={width}
+	y={y + height - 14}
+	anchor={textAnchor}
+	label={formattedValue}
+	small
+/>