feat: allow passing categorical colors as Record<domain, color>

gka · gka · commit d6ce354e33ee · 2025-05-23T00:36:09.000+02:00
resolves #50
diff --git a/src/lib/core/Plot.svelte b/src/lib/core/Plot.svelte
@@ -62,6 +62,7 @@
         initialWidth: 500,
         inset: 0,
         colorScheme: 'turbo',
+        unknown: '#cccccc',
         dotRadius: 3,
         frame: false,
         axes: true,
@@ -160,7 +161,7 @@
     );
 
     // if the plot is showing filled dot marks we're using different defaults
-    // for the symbol axis range, so we're passing on this info to the createScales
+    // for the symbol axis range, so we're passing on this info to the computeScales
     // function below
     const hasFilledDotMarks = $derived(
         !!explicitMarks.find((d) => d.type === 'dot' && d.options.fill)
diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
@@ -47,6 +47,7 @@ import callWithProps from './callWithProps.js';
 import { interpolateLab, interpolateRound } from 'd3-interpolate';
 import { coalesce, maybeNumber } from './index.js';
 import { getLogTicks } from './getLogTicks.js';
+import { isPlainObject } from 'es-toolkit';
 
 const Scales: Record<
     ScaleType,
@@ -207,12 +208,28 @@ export function autoScaleColor({
         scheme,
         interpolate,
         pivot,
-        n = type === 'threshold' ? domain.length + 1 : 9
+        n = type === 'threshold' ? domain.length + 1 : 9,
+        unknown = plotDefaults.unknown
     } = scaleOptions;
 
     if (type === 'categorical' || type === 'ordinal') {
         // categorical
-        const scheme_ = scheme || plotDefaults.categoricalColorScheme;
+        let scheme_ = scheme || plotDefaults.categoricalColorScheme;
+
+        if (isPlainObject(scheme_)) {
+            const newScheme = Object.values(scheme_);
+            const newDomain = Object.keys(scheme_);
+            // for every value in domain that's not part of the scheme, map to unknown
+            for (const v of domain) {
+                if (scheme_[v] == null) {
+                    newDomain.push(v);
+                    newScheme.push(unknown)
+                }
+            }
+            domain = newDomain;
+            scheme_ = newScheme;
+        }
+
         // categorical scale
         range = Array.isArray(scheme_)
             ? scheme_
diff --git a/src/routes/features/scales/+page.md b/src/routes/features/scales/+page.md
@@ -569,6 +569,54 @@ Note that the colors are picked in the order the categories appear in your datas
 </Plot>
 ```
 
+[fork](https://svelte.dev/playground/573be4d5791648fcb71d8ea9cdcc7112?version=5.33.1)
+
+As a simpler syntax you can also pass domain -> scheme mapping as object:
+
+```svelte live
+<script>
+    import { Plot, Dot } from 'svelteplot';
+    import { page } from '$app/state';
+    let { penguins } = $derived(page.data.data);
+</script>
+
+<Plot
+    grid
+    color={{
+        legend: true,
+        scheme: {
+            FEMALE: 'var(--svp-green)',
+            MALE: 'var(--svp-violet)'
+        }
+    }}>
+    <Dot
+        data={penguins}
+        x="culmen_length_mm"
+        y="culmen_depth_mm"
+        fill="sex" />
+</Plot>
+```
+
+```svelte
+<Plot
+    grid
+    color={{
+        legend: true,
+        scheme: {
+            FEMALE: 'green',
+            MALE: 'violet'
+        }
+    }}>
+    <Dot
+        data={penguins}
+        x="culmen_length_mm"
+        y="culmen_depth_mm"
+        stroke="sex" />
+</Plot>
+```
+
+[fork](https://svelte.dev/playground/49fb6bcbeb9e4789ba1680c0ffc63678?version=5.33.1)
+
 ## Continuous color scales
 
 ### Linear
diff --git a/src/tests/colors.test.svelte b/src/tests/colors.test.svelte
@@ -0,0 +1,9 @@
+<script>
+    import { Plot, Dot } from 'svelteplot';
+
+    let { colorOptions: color, dotOptions } = $props();
+</script>
+
+<Plot {color} width={100} height={100} axes={false}>
+    <Dot {...dotOptions} />
+</Plot>
diff --git a/src/tests/colors.test.ts b/src/tests/colors.test.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ColorsTest from './colors.test.svelte';
+import { categoricalSchemes } from 'svelteplot/helpers/colors';
+
+const observable10 = categoricalSchemes.get('observable10') as string[];
+
+describe('Colors', () => {
+    it('default color scheme is observable10', () => {
+        const { container } = render(ColorsTest, {
+            props: {
+                dotOptions: {
+                    data: [{
+                        x: 1, sex: 'male'
+                    }, {
+                        x: 2, sex: 'female'
+                    }
+                    ],
+                    x: 'x',
+                    y: 0,
+                    fill: 'sex'
+                },
+                colorOptions: {}
+            }
+        });
+        const dots = container.querySelectorAll('g.dots > path') as NodeListOf<SVGPathElement>;
+        expect(dots.length).toBe(2);
+        const styles = Array.from(dots).map(getDotStyle);
+        expect(styles[0].fill).toBe(observable10[0]);
+        expect(styles[1].fill).toBe(observable10[1]);
+    });
+
+    it('set custom scheme as object', () => {
+        const { container } = render(ColorsTest, {
+            props: {
+                dotOptions: {
+                    data: [{
+                        x: 1, sex: 'male'
+                    }, {
+                        x: 2, sex: 'female'
+                    }, {
+                        x: 3, sex: 'in-between'
+                    }
+                    ],
+                    x: 'x',
+                    y: 0,
+                    fill: 'sex'
+                },
+                colorOptions: {
+                    scheme: {
+                        male: 'green',
+                        female: 'violet'
+                    }
+                }
+            }
+        });
+        const dots = container.querySelectorAll('g.dots > path') as NodeListOf<SVGPathElement>;
+        expect(dots.length).toBe(3);
+        const styles = Array.from(dots).map(getDotStyle);
+        expect(styles[0].fill).toBe('green');
+        expect(styles[1].fill).toBe('violet');
+        expect(styles[2].fill).toBe('#cccccc');
+    });
+});
+
+function getDotStyle(path: SVGPathElement) {
+    return {
+        fill: path.style.fill,
+        stroke: path.style.stroke,
+    }
+}
