@rokkit/chart 1.6.0 → 1.8.0

package/dist/state/ScaleState.svelte.js

@@ -0,0 +1,121 @@
+import { buildUnifiedXScale, buildUnifiedYScale } from '../lib/plot/scales.js'
+import { sortedBandDomain, resolveValueDomain } from '../lib/plot/domains.js'
+
+/**
+ * The x and y position scales.
+ *
+ * Domains come, in order, from: the caller's override; for the value axis, the geometry of the
+ * mounted geoms (`resolveValueDomain` — box whiskers, stacked totals, running totals); then the
+ * extent of every geom's rows. Ranges come from the frame, oriented by the flip.
+ */
+export class ScaleState {
+	#config
+	#geoms
+	#channels
+	#orientation
+	#frame
+	#interaction
+
+	/**
+	 * @param {{
+	 *   config: import('./PlotConfig.svelte.js').PlotConfig,
+	 *   geoms: import('./GeomRegistry.svelte.js').GeomRegistry,
+	 *   channels: import('./ChannelState.svelte.js').ChannelState,
+	 *   orientation: import('./OrientationState.svelte.js').OrientationState,
+	 *   frame: import('./PlotFrame.svelte.js').PlotFrame,
+	 *   interaction: import('./InteractionState.svelte.js').InteractionState
+	 * }} parts
+	 */
+	constructor({ config, geoms, channels, orientation, frame, interaction }) {
+		this.#config = config
+		this.#geoms = geoms
+		this.#channels = channels
+		this.#orientation = orientation
+		this.#frame = frame
+		this.#interaction = interaction
+	}
+
+	/** Every geom's rows (post-stat) — or the raw data before any geom mounts. Shared by both axes. */
+	#datasets = $derived(
+		this.#geoms.list.length > 0
+			? this.#geoms.list.map((g) => this.#geoms.data(g.id))
+			: [this.#config.data]
+	)
+
+	/**
+	 * x is a band when a banding geom is mounted — except a CONTINUOUS category axis (a bar
+	 * race's tweened rank), which stays linear so fractional positions tween.
+	 */
+	#bandX = $derived(
+		this.#orientation.hasBandGeom &&
+			!this.#config.continuousCategory &&
+			(this.#orientation.orientation !== 'horizontal' || this.#orientation.flipped)
+	)
+
+	/** The caller's x domain, else — on a band axis — categories sorted by value when asked. */
+	#xDomain = $derived(
+		this.#config.xDomain ??
+			(this.#bandX
+				? sortedBandDomain(
+						this.#datasets,
+						this.#channels.effective.x,
+						this.#channels.effective.y,
+						this.#config.sort
+					)
+				: null) ??
+			undefined
+	)
+
+	/** The x (category, when banded) scale. Includes zero only when x is the VALUE axis. */
+	x = $derived.by(() => {
+		const field = this.#channels.effective.x
+		if (!field) return null
+		const { orientation, flipped } = this.#orientation
+		const base = buildUnifiedXScale(this.#datasets, field, this.#frame.innerWidth, {
+			domain: this.#xDomain,
+			includeZero: orientation === 'horizontal' && !flipped,
+			band: this.#bandX,
+			// Flipped: the category axis stands up the screen.
+			range: flipped ? [this.#frame.innerHeight, 0] : undefined,
+			// A continuous category axis is deliberately padded — do not nice() it to whole numbers.
+			nice: !this.#config.continuousCategory
+		})
+		// A band cannot be zoomed; a continuous axis rescales through the transform.
+		return typeof base?.bandwidth === 'function' ? base : this.#zoomed(base, 'rescaleX')
+	})
+
+	/** The y (value) scale — a zero baseline whenever it is the value axis. */
+	y = $derived.by(() => {
+		const field = this.#channels.effective.y
+		if (!field) return null
+		const { orientation, flipped } = this.#orientation
+		const geomDomain = resolveValueDomain(
+			this.#geoms.list,
+			(id) => this.#geoms.data(id),
+			this.#channels.effective,
+			field
+		)
+		const base = buildUnifiedYScale(this.#datasets, field, this.#frame.innerHeight, {
+			domain: this.#config.yDomain ?? geomDomain ?? undefined,
+			includeZero: orientation === 'vertical' || flipped,
+			// Flipped: the value axis runs along the screen.
+			range: flipped ? [0, this.#frame.innerWidth] : undefined
+		})
+		return this.#zoomed(base, 'rescaleY')
+	})
+
+	/** @param {any} base @param {'rescaleX' | 'rescaleY'} method */
+	#zoomed(base, method) {
+		const zoom = this.#interaction.zoom
+		return zoom ? zoom[method](base) : base
+	}
+
+	/** The categorical scale, whichever screen axis it is on. */
+	get band() {
+		return this.#orientation.bandIsX ? this.x : this.y
+	}
+	/** The continuous (value) scale, whichever screen axis it is on. */
+	get value() {
+		return this.#orientation.bandIsX ? this.y : this.x
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {
@@ -48,6 +48,7 @@
     "@rokkit/states": "latest",
     "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
+    "d3-contour": "^4.0.2",
     "d3-format": "^3.1.2",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
@@ -65,6 +66,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/d3-array": "^3.2.2",
     "@types/d3-axis": "^3.0.6",
+    "@types/d3-contour": "^3.0.6",
     "@types/d3-format": "^3.0.4",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
@@ -73,7 +75,7 @@
     "@types/d3-transition": "^3.0.9",
     "@types/d3-zoom": "^3.0.8",
     "@types/ramda": "^0.31.1",
-    "svelte-check": "^4.7.6",
-    "svelte": "^5.55.7"
+    "svelte": "^5.55.7",
+    "svelte-check": "^4.7.6"
   }
 }

package/dist/lib/palette.json

@@ -1,277 +0,0 @@
-{
-  "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"
-  }
-}