@rokkit/chart 1.0.0-next.83 → 1.0.0-next.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.83",
+  "version": "1.0.0-next.85",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.83"
+    "shared-config": "1.0.0-next.85"
   },
   "dependencies": {
     "d3-array": "^3.2.4",
@@ -34,10 +34,10 @@
     "date-fns": "^3.3.1",
     "ramda": "^0.29.1",
     "yootils": "^0.3.1",
-    "@rokkit/atoms": "1.0.0-next.83",
-    "@rokkit/core": "1.0.0-next.83",
-    "@rokkit/molecules": "1.0.0-next.83",
-    "@rokkit/stores": "1.0.0-next.83"
+    "@rokkit/atoms": "1.0.0-next.85",
+    "@rokkit/core": "1.0.0-next.85",
+    "@rokkit/molecules": "1.0.0-next.85",
+    "@rokkit/stores": "1.0.0-next.85"
   },
   "files": [
     "src/**/*.js",

package/src/chart/Axis.svelte

@@ -1,28 +1,57 @@
 <script>
 	import { getContext } from 'svelte'
+	const chart = getContext('chart')
+
 	export let orient = 'bottom'
+	export let majorTickStep = 0
+	export let minorTickStep = 0
+	export let lower = 0
+	export let upper = 100
+
+	function getTicks(lower, upper, majorTickStep, minorTickStep) {
+		if (majorTickStep === 0 && minorTickStep === 0) return []
+		const minorTicks = Array.from(
+			{ length: Math.floor((upper - lower) / minorTickStep) + 1 },
+			(_, i) => ({
+				position: i * minorTickStep,
+				label: i * minorTickStep,
+				type: 'minor'
+			})
+		)
+		const majorTicks = Array.from(
+			{ length: Math.floor((upper - lower) / majorTickStep) + 1 },
+			(_, i) => ({
+				position: i * majorTickStep,
+				label: i * majorTickStep,
+				type: 'major'
+			})
+		)
+		const end = [
+			{ position: upper, label: upper, type: 'end' },
+			{ position: lower, label: lower, type: 'end' }
+		]
+
+		return [...minorTicks, ...majorTicks, ...end].sort((a, b) => a.position - b.position)
+	}
 
-	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 top = orient === 'bottom' ? $chart.height - $chart.margin?.bottom ?? 0 : $chart.margin.top
-	let left = orient === 'right' ? $chart.width - $chart.margin.right : $chart.margin?.left ?? 0
-	let tickSizeInner = $chart.theme.tick?.size?.inner || 6
-	let tickSizeOuter = $chart.theme.tick?.size?.outer || 6
-	let tickPadding = $chart.theme.tick?.size?.padding || 3
+	let tickPadding = $chart.theme.tick.size.padding
 
-	function axisPath(vertical, scale) {
-		const range = scale.range()
+	function axisPath(vertical) {
+		const range = [lower, upper]
+		const size = $chart.theme.tick.size.end
 		return vertical
-			? `M${k * tickSizeOuter},${range[0]}H0V${range[1]}H${k * tickSizeOuter}`
-			: `M${range[0]},${k * tickSizeOuter}V0H${range[1]}V${k * tickSizeOuter}`
+			? `M${k * size},${range[0]}H0V${range[1]}H${k * size}`
+			: `M${range[0]},${k * size}V0H${range[1]}V${k * size}`
 	}
 
 	$: 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
+	$: ticks = getTicks(lower, upper, majorTickStep, minorTickStep)
 </script>
 
 <g
@@ -33,21 +62,18 @@
 	text-anchor={anchor}
 	class="axis"
 >
-	<path class="domain" stroke="currentColor" d="{axisPath(vertical, axis.scale)}}" />
-	{#each axis.ticks as tick}
+	<path class="domain" stroke="currentColor" d="{axisPath(vertical)}}" />
+	{#each ticks as tick}
+		{@const size = $chart.theme.tick.size[tick.type]}
 		<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}
-			/>
+			<line stroke="currentColor" y2={vertical ? 0 : k * size} x2={vertical ? k * size : 0} />
 			<text
 				fill="currentColor"
-				y={vertical ? 0 : k * (tickSizeInner + tickPadding)}
-				x={vertical ? k * (tickSizeInner + tickPadding) : 0}
+				y={vertical ? 0 : k * (size + tickPadding)}
+				x={vertical ? k * (size + tickPadding) : 0}
 				{dy}>{tick.label}</text
 			>
 		</g>

package/src/chart/Chart.svelte

@@ -8,14 +8,14 @@
 
 	setContext('chart', chart)
 
+	export let data
 	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 x = 'x'
+	export let y = 'y'
+	export let fill = null
+	export let color = null
 	export let padding = 20
 	export let curve = 'basis'
 	export let stat = 'identity'
@@ -26,7 +26,12 @@
 		height,
 		data,
 		theme,
-		aes
+		aes,
+		axis: {
+			x: { scale: 'linear', orient: 'bottom' },
+			y: { scale: 'linear', orient: 'left' }
+		},
+		margin: { top: 10, right: 10, bottom: 10, left: 10 }
 	})
 </script>
 

package/src/lib/theme.js

@@ -19,5 +19,13 @@ export const builtIn = {
 	palette,
 	patterns,
 	shapes,
-	symbols
+	symbols,
+	tick: {
+		size: {
+			major: 6,
+			minor: 4,
+			end: 6,
+			padding: 3
+		}
+	}
 }