@rokkit/chart 1.0.0-next.86 → 1.0.0-next.88

package/src/chart/TimelapseChart.svelte

@@ -1,90 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { slidingWindow, uniques, brewer } from '../lib'
-
-	import Grid from './AxisGrid.svelte'
-	import Axis from './Axis.svelte'
-	import BoxPlot from '../plots/BoxPlot.svelte'
-	import ViolinPlot from '../plots/ViolinPlot.svelte'
-	import ScatterPlot from '../plots/ScatterPlot.svelte'
-
-	let chart = writable({})
-	let axis
-	setContext('chart', chart)
-
-	export let data
-	export let x
-	export let y
-	export let time
-	export let theme
-
-	export let current
-	export let stages
-
-	function base(data, x, y) {
-		return {
-			data,
-			x,
-			y,
-			width: 800,
-			height: 350,
-			values: {
-				x: uniques(data, x),
-				y: uniques(data, y)
-			}
-		}
-	}
-
-	function sliceBy(data, attr, size, step, offset) {
-		const values = uniques(data, attr)
-		const groups = slidingWindow(values, size, step, offset).map((x) => ({
-			...x,
-			data: data.filter((y) => y.Petal_Length >= x.lowerBound && y.Petal_Length < x.upperBound)
-		}))
-
-		return groups
-	}
-
-	function timed(data, x, y, time) {
-		let chart = base(data, x, y)
-		let temp = brewer().chart(data, x, y).use(theme).computeAxis()
-		axis = temp.axis
-		chart.data = sliceBy(chart.data, time, 3, 1)
-		stages = chart.data.length - 1
-		return chart
-	}
-
-	function switchChart(index) {
-		let chart = {}
-		if (index != null) {
-			chart = brewer().chart(phased.data[index].data, x, y).use(theme).computeAxis()
-			chart.axis = axis
-			// chart.margin = { left: 40, right: 10, top: 10, bottom: 30 }
-		}
-		return chart
-	}
-	let phased
-
-	$: phased = timed(data, x, y, time)
-	$: $chart = switchChart(current)
-
-	// setup chart attributes that do not change over time
-	// get scales for x & y
-	// set margins
-
-	// nest data by time attribute
-	// set up sequence based on ascending values of time
-	// set up the timer to switch between data values
-	// On change set the context with new data set
-	// Old data set needs exit animation, new data set needs entry animation
-</script>
-
-<svg viewBox="0 0 {phased.width} {phased.height}" class="chart flex">
-	<Grid />
-	<Axis orient="bottom" />
-	<Axis orient="left" />
-	<BoxPlot />
-	<ViolinPlot />
-	<ScatterPlot jitterWidth={50} offset={50} />
-</svg>

package/src/chart/Timer.svelte

@@ -1,27 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { elapsed, timer } from '@rokkit/stores'
-
-	const dispatch = createEventDispatcher()
-
-	export let isEnabled = false
-	export let currentKeyframe = 0
-	export let keyframeCount = 0
-	export let duration = 1000
-
-	$: if (isEnabled) currentKeyframe = Math.floor($elapsed / duration)
-	$: if (currentKeyframe === keyframeCount) dispatch('end')
-	$: isEnabled && currentKeyframe < keyframeCount ? timer.start() : timer.stop()
-
-	function onReset() {
-		timer.reset()
-		isEnabled = false
-		currentKeyframe = 0
-	}
-</script>
-
-<div class="timer flex flex-row gap-2">
-	<button on:click|preventDefault={() => (isEnabled = true)}>play</button>
-	<button on:click|preventDefault={() => (isEnabled = false)}>pause</button>
-	<button on:click|preventDefault={onReset}>reset</button>
-</div>

package/src/elements/Tooltip.svelte

@@ -1,19 +0,0 @@
-<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/lib/axis.js

@@ -1,77 +0,0 @@
-function getOrigin(scale, axis) {
-	const origin = scale[axis].ticks
-		? scale(Math.max(0, Math.min(...scale[axis].domain())))
-		: scale[axis].range()[0]
-	return origin
-}
-export function axis(scale) {
-	const origin = {
-		x: getOrigin(scale, 'x'),
-		y: getOrigin(scale, 'y')
-	}
-	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/color.js

@@ -1,55 +0,0 @@
-import { palette } from './constants'
-
-export class ColorBrewer {
-	constructor() {
-		this.colors = ['blue', 'pink', 'teal', 'indigo', 'purple', 'amber', 'rose']
-		this.palette = palette
-		this.grayscale = this.palette['trueGray']
-		this.fill = 100
-		this.stroke = 600
-		this.contrast = 600
-	}
-
-	dark() {
-		this.fill = 500
-		this.stroke = 700
-		this.contrast = 100
-		return this
-	}
-
-	mix(fill, stroke, contrast) {
-		this.fill = Object.keys(this.grayscale).includes(fill) ? fill : this.fill
-		this.stroke = Object.keys(this.grayscale).includes(stroke) ? stroke : this.stroke
-		this.contrast = Object.keys(this.grayscale).includes(contrast) ? contrast : this.contrast
-
-		return this
-	}
-
-	swatch(colors) {
-		this.palette = colors
-		return this
-	}
-
-	filter(colors) {
-		this.colors = colors
-		return this
-	}
-
-	gray() {
-		return {
-			fill: this.grayscale[this.fill],
-			stroke: this.grayscale[this.stroke],
-			contrast: this.grayscale[this.contrast]
-		}
-	}
-
-	brew() {
-		const palette = this.colors.map((color) => ({
-			fill: this.palette[color][this.fill],
-			stroke: this.palette[color][this.stroke],
-			contrast: this.palette[color][this.contrast]
-		}))
-
-		return palette
-	}
-}

package/src/lib/constants.js

@@ -1,41 +0,0 @@
-import patterns__ from './patterns.json'
-import __palette from './palette.json'
-
-export const __patterns__ = patterns__
-export const palette = __palette
-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 colors = [
-	'#FFDE6B',
-	'#EF89EE',
-	'#F79F1E',
-	'#02B8FF',
-	'#9F84EC',
-	'#15CBC4',
-	'#0092FD',
-	'#F63A57',
-	'#A2CB39',
-	'#FF6E2F',
-	'#FEB8B9',
-	'#af7aa1',
-	'#7EFFF5'
-]

package/src/lib/funnel.js

@@ -1,230 +0,0 @@
-import { max, cumsum } from 'd3-array'
-import { nest } from 'd3-collection'
-import { flatten } from 'ramda'
-import { area, curveBasis, curveBumpX, curveBumpY } from 'd3-shape'
-import { scaleLinear } from 'd3-scale'
-import { summarize } from './summary'
-
-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
-}
-
-/**
- * Determines if the layout is vertical based on the given parameters.
- * @param {Object} uniques - The unique values.
- * @param {Object} aes - The aes object.
- * @returns {boolean} - Returns true if the layout is vertical, false otherwise.
- */
-function determineLayout(uniques, aes) {
-	let vertical = 'y' in uniques && uniques.y.some(isNaN)
-	const horizontal = 'x' in uniques && uniques.x.some(isNaN)
-
-	if (horizontal && vertical) {
-		if ((aes.stat || 'count') === 'count') {
-			vertical = false
-			console.warn('Assuming horizontal layout because stat is count')
-		} else {
-			console.error('Cannot plot without at least one axis having numeric values')
-			return null
-		}
-	}
-	return vertical
-}
-
-/**
- * Converts to phases.
- * @param {Array} input - The input data.
- * @param {Object} aes - The aes object.
- * @returns {Object} - The phases, uniques, and vertical properties.
- */
-export function convertToPhases(input, aes) {
-	const uniques = getUniques(input, aes)
-	const vertical = determineLayout(uniques, aes)
-	if (vertical === null) 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)
-
-	const summary = summarize(input, by, value, aes.stat)
-	const phases = nest()
-		.key((d) => d[key])
-		.rollup((rows) => ('fill' in aes ? fillMissing(uniques.fill, rows, key, aes) : rows))
-		.entries(summary)
-
-	return { phases, uniques, vertical }
-}
-
-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)
-}
-
-/**
- * Mirrors the input based on the provided aesthetic mappings.
- *
- * @param {Object} input - The input data with phases and uniques.
- * @param {Object} aes - The aesthetic mappings.
- * @returns {Object} The mirrored input with updated stats and domain.
- */
-export function mirror(input, aes) {
-	const domain = calculateDomain(input)
-	const stats = calculateStats(input, aes, domain)
-
-	return { ...input, stats, domain }
-}
-
-/**
- * Calculates the domain for the mirror operation.
- *
- * @param {Object} input - The input data with phases.
- * @returns {number} The calculated domain.
- */
-function calculateDomain(input) {
-	return input.phases.reduce((maxDomain, phase) => {
-		const stat = cumsum(phase.value.map((row) => row[aes.stat]))
-		const midpoint = max(stat) / 2
-		return Math.max(maxDomain, midpoint)
-	}, 0)
-}
-
-/**
- * Calculates the stats for the mirror operation.
- *
- * @param {Object} input - The input data with phases and uniques.
- * @param {Object} aes - The aesthetic mappings.
- * @param {number} domain - The domain for the mirror operation.
- * @returns {Array} The calculated stats.
- */
-function calculateStats(input, aes, domain) {
-	return input.phases.map((phase) => {
-		const stat = cumsum(phase.value.map((row) => row[aes.stat]))
-		const midpoint = max(stat) / 2
-
-		phase.value = phase.value.map((row, index) => {
-			const position = calculatePosition(input, aes, row, stat, index, midpoint)
-			return { ...row, ...position }
-		})
-
-		return phase
-	})
-}
-
-/**
- * Calculates the position for the mirror operation.
- *
- * @param {Object} input - The input data with uniques.
- * @param {Object} aes - The aesthetic mappings.
- * @param {Object} row - The current row.
- * @param {Array} stat - The stat data.
- * @param {number} index - The current index.
- * @param {number} midpoint - The midpoint for the mirror operation.
- * @returns {Object} The calculated position.
- */
-function calculatePosition(input, aes, row, stat, index, midpoint) {
-	const axis = input.vertical ? 'y' : 'x'
-	const oppositeAxis = input.vertical ? 'x' : 'y'
-	const axisValue = input.uniques[axis].indexOf(row[aes[axis]])
-	const position1 = stat[index] - midpoint
-	const position0 = position1 - row[aes.stat]
-
-	return {
-		[axis]: axisValue,
-		[`${oppositeAxis}1`]: position1,
-		[`${oppositeAxis}0`]: position0
-	}
-}
-
-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
-
-	if ('fill' in aes) {
-		let stats = flatten(data.stats.map((phase) => phase.value))
-
-		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/lib/geom.js

@@ -1,99 +0,0 @@
-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 }
-// }
-
-// export function violin(data, mapping) {}
-// export function bar(data, mapping) {}
-// export function scatter(data, mapping) {}
-// export function line(data, mapping) {}

package/src/lib/heatmap.js

@@ -1,68 +0,0 @@
-import {
-	isSunday,
-	addDays,
-	subMonths,
-	startOfMonth,
-	format,
-	previousSunday,
-	differenceInDays,
-	differenceInWeeks,
-	endOfWeek
-} from 'date-fns'
-import { nest } from 'd3-collection'
-// import { group } from 'd3-array'
-
-const DATE_FORMAT = 'yyyy-MM-dd'
-const weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
-
-export function summarize(data, dateField = 'date', valueField) {
-	// const summary = group(data, d => d[dateField])
-	const nested = nest()
-		.key((d) => format(new Date(d[dateField]), DATE_FORMAT))
-		.rollup((d) =>
-			valueField ? d.map((value) => value[valueField]).reduce((a, b) => a + b, 0) : d.length
-		)
-		.entries(data)
-
-	return nested.reduce((obj, item) => ((obj[item.key] = item.value), obj), {})
-}
-
-export function heatmap(data, numberOfMonths) {
-	const today = new Date()
-	const firstDay = getFirstDay(numberOfMonths, today)
-	const months = {}
-	const grid = generateGrid(firstDay, today).map((d) => ({
-		...d,
-		value: d.date in data ? data[d.date] : 0
-	}))
-
-	grid.map((d) => {
-		const month = format(endOfWeek(new Date(d.date)), 'MMM')
-
-		if (!(month in months)) {
-			months[month] = d.x
-		}
-	})
-	return {
-		grid,
-		months,
-		weekdays,
-		numberOfWeeks: differenceInWeeks(today, firstDay) + 1
-	}
-}
-
-function getFirstDay(months, lastDay = new Date()) {
-	const firstDay = subMonths(startOfMonth(lastDay), months)
-	return isSunday(firstDay) ? firstDay : previousSunday(firstDay)
-}
-
-function generateGrid(firstDay, lastDay) {
-	const days = differenceInDays(lastDay, firstDay) + 1
-
-	const grid = [...Array(days).keys()].map((day) => ({
-		x: Math.floor(day / 7),
-		y: day % 7,
-		date: format(addDays(firstDay, day), DATE_FORMAT)
-	}))
-	return grid
-}