@rokkit/chart 1.0.0-next.11

package/src/elements/ColorRamp.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { scaleLinear } from 'd3-scale'
+	import { uniqueId } from '../lib/utils'
+
+	export let x = 0
+	export let y = 0
+	export let textSize = 5
+	export let height = 10
+	export let width = 100
+	export let tickCount = 5
+	export let scale
+
+	$: scaleTicks = scaleLinear()
+		.range([x, x + width])
+		.domain(scale.domain())
+	$: scalePercent = scaleLinear().range([0, 100]).domain(scale.domain())
+	$: ticks = scale.ticks
+		.apply(scale, [tickCount])
+		.map((d) => ({ x: scaleTicks(d), value: d }))
+
+	$: colors = ticks.map(({ value }) => ({
+		color: scale(value),
+		offset: `${scalePercent(value)}%`,
+	}))
+	$: id = uniqueId('legend-')
+</script>
+
+<defs>
+	<linearGradient {id}>
+		{#each colors as { color, offset }}
+			<stop stop-color={color} {offset} />
+		{/each}
+	</linearGradient>
+</defs>
+<rect {x} y={y + height} {width} {height} fill="url(#{id})" />
+{#each ticks as { x, value }}
+	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
+	<text {x} y={y + height / 2} font-size={textSize}>{value}</text>
+{/each}
+<line x1={x} y1={y + 2 * height} x2={x + 100} y2={y + 2 * height} />
+
+<style>
+	line {
+		stroke: currentColor;
+		stroke-width: 0.2;
+	}
+	text {
+		fill: currentColor;
+		text-anchor: middle;
+	}
+</style>

package/src/elements/ContinuousLegend.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { scaleLinear } from 'd3-scale'
+	import { uniqueId } from '../components/lib/utils'
+
+	export let x = 0
+	export let y = 0
+	export let textSize = 5
+	export let height = 10
+	export let width = 100
+	export let tickCount = 5
+	export let scale
+
+	$: scaleTicks = scaleLinear()
+		.range([x, x + 100])
+		.domain(scale.domain())
+	$: ticks = scale.ticks
+		.apply(scale, [tickCount])
+		.map((d) => ({ x: scaleTicks(d), label: d }))
+
+	$: colors = scale.range()
+	$: id = uniqueId('legend-')
+</script>
+
+<defs>
+	<linearGradient {id}>
+		<stop stop-color={colors[0]} offset="0%" />
+		<stop stop-color={colors[1]} offset="100%" />
+	</linearGradient>
+</defs>
+<rect {x} y={y + height} {width} {height} fill="url(#{id})" />
+{#each ticks as { x, label }}
+	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
+	<text {x} y={y + height / 2} font-size={textSize}>{label}</text>
+{/each}
+<line x1={x} y1={y + 2 * height} x2={x + 100} y2={y + 2 * height} />
+
+<style>
+	line {
+		stroke: currentColor;
+		stroke-width: 0.2;
+	}
+	text {
+		fill: currentColor;
+		text-anchor: middle;
+	}
+</style>

package/src/elements/DiscreteLegend.svelte

@@ -0,0 +1,41 @@
+<script>
+	export let x = 0
+	export let y = 0
+	export let textSize = 5
+	export let size = 10
+	export let space = 2
+	export let padding = 5
+	export let scale
+	export let tickCount
+
+	$: sizeWithSpace = size + space
+	$: ticks = scale.ticks.apply(scale, [tickCount])
+</script>
+
+{#each ticks as tick, i}
+	<text
+		x={x + padding + i * sizeWithSpace + size / 2}
+		y={y + size / 2}
+		font-size={textSize}>{tick}</text
+	>
+	<rect
+		x={x + padding + i * sizeWithSpace}
+		y={y + padding + textSize}
+		width={size}
+		height={size}
+		fill={scale(tick)}
+		rx="1"
+		ry="1"
+	/>
+{/each}
+
+<style>
+	rect {
+		stroke: currentColor;
+		stroke-width: 0.2;
+	}
+	text {
+		fill: currentColor;
+		text-anchor: middle;
+	}
+</style>

package/src/elements/Label.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let small = false
+	export let label
+	export let angle = 0
+	export let anchor = 'middle'
+	export let x
+	export let y
+
+	$: transform = `translate(${x},${y}) rotate(${angle})`
+</script>
+
+<text class="label" class:small text-anchor={anchor} {transform}>{label}</text>

package/src/elements/PatternDefs.svelte

@@ -0,0 +1,13 @@
+<script>
+	import PatternMask from './PatternMask.svelte'
+	const size = 10
+
+	export let thickness = 0.5
+	export let patterns
+</script>
+
+<defs>
+	{#each patterns as pattern}
+		<PatternMask {...pattern} {thickness} {size} />
+	{/each}
+</defs>

package/src/elements/PatternMask.svelte

@@ -0,0 +1,20 @@
+<script>
+	export let id
+	// export let fill
+	export let path
+	// export let contrast
+	export let thickness = 0.5
+	export let patternUnits = 'userSpaceOnUse'
+	export let size = 10
+</script>
+
+<pattern id="p-{id}" {patternUnits} width={size} height={size}>
+	{#if path}
+		<path d={path} fill="none" stroke="white" stroke-width={thickness} />
+		<!-- {:else}
+	<rect width={size} height={size} {fill} /> -->
+	{/if}
+</pattern>
+<mask {id}>
+	<rect x="0" y="0" width="100%" height="100%" fill="url(#p-{id})" />
+</mask>

package/src/elements/Symbol.svelte

@@ -0,0 +1,38 @@
+<script>
+	// import { namedShapes } from '../lib/shape'
+	import { swatchStore } from '../swatch'
+
+	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 = 'circle'
+	// export let shape = null
+
+	$: x = x - size / 2
+	$: y = y - size / 2
+
+	$: d = $swatchStore[shapes][name](size)
+	// 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
+/>

package/src/elements/Tooltip.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let left
+	export let top
+	export let hidden = true
+</script>
+
+<div
+	class="tooltip {$$props.class}"
+	{hidden}
+	style="--top: {top};--left: {left}"
+>
+	<slot />
+</div>
+
+<style lang="postcss">
+	.tooltip {
+		padding: 1em 0.5em;
+		left: var(--left);
+		top: var(--top);
+		position: absolute;
+		z-index: 10;
+	}
+</style>

package/src/funnel.svelte

@@ -0,0 +1,35 @@
+<script context="module">
+	/**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+	export async function load({ page, fetch, session, stuff }) {
+		const url = '/api/data/funnel'
+		const response = await fetch(url)
+
+		if (response.ok) {
+			let result = await response.json()
+
+			return {
+				props: { data: result }
+			}
+		}
+
+		return {
+			status: response.status,
+			error: new Error(`Could not load ${url}`)
+		}
+	}
+</script>
+
+<script>
+	import { FunnelPlot, Chart } from '@rokkit/chart'
+	export let data
+
+	// let names = ['one', 'two', 'three'] // each one is a separate segment. max of Combined value at each stage is overall height/width
+	// let groups = ['a', 'b', 'c'] // each group should have a value. individual values are used for each band height
+</script>
+
+<h1>Funnel</h1>
+<Chart {data} width={1200}>
+	<FunnelPlot x="stage" y="count" fill="client" stat="sum" />
+</Chart>

package/src/geom.js

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

package/src/index.js

@@ -0,0 +1,16 @@
+// export { aes } from './lib/aes'
+// export { timelapse } from './lib/timelapse'
+// export { axisTicks } from './lib/axis'
+export { timer, elapsed } from './lib/timer'
+// export { default as Chart } from './chart/Chart.svelte'
+// export { default as Axis } from './chart/Axis.svelte'
+export { default as Swatch } from './chart/Swatch.svelte'
+// export { default as AxisTicks } from './chart/AxisTicks.svelte'
+// export { default as AxisGrid } from './chart/AxisGrid.svelte'
+// export { default as AxisLabels } from './chart/AxisLabels.svelte'
+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/ScatterPlot.svelte'
+export * from './components/lib'

package/src/lib/axis.js

@@ -0,0 +1,75 @@
+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]
+	}
+	const ticks = {
+		x: axisTicks(scale.x, { axis: 'x', origin }),
+		y: axisTicks(scale.y, { axis: 'y', origin })
+	}
+	return { origin, ticks }
+}
+
+export function axisTicks(scale, opts) {
+	let [minRange, maxRange] = scale.range()
+	let count = Math.abs((maxRange - minRange) / 40)
+	let ticks = scale.domain()
+	let offset = 0
+	let { axis, format, origin } = {
+		axis: 'x',
+		format: (x) => x,
+		origin: { x: 0, y: 0 },
+		...opts
+	}
+	if (scale.ticks) {
+		ticks = scale.ticks(count)
+	} else {
+		offset = Math.sign(maxRange - minRange) * (scale.bandwidth() / 2)
+		count = Math.min(Math.round(count), scale.domain().length)
+		if (count < scale.domain().length) {
+			let diff = scale.domain().length - count
+			ticks = ticks.filter((d, i) => i % diff == 0)
+		}
+		// let diff = scale.domain().length - count
+	}
+	ticks = ticks
+		.map((t) => ({
+			label: format(t),
+			pos: scale(t)
+		}))
+		.map(({ label, pos }) => ({
+			label,
+			offset: { x: axis === 'x' ? offset : 0, y: axis === 'y' ? offset : 0 },
+			x: axis === 'x' ? pos : origin.x,
+			y: axis === 'y' ? pos : origin.y
+		}))
+
+	return ticks
+}
+
+export class Axis {
+	constructor(name, chart, offset) {
+		this.name = ['x', 'y'].includes(name) ? name : 'x'
+		this.chart = chart
+		this.offset = offset
+	}
+
+	set offset(value) {
+		const [min, max] = this.chart.scale[this.name].range()
+		const otherAxis = this.name === 'x' ? 'y' : 'x'
+		const origin = this.chart.origin[otherAxis]
+
+		this.offset = value * (origin == min ? 1 : origin == max ? -1 : 0)
+	}
+
+	// get domain() {
+	// 	let coords =
+	// 		(coords[axis + '1'] =
+	// 		coords[axis + '2'] =
+	// 			origin[axis] - offset[axis])
+	// }
+}

package/src/lib/colors.js

@@ -0,0 +1,32 @@
+// import { writable } from 'svelte/store'
+import { repeatAcross } from '../lib/utils'
+
+const palette = [
+	'#FFDE6B',
+	'#EF89EE',
+	'#F79F1E',
+	'#02B8FF',
+	'#9F84EC',
+	'#15CBC4',
+	'#0092FD',
+	'#F63A57',
+	'#A2CB39',
+	'#FF6E2F',
+	'#FEB8B9',
+	'#af7aa1',
+	'#7EFFF5'
+]
+
+export class Palette {
+	constructor(colors = palette) {
+		this.colors = colors
+	}
+
+	set colors(value) {
+		if (value && Array.isArray(value)) this.colors = value
+	}
+}
+
+export function colorBrewer(values) {
+	return repeatAcross(palette, [...new Set(values)])
+}

package/src/lib/geom.js

@@ -0,0 +1,4 @@
+// export function violin(data, mapping) {}
+// export function bar(data, mapping) {}
+// export function scatter(data, mapping) {}
+// export function line(data, mapping) {}

package/src/lib/shapes.js

@@ -0,0 +1,144 @@
+const names = [
+	'circle',
+	'square',
+	'triangle',
+	'diamond',
+	'star',
+	'rhombus',
+	'heart'
+]
+const data = {
+	square: ['M', 1, 1, 'L', 9, 1, 'L', 9, 9, 'L', 1, 9, 'Z'],
+	circle: [
+		['M', 0, 5],
+		['A', 5, 5, 0, 0, 0, 10, 5],
+		['A', 5, 5, 0, 0, 0, 0, 5]
+	],
+	triangle: ['M', 5, 0, 'L', 10, 10, 'L', 0, 10, 'Z'],
+	diamond: [
+		['M', 5, 0],
+		['A', 7, 7, 0, 0, 0, 10, 5],
+		['A', 7, 7, 0, 0, 0, 5, 10],
+		['A', 7, 7, 0, 0, 0, 0, 5],
+		['A', 7, 7, 0, 0, 0, 5, 0]
+	],
+	rhombus: ['M', 0, 5, 'L', 5, 0, 'L', 10, 5, 'L', 5, 10, 'Z'],
+	heart: [
+		['M', 9, 5],
+		['A', 0.8, 0.8, 0, 0, 0, 5, 2],
+		['A', 0.8, 0.8, 0, 0, 0, 1, 5],
+		['L', 5, 9],
+		['L', 9, 5]
+	],
+	star: [
+		['M', 4.80001, 0],
+		['L', 5.92258, 3.45491],
+		['H', 9.55529],
+		['L', 6.61637, 5.59017],
+		['L', 7.73894, 9.04509],
+		['L', 4.80001, 6.90983],
+		['L', 1.86108, 9.04509],
+		['L', 2.98365, 5.59017],
+		['L', 0.0447266, 3.45491],
+		['H', 3.67744],
+		['L', 4.80001, 0],
+		['Z']
+	]
+}
+
+function scaledPath(size, x) {
+	if (Array.isArray(x)) return x.map((x) => scaledPath(size, x)).join(' ')
+	return typeof size === 'number' ? x * size : x
+}
+
+export const shapes = names.map((name) => ({
+	name,
+	path: (s) => scaledPath(s, data[name])
+}))
+
+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}`,
+	crosshair: (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}`,
+	crossboats: (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`,
+	curvedrhombus: (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}`,
+	fourflags: (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}`
+}