@rokkit/chart 1.0.0-next.14 → 1.0.0-next.140

package/src/chart/Swatch.svelte

@@ -1,93 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-
-	import { swatch } from '../lib/utils'
-	import { clamp } from 'yootils'
-	import Symbol from './Symbol.svelte'
-	import PatternDefs from './PatternDefs.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let label
-	export let size = 30
-	export let items = []
-	export let type = 'square'
-	export let pad = 10
-	export let columns
-	export let rows
-	export let limit
-	export let start = 0
-	export let autoscale = false
-	export let interactive = false
-	export let activeIndex = -1
-
-	function fill(item) {
-		return item.fillUrl || item.fill || item
-	}
-
-	function stroke(item) {
-		return item.stroke || item
-	}
-
-	function swapType(inputType) {
-		return inputType === 'square'
-			? 'circle'
-			: inputType === 'circle'
-			? 'square'
-			: type
-	}
-
-	function click(index) {
-		if (interactive) {
-			activeIndex = start + index
-			dispatch('click', { index: activeIndex, item: items[activeIndex] })
-		}
-	}
-
-	function forwardEvent(event, index) {
-		if (interactive)
-			dispatch(event, {
-				index: start + index,
-				item: items[start + index]
-			})
-	}
-
-	$: grid = swatch(limit || items.length, size, pad, columns, rows)
-	$: data = grid.data.map((item, i) => ({
-		...item,
-		type: i == activeIndex ? swapType(type) : type
-	}))
-	$: start = clamp(start, 0, items.length - (limit || 0))
-</script>
-
-<div class="flex flex-col leading-loose">
-	{#if label}
-		<span class="py-2">{label}</span>
-	{/if}
-	<svg
-		viewBox="0 0 {grid.width} {grid.height}"
-		width="100%"
-		class="cursor-pointer"
-	>
-		{#if label}
-			<title>A swatch with label {label}</title>
-		{/if}
-
-		{#each data as { cx, cy, r, type }, i}
-			<Symbol
-				x={cx}
-				y={cy}
-				{size}
-				fill={fill(items[i + start])}
-				stroke={stroke(items[i + start])}
-				shape={items[i + start].shape || type}
-				thickness={i + start == activeIndex ? 2 : 0.5}
-				on:click={click(i + start)}
-				on:mouseover={forwardEvent('mouseover', i + start)}
-				on:mouseleave={forwardEvent('mouseleave', i + start)}
-				on:focus={forwardEvent('focus', i + start)}
-			/>
-		{/each}
-		<PatternDefs patterns={items} />
-	</svg>
-</div>

package/src/chart/SwatchButton.svelte

@@ -1,29 +0,0 @@
-<script>
-	import TexturedShape from './TexturedShape.svelte'
-
-	export let pattern
-	export let shape = 'circle'
-	// export let type
-	export let fill
-	export let stroke
-	export let isCurrent = false
-
-	const size = 40
-</script>
-
-<button
-	class="bg-gray-100 rounded shadow-md w-10 h-10 p-1 flex items-center justify-center hover:bg-primary-300"
-	class:isCurrent
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
->
-	<TexturedShape {pattern} {fill} {stroke} {shape} {size} />
-</button>
-
-<style>
-	.isCurrent {
-		@apply bg-primary-200;
-	}
-</style>

package/src/chart/SwatchGrid.svelte

@@ -1,55 +0,0 @@
-<script>
-  import SwatchButton from './SwatchButton.svelte'
-
-  export let columns
-  export let rows
-  export let items
-  let grid
-
-  function toGrid(columns, rows, patterns) {
-    const count = patterns.length
-    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 grid = [...Array(rows).keys()].map((row) =>
-      [...Array(columns).keys()]
-        .filter((column) => row * columns + column < count)
-        .map((column) => ({
-          item: patterns[row * columns + column],
-          isCurrent: false,
-        }))
-    )
-    return grid
-  }
-  let previous
-  function handleClick(row, column) {
-    console.log(row, column, grid)
-    if (previous) {
-      grid[previous.row][previous.column].isCurrent = false
-    }
-    grid[row][column].isCurrent = true
-    previous = { row, column }
-  }
-  $: grid = toGrid(columns, rows, items)
-  $: console.log(grid)
-</script>
-
-<row class="flex flex-col gap-2">
-  {#each grid as items, row}
-    <div class="flex flex-row gap-2">
-      {#each items as { item, isCurrent }, column}
-        <SwatchButton
-          shape="shurikan"
-          pattern={item}
-          on:click={() => handleClick(row, column)}
-          {isCurrent}
-        />
-      {/each}
-    </div>
-  {/each}
-</row>

package/src/chart/Symbol.svelte

@@ -1,37 +0,0 @@
-<script>
-	import { namedShapes } from '../components/lib/shape'
-
-	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 = null
-	export let shape = null
-
-	$: x = x - size / 2
-	$: y = y - size / 2
-
-	$: d =
-		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/chart/Texture.svelte

@@ -1,16 +0,0 @@
-<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} {patternUnits} width={size} height={size}>
-	<rect width={size} height={size} {fill} />
-	{#if path}
-		<path d={path} fill="none" stroke={contrast} stroke-width={thickness} />
-	{/if}
-</pattern>

package/src/chart/TexturedShape.svelte

@@ -1,27 +0,0 @@
-<script>
-	import Symbol from './Symbol.svelte'
-	import Texture from './Texture.svelte'
-
-	export let pattern
-	export let shape = 'circle'
-	export let fill
-	export let stroke
-
-	const size = 40
-</script>
-
-<svg viewBox="0 0 {size} {size}">
-	<Symbol
-		x={size / 2}
-		y={size / 2}
-		{size}
-		fill={pattern.fillUrl || fill}
-		{stroke}
-		{shape}
-	/>
-	{#if pattern}
-		<defs>
-			<Texture {...pattern} />
-		</defs>
-	{/if}
-</svg>

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'