@rokkit/chart 1.0.0-next.29 → 1.0.0-next.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.29",
+  "version": "1.0.0-next.34",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,28 +13,27 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.2.0",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/ui": "~0.31.0",
-    "eslint": "^8.40.0",
+    "@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.0.0",
-    "svelte": "^3.59.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vitest": "~0.31.0",
-    "eslint-config-shared": "1.0.0-next.28",
-    "shared-config": "1.0.0-next.28"
+    "jsdom": "^22.1.0",
+    "svelte": "^4.0.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9",
+    "vitest": "~0.32.3",
+    "shared-config": "1.0.0-next.34"
   },
   "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": "1.0.0-next.33",
     "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.29"
+    "@rokkit/core": "1.0.0-next.34"
   },
   "files": [
     "src/**/*.js",
@@ -52,12 +51,13 @@
     }
   },
   "scripts": {
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
+    "format": "prettier --write .",
+    "lint": "eslint --fix .",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "upgrade": "pnpm upgrade"
+    "latest": "pnpm upgrade --latest && pnpm test:ci",
+    "release": "tsc && pnpm publish --access public"
   }
 }

package/src/chart/Chart.svelte

@@ -26,7 +26,7 @@
 		height,
 		data,
 		theme,
-		aes,
+		aes
 	})
 </script>
 

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/SwatchButton.svelte

@@ -12,7 +12,7 @@
 </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="h-10 w-10 flex items-center justify-center rounded bg-gray-100 p-1 shadow-md hover:bg-primary-300"
 	class:isCurrent
 	on:click
 	on:mouseover

package/src/chart/SwatchGrid.svelte

@@ -1,55 +1,55 @@
 <script>
-  import SwatchButton from './SwatchButton.svelte'
+	import SwatchButton from './SwatchButton.svelte'
 
-  export let columns
-  export let rows
-  export let items
-  let grid
+	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)
+	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}
+	{#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

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

package/src/chart/TimelapseChart.svelte

@@ -87,7 +87,7 @@
 	// Old data set needs exit animation, new data set needs entry animation
 </script>
 
-<svg viewBox="0 0 {phased.width} {phased.height}" class="flex chart">
+<svg viewBox="0 0 {phased.width} {phased.height}" class="chart flex">
 	<Grid />
 	<Axis orient="bottom" />
 	<Axis orient="left" />

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()
 
@@ -20,7 +20,7 @@
 	}
 </script>
 
-<div class="flex flex-row gap-2 timer">
+<div class="timer flex flex-row gap-2">
 	<button on:click|preventDefault={() => (isEnabled = true)}>play</button>
 	<button on:click|preventDefault={() => (isEnabled = false)}>pause</button>
 	<button on:click|preventDefault={onReset}>reset</button>

package/src/chart.js

@@ -1,9 +1,11 @@
-export function scales(data, aes, opts) {
-	const { x, y } = aes
-	const { width, height, flipCoords } = {
-		width: 800,
-		height: 600,
-		flipCoords: false,
-		...opts
-	}
-}
+// export function scales(data, aes, opts) {
+// 	const { x, y } = aes
+// 	const { width, height, flipCoords } = {
+// 		width: 800,
+// 		height: 600,
+// 		flipCoords: false,
+// 		...opts
+// 	}
+
+// 	return { x, y, width, height, flipCoords }
+// }

package/src/components/lib/chart.js

@@ -1,5 +1,5 @@
 import { nest } from 'd3-collection'
-import { max, quantile, ascending } from 'd3-array'
+import { max, quantile, ascending, bin } from 'd3-array'
 import { scaleLinear } from 'd3-scale'
 import { area, curveCatmullRom } from 'd3-shape'
 import { getScale } from './utils'

package/src/components/store.js

@@ -1,13 +1,13 @@
-import { writable } from 'svelte/store'
-
-function createChart() {
-	const { subscribe, set } = writable({
-		data: [],
-		x: '',
-		y: ''
-	})
-	return { subscribe, set }
-}
+// import { writable } from 'svelte/store'
+import { tweened, cubicOut } from 'svelte/motion'
+// function createChart() {
+// 	const { subscribe, set } = writable({
+// 		data: [],
+// 		x: '',
+// 		y: ''
+// 	})
+// 	return { subscribe, set }
+// }
 
 export function animatedChart(input, key, valueFields = [], previous = []) {
 	const previousKeys = new Set(previous.map((item) => item[key]))

package/src/elements/ColorRamp.svelte

@@ -20,7 +20,7 @@
 
 	$: colors = ticks.map(({ value }) => ({
 		color: scale(value),
-		offset: `${scalePercent(value)}%`,
+		offset: `${scalePercent(value)}%`
 	}))
 	$: id = uniqueId('legend-')
 </script>

package/src/elements/Symbol.svelte

@@ -15,7 +15,7 @@
 	$: x = x - size / 2
 	$: y = y - size / 2
 
-	$: d = $swatchStore[shapes][name](size)
+	$: d = $swatchStore['shapes'][name](size)
 	// typeof shape === 'function'
 	// 	? shape(size)
 	// 	: (shape || name) in namedShapes

package/src/funnel.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<!-- <script context="module">
 	/**
 	 * @type {import('@sveltejs/kit').Load}
 	 */
@@ -19,7 +19,7 @@
 			error: new Error(`Could not load ${url}`)
 		}
 	}
-</script>
+</script> -->
 
 <script>
 	import { FunnelPlot, Chart } from '@rokkit/chart'

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/BoxPlot.svelte

@@ -1,54 +1,54 @@
 <script>
-  import { getContext } from 'svelte'
+	import { getContext } from 'svelte'
 
-  let chart = getContext('chart')
+	let chart = getContext('chart')
 
-  export let whisker = true
-  export let boxWidth = 150
-  export let stroke = 'green'
-  export let fill = '#69b3a2' // fixed color or attribute to be used for color
-  export let scaleFill = () => fill // defaults to fill color
+	export let whisker = true
+	export let boxWidth = 150
+	export let stroke = 'green'
+	export let fill = '#69b3a2' // fixed color or attribute to be used for color
+	export let scaleFill = () => fill // defaults to fill color
 
-  $: data = $chart.summary()
+	$: data = $chart.summary()
 </script>
 
 {#each data as { key, value }}
-  <rect
-    width={boxWidth}
-    height={$chart.axis.y.scale(value.q1) - $chart.axis.y.scale(value.q3)}
-    x={$chart.axis.x.scale(key) - boxWidth / 2}
-    y={$chart.axis.y.scale(value.q3)}
-    fill={scaleFill(value[fill])}
-    {stroke}
-  />
-  <line
-    x1={$chart.axis.x.scale(key) - boxWidth / 2}
-    x2={$chart.axis.x.scale(key) + boxWidth / 2}
-    y1={$chart.axis.y.scale(value.median)}
-    y2={$chart.axis.y.scale(value.median)}
-    {stroke}
-  />
-  <line
-    x1={$chart.axis.x.scale(key)}
-    x2={$chart.axis.x.scale(key)}
-    y1={$chart.axis.y.scale(value.min)}
-    y2={$chart.axis.y.scale(value.max)}
-    {stroke}
-  />
-  {#if whisker}
-    <line
-      x1={$chart.axis.x.scale(key) - boxWidth / 8}
-      x2={$chart.axis.x.scale(key) + boxWidth / 8}
-      y1={$chart.axis.y.scale(value.min)}
-      y2={$chart.axis.y.scale(value.min)}
-      {stroke}
-    />
-    <line
-      x1={$chart.axis.x.scale(key) - boxWidth / 8}
-      x2={$chart.axis.x.scale(key) + boxWidth / 8}
-      y1={$chart.axis.y.scale(value.max)}
-      y2={$chart.axis.y.scale(value.max)}
-      {stroke}
-    />
-  {/if}
+	<rect
+		width={boxWidth}
+		height={$chart.axis.y.scale(value.q1) - $chart.axis.y.scale(value.q3)}
+		x={$chart.axis.x.scale(key) - boxWidth / 2}
+		y={$chart.axis.y.scale(value.q3)}
+		fill={scaleFill(value[fill])}
+		{stroke}
+	/>
+	<line
+		x1={$chart.axis.x.scale(key) - boxWidth / 2}
+		x2={$chart.axis.x.scale(key) + boxWidth / 2}
+		y1={$chart.axis.y.scale(value.median)}
+		y2={$chart.axis.y.scale(value.median)}
+		{stroke}
+	/>
+	<line
+		x1={$chart.axis.x.scale(key)}
+		x2={$chart.axis.x.scale(key)}
+		y1={$chart.axis.y.scale(value.min)}
+		y2={$chart.axis.y.scale(value.max)}
+		{stroke}
+	/>
+	{#if whisker}
+		<line
+			x1={$chart.axis.x.scale(key) - boxWidth / 8}
+			x2={$chart.axis.x.scale(key) + boxWidth / 8}
+			y1={$chart.axis.y.scale(value.min)}
+			y2={$chart.axis.y.scale(value.min)}
+			{stroke}
+		/>
+		<line
+			x1={$chart.axis.x.scale(key) - boxWidth / 8}
+			x2={$chart.axis.x.scale(key) + boxWidth / 8}
+			y1={$chart.axis.y.scale(value.max)}
+			y2={$chart.axis.y.scale(value.max)}
+			{stroke}
+		/>
+	{/if}
 {/each}

package/src/plots/HeatMapCalendar.svelte

@@ -2,7 +2,7 @@
 	import { summarize, heatmap } from './heatmap'
 	import { interpolateHsl } from 'd3-interpolate'
 	import { scaleLinear } from 'd3-scale'
-	import ContinuousLegend from '../elements/ContinuousLegend.svelte'
+	// import ContinuousLegend from '../elements/ContinuousLegend.svelte'
 	import DiscreteLegend from '../elements/DiscreteLegend.svelte'
 	import ColorRamp from '../elements/ColorRamp.svelte'
 
@@ -13,7 +13,7 @@
 	export let dateField = 'date'
 	export let valueField = null
 	export let months = 12
-	export let colors = [transparent, '#FB8C00']
+	export let colors = ['transparent', '#FB8C00']
 	export let padding = 8
 	export let space = 2
 	export let size = 10

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/ScatterPlot.svelte

@@ -1,30 +1,30 @@
 <script>
-  import { clamp } from 'yootils'
-  import Symbol from '../chart/Symbol.svelte'
-  import { getContext } from 'svelte'
+	import { clamp } from 'yootils'
+	import Symbol from '../chart/Symbol.svelte'
+	import { getContext } from 'svelte'
 
-  const chart = getContext('chart')
+	const chart = getContext('chart')
 
-  export let size = 8
-  export let fill = '#c0c0c0'
-  export let stroke = '#3c3c3c'
-  export let jitterWidth = 50
-  export let offset
+	export let size = 8
+	export let fill = '#c0c0c0'
+	export let stroke = '#3c3c3c'
+	export let jitterWidth = 50
+	export let offset
 
-  $: jitterWidth = clamp(jitterWidth, 0, 100 / 2)
-  $: offset = clamp(offset | (jitterWidth / 2), 0, 100)
+	$: jitterWidth = clamp(jitterWidth, 0, 100 / 2)
+	$: offset = clamp(offset | (jitterWidth / 2), 0, 100)
 </script>
 
 {#if $chart.data}
-  {#each $chart.data as d}
-    <Symbol
-      x={$chart.axis.x.scale(d[$chart.x]) -
-        offset +
-        Math.random() * jitterWidth}
-      y={$chart.axis.y.scale(d[$chart.y])}
-      {fill}
-      {stroke}
-      {size}
-    />
-  {/each}
+	{#each $chart.data as d}
+		<Symbol
+			x={$chart.axis.x.scale(d[$chart.x]) -
+				offset +
+				Math.random() * jitterWidth}
+			y={$chart.axis.y.scale(d[$chart.y])}
+			{fill}
+			{stroke}
+			{size}
+		/>
+	{/each}
 {/if}

package/src/plots/ViolinPlot.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { getContext } from 'svelte'
+	import { getContext } from 'svelte'
 
-  let chart = getContext('chart')
-  $: data = $chart.violin()
-  // $: console.log(data)
+	let chart = getContext('chart')
+	$: data = $chart.violin()
+	// $: console.log(data)
 </script>
 
-{#each data as { x, curve }, i}
-  <path d={curve} transform="translate({x},0)" fill="gray" stroke="none" />
+{#each data as { x, curve }}
+	<path d={curve} transform="translate({x},0)" fill="gray" stroke="none" />
 {/each}

package/src/plots/heatmap.js

@@ -10,7 +10,7 @@ import {
 	endOfWeek
 } from 'date-fns'
 import { nest } from 'd3-collection'
-import { group } from 'd3-array'
+// import { group } from 'd3-array'
 
 const DATE_FORMAT = 'yyyy-MM-dd'
 const weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']

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 }

package/src/plots/HeatMap.svelte

@@ -1,5 +0,0 @@
-<script>
-	let y // axis (day of week)
-	let x // week Number (week starts sunday)
-	let weeks //weeks
-</script>