@rokkit/chart 1.0.0-next.95 → 1.0.0-next.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.95",
+  "version": "1.0.0-next.97",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -12,17 +12,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@testing-library/svelte": "^4.1.0",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vitest/ui": "~1.4.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@testing-library/svelte": "^5.1.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "~1.6.0",
     "js-yaml": "^4.1.0",
-    "jsdom": "^24.0.0",
-    "svelte": "^4.2.12",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.8",
-    "vitest": "~1.4.0",
-    "shared-config": "1.0.0-next.95"
+    "jsdom": "^24.1.0",
+    "svelte": "^4.2.17",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vitest": "~1.6.0",
+    "shared-config": "1.0.0-next.97"
   },
   "dependencies": {
     "@observablehq/plot": "^0.6.14",
@@ -33,12 +33,12 @@
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "date-fns": "^3.6.0",
-    "ramda": "^0.29.1",
+    "ramda": "^0.30.1",
     "yootils": "^0.3.1",
-    "@rokkit/atoms": "1.0.0-next.95",
-    "@rokkit/core": "1.0.0-next.95",
-    "@rokkit/molecules": "1.0.0-next.95",
-    "@rokkit/stores": "1.0.0-next.95"
+    "@rokkit/atoms": "1.0.0-next.97",
+    "@rokkit/core": "1.0.0-next.97",
+    "@rokkit/stores": "1.0.0-next.97",
+    "@rokkit/molecules": "1.0.0-next.97"
   },
   "files": [
     "src/**/*.js",

package/src/lib/brewer.js

@@ -1,3 +1,11 @@
+/**
+ * Get fill patterns for a set of values
+ *
+ * @param {Array} values - Array of values
+ * @param {Object} swatch - Object with keys for color, gray, and pattern
+ * @param {Boolean} gray - Boolean to determine if gray or color
+ * @returns {Object} - Object with keys for pattern and color
+ */
 export function getFillPatterns(values, swatch, gray = false) {
 	const colors = gray ? swatch.keys.gray : swatch.keys.color
 	const max_colors = colors.length

package/src/lib/grid.js

@@ -1,15 +1,22 @@
 /**
  * @typedef GridPoint
- * @property {number} x
- * @property {number} y
- * @property {number} r
+ * @property {number} x - x-coordinate of the point
+ * @property {number} y - y-coordinate of the point
+ * @property {number} r - radius of the point
  */
 
 /**
  * @typedef SwatchGrid
- * @property {number}      width
- * @property {number}      height
- * @property {GridPoint[]} data
+ * @property {number}      width  - width of the grid
+ * @property {number}      height - height of the grid
+ * @property {GridPoint[]} data   - data points of the grid
+ */
+
+/**
+ * @tyoedef {Object} GridOptions
+ * @property {number} [pad=0]     - The padding between the items
+ * @property {number} [columns=0] - The number of columns
+ * @property {number} [rows=0]    - The number of rows
  */
 
 /**
@@ -19,14 +26,14 @@
  * - Value in columns is prioritized over rows for recalculating the grid
  * - Supports padding between the items
  *
- * @param {number} count
- * @param {number} size
- * @param {number} pad
- * @param {number} columns
- * @param {number} rows
+ * @param {number}      count   - number of items
+ * @param {number}      size    - size of the items
+ * @param {GridOptions} options - options for the grid
  * @returns {SwatchGrid}
  */
-export function swatchGrid(count, size, pad = 0, columns = 0, rows = 0) {
+export function swatchGrid(count, size, options) {
+	const { pad = 0 } = options || {}
+	let { columns = 0, rows = 0 } = options || {}
 	if (columns > 0) {
 		rows = Math.ceil(count / columns)
 	} else if (rows > 0) {
@@ -51,9 +58,9 @@ export function swatchGrid(count, size, pad = 0, columns = 0, rows = 0) {
 /**
  * Spreads values as patterns with colors from a palette
  *
- * @param {number[]} values
- * @param {string[]} patterns
- * @param {string[]} palette
+ * @param {number[]} values   - values to spread
+ * @param {string[]} patterns - patterns to spread
+ * @param {string[]} palette  - colors to spread
  * @returns {Record<number, { id: string, pattern: string, color: string }>}
  */
 export function spreadValuesAsPatterns(values, patterns, palette) {

package/src/lib/ticks.js

@@ -1,15 +1,42 @@
-function ticksByType(lower, upper, steps, type) {
-	return Array.from({ length: Math.floor((upper - lower) / steps[type]) + 1 }, (_, i) => ({
-		position: i * steps[type],
-		label: i * steps[type],
+/**
+ * @typedef {Object} TickSteps
+ * @property {number} major - count of major ticks
+ * @property {number} minor - count of minor ticks
+ */
+
+/**
+ * Generate an array of ticks for a given axis and the tick type
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ * @param {string}    type  - The type of tick to generate
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
+export function ticksByType(lower, upper, steps, type) {
+	if (steps <= 0) return []
+	return Array.from({ length: Math.floor((upper - lower) / steps) + 1 }, (_, i) => ({
+		position: i * steps,
+		label: i * steps,
 		type
-	}))
+	})).filter((tick) => tick.position > lower && tick.position < upper)
 }
 
+/**
+ * Generate an array of ticks for a given axis
+ *
+ * @param {number}    lower - The lower bound of the axis
+ * @param {number}    upper - The upper bound of the axis
+ * @param {TickSteps} steps - The number of steps between major and minor ticks
+ *
+ * @returns {Array} - An array of objects representing the ticks
+ */
 export function getTicks(lower, upper, steps = { major: 10, minor: 0 }) {
-	if (steps.major === 0 && steps.minor === 0) return []
-	const minorTicks = ticksByType(lower, upper, steps.major, 'major')
-	const majorTicks = ticksByType(lower, upper, steps.minor, 'minor')
+	const majorTicks = ticksByType(lower, upper, steps.major, 'major')
+	const minorTicks = ticksByType(lower, upper, steps.minor, 'minor').filter(
+		(tick) => !majorTicks.find((major) => major.position === tick.position)
+	)
 	const end = [
 		{ position: upper, label: upper, type: 'end' },
 		{ position: lower, label: lower, type: 'end' }

package/src/patterns/index.js

@@ -11,3 +11,4 @@ export { default as Triangles } from './Triangles.svelte'
 // export { default as Flower } from './Flower.svelte'
 // export { default as NamedPath } from './NamedPath.svelte'
 export { default as CurvedWave } from './CurvedWave.svelte'
+export { default as OutlineCircles } from './OutlineCircles.svelte'

package/src/symbols/Shape.svelte

@@ -10,7 +10,7 @@
 
 	export let name = 'circle'
 
-	$: d = name in namedShapes ? namedShapes[name](size) : namedShapes['star'](size)
+	$: d = name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size)
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

package/src/template/Texture.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { library } from './constants'
+	import * as templates from './shapes'
+	import { pick } from 'ramda'
+
+	export let size = 10
+	export let fill = 'none'
+	export let stroke = 'none'
+	export let thickness = 0.5
+	export let name = 'Waves'
+
+	$: pattern = library[name]
+	$: props = pick(pattern.allowed ?? [], { fill, stroke, thickness })
+</script>
+
+<svelte:component this={templates[pattern.component]} {size} {...props} data={pattern.data} />

package/src/{patterns/templates → template/shapes}/index.js

@@ -1,3 +1,4 @@
 export { default as Circles } from './Circles.svelte'
 export { default as Lines } from './Lines.svelte'
 export { default as Path } from './Path.svelte'
+export { default as Polygons } from './Polygons.svelte'

package/src/patterns/Texture.svelte

@@ -1,20 +0,0 @@
-<script>
-	import { library } from './constants'
-	import templates from './templates'
-	import { pick } from 'ramda'
-
-	export let size = 10
-	export let fill = 'none'
-	export let stroke = 'none'
-	export let name = 'Waves'
-
-	$: pattern = library[name]
-	$: props = { fill, stroke }
-</script>
-
-<svelte:component
-	this={templates[pattern.component]}
-	{size}
-	{...pick(pattern.allowed, props)}
-	data={pattern.data}
-/>