@fundar/data-chart-telling 0.0.63 → 1.0.0

package/dist/layout/legend/DisabledStyle.d.ts

@@ -0,0 +1,19 @@
+import type { LegendDisabledAction, LegendDisabledStyle } from '../../types/layout/legend';
+import type { DotStyle, StrokeStyle } from '../../types/plots/styling';
+/**
+ * How a legend's "disabled" state draws a mark. Each of {@link fill},
+ * {@link stroke} and {@link dots} is `undefined` when nothing is disabled, so
+ * a call site slots it in as one more `??` layer ahead of its own style chain.
+ */
+export declare class DisabledStyle {
+    /** The style `action` draws a mark with - `'hide'` and `'omit'` are fully transparent. */
+    static of(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;
+    /** The style a legend item draws with while off - it stays visible, so it can be turned back on. */
+    static ofItem(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;
+    static stroke(disabled: LegendDisabledStyle | undefined): StrokeStyle | undefined;
+    static dots(disabled: LegendDisabledStyle | undefined): DotStyle | undefined;
+    static fill(disabled: LegendDisabledStyle | undefined): {
+        fill?: string;
+        fillOpacity?: number;
+    } | undefined;
+}

package/dist/layout/legend/DisabledStyle.js

@@ -0,0 +1,57 @@
+/**
+ * How a legend's "disabled" state draws a mark. Each of {@link fill},
+ * {@link stroke} and {@link dots} is `undefined` when nothing is disabled, so
+ * a call site slots it in as one more `??` layer ahead of its own style chain.
+ */
+export class DisabledStyle {
+    /** The style `action` draws a mark with - `'hide'` and `'omit'` are fully transparent. */
+    static of(action, fallbackOpacity) {
+        if (!action)
+            return undefined;
+        if (action.mode !== 'dim')
+            return { opacity: 0 };
+        return action.style ?? { opacity: fallbackOpacity };
+    }
+    /** The style a legend item draws with while off - it stays visible, so it can be turned back on. */
+    static ofItem(action, fallbackOpacity) {
+        if (!action)
+            return undefined;
+        return action.mode === 'dim'
+            ? DisabledStyle.of(action, fallbackOpacity)
+            : { opacity: fallbackOpacity };
+    }
+    static stroke(disabled) {
+        if (!disabled)
+            return undefined;
+        return {
+            stroke: disabled.stroke?.stroke,
+            strokeWidth: disabled.stroke?.strokeWidth,
+            strokeOpacity: disabled.stroke?.strokeOpacity ?? disabled.opacity,
+            strokeDasharray: disabled.stroke?.strokeDasharray,
+            strokeLinecap: disabled.stroke?.strokeLinecap,
+            strokeLinejoin: disabled.stroke?.strokeLinejoin
+        };
+    }
+    static dots(disabled) {
+        if (!disabled)
+            return undefined;
+        return {
+            dotRadius: disabled.dots?.dotRadius,
+            dotFill: disabled.dots?.dotFill,
+            dotFillOpacity: disabled.dots?.dotFillOpacity ?? disabled.opacity,
+            dotSymbol: disabled.dots?.dotSymbol,
+            dotStroke: disabled.dots?.dotStroke,
+            dotStrokeWidth: disabled.dots?.dotStrokeWidth,
+            dotStrokeOpacity: disabled.dots?.dotStrokeOpacity ?? disabled.opacity,
+            dotStrokeDasharray: disabled.dots?.dotStrokeDasharray
+        };
+    }
+    static fill(disabled) {
+        if (!disabled)
+            return undefined;
+        return {
+            fill: disabled.fill,
+            fillOpacity: disabled.fillOpacity ?? disabled.opacity
+        };
+    }
+}

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { contrastTextColor } from '../../utils/color';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { LegendText } from './LegendText';
 	import DiscreteSymbolIcon from './DiscreteSymbolIcon.svelte';
 	import type { LegendItem } from '../../types/layout/legend';
 
 	/**
 	 * The `interactive.legendStyle: 'badge'` item look: a pill with the series
-	 * color, symbol icon, label, and a toggle icon — an eye (crossed out when
-	 * `disabled`) for `'style'` mode, or a plus/cross pair for `'omit'`.
+	 * color, symbol icon, label, and a toggle icon - an eye (crossed out when
+	 * `disabled`) for `'dim'` and `'hide'`, or a plus/cross pair for `'omit'`.
 	 */
 	let {
 		item,
@@ -21,6 +23,7 @@
 		showIcon?: boolean;
 		omitMode?: boolean;
 	} = $props();
+	const cfg = $derived(getConfiguration());
 	const textColor = $derived(contrastTextColor(color));
 </script>
 
@@ -28,7 +31,7 @@
 	{#if showIcon}
 		<DiscreteSymbolIcon {item} color={textColor} />
 	{/if}
-	<span class="dct-discrete__label">{item.label || item.name}</span>
+	<span class="dct-discrete__label">{item.label || LegendText.of(item.name, cfg)}</span>
 	<svg class="dct-discrete__eye" viewBox="0 0 24 24" aria-hidden="true">
 		{#if omitMode}
 			{#if disabled}

package/dist/layout/legend/DiscreteSection.svelte

@@ -2,11 +2,8 @@
 	import { SvelteSet } from 'svelte/reactivity';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { paletteColor } from '../../utils/color';
-	import {
-		getLegendInteraction,
-		createLegendInteraction
-	} from './interaction.svelte';
-	import { resolveDisabledStyle } from '../../plots/utils/legendDisabled';
+	import { LegendState } from './LegendState.svelte';
+	import { DisabledStyle } from './DisabledStyle';
 	import DiscreteBadgeItem from './DiscreteBadgeItem.svelte';
 	import DiscreteSwatchItem from './DiscreteSwatchItem.svelte';
 	import type {
@@ -26,17 +23,30 @@
 	const cfg = $derived(getConfiguration());
 	const layout = $derived(section.layout ?? defaultItemsLayout);
 	const isHorizontal = $derived(layout.type === 'horizontal');
+	const isFlex = $derived(layout.type === 'flex');
 	const maxRows = $derived(layout.type === 'horizontal' ? Math.max(1, layout.maxRows ?? 1) : 1);
-	const columns = $derived(section.columns ?? 1);
+	/**
+	 * Without its own `columns` or `layout`, a vertical section spreads its
+	 * items across columns, favoring rows: up to two items side by side, then
+	 * half as many columns as items, at most four.
+	 */
+	const columns = $derived(
+		section.columns ??
+			(section.layout
+				? 1
+				: section.items.length <= 2
+					? Math.max(1, section.items.length)
+					: Math.min(4, Math.ceil(section.items.length / 2)))
+	);
 	const isInteractive = $derived(section.interactive?.enabled ?? false);
 	const useBadge = $derived(
 		isInteractive && (section.interactive?.legendStyle ?? 'badge') === 'badge'
 	);
 	const showIcon = $derived(section.interactive?.showIcon ?? true);
 	const disabledAction = $derived<LegendDisabledAction>(
-		section.interactive?.disabled ?? { mode: 'style' }
+		section.interactive?.disabled ?? { mode: 'dim' }
 	);
-	const interaction = getLegendInteraction() ?? createLegendInteraction();
+	const interaction = LegendState.ensure();
 
 	const seeded = new SvelteSet<string>();
 	$effect(() => {
@@ -44,17 +54,17 @@
 			if (seeded.has(item.name)) continue;
 			seeded.add(item.name);
 			if (item.disabled) {
-				interaction.disabledSeries.set(item.name, disabledAction);
+				interaction.turnOff(item.name, disabledAction);
 			}
 		}
 	});
 
 	function toggle(item: LegendItem): void {
 		if (!isInteractive) return;
-		if (interaction.disabledSeries.has(item.name)) {
-			interaction.disabledSeries.delete(item.name);
+		if (interaction.isOff(item.name)) {
+			interaction.turnOn(item.name);
 		} else {
-			interaction.disabledSeries.set(item.name, disabledAction);
+			interaction.turnOff(item.name, disabledAction);
 		}
 	}
 
@@ -66,12 +76,12 @@
 
 	// ── Horizontal pagination ──────────────────────────────────────────────
 	// Row breaks are found by measuring each item's `offsetTop` on a full,
-	// hidden copy of the list kept in normal document flow — not
-	// `position: absolute` — alongside the visible, paginated one.
+	// hidden copy of the list kept in normal document flow - not
+	// `position: absolute` - alongside the visible, paginated one.
 	// (In-flow is required: an absolutely-positioned measurer doesn't count
 	// toward its shrink-to-fit ancestors' width, so the container would
 	// collapse to the narrow visible page and each remeasurement would then
-	// wrap even fewer items than the last — a runaway shrink.)
+	// wrap even fewer items than the last - a runaway shrink.)
 	let measurerEl: HTMLDivElement | undefined = $state();
 	// Resize trigger for the measurement effect; the value itself is unused.
 	let containerWidth = $state(0);
@@ -112,7 +122,7 @@
 		measuredKey = key;
 	});
 
-	// Whether `rows` was measured against the current item list — before it
+	// Whether `rows` was measured against the current item list - before it
 	// is, this reads as unpaginated, same as an empty `rows`.
 	const rowsCurrent = $derived(measuredKey === currentKey);
 
@@ -149,14 +159,10 @@
 </script>
 
 {#snippet discreteItem(item: LegendItem, i: number)}
-	{@const action = interaction.disabledSeries.get(item.name)}
+	{@const action = interaction.actionOf(item.name)}
 	{@const isDisabled = action != null}
-	{@const omitMode = disabledAction.mode === 'omit'}
-	{@const disabledStyle = isDisabled
-		? omitMode
-			? { opacity: cfg.legend.disabledOpacity }
-			: resolveDisabledStyle(action, cfg.legend.disabledOpacity)
-		: undefined}
+	{@const omitMode = (action ?? disabledAction).mode === 'omit'}
+	{@const disabledStyle = DisabledStyle.ofItem(action, cfg.legend.disabledOpacity)}
 	{@const color =
 		disabledStyle?.fill ??
 		disabledStyle?.stroke?.stroke ??
@@ -211,7 +217,7 @@
 {#if isHorizontal}
 	<div class="dct-discrete-paginated">
 		{#if showNav}
-			{@render navButtonSlot('prev', page === 0, prevPage, 'Página anterior de referencias')}
+			{@render navButtonSlot('prev', page === 0, prevPage, 'Previous legend page')}
 		{/if}
 		<div class="dct-discrete-horizontal" bind:clientWidth={containerWidth}>
 			<div class="dct-discrete dct-discrete--horizontal">
@@ -230,14 +236,15 @@
 			</div>
 		</div>
 		{#if showNav}
-			{@render navButtonSlot(
-				'next',
-				page >= totalPages - 1,
-				nextPage,
-				'Página siguiente de referencias'
-			)}
+			{@render navButtonSlot('next', page >= totalPages - 1, nextPage, 'Next legend page')}
 		{/if}
 	</div>
+{:else if isFlex}
+	<div class="dct-discrete dct-discrete--horizontal">
+		{#each section.items as item, i (item.name)}
+			{@render discreteItem(item, i)}
+		{/each}
+	</div>
 {:else}
 	<div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
 		{#each section.items as item, i (item.name)}
@@ -258,7 +265,7 @@
 		flex-wrap: wrap;
 	}
 	/* Items keep their natural width and wrap to a new row instead of
-     shrinking — matches the grid variant's `max-content` columns, and
+     shrinking - matches the grid variant's `max-content` columns, and
      overrides flex's default `flex-shrink: 1`, which would otherwise cram
      every item onto one line before wrapping. */
 	.dct-discrete--horizontal .dct-discrete__item {
@@ -277,7 +284,7 @@
 		min-width: 0;
 	}
 	/* Full, untruncated copy of the list, used only to measure row breaks
-     (kept in normal flow — see the pagination comment above). Collapsed to
+     (kept in normal flow - see the pagination comment above). Collapsed to
      zero height and clipped so it adds no visible space; `overflow: hidden`
      only clips painted content, so `offsetTop` on its children still
      reports real layout position. */

package/dist/layout/legend/DiscreteSwatchItem.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { LegendText } from './LegendText';
 	import DiscreteSymbolIcon from './DiscreteSymbolIcon.svelte';
 	import type { LegendItem } from '../../types/layout/legend';
 
 	let { item, color }: { item: LegendItem; color: string } = $props();
+	const cfg = $derived(getConfiguration());
 </script>
 
 <DiscreteSymbolIcon {item} {color} />
-<span class="dct-discrete__label">{item.label || item.name}</span>
+<span class="dct-discrete__label">{item.label || LegendText.of(item.name, cfg)}</span>
 
 <style>
 	.dct-discrete__label {

package/dist/layout/legend/DiscreteSymbolIcon.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
 	import type { LegendItem } from '../../types/layout/legend';
 	import type { LineStyle } from '../../types/plots/constants';
+	import { SymbolPath } from '../../utils/symbol';
 
 	/**
 	 * The series' symbol/line-style icon, shared by both discrete item looks
 	 * (`DiscreteSwatchItem` and `DiscreteBadgeItem`) so the two stay in sync.
-	 * `color` is caller-supplied rather than read off `item` — the swatch look
+	 * `color` is caller-supplied rather than read off `item` - the swatch look
 	 * fills it with the series color, the badge look with its own label color.
+	 * A shape draws as the plot's dot does, fitted to the icon.
 	 */
 	let { item, color }: { item: LegendItem; color: string } = $props();
 
+	const filled = $derived(item.filled ?? true);
+	const paint = $derived(
+		filled
+			? { fill: color }
+			: { fill: 'none', stroke: color, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' }
+	);
+
 	function dashArray(style?: LineStyle): string | undefined {
 		switch (style) {
 			case 'dashed':
@@ -25,15 +34,11 @@
 </script>
 
 <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
-	{#if item.symbol === 'circle'}
-		<circle cx="5" cy="5" r="4" fill={color} />
-	{:else if item.symbol === 'square'}
-		<rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
-	{:else if item.symbol === 'triangle'}
+	{#if item.symbol && item.symbol !== 'line'}
 		<path
-			d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
-			fill={color}
-			transform="translate(0,-1)"
+			d={SymbolPath.fitted(item.symbol, filled ? 8 : 7)}
+			transform={filled ? 'translate(1,1)' : 'translate(1.5,1.5)'}
+			{...paint}
 		/>
 	{:else if item.symbol === 'line'}
 		<line

package/dist/layout/legend/LegendChannels.d.ts

@@ -0,0 +1,21 @@
+import type { SymbolType } from '../../types/plots/constants';
+import type { LegendEntry, LegendPlot, LegendSource } from '../../types/layout/legend';
+/**
+ * What a plot's value channels - `color`, `opacity`, `r` and `symbol` - draw
+ * with, as legend entries: the plot's own (a heatmap's cells, a map's
+ * features) and every marker's, read the way the marker resolves them.
+ */
+export declare class LegendChannels {
+    #private;
+    static of(plot: LegendPlot): LegendEntry[];
+    /**
+     * How `dots` draw: filled unless they all draw as rings; in the one color
+     * they share (their fill, or their stroke as rings), if any; in the one
+     * shape they share, unless a `symbol` channel shapes them.
+     */
+    static look(dots: LegendSource[]): {
+        filled: boolean;
+        color?: string;
+        symbol?: SymbolType;
+    };
+}

package/dist/layout/legend/LegendChannels.js

@@ -0,0 +1,221 @@
+import { resolveAccessor } from '../../plots/utils/accessors';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { ChannelName } from '../../plots/utils/ChannelName';
+import { MarkerKinds } from '../../markers/MarkerKinds';
+import { ContinuousDomain } from '../../utils/ContinuousDomain';
+import { resolveColorScale } from '../../utils/color';
+import { resolveOpacityScale } from '../../utils/opacity';
+import { resolveSymbolScale } from '../../utils/symbol';
+/**
+ * What a plot's value channels - `color`, `opacity`, `r` and `symbol` - draw
+ * with, as legend entries: the plot's own (a heatmap's cells, a map's
+ * features) and every marker's, read the way the marker resolves them.
+ */
+export class LegendChannels {
+    static of(plot) {
+        const markers = plot.markers ?? [];
+        const taken = new Set((plot.resolvedSeries ?? []).map((s) => s.name));
+        return [
+            ...LegendChannels.#plotColor(plot),
+            ...markers.flatMap((marker) => LegendChannels.#markerColor(marker, taken)),
+            ...LegendChannels.#plotOpacity(plot),
+            ...markers.flatMap((marker) => LegendChannels.#markerOpacity(marker, plot)),
+            ...LegendChannels.#sizeEntries(plot),
+            ...LegendChannels.#symbolEntries(plot)
+        ];
+    }
+    /**
+     * How `dots` draw: filled unless they all draw as rings; in the one color
+     * they share (their fill, or their stroke as rings), if any; in the one
+     * shape they share, unless a `symbol` channel shapes them.
+     */
+    static look(dots) {
+        const filled = dots.length === 0 || dots.some((dot) => dot.styles?.dotFill !== 'none');
+        const shared = (values, keep) => {
+            const unique = values.filter(keep).filter((value, i, all) => all.indexOf(value) === i);
+            return unique.length === 1 && values.every(keep) ? unique[0] : undefined;
+        };
+        const color = shared(dots.map((dot) => (filled ? dot.styles?.dotFill : dot.styles?.dotStroke)), (value) => typeof value === 'string' && value !== 'none');
+        const symbol = dots.some((dot) => dot.symbol !== undefined)
+            ? undefined
+            : shared(dots.map((dot) => dot.styles?.dotSymbol), (value) => typeof value === 'string');
+        return { filled, ...(color ? { color } : {}), ...(symbol ? { symbol } : {}) };
+    }
+    /** What a channel is called on a legend: its field, or the name of the function that computes it. */
+    static #title(channel, property) {
+        return typeof channel === 'string' ? channel : ChannelName.of(channel, property);
+    }
+    /** `marker`'s rows read through `channel` (a field or a function), without the missing and non-finite ones. */
+    static #values(marker, channel) {
+        if (channel === undefined || channel === null || typeof channel === 'number')
+            return [];
+        const read = resolveAccessor(channel);
+        return (marker.data ?? [])
+            .map((row) => read(row))
+            .filter((v) => v != null && !(typeof v === 'number' && !Number.isFinite(v)));
+    }
+    /** The color a marker draws in when it has one color, or its series' own. */
+    static #colorOf(marker, plot) {
+        const own = LegendChannels.look([marker]).color;
+        if (own)
+            return own;
+        const fill = [marker.fill, marker.stroke].find((v) => typeof v === 'string' && v !== 'none');
+        if (fill)
+            return fill;
+        const name = marker.series ?? plot.resolvedSeries?.[0]?.name;
+        return name !== undefined && name !== 'default' ? plot.colorForSeries?.(name) : undefined;
+    }
+    /** The ramp a continuous color scale draws with, when its config sets one: a name or colors (a category map is not a ramp). */
+    static #ramp(scale) {
+        const scheme = scale?.scheme;
+        const isRamp = typeof scheme === 'string' ||
+            (Array.isArray(scheme) && scheme.every((c) => typeof c === 'string'));
+        return isRamp
+            ? {
+                scheme: scheme,
+                ...(scale?.pivot !== undefined ? { pivot: scale.pivot } : {})
+            }
+            : {};
+    }
+    static #scaleEntry(title, domain, scale) {
+        return {
+            type: 'scale',
+            channel: 'color',
+            ...(title ? { title } : {}),
+            min: domain[0],
+            max: domain[1],
+            ...LegendChannels.#ramp(scale)
+        };
+    }
+    /** The plot's own continuous color scale: a numeric `color` field, or a `colorDomain` the plot hands over. */
+    static #plotColor(plot) {
+        const source = plot.channels?.color?.source;
+        const scale = plot.scales?.color;
+        const domain = plot.colorDomain ?? scale?.domain;
+        if (source === undefined && !plot.colorDomain)
+            return [];
+        if (!Array.isArray(domain) || domain.length !== 2)
+            return [];
+        if (!domain.every((v) => typeof v === 'number' && Number.isFinite(v)))
+            return [];
+        return [
+            LegendChannels.#scaleEntry(typeof source === 'string' ? source : undefined, domain, scale)
+        ];
+    }
+    /**
+     * A marker's `color` channel: a continuous scale for numbers; for
+     * categories, one item each in the color the marker draws it, unless a
+     * series of the plot already has that name.
+     */
+    static #markerColor(marker, taken) {
+        const values = LegendChannels.#values(marker, marker.color);
+        if (values.length === 0)
+            return [];
+        const title = LegendChannels.#title(marker.color, 'color');
+        const scale = marker.scales?.color;
+        if (values.every((v) => Number.isFinite(Number(v)))) {
+            const domain = ContinuousDomain.build(scale?.domain, values.map(Number));
+            return domain ? [LegendChannels.#scaleEntry(title, domain, scale)] : [];
+        }
+        const categories = [...new Set(values.map(String))];
+        const colorOf = resolveColorScale(scale, categories, getConfiguration().palette);
+        const mark = MarkerKinds.of(marker.type)?.legendSymbol;
+        return categories
+            .filter((name) => !taken.has(name))
+            .map((name) => ({ type: 'mark', name, color: colorOf(name), ...(mark ? { mark } : {}) }));
+    }
+    static #opacityEntry(title, domain, scale, color) {
+        if (scale?.range !== undefined && !Array.isArray(scale.range))
+            return [];
+        const read = resolveOpacityScale(scale, domain, getConfiguration().continuous.opacityRange);
+        return [
+            {
+                type: 'opacity',
+                channel: 'opacity',
+                ...(title ? { title } : {}),
+                min: domain[0],
+                max: domain[1],
+                opacityMin: read(domain[0]),
+                opacityMax: read(domain[1]),
+                ...(color ? { color } : {})
+            }
+        ];
+    }
+    /** The plot's own numeric `opacity` channel, over the `opacityDomain` it hands over. */
+    static #plotOpacity(plot) {
+        if (!plot.opacityDomain)
+            return [];
+        const source = plot.channels?.opacity?.source;
+        const name = plot.resolvedSeries?.[0]?.name;
+        const color = name !== undefined && name !== 'default' ? plot.colorForSeries?.(name) : undefined;
+        return LegendChannels.#opacityEntry(typeof source === 'string' ? source : undefined, plot.opacityDomain, plot.scales?.opacity, color);
+    }
+    /** A marker's numeric `opacity` channel, in the color the marker draws. */
+    static #markerOpacity(marker, plot) {
+        const values = LegendChannels.#values(marker, marker.opacity);
+        if (values.length === 0 || !values.every((v) => Number.isFinite(Number(v))))
+            return [];
+        const scale = marker.scales?.opacity;
+        const domain = ContinuousDomain.build(scale?.domain, values.map(Number));
+        if (!domain)
+            return [];
+        return LegendChannels.#opacityEntry(LegendChannels.#title(marker.opacity, 'opacity'), domain, scale, LegendChannels.#colorOf(marker, plot));
+    }
+    /**
+     * The size scale of the markers that size by a value (`r` as a field or
+     * function), as svelteplot draws it: a square-root scale from 0 to the
+     * largest value onto 0-10 px, unless `scales.r` pins either end. The
+     * markers' own color when they share one, filled unless they all draw as
+     * rings.
+     */
+    static #sizeEntries(plot) {
+        const sized = (plot.markers ?? []).filter((marker) => marker.r !== undefined && typeof marker.r !== 'number');
+        if (sized.length === 0)
+            return [];
+        const values = sized.flatMap((marker) => LegendChannels.#values(marker, marker.r).map(Number).filter(Number.isFinite));
+        if (values.length === 0)
+            return [];
+        const { filled, color, symbol } = LegendChannels.look(sized);
+        const source = plot.channels?.r?.source ?? LegendChannels.#title(sized[0].r, 'r');
+        return [
+            {
+                type: 'size',
+                channel: 'r',
+                ...(typeof source === 'string' ? { title: source } : {}),
+                domain: plot.scales?.r?.domain ?? [0, Math.max(...values)],
+                range: plot.scales?.r?.range ?? [0, 10],
+                ...(color ? { color } : {}),
+                filled,
+                ...(symbol ? { symbol } : {})
+            }
+        ];
+    }
+    /**
+     * The shapes the markers' `symbol` channel draws each category as, from
+     * `scales.symbol` or the theme's own cycle. Colored and filled as the size
+     * scale is.
+     */
+    static #symbolEntries(plot) {
+        const shaped = (plot.markers ?? []).filter((marker) => marker.symbol !== undefined);
+        if (shaped.length === 0)
+            return [];
+        const config = shaped[0].scales?.symbol;
+        const domain = (config?.domain ??
+            shaped.flatMap((marker) => LegendChannels.#values(marker, marker.symbol).map(String))).filter((value, i, all) => all.indexOf(value) === i);
+        if (domain.length === 0)
+            return [];
+        const shapeOf = resolveSymbolScale(config, domain, getConfiguration().symbols);
+        const { filled, color } = LegendChannels.look(shaped);
+        const source = plot.channels?.symbol?.source ?? LegendChannels.#title(shaped[0].symbol, 'symbol');
+        return [
+            {
+                type: 'symbol',
+                channel: 'symbol',
+                ...(typeof source === 'string' ? { title: source } : {}),
+                items: domain.map((name) => ({ name, symbol: shapeOf(name) })),
+                ...(color ? { color } : {}),
+                filled
+            }
+        ];
+    }
+}