@rokkit/chart 1.0.0-next.13 → 1.0.0-next.130

package/src/chart/TimelapseChart.svelte

@@ -1,97 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { slidingWindow, uniques, brewer } from '../lib'
-
-	import Grid from './Grid.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
-		console.log(temp)
-		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)
-	// $: console.log(current, phased, chart)
-
-	// 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="flex chart">
-	<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 '../lib/timer.js'
-
-	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="flex flex-row gap-2 timer">
-	<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/chart.js

@@ -1,9 +0,0 @@
-export function scales(data, aes, opts) {
-	const { x, y } = aes
-	const { width, height, flipCoords } = {
-		width: 800,
-		height: 600,
-		flipCoords: false,
-		...opts
-	}
-}

package/src/components/charts/Axis.svelte

@@ -1,66 +0,0 @@
-<script>
-	import { getContext } from 'svelte'
-	export let orient = 'bottom'
-
-	let chart = getContext('chart')
-
-	let top =
-		orient === 'bottom'
-			? $chart.height - $chart.margin.bottom
-			: $chart.margin.top
-	let left =
-		orient === 'right' ? $chart.width - $chart.margin.right : $chart.margin.left
-	let tickSizeInner = $chart.theme.tick.size.inner || 6
-	let tickSizeOuter = $chart.theme.tick.size.outer || 6
-	let tickPadding = $chart.theme.tick.size.padding || 3
-
-	function axisPath(vertical, scale) {
-		const range = scale.range()
-		return vertical
-			? `M${k * tickSizeOuter},${range[0]}H0V${range[1]}H${k * tickSizeOuter}`
-			: `M${range[0]},${k * tickSizeOuter}V0H${range[1]}V${k * tickSizeOuter}`
-	}
-
-	$: anchor =
-		orient === 'right' ? 'start' : orient === 'left' ? 'end' : 'middle'
-	$: k = orient === 'top' || orient === 'left' ? -1 : 1
-	$: dy = orient === 'top' ? '0em' : orient === 'bottom' ? '0.71em' : '0.32em'
-	$: vertical = orient === 'left' || orient === 'right'
-	// $: range = axis.scale.range()
-	$: axis = vertical ? $chart.axis.y : $chart.axis.x
-</script>
-
-<g
-	transform="translate({vertical ? left : 0},{vertical ? 0 : top})"
-	fill="none"
-	font-size="10"
-	font-family="sans-serif"
-	text-anchor={anchor}
-	class="axis"
->
-	<path
-		class="domain"
-		stroke="currentColor"
-		d="{axisPath(vertical, axis.scale)}}"
-	/>
-	{#each axis.ticks as tick}
-		<g
-			class="tick"
-			transform="translate({vertical ? 0 : tick.position},{vertical
-				? tick.position
-				: 0})"
-		>
-			<line
-				stroke="currentColor"
-				y2={vertical ? 0 : k * tickSizeInner}
-				x2={vertical ? k * tickSizeInner : 0}
-			/>
-			<text
-				fill="currentColor"
-				y={vertical ? 0 : k * (tickSizeInner + tickPadding)}
-				x={vertical ? k * (tickSizeInner + tickPadding) : 0}
-				{dy}>{tick.label}</text
-			>
-		</g>
-	{/each}
-</g>

package/src/components/charts/Chart.svelte

@@ -1,35 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
-	import { compact } from '../lib/utils'
-	import { builtIn } from '../lib/theme'
-
-	let chart = writable({})
-
-	setContext('chart', chart)
-
-	export let width = 800
-	export let height = 450
-	export let data
-	export let theme = builtIn
-	export let x
-	export let y
-	export let fill
-	export let color
-	export let padding = 20
-	export let curve = 'basis'
-	export let stat = 'identity'
-
-	$: aes = compact({ x, y, fill, color, stat, curve, padding })
-	$: chart.set({
-		width,
-		height,
-		data,
-		theme,
-		aes,
-	})
-</script>
-
-<svg viewBox="0 0 {width} {height}" class="chart" width="100%">
-	<slot />
-</svg>

package/src/components/index.js

@@ -1,23 +0,0 @@
-export { default as ColorRamp } from './elements/ColorRamp.svelte'
-
-export { default as Symbol } from './chart/Symbol.svelte'
-export { default as PatternDefs } from './chart/PatternDefs.svelte'
-export { default as Swatch } from './chart/Swatch.svelte'
-export { default as SwatchButton } from './chart/SwatchButton.svelte'
-export { default as SwatchGrid } from './chart/SwatchGrid.svelte'
-
-export { default as Axis } from './chart/Axis.svelte'
-export { default as Grid } from './chart/Grid.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 { default as FunnelPlot } from '../plots/FunnelPlot.svelte'
-
-export { default as Chart } from './chart/Chart.svelte'
-export { default as TimelapseChart } from './chart/TimelapseChart.svelte'
-export { default as Timer } from './chart/Timer.svelte'
-export { default as BarPlot } from './plots/BarPlot.svelte'
-export { default as HeatMapCalendar } from '../plots/HeatMapCalendar.svelte'
-export { toHexString, initCap, uniqueId, toNested } from './lib/utils'
-export { brewer, uniques, slidingWindow, colors } from './lib/index'

package/src/components/lib/chart.js

@@ -1,187 +0,0 @@
-import { nest } from 'd3-collection'
-import { max, quantile, ascending, histogram } from 'd3-array'
-import { scaleLinear } from 'd3-scale'
-import { area, curveCatmullRom } from 'd3-shape'
-import { getScale } from './utils'
-
-/**
- * axis, theme, params, fields
- */
-export class ChartBrewer {
-	constructor(data, x, y) {
-		this.data = data
-		this.x = x
-		this.y = y
-		this.fill = x
-		this.axis = null
-		this.stats = {}
-		// this.yOffset = 20
-		this.padding = 10
-		this.margin = {
-			left: 10,
-			top: 10,
-			right: 10,
-			bottom: 10
-		}
-		this.params = {
-			ticks: {}
-		}
-		this.labels = []
-		this.width = 800
-		this.height = (this.width * 7) / 16
-		this.scaleValues = null
-		this.theme = {}
-	}
-
-	computeMargin(xAxisOrientation, yAxisOrientation) {
-		this.scaleValues = {
-			x: [...new Set(this.data.map((item) => item[this.x]))],
-			y: [...new Set(this.data.map((item) => item[this.y]))],
-			fill: [...new Set(this.data.map((item) => item[this.fill]))]
-		}
-
-		let xOffset =
-			max(this.scaleValues.y.map((value) => value.toString().length)) * 10
-		let yOffset = 20
-
-		this.margin = {
-			left: this.padding + (yAxisOrientation === 'left' ? xOffset : 0),
-			right: this.padding + (yAxisOrientation === 'left' ? 0 : xOffset),
-			top: this.padding + (xAxisOrientation === 'bottom' ? 0 : yOffset),
-			bottom: this.padding + (xAxisOrientation === 'bottom' ? yOffset : 0)
-		}
-	}
-
-	computeAxis(buffer = 0, inverse = false) {
-		let x = {}
-		let y = {}
-		let fill = {}
-
-		if (!this.scaleValues) {
-			this.computeMargin('bottom', 'left')
-		}
-
-		x.scale = getScale(
-			this.scaleValues.x,
-			[this.margin.left, this.width - this.margin.right],
-			buffer
-		)
-		const domainY = inverse
-			? [this.margin.top, this.height - this.margin.bottom]
-			: [this.height - this.margin.bottom, this.margin.top]
-		y.scale = getScale(this.scaleValues.y, domainY, buffer)
-
-		x.ticks = tickValues(x.scale, 'x', this.params)
-		y.ticks = tickValues(y.scale, 'y', this.params)
-
-		this.axis = { x, y, fill }
-		return this
-	}
-	use(theme) {
-		this.theme = theme
-		return this
-	}
-
-	params(margin, ticks) {
-		this.margin = margin
-		this.ticks = ticks
-		return this
-	}
-
-	fillWith(fill) {
-		this.fill = fill
-		return this
-	}
-
-	highlight(values) {
-		this.highlight = values
-		return this
-	}
-
-	animate() {
-		return this
-	}
-
-	summary() {
-		const result = nest()
-			.key((d) => d[this.x])
-			.rollup((d) => {
-				let values = d.map((g) => g[this.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(this.data)
-		return result
-	}
-
-	// assumes axis has been computes
-	violin() {
-		if (!this.axis) this.computeAxis()
-		// Features of the histogram
-		var histogramBins = bin()
-			.domain(this.axis.y.scale.domain())
-			.thresholds(this.axis.y.scale.ticks(20)) // Important: how many bins approx are going to be made? It is the 'resolution' of the violin plot
-			.value((d) => d)
-
-		// Compute the binning for each group of the dataset
-		var sumstat = nest()
-			.key((d) => d[this.x])
-			.rollup((d) => histogramBins(d.map((g) => +g[this.y])))
-			.entries(this.data)
-
-		// console.log(sumstat)
-		// What is the biggest number of value in a bin? We need it cause this value will have a width of 100% of the bandwidth.
-		var maxNum = 0
-		for (let i in sumstat) {
-			let allBins = sumstat[i].value
-			let lengths = allBins.map((a) => a.length)
-			let longest = max(lengths)
-			if (longest > maxNum) {
-				maxNum = longest
-			}
-		}
-		// console.log(
-		//   maxNum,
-		//   this.axis.x.scale.bandwidth(),
-		//   this.axis.x.scale('setosa')
-		// )
-
-		// The maximum width of a violin must be x.bandwidth = the width dedicated to a group
-		var xNum = scaleLinear()
-			.range([0, this.axis.x.scale.bandwidth()])
-			.domain([0, maxNum])
-
-		let result = area()
-			.x0(xNum(0))
-			.x1(function (d) {
-				return xNum(d.length)
-			})
-			.y((d) => this.axis.y.scale(d.x0))
-			.curve(curveCatmullRom)
-
-		let areas = sumstat.map((d) => ({
-			curve: result(d.value),
-			x: this.axis.x.scale(d.key)
-		}))
-		return areas
-	}
-}
-
-function tickValues(scale, whichAxis, params) {
-	let { values, count } =
-		whichAxis in params.ticks ? params.ticks[whichAxis] : {}
-	values =
-		Array.isArray(values) && values.length > 2
-			? values
-			: scale.ticks
-			? scale.ticks.apply(scale, [count])
-			: scale.domain()
-	const ticks = values.map((label) => ({ label, position: scale(label) }))
-
-	return ticks
-}