@rokkit/chart 1.0.0-next.32 → 1.0.0-next.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.32",
+  "version": "1.0.0-next.35",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,26 +13,27 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.1",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/ui": "~0.31.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/svelte": "^4.0.3",
+    "@vitest/ui": "~0.32.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
-    "svelte": "^3.59.1",
-    "typescript": "^5.0.4",
+    "svelte": "^4.0.1",
+    "typescript": "^5.1.6",
     "vite": "^4.3.9",
-    "vitest": "~0.31.1",
-    "shared-config": "1.0.0-next.32"
+    "vitest": "~0.32.3",
+    "shared-config": "1.0.0-next.35"
   },
   "dependencies": {
-    "d3-array": "^3.2.3",
+    "d3-array": "^3.2.4",
     "d3-collection": "^1.0.7",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "date-fns": "^2.30.0",
     "ramda": "^0.29.0",
+    "rokkit": "latest",
     "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.32"
+    "@rokkit/core": "1.0.0-next.35"
   },
   "files": [
     "src/**/*.js",

package/src/chart/Swatch.svelte

@@ -73,7 +73,7 @@
 			<title>A swatch with label {label}</title>
 		{/if}
 
-		{#each data as { cx, cy, r, type }, i}
+		{#each data as { cx, cy, type }, i}
 			<Symbol
 				x={cx}
 				y={cy}

package/src/chart/Symbol.svelte

@@ -34,4 +34,7 @@
 	on:mouseover
 	on:mouseleave
 	on:focus
+	role="option"
+	aria-selected={false}
+	tabindex="0"
 />

package/src/chart/Timer.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import { elapsed, timer } from '../lib/timer.js'
+	import { elapsed, timer } from '@rokkit/stores'
 
 	const dispatch = createEventDispatcher()
 

package/src/index.js

@@ -1,7 +1,7 @@
 // export { aes } from './lib/aes'
 // export { timelapse } from './lib/timelapse'
 // export { axisTicks } from './lib/axis'
-export { timer, elapsed } from './lib/timer'
+// export { timer, elapsed } from './lib/timer'
 // export { default as Chart } from './chart/Chart.svelte'
 // export { default as Axis } from './chart/Axis.svelte'
 export { default as Swatch } from './chart/Swatch.svelte'

package/src/plots/RankBarPlot.svelte

@@ -29,7 +29,7 @@
 
 <svg viewBox="0 0 {width} {height}">
 	{#if Array.isArray(data)}
-		{#each data as item, i}
+		{#each data as item}
 			{#if item.rank < limit}
 				<Bar {...item} fill={colors[item.name]} {scales} />
 			{/if}

package/src/plots/ViolinPlot.svelte

@@ -6,6 +6,6 @@
 	// $: console.log(data)
 </script>
 
-{#each data as { x, curve }, i}
+{#each data as { x, curve }}
 	<path d={curve} transform="translate({x},0)" fill="gray" stroke="none" />
 {/each}

package/src/lib/timer.js

@@ -1,44 +0,0 @@
-import { writable } from 'svelte/store'
-
-let req
-let prev
-const elapsed = writable(0)
-
-const tick = (timestamp) => {
-	if (!prev) prev = timestamp
-	const diff = Math.round(timestamp - prev)
-
-	if (diff > 0) {
-		prev = timestamp
-	}
-	elapsed.update((e) => e + diff)
-	req = window.requestAnimationFrame(tick)
-}
-
-const timer = {
-	start() {
-		if (typeof window === 'undefined') return
-		else if (!req) {
-			prev = null
-			req = window.requestAnimationFrame(tick)
-		}
-	},
-	stop() {
-		if (typeof window === 'undefined') return
-		else if (req) {
-			window.cancelAnimationFrame(req)
-			req = null
-		}
-	},
-	toggle() {
-		req ? timer.stop() : timer.start()
-	},
-	set(val) {
-		if (typeof val === 'number') elapsed.set(val)
-	},
-	reset() {
-		timer.set(0)
-	}
-}
-
-export { timer, elapsed }