@rokkit/chart 1.0.0-next.62 → 1.0.0-next.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.62",
+  "version": "1.0.0-next.64",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
     "vitest": "~1.1.3",
-    "shared-config": "1.0.0-next.62"
+    "shared-config": "1.0.0-next.64"
   },
   "dependencies": {
     "d3-array": "^3.2.4",
@@ -31,13 +31,13 @@
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "date-fns": "^3.1.0",
+    "date-fns": "^3.2.0",
     "ramda": "^0.29.1",
     "yootils": "^0.3.1",
-    "@rokkit/atoms": "1.0.0-next.62",
-    "@rokkit/core": "1.0.0-next.62",
-    "@rokkit/molecules": "1.0.0-next.62",
-    "@rokkit/stores": "1.0.0-next.62"
+    "@rokkit/atoms": "1.0.0-next.64",
+    "@rokkit/core": "1.0.0-next.64",
+    "@rokkit/molecules": "1.0.0-next.64",
+    "@rokkit/stores": "1.0.0-next.64"
   },
   "files": [
     "src/**/*.js",

package/src/chart/AxisGrid.svelte

@@ -14,21 +14,9 @@
 
 <g class="grid">
 	{#each $chart.axis.x.ticks as tick}
-		<line
-			x1={tick.position}
-			x2={tick.position}
-			y1={yRange[0]}
-			y2={yRange[1]}
-			opacity={opacityV}
-		/>
+		<line x1={tick.position} x2={tick.position} y1={yRange[0]} y2={yRange[1]} opacity={opacityV} />
 	{/each}
 	{#each $chart.axis.y.ticks as tick}
-		<line
-			y1={tick.position}
-			y2={tick.position}
-			x1={xRange[0]}
-			x2={xRange[1]}
-			opacity={opacityH}
-		/>
+		<line y1={tick.position} y2={tick.position} x1={xRange[0]} x2={xRange[1]} opacity={opacityH} />
 	{/each}
 </g>

package/src/chart/FacetGrid.svelte

@@ -23,9 +23,7 @@
 
 		<div class="flex flex-row">
 			{#each colValues as colItem}
-				{@const dataFilteredByCol = dataFilteredByRow.filter(
-					(d) => d[col] === colItem
-				)}
+				{@const dataFilteredByCol = dataFilteredByRow.filter((d) => d[col] === colItem)}
 
 				<Chart data={dataFilteredByCol} {x} {y}>
 					<Axis name="x" count={7} gap={10}>

package/src/chart/Swatch.svelte

@@ -3,7 +3,7 @@
 
 	import { swatch } from '../lib/utils'
 	import { clamp } from 'yootils'
-	import {Symbol, DefinePatterns} from '@rokkit/molecules'
+	import { Symbol, DefinePatterns } from '@rokkit/molecules'
 
 	const dispatch = createEventDispatcher()
 
@@ -29,11 +29,7 @@
 	}
 
 	function swapType(inputType) {
-		return inputType === 'square'
-			? 'circle'
-			: inputType === 'circle'
-			? 'square'
-			: type
+		return inputType === 'square' ? 'circle' : inputType === 'circle' ? 'square' : type
 	}
 
 	function click(index) {
@@ -63,11 +59,7 @@
 	{#if label}
 		<span class="py-2">{label}</span>
 	{/if}
-	<svg
-		viewBox="0 0 {grid.width} {grid.height}"
-		width="100%"
-		class="cursor-pointer"
-	>
+	<svg viewBox="0 0 {grid.width} {grid.height}" width="100%" class="cursor-pointer">
 		{#if label}
 			<title>A swatch with label {label}</title>
 		{/if}

package/src/chart/SwatchGrid.svelte

@@ -28,7 +28,6 @@
 	}
 	let previous
 	function handleClick(row, column) {
-
 		if (previous) {
 			grid[previous.row][previous.column].isCurrent = false
 		}

package/src/chart/TexturedShape.svelte

@@ -1,5 +1,5 @@
 <script>
-	import {Symbol} from '@rokkit/molecules'
+	import { Symbol } from '@rokkit/molecules'
 	import Texture from './Texture.svelte'
 
 	export let pattern
@@ -11,14 +11,7 @@
 </script>
 
 <svg viewBox="0 0 {size} {size}">
-	<Symbol
-		x={size / 2}
-		y={size / 2}
-		{size}
-		fill={pattern.fillUrl || fill}
-		{stroke}
-		{shape}
-	/>
+	<Symbol x={size / 2} y={size / 2} {size} fill={pattern.fillUrl || fill} {stroke} {shape} />
 	{#if pattern}
 		<defs>
 			<Texture {...pattern} />

package/src/chart/TimelapseChart.svelte

@@ -40,9 +40,7 @@
 		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
-			)
+			data: data.filter((y) => y.Petal_Length >= x.lowerBound && y.Petal_Length < x.upperBound)
 		}))
 
 		return groups
@@ -60,10 +58,7 @@
 	function switchChart(index) {
 		let chart = {}
 		if (index != null) {
-			chart = brewer()
-				.chart(phased.data[index].data, x, y)
-				.use(theme)
-				.computeAxis()
+			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 }
 		}
@@ -74,7 +69,6 @@
 	$: 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

package/src/elements/Bar.svelte

@@ -26,10 +26,4 @@
 <rect x={$scales.x(0)} {y} {width} {height} {fill} opacity={0.5} />
 <rect x={$scales.x(0)} {y} width={5} {height} {fill} />
 <Label x={width} y={y + textHeight + 8} anchor={textAnchor} label={name} />
-<Label
-	x={width}
-	y={y + height - 14}
-	anchor={textAnchor}
-	label={formattedValue}
-	small
-/>
+<Label x={width} y={y + height - 14} anchor={textAnchor} label={formattedValue} small />

package/src/elements/ColorRamp.svelte

@@ -14,9 +14,7 @@
 		.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 }))
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
 
 	$: colors = ticks.map(({ value }) => ({
 		color: scale(value),

package/src/elements/ContinuousLegend.svelte

@@ -13,9 +13,7 @@
 	$: scaleTicks = scaleLinear()
 		.range([x, x + 100])
 		.domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), label: d }))
+	$: ticks = scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
 
 	$: colors = scale.range()
 	$: id = uniqueId('legend-')

package/src/elements/DiscreteLegend.svelte

@@ -13,10 +13,8 @@
 </script>
 
 {#each ticks as tick, i}
-	<text
-		x={x + padding + i * sizeWithSpace + size / 2}
-		y={y + size / 2}
-		font-size={textSize}>{tick}</text
+	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
+		>{tick}</text
 	>
 	<rect
 		x={x + padding + i * sizeWithSpace}

package/src/elements/Tooltip.svelte

@@ -4,11 +4,7 @@
 	export let hidden = true
 </script>
 
-<div
-	class="tooltip {$$props.class}"
-	{hidden}
-	style="--top: {top};--left: {left}"
->
+<div class="tooltip {$$props.class}" {hidden} style="--top: {top};--left: {left}">
 	<slot />
 </div>
 

package/src/lib/chart.js

@@ -181,8 +181,8 @@ function tickValues(scale, whichAxis, params) {
 		Array.isArray(values) && values.length > 2
 			? values
 			: scale.ticks
-			? scale.ticks.apply(scale, [count])
-			: scale.domain()
+				? scale.ticks.apply(scale, [count])
+				: scale.domain()
 	const ticks = values.map((label) => ({ label, position: scale(label) }))
 
 	return ticks

package/src/plots/BarPlot.svelte

@@ -15,9 +15,7 @@
 		x: $chart.flipCoords ? $chart.scale.x(0) : $chart.scale.x(d.x),
 		y: $chart.flipCoords ? $chart.scale.y(d.y) : $chart.scale.y(d.y),
 		y0: $chart.scale.y(0),
-		width: $chart.flipCoords
-			? $chart.scale.x(d.x) - $chart.scale.x(0)
-			: $chart.scale.x.bandwidth(),
+		width: $chart.flipCoords ? $chart.scale.x(d.x) - $chart.scale.x(0) : $chart.scale.x.bandwidth(),
 		height: $chart.flipCoords
 			? $chart.scale.y.bandwidth()
 			: $chart.scale.y(0) - $chart.scale.y(d.y),
@@ -31,8 +29,6 @@
 			text: $chart.flipCoords ? d.y + ' (' + d.x + ')' : d.x + ' (' + d.y + ')'
 		}
 	}))
-
-
 </script>
 
 {#each data as { x, y, width, height, fill, label }}

package/src/plots/FunnelPlot.svelte

@@ -20,13 +20,7 @@
 {/each}
 {#each data.labels as label, index}
 	{#if index < data.labels.length - 1}
-		<line
-			x1={label.x1}
-			x2={label.x2}
-			y1={label.y1}
-			y2={label.y2}
-			stroke="currentColor"
-		/>
+		<line x1={label.x1} x2={label.x2} y1={label.y1} y2={label.y2} stroke="currentColor" />
 	{/if}
 	<text x={label.x} y={label.y} fill="currentColor">{label.label}</text>
 {/each}

package/src/plots/HeatMapCalendar.svelte

@@ -31,17 +31,13 @@
 	function hideToolTip() {
 		tooltip = null
 	}
-	$: scale = scaleLinear()
-		.domain([0, maximum])
-		.range(colors)
-		.interpolate(interpolateHsl)
+	$: scale = scaleLinear().domain([0, maximum]).range(colors).interpolate(interpolateHsl)
 
 	$: legendHeight = 2 * size + space * 3
 	$: sizeWithSpace = size + space
 	$: summary = summarize(data, dateField, valueField)
 	$: datamap = heatmap(summary, months)
-	$: width =
-		datamap.numberOfWeeks * sizeWithSpace + dayLabelWidth + 2 * padding - space
+	$: width = datamap.numberOfWeeks * sizeWithSpace + dayLabelWidth + 2 * padding - space
 	$: height = 7 * sizeWithSpace + labelHeight + 2 * padding + legendHeight
 </script>
 
@@ -76,11 +72,7 @@
 		{#each datamap.weekdays as name, i}
 			<text
 				x={padding + dayLabelWidth - 2 * space}
-				y={padding +
-					legendHeight +
-					i * sizeWithSpace +
-					labelHeight +
-					(size - labelHeight) / 2}
+				y={padding + legendHeight + i * sizeWithSpace + labelHeight + (size - labelHeight) / 2}
 				text-anchor="end"
 				font-size={labelHeight}>{name}</text
 			>

package/src/plots/LinePlot.svelte

@@ -15,9 +15,7 @@
 		x: $chart.flipCoords ? $chart.scale.x(0) : $chart.scale.x(d.x),
 		y: $chart.flipCoords ? $chart.scale.y(d.y) : $chart.scale.y(d.y),
 		y0: $chart.scale.y(0),
-		width: $chart.flipCoords
-			? $chart.scale.x(d.x) - $chart.scale.x(0)
-			: $chart.scale.x.bandwidth(),
+		width: $chart.flipCoords ? $chart.scale.x(d.x) - $chart.scale.x(0) : $chart.scale.x.bandwidth(),
 		height: $chart.flipCoords
 			? $chart.scale.y.bandwidth()
 			: $chart.scale.y(0) - $chart.scale.y(d.y),
@@ -31,7 +29,6 @@
 			text: $chart.flipCoords ? d.y + ' (' + d.x + ')' : d.x + ' (' + d.y + ')'
 		}
 	}))
-
 </script>
 
 {#each data as { x1, y1, x2, y2, color, label }}

package/src/plots/ScatterPlot.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { clamp } from 'yootils'
-	import {Symbol} from '@rokkit/molecules'
+	import { Symbol } from '@rokkit/molecules'
 	import { getContext } from 'svelte'
 
 	const chart = getContext('chart')
@@ -18,9 +18,7 @@
 {#if $chart.data}
 	{#each $chart.data as d}
 		<Symbol
-			x={$chart.axis.x.scale(d[$chart.x]) -
-				offset +
-				Math.random() * jitterWidth}
+			x={$chart.axis.x.scale(d[$chart.x]) - offset + Math.random() * jitterWidth}
 			y={$chart.axis.y.scale(d[$chart.y])}
 			{fill}
 			{stroke}