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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.34",
+  "version": "1.0.0-next.36",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -15,14 +15,15 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/svelte": "^4.0.3",
-    "@vitest/ui": "~0.32.3",
+    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/ui": "~0.33.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.1",
+    "svelte": "^4.0.5",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
-    "vitest": "~0.32.3",
-    "shared-config": "1.0.0-next.34"
+    "vite": "^4.4.4",
+    "vitest": "~0.33.0",
+    "shared-config": "1.0.0-next.36"
   },
   "dependencies": {
     "d3-array": "^3.2.4",
@@ -31,9 +32,9 @@
     "d3-shape": "^3.2.0",
     "date-fns": "^2.30.0",
     "ramda": "^0.29.0",
-    "rokkit": "1.0.0-next.33",
+    "rokkit": "latest",
     "yootils": "^0.3.1",
-    "@rokkit/core": "1.0.0-next.34"
+    "@rokkit/core": "1.0.0-next.36"
   },
   "files": [
     "src/**/*.js",

package/src/chart/SwatchGrid.svelte

@@ -28,7 +28,7 @@
 	}
 	let previous
 	function handleClick(row, column) {
-		console.log(row, column, grid)
+
 		if (previous) {
 			grid[previous.row][previous.column].isCurrent = false
 		}
@@ -36,7 +36,6 @@
 		previous = { row, column }
 	}
 	$: grid = toGrid(columns, rows, items)
-	$: console.log(grid)
 </script>
 
 <row class="flex flex-col gap-2">

package/src/chart/TimelapseChart.svelte

@@ -52,7 +52,6 @@
 		let chart = base(data, x, y)
 		let temp = brewer().chart(data, x, y).use(theme).computeAxis()
 		axis = temp.axis
-		console.log(temp)
 		chart.data = sliceBy(chart.data, time, 3, 1)
 		stages = chart.data.length - 1
 		return chart
@@ -74,7 +73,7 @@
 
 	$: phased = timed(data, x, y, time)
 	$: $chart = switchChart(current)
-	// $: console.log(current, phased, chart)
+
 
 	// setup chart attributes that do not change over time
 	// get scales for x & y

package/src/chart/Timer.svelte

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

package/src/components/index.js

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

@@ -134,7 +134,6 @@ export class ChartBrewer {
 			.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) {
@@ -145,11 +144,6 @@ export class ChartBrewer {
 				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()

package/src/components/lib/funnel.js

@@ -183,11 +183,9 @@ export function funnel(input, aes, width, height) {
 	data = mirror(data, aes)
 	const curve =
 		aes.curve === 'basis' ? curveBasis : data.vertical ? curveBumpY : curveBumpX
-	//  console.log(data)
 
 	if ('fill' in aes) {
 		let stats = flatten(data.stats.map((phase) => phase.value))
-		// console.log(stats)
 
 		data.stats = nest()
 			.key((d) => d[aes.fill])

package/src/components/lib/rollup.js

@@ -18,7 +18,7 @@ function slidingWindowForNumbers(values, size, step, offset = 0, fmt = 0) {
 	if (smallest + count * step + offset == largest) {
 		count += 1
 	}
-	// console.log('count:', count)
+
 	const range = [...Array(count).keys()]
 
 	const result = range.map((key) => ({

package/src/components/lib/summary.js

@@ -131,11 +131,9 @@
 // export function funnel(input, aes) {
 // 	let data = convertToPhases(input, aes)
 // 	data = mirror(data, aes)
-// 	// console.log(data)
 
 // 	if ('fill' in aes) {
 // 		let stats = flatten(data.stats.map((phase) => phase.value))
-// 		// console.log(stats)
 // 		data.stats = nest()
 // 			.key((d) => d[aes.fill])
 // 			.rollup((rows) => [...rows, { ...rows[rows.length - 1], x: rows.length }])

package/src/components/store.js

@@ -18,7 +18,7 @@ export function animatedChart(input, key, valueFields = [], previous = []) {
 	const toRemove = new Set(
 		[...previousKeys].filter((key) => !currentKeys.has(key))
 	)
-	console.log(toAdd, toRemove)
+
 	let data = input
 		.filter((item) => toAdd.has(item[key]))
 		.map((item) => {
@@ -46,7 +46,7 @@ export function animatedChart(input, key, valueFields = [], previous = []) {
 			return el
 		})
 	data = [...prev, ...data]
-	console.log(data)
+
 	return tweened(data, { duration: 500, easing: cubicOut })
 }
 // function createAxis() {

package/src/plots/BarPlot.svelte

@@ -32,7 +32,7 @@
 		}
 	}))
 
-	// $: console.log(data)
+
 </script>
 
 {#each data as { x, y, width, height, fill, label }}

package/src/{components/plots/BarPlot.svelte → plots/BarPlot2.svelte}

@@ -12,11 +12,9 @@
 	export let h = 10
 
 	function size(value) {
-		// console.log($chart.axis.x.scale, value)
 		return $chart.axis.x.scale(value)
 	}
 	function top(value) {
-		// console.log('Y', value)
 		return $chart.axis.y.scale(value)
 	}
 

package/src/plots/FunnelPlot.svelte

@@ -13,7 +13,7 @@
 
 	$: aes = { ...$chart.aes, ...compact({ x, y, fill, stat, curve }) }
 	$: data = funnel($chart.data, aes, $chart.width, $chart.height)
-	// $: console.log(data)
+
 </script>
 
 {#each data.stats as stat, i}

package/src/plots/LinePlot.svelte

@@ -32,7 +32,6 @@
 		}
 	}))
 
-	// $: console.log(data)
 </script>
 
 {#each data as { x1, y1, x2, y2, color, label }}

package/src/plots/ViolinPlot.svelte

@@ -3,7 +3,6 @@
 
 	let chart = getContext('chart')
 	$: data = $chart.violin()
-	// $: console.log(data)
 </script>
 
 {#each data as { x, curve }}

package/src/plots/heatmap.js

@@ -25,7 +25,7 @@ export function summarize(data, dateField = 'date', valueField) {
 				: d.length
 		)
 		.entries(data)
-	// console.log(Object.fromEntries(nested))
+
 	return nested.reduce((obj, item) => ((obj[item.key] = item.value), obj), {})
 }
 
@@ -40,7 +40,7 @@ export function heatmap(data, numberOfMonths) {
 
 	grid.map((d) => {
 		const month = format(endOfWeek(new Date(d.date)), 'MMM')
-		// console.log(month)
+
 		if (!(month in months)) {
 			months[month] = d.x
 		}

package/src/chart/PatternDefs.svelte

@@ -1,13 +0,0 @@
-<script>
-	import Texture from './Texture.svelte'
-	const size = 10
-
-	export let thickness = 0.5
-	export let patterns
-</script>
-
-<defs>
-	{#each patterns as pattern}
-		<Texture {...pattern} {thickness} {size} />
-	{/each}
-</defs>