@rokkit/chart 1.0.0-next.92 → 1.0.0-next.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.0.0-next.92",
+  "version": "1.0.0-next.94",
   "description": "Components for making interactive charts.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -14,31 +14,31 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/svelte": "^4.1.0",
-    "@vitest/coverage-v8": "^1.3.1",
-    "@vitest/ui": "~1.3.1",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/ui": "~1.4.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^24.0.0",
-    "svelte": "^4.2.11",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
-    "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.92"
+    "svelte": "^4.2.12",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
+    "vitest": "~1.4.0",
+    "shared-config": "1.0.0-next.94"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.13",
+    "@observablehq/plot": "^0.6.14",
     "d3-array": "^3.2.4",
     "d3-collection": "^1.0.7",
     "d3-format": "^3.1.0",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "ramda": "^0.29.1",
     "yootils": "^0.3.1",
-    "@rokkit/molecules": "1.0.0-next.92",
-    "@rokkit/atoms": "1.0.0-next.92",
-    "@rokkit/core": "1.0.0-next.92",
-    "@rokkit/stores": "1.0.0-next.92"
+    "@rokkit/atoms": "1.0.0-next.94",
+    "@rokkit/core": "1.0.0-next.94",
+    "@rokkit/stores": "1.0.0-next.94",
+    "@rokkit/molecules": "1.0.0-next.94"
   },
   "files": [
     "src/**/*.js",

package/src/Chart.svelte

@@ -12,7 +12,7 @@
 	export let value = y
 	export let color = x
 	export let fill = x
-	export let pattern = x
+	// export let pattern = x
 	export let width = 2048
 	export let height = 2048
 	export let padding = height / 16

package/src/lib/chart.js

@@ -43,8 +43,8 @@ class Chart {
 	// flipCoords = false
 
 	constructor(data, opts) {
-		this.width = +opts.width || 2048
-		this.height = +opts.height || 2048
+		this.width = Number(opts.width) || 2048
+		this.height = Number(opts.height) || 2048
 		this.flipCoords = opts.flipCoords || false
 		this.x = opts.x
 		this.y = opts.y
@@ -55,14 +55,15 @@ class Chart {
 		this.color = opts.color || opts.fill
 		this.shape = opts.shape || opts.fill
 
-		this.padding = opts.padding !== undefined ? +opts.padding : 32
+		this.padding = opts.padding !== undefined ? Number(opts.padding) : 32
 
-		this.spacing = +opts.spacing >= 0 && +opts.spacing <= 0.5 ? +opts.spacing : 0
+		this.spacing =
+			Number(opts.spacing) >= 0 && Number(opts.spacing) <= 0.5 ? Number(opts.spacing) : 0
 		this.margin = {
-			top: +opts.margin?.top || 0,
-			left: +opts.margin?.left || 0,
-			right: +opts.margin?.right || 0,
-			bottom: +opts.margin?.bottom || 0
+			top: Number(opts.margin?.top) || 0,
+			left: Number(opts.margin?.left) || 0,
+			right: Number(opts.margin?.right) || 0,
+			bottom: Number(opts.margin?.bottom) || 0
 		}
 		this.domain = {
 			x: [...new Set(data.map((d) => d[this.x]))],
@@ -108,8 +109,8 @@ class Chart {
 		// scale['value'] = this.value === this.x ? scale.x : scale.y
 
 		this.origin = {
-			x: scale.x.ticks ? scale.x(Math.max(0, Math.min(...scale.x.domain()))) : scale.x.range()[0],
-			y: scale.y.ticks ? scale.y(Math.max(0, Math.min(...scale.y.domain()))) : scale.y.range()[0]
+			x: getOriginValue(scale.x),
+			y: getOriginValue(scale.y)
 		}
 
 		this.scale = scale
@@ -180,7 +181,7 @@ class Chart {
 			ticks = scale.domain()
 			if (count < scale.domain().length) {
 				let diff = scale.domain().length - count
-				ticks = ticks.filter((d, i) => i % diff == 0)
+				ticks = ticks.filter((d, i) => i % diff === 0)
 			}
 		}
 
@@ -203,6 +204,10 @@ class Chart {
 	}
 }
 
+function getOriginValue(scale) {
+	return scale.ticks ? scale(Math.max(0, Math.min(...scale.domain()))) : scale.range()[0]
+}
+
 export function chart(data, aes) {
 	return new Chart(data, aes)
 }

package/src/lib/swatch.js

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store'
-import { palette } from './palette'
+import palette from './palette.json'
 import * as patterns from '../patterns'
 import { shapes } from '../symbols'
 

package/src/lib/utils.js

@@ -0,0 +1,8 @@
+import { scaledPath } from '@rokkit/core'
+
+export function scaledPathCollection(paths) {
+	return Object.entries(paths).reduce(
+		(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
+		{}
+	)
+}

package/src/patterns/paths/constants.js

@@ -1,7 +1,4 @@
-import { scaledPath } from '@rokkit/core'
+import { scaledPathCollection } from '../../lib/utils'
 import paths from './patterns.json'
 
-export const patterns = Object.entries(paths).reduce(
-	(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
-	{}
-)
+export const patterns = scaledPathCollection(paths)

package/src/symbols/constants/index.js

@@ -1,14 +1,4 @@
-import { scaledPath } from '@rokkit/core'
+import { scaledPathCollection } from '../../lib/utils'
 import paths from './shapes.json'
 
-export const namedShapes = Object.entries(paths).reduce(
-	(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
-	{}
-)
-
-//diamond
-
-// wye
-// <path transform="translate(620,15.25)" d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"></path>
-//
-// outline
+export const namedShapes = scaledPathCollection(paths)

package/src/lib/palette.js

@@ -1,283 +0,0 @@
-/**
- * @typedef {Object<50|100|200|300|400|500|600|700|800|900|950,string>} Shades
- */
-/**
- * @type {Object<string,Shades>} }
- */
-export const palette = {
-	gold: {
-		50: '#fffef7',
-		100: '#fffdf0',
-		200: '#fffadb',
-		300: '#fff6c4',
-		400: '#ffec96',
-		500: '#ffde6b',
-		600: '#e6c257',
-		700: '#bf953b',
-		800: '#996f26',
-		900: '#734a16',
-		950: '#4a2909'
-	},
-	lavender: {
-		50: '#fffaff',
-		100: '#fcf2fc',
-		200: '#fce1fc',
-		300: '#facff9',
-		400: '#f5abf4',
-		500: '#ef89ee',
-		600: '#d96fd2',
-		700: '#b34da5',
-		800: '#8f317a',
-		900: '#6b1c55',
-		950: '#450c30'
-	},
-	teal: {
-		50: '#f2fcfc',
-		100: '#e3fafa',
-		200: '#bdf2f1',
-		300: '#96ebe9',
-		400: '#51dbd7',
-		500: '#15cbc4',
-		600: '#11b8aa',
-		700: '#0b9984',
-		800: '#077a60',
-		900: '#045c41',
-		950: '#023b25'
-	},
-	rose: {
-		50: '#fffbf7',
-		100: '#fcf6f0',
-		200: '#fce8dc',
-		300: '#fad7c8',
-		400: '#f5aa9d',
-		500: '#f07575',
-		600: '#d95f5f',
-		700: '#b34242',
-		800: '#8f2929',
-		900: '#6b1818',
-		950: '#450a0a'
-	},
-	sky: {
-		50: '#f2fdff',
-		100: '#e6fbff',
-		200: '#bff3ff',
-		300: '#99ebff',
-		400: '#4fd6ff',
-		500: '#02b8ff',
-		600: '#029ee6',
-		700: '#027abf',
-		800: '#025799',
-		900: '#003b73',
-		950: '#00234a'
-	},
-	yellow: {
-		50: '#fffef2',
-		100: '#fffce8',
-		200: '#fff8c4',
-		300: '#fcf09f',
-		400: '#fce25b',
-		500: '#facc15',
-		600: '#e0b010',
-		700: '#ba860b',
-		800: '#966208',
-		900: '#704304',
-		950: '#472601'
-	},
-	pink: {
-		50: '#fef5ff',
-		100: '#fbebfc',
-		200: '#f9cffc',
-		300: '#f3b4fa',
-		400: '#e77af5',
-		500: '#d946ef',
-		600: '#bb38d9',
-		700: '#9227b3',
-		800: '#6b188f',
-		900: '#490e6b',
-		950: '#290645'
-	},
-
-	lime: {
-		50: '#fbfcf2',
-		100: '#f7fae8',
-		200: '#eaf2c7',
-		300: '#ddeba7',
-		400: '#c2db6e',
-		500: '#a2cb39',
-		600: '#8cb82e',
-		700: '#6d9920',
-		800: '#4e7a15',
-		900: '#355c0c',
-		950: '#1e3b05'
-	},
-	red: {
-		50: '#fff5fa',
-		100: '#ffebf5',
-		200: '#fccce3',
-		300: '#faafcd',
-		400: '#f77499',
-		500: '#f63a57',
-		600: '#db304a',
-		700: '#b82135',
-		800: '#941524',
-		900: '#6e0c17',
-		950: '#47050c'
-	},
-	cyan: {
-		50: '#f0fbfc',
-		100: '#e1f8fa',
-		200: '#baeff5',
-		300: '#91e4ed',
-		400: '#48cce0',
-		500: '#06b6d4',
-		600: '#069abf',
-		700: '#03779e',
-		800: '#035880',
-		900: '#013b5e',
-		950: '#01223d'
-	},
-	orange: {
-		50: '#fffdf5',
-		100: '#fffae8',
-		200: '#fcefc5',
-		300: '#fce3a4',
-		400: '#fac65f',
-		500: '#f79f1e',
-		600: '#de8818',
-		700: '#ba6b11',
-		800: '#944d0a',
-		900: '#703406',
-		950: '#471d02'
-	},
-	violet: {
-		50: '#fdfaff',
-		100: '#f8f2fc',
-		200: '#eedefa',
-		300: '#e0cbf7',
-		400: '#c4a7f2',
-		500: '#9f84ec',
-		600: '#866bd6',
-		700: '#634bb3',
-		800: '#45318f',
-		900: '#2b1b6b',
-		950: '#150b45'
-	},
-	emerald: {
-		50: '#f2fcf9',
-		100: '#e6faf3',
-		200: '#bdf0dc',
-		300: '#9be8c6',
-		400: '#5ad694',
-		500: '#22c55e',
-		600: '#1ab04f',
-		700: '#13943c',
-		800: '#0c752b',
-		900: '#07591d',
-		950: '#03380f'
-	},
-	wood: {
-		50: '#faf5f0',
-		100: '#f2e6dc',
-		200: '#e3c4b1',
-		300: '#d19c86',
-		400: '#ad5140',
-		500: '#890e0e',
-		600: '#7d0b0b',
-		700: '#660707',
-		800: '#520505',
-		900: '#3d0202',
-		950: '#290101'
-	},
-	blue: {
-		50: '#f2fcff',
-		100: '#e6f9ff',
-		200: '#bfeeff',
-		300: '#99e0ff',
-		400: '#4cbffc',
-		500: '#0092fd',
-		600: '#007de3',
-		700: '#0061bd',
-		800: '#004696',
-		900: '#003073',
-		950: '#001c4a'
-	},
-
-	amber: {
-		50: '#fffbf5',
-		100: '#fff7eb',
-		200: '#ffe9cc',
-		300: '#ffd6ab',
-		400: '#ffa86e',
-		500: '#ff6e2f',
-		600: '#e65b25',
-		700: '#bf4519',
-		800: '#993111',
-		900: '#732009',
-		950: '#4a1204'
-	},
-	purple: {
-		50: '#fdf7ff',
-		100: '#faedff',
-		200: '#f0d4fc',
-		300: '#e7bbfc',
-		400: '#ca87fa',
-		500: '#a855f7',
-		600: '#8f45de',
-		700: '#6d2fba',
-		800: '#4f1e94',
-		900: '#341170',
-		950: '#1d0747'
-	},
-	zinc: {
-		50: '#f7f9fa',
-		100: '#edf2f5',
-		200: '#d3dde3',
-		300: '#bac8d1',
-		400: '#8d9eb0',
-		500: '#64748b',
-		600: '#536580',
-		700: '#384a69',
-		800: '#243454',
-		900: '#142140',
-		950: '#091129'
-	},
-	stone: {
-		50: '#f7f7f7',
-		100: '#f2f1f0',
-		200: '#dedcd9',
-		300: '#c9c6c1',
-		400: '#a19b95',
-		500: '#78716c',
-		600: '#6b5f57',
-		700: '#59473c',
-		800: '#473227',
-		900: '#361f15',
-		950: '#241009'
-	},
-	indigo: {
-		50: '#f7fbff',
-		100: '#f0f7ff',
-		200: '#d7e5fc',
-		300: '#bed1fa',
-		400: '#92a3f7',
-		500: '#6366f1',
-		600: '#5153db',
-		700: '#383ab5',
-		800: '#242691',
-		900: '#14156e',
-		950: '#090a47'
-	},
-	gray: {
-		50: '#f7f9fa',
-		100: '#edf0f2',
-		200: '#d7dde0',
-		300: '#c0c6cc',
-		400: '#949ba6',
-		500: '#6b7280',
-		600: '#576073',
-		700: '#3b455e',
-		800: '#26304d',
-		900: '#151d38',
-		950: '#090e24'
-	}
-}