@rokkit/chart 1.0.0-next.11

package/src/components/charts/Axis.svelte

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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,23 @@
+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

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

package/src/components/lib/color.js

@@ -0,0 +1,327 @@
+export const colors = [
+	'#FFDE6B',
+	'#EF89EE',
+	'#F79F1E',
+	'#02B8FF',
+	'#9F84EC',
+	'#15CBC4',
+	'#0092FD',
+	'#F63A57',
+	'#A2CB39',
+	'#FF6E2F',
+	'#FEB8B9',
+	'#af7aa1',
+	'#7EFFF5'
+]
+export const palette = {
+	indigo: {
+		50: '#eef2ff',
+		100: '#e0e7ff',
+		200: '#c7d2fe',
+		300: '#a5b4fc',
+		400: '#818cf8',
+		500: '#6366f1',
+		600: '#4f46e5',
+		700: '#4338ca',
+		800: '#3730a3',
+		900: '#312e81'
+	},
+	blue: {
+		50: '#eff6ff',
+		100: '#dbeafe',
+		200: '#bfdbfe',
+		300: '#93c5fd',
+		400: '#60a5fa',
+		500: '#3b82f6',
+		600: '#2563eb',
+		700: '#1d4ed8',
+		800: '#1e40af',
+		900: '#1e3a8a'
+	},
+	sky: {
+		50: '#f0f9ff',
+		100: '#e0f2fe',
+		200: '#bae6fd',
+		300: '#7dd3fc',
+		400: '#38bdf8',
+		500: '#0ea5e9',
+		600: '#0284c7',
+		700: '#0369a1',
+		800: '#075985',
+		900: '#0c4a6e'
+	},
+	cyan: {
+		50: '#ecfeff',
+		100: '#cffafe',
+		200: '#a5f3fc',
+		300: '#67e8f9',
+		400: '#22d3ee',
+		500: '#06b6d4',
+		600: '#0891b2',
+		700: '#0e7490',
+		800: '#155e75',
+		900: '#164e63'
+	},
+	teal: {
+		50: '#f0fdfa',
+		100: '#ccfbf1',
+		200: '#99f6e4',
+		300: '#5eead4',
+		400: '#2dd4bf',
+		500: '#14b8a6',
+		600: '#0d9488',
+		700: '#0f766e',
+		800: '#115e59',
+		900: '#134e4a'
+	},
+	emerald: {
+		50: '#ecfdf5',
+		100: '#d1fae5',
+		200: '#a7f3d0',
+		300: '#6ee7b7',
+		400: '#34d399',
+		500: '#10b981',
+		600: '#059669',
+		700: '#047857',
+		800: '#065f46',
+		900: '#064e3b'
+	},
+	green: {
+		50: '#f0fdf4',
+		100: '#dcfce7',
+		200: '#bbf7d0',
+		300: '#86efac',
+		400: '#4ade80',
+		500: '#22c55e',
+		600: '#16a34a',
+		700: '#15803d',
+		800: '#166534',
+		900: '#14532d'
+	},
+	lime: {
+		50: '#f7fee7',
+		100: '#ecfccb',
+		200: '#d9f99d',
+		300: '#bef264',
+		400: '#a3e635',
+		500: '#84cc16',
+		600: '#65a30d',
+		700: '#4d7c0f',
+		800: '#3f6212',
+		900: '#365314'
+	},
+	yellow: {
+		50: '#fefce8',
+		100: '#fef9c3',
+		200: '#fef08a',
+		300: '#fde047',
+		400: '#facc15',
+		500: '#eab308',
+		600: '#ca8a04',
+		700: '#a16207',
+		800: '#854d0e',
+		900: '#713f12'
+	},
+	amber: {
+		50: '#fffbeb',
+		100: '#fef3c7',
+		200: '#fde68a',
+		300: '#fcd34d',
+		400: '#fbbf24',
+		500: '#f59e0b',
+		600: '#d97706',
+		700: '#b45309',
+		800: '#92400e',
+		900: '#78350f'
+	},
+	orange: {
+		50: '#fff7ed',
+		100: '#ffedd5',
+		200: '#fed7aa',
+		300: '#fdba74',
+		400: '#fb923c',
+		500: '#f97316',
+		600: '#ea580c',
+		700: '#c2410c',
+		800: '#9a3412',
+		900: '#7c2d12'
+	},
+	red: {
+		50: '#fef2f2',
+		100: '#fee2e2',
+		200: '#fecaca',
+		300: '#fca5a5',
+		400: '#f87171',
+		500: '#ef4444',
+		600: '#dc2626',
+		700: '#b91c1c',
+		800: '#991b1b',
+		900: '#7f1d1d'
+	},
+	rose: {
+		50: '#fff1f2',
+		100: '#ffe4e6',
+		200: '#fecdd3',
+		300: '#fda4af',
+		400: '#fb7185',
+		500: '#f43f5e',
+		600: '#e11d48',
+		700: '#be123c',
+		800: '#9f1239',
+		900: '#881337'
+	},
+	pink: {
+		50: '#fdf2f8',
+		100: '#fce7f3',
+		200: '#fbcfe8',
+		300: '#f9a8d4',
+		400: '#f472b6',
+		500: '#ec4899',
+		600: '#db2777',
+		700: '#be185d',
+		800: '#9d174d',
+		900: '#831843'
+	},
+	fuchsia: {
+		50: '#fdf4ff',
+		100: '#fae8ff',
+		200: '#f5d0fe',
+		300: '#f0abfc',
+		400: '#e879f9',
+		500: '#d946ef',
+		600: '#c026d3',
+		700: '#a21caf',
+		800: '#86198f',
+		900: '#701a75'
+	},
+	purple: {
+		50: '#faf5ff',
+		100: '#f3e8ff',
+		200: '#e9d5ff',
+		300: '#d8b4fe',
+		400: '#c084fc',
+		500: '#a855f7',
+		600: '#9333ea',
+		700: '#7e22ce',
+		800: '#6b21a8',
+		900: '#581c87'
+	},
+	violet: {
+		50: '#f5f3ff',
+		100: '#ede9fe',
+		200: '#ddd6fe',
+		300: '#c4b5fd',
+		400: '#a78bfa',
+		500: '#8b5cf6',
+		600: '#7c3aed',
+		700: '#6d28d9',
+		800: '#5b21b6',
+		900: '#4c1d95'
+	},
+	warmGray: {
+		50: '#fafaf9',
+		100: '#f5f5f4',
+		200: '#e7e5e4',
+		300: '#d6d3d1',
+		400: '#a8a29e',
+		500: '#78716c',
+		600: '#57534e',
+		700: '#44403c',
+		800: '#292524',
+		900: '#1c1917'
+	},
+	trueGray: {
+		50: '#fafafa',
+		100: '#f5f5f5',
+		200: '#e5e5e5',
+		300: '#d4d4d4',
+		400: '#a3a3a3',
+		500: '#737373',
+		600: '#525252',
+		700: '#404040',
+		800: '#262626',
+		900: '#171717'
+	},
+	gray: {
+		50: '#fafafa',
+		100: '#f4f4f5',
+		200: '#e4e4e7',
+		300: '#d4d4d8',
+		400: '#a1a1aa',
+		500: '#71717a',
+		600: '#52525b',
+		700: '#3f3f46',
+		800: '#27272a',
+		900: '#18181b'
+	},
+	blueGray: {
+		50: '#f8fafc',
+		100: '#f1f5f9',
+		200: '#e2e8f0',
+		300: '#cbd5e1',
+		400: '#94a3b8',
+		500: '#64748b',
+		600: '#475569',
+		700: '#334155',
+		800: '#1e293b',
+		900: '#0f172a'
+	}
+}
+
+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
+	}
+}