@octanejs/visx 0.1.43 → 0.1.45

package/README.md

@@ -4,6 +4,13 @@ The complete current Airbnb Visx 4.x visualization toolkit for Octane. The
 package keeps the upstream aggregate API and exposes every public feature package
 as a subpath:
 
+## Installation
+
+```sh
+npm install @octanejs/visx
+pnpm add @octanejs/visx
+```
+
 ```tsrx
 import { AxisBottom, AxisLeft } from '@octanejs/visx/axis';
 import { scaleBand, scaleLinear } from '@octanejs/visx/scale';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/visx",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -123,10 +123,10 @@
     "mitt": "^2.1.0",
     "reduce-css-calc": "^1.3.0",
     "svg-path-properties": "2.0.2",
-    "@octanejs/floating-ui": "0.1.48"
+    "@octanejs/floating-ui": "0.1.50"
   },
   "peerDependencies": {
-    "octane": "0.1.49"
+    "octane": "0.1.51"
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
@@ -149,7 +149,7 @@
     "react-dom": "^19.2.7",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "octane": "0.1.49"
+    "octane": "0.1.51"
   },
   "scripts": {
     "compile:check": "node scripts/check-tsrx-compile.mjs",

package/src/theme/react/categoricalIndex.ts

@@ -0,0 +1,21 @@
+const INDEX_THRESHOLD = 64;
+
+export type CategoricalIndex<Domain extends readonly string[]> = (key: Domain[number]) => number;
+
+export default function createCategoricalIndex<Domain extends readonly string[]>(
+	domain: Domain,
+): CategoricalIndex<Domain> {
+	if (domain.length < INDEX_THRESHOLD) {
+		return (key) => domain.indexOf(key);
+	}
+
+	const indexes = new Map<string, number>();
+	for (let index = 0; index < domain.length; index++) {
+		const key = domain[index];
+		if (indexes.get(key) === undefined) {
+			indexes.set(key, index);
+		}
+	}
+
+	return (key) => indexes.get(key) ?? -1;
+}

package/src/theme/react/useCategoricalScale.tsrx

@@ -1,3 +1,6 @@
+import { useStructuralMemo } from '@octanejs/visx/kernel';
+import { useMemo } from 'octane';
+import createCategoricalIndex from './categoricalIndex';
 import { getCategoricalColor } from './categoricalColor';
 import useTheme from './useTheme.tsrx';
 import warn from './warn';
@@ -7,17 +10,22 @@ export type CategoricalColorAccessor<Domain extends readonly string[]> =
 
 export default function useCategoricalScale<Domain extends readonly string[]>(domain: Domain): CategoricalColorAccessor<Domain> {
 	const theme = useTheme();
+	const stableDomain = useStructuralMemo(domain, 1);
+	const colors = theme.colors.categorical;
 
-	return (key) => {
-		const index = domain.indexOf(key);
+	return useMemo(() => {
+		const indexOf = createCategoricalIndex(stableDomain);
+		return (key) => {
+			const index = indexOf(key);
 
-		if (index < 0) {
-			warn(
-				`[@octanejs/visx/theme] useCategoricalScale received "${key}" outside its domain; using index 0.`,
-			);
-			return getCategoricalColor(theme.colors.categorical, 0);
-		}
+			if (index < 0) {
+				warn(
+					`[@octanejs/visx/theme] useCategoricalScale received "${key}" outside its domain; using index 0.`,
+				);
+				return getCategoricalColor(colors, 0);
+			}
 
-		return getCategoricalColor(theme.colors.categorical, index);
-	};
+			return getCategoricalColor(colors, index);
+		};
+	}, [colors, stableDomain]);
 }

package/src/theme/react/useColorScale.tsrx

@@ -1,5 +1,6 @@
 import { useStructuralMemo } from '@octanejs/visx/kernel';
 import { useMemo } from 'octane';
+import createCategoricalIndex from './categoricalIndex';
 import { getCategoricalColor } from './categoricalColor';
 import useTheme from './useTheme.tsrx';
 import warn from './warn';
@@ -21,9 +22,10 @@ export default function useColorScale<Domain extends readonly string[]>(
 	const fallbackColors = theme.colors.categorical;
 	const colors = stableRange ?? fallbackColors;
 
-	return useMemo(
-		() => (key) => {
-			const index = stableDomain.indexOf(key);
+	return useMemo(() => {
+		const indexOf = createCategoricalIndex(stableDomain);
+		return (key) => {
+			const index = indexOf(key);
 
 			if (index < 0) {
 				warn(
@@ -33,7 +35,6 @@ export default function useColorScale<Domain extends readonly string[]>(
 			}
 
 			return colors[index % colors.length] ?? getCategoricalColor(fallbackColors, index);
-		},
-		[colors, fallbackColors, stableDomain],
-	);
+		};
+	}, [colors, fallbackColors, stableDomain]);
 }