@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/layout/legend/LegendLayout.svelte

@@ -1,52 +1,58 @@
 <script lang="ts">
-  import type { LegendItemsLayout, LegendSection } from '../../types/layout/legend';
-  import DiscreteSection from './DiscreteSection.svelte';
-  import ContinuousSection from './ContinuousSection.svelte';
+	import type { LegendItemsLayout, LegendSection } from '../../types/layout/legend';
+	import DiscreteSection from './DiscreteSection.svelte';
+	import ContinuousSection from './ContinuousSection.svelte';
+	import SizeSection from './SizeSection.svelte';
+	import SymbolSection from './SymbolSection.svelte';
 
-  /**
-   * Renders one or more legend sections side by side, dispatching each to the
-   * matching section renderer. Discrete and continuous sections can be mixed.
-   * A lone discrete section's items default to horizontal flow; vertical once
-   * a second section joins. A section's own `layout` always wins.
-   */
-  let { sections }: { sections: LegendSection[] } = $props();
-  const defaultItemsLayout = $derived<LegendItemsLayout>(
-    sections.length === 1 ? { type: 'horizontal' } : { type: 'vertical' }
-  );
+	/**
+	 * Renders one or more legend sections side by side, dispatching each to the
+	 * matching section renderer. Discrete, continuous, size and symbol sections can be mixed.
+	 * A lone discrete section's items default to horizontal flow; vertical once
+	 * a second section joins. A section's own `layout` always wins.
+	 */
+	let { sections }: { sections: LegendSection[] } = $props();
+	const defaultItemsLayout = $derived<LegendItemsLayout>(
+		sections.length === 1 ? { type: 'horizontal' } : { type: 'vertical' }
+	);
 </script>
 
 <div class="dct-legend">
-  {#each sections as section, i (section.title ?? i)}
-    <div class="dct-legend__section">
-      {#if section.title}
-        <div class="dct-legend__title">{section.title}</div>
-      {/if}
-      {#if section.type === 'discrete'}
-        <DiscreteSection {section} {defaultItemsLayout} />
-      {:else if section.type === 'continuous'}
-        <ContinuousSection {section} />
-      {/if}
-    </div>
-  {/each}
+	{#each sections as section, i (section.title ?? i)}
+		<div class="dct-legend__section">
+			{#if section.title}
+				<div class="dct-legend__title">{section.title}</div>
+			{/if}
+			{#if section.type === 'discrete'}
+				<DiscreteSection {section} {defaultItemsLayout} />
+			{:else if section.type === 'continuous'}
+				<ContinuousSection {section} />
+			{:else if section.type === 'size'}
+				<SizeSection {section} />
+			{:else if section.type === 'symbol'}
+				<SymbolSection {section} {defaultItemsLayout} />
+			{/if}
+		</div>
+	{/each}
 </div>
 
 <style>
-  .dct-legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--dct-legend-gap, 0.5rem 2rem);
-    align-items: flex-start;
-    font-family: var(--dct-legend-font, inherit);
-    color: var(--dct-legend-color, inherit);
-  }
-  .dct-legend__section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    min-width: 0;
-  }
-  .dct-legend__title {
-    font-size: var(--dct-legend-title-size, 0.875rem);
-    font-weight: var(--dct-legend-title-weight, 500);
-  }
+	.dct-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--dct-legend-gap, 0.5rem 2rem);
+		align-items: flex-start;
+		font-family: var(--dct-legend-font, inherit);
+		color: var(--dct-legend-color, inherit);
+	}
+	.dct-legend__section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+	.dct-legend__title {
+		font-size: var(--dct-legend-title-size, 0.875rem);
+		font-weight: var(--dct-legend-title-weight, 500);
+	}
 </style>

package/dist/layout/legend/LegendState.svelte.d.ts

@@ -0,0 +1,84 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { LegendDisabledAction, LegendEntry, LegendExtension, LegendPlot, LegendRange, LegendSection } from '../../types/layout/legend';
+/**
+ * A figure's legend, shared by every plot and legend under it: what the
+ * reader turned off - each series' {@link LegendDisabledAction}, and the
+ * range a continuous section narrows to - and what the plots draw, as each
+ * registers it ({@link register}): its series, their colors and marks, and
+ * its continuous scales. From those, {@link sections} reads as a legend of
+ * its own, for a figure that sets none.
+ */
+export declare class LegendState {
+    #private;
+    /** Series name → what turning it off does. A series in here is off. */
+    readonly disabled: SvelteMap<string, LegendDisabledAction>;
+    /** The narrowed range of the first interactive continuous section, or `null`. */
+    range: LegendRange | null;
+    /** The enclosing figure's legend, or `null` outside one. Call during component init. */
+    static current(): LegendState | null;
+    /** A new legend, shared with everything below. Call during component init. */
+    static provide(): LegendState;
+    /** The enclosing figure's legend, or a private one for a legend drawn outside any. Call during component init. */
+    static ensure(): LegendState;
+    /** Whether `value` lies within `range`; a missing value always does. */
+    static inRange(value: number | null | undefined, range: {
+        min: number;
+        max: number;
+    }): boolean;
+    /** Whether `series` is turned off. */
+    isOff(series: string): boolean;
+    /** What turning `series` off does, while it is off. */
+    actionOf(series: string): LegendDisabledAction | undefined;
+    turnOff(series: string, action: LegendDisabledAction): void;
+    turnOn(series: string): void;
+    /** Turns `series` off with `action`, or back on. */
+    toggle(series: string, action: LegendDisabledAction): void;
+    /** Whether any series is off with `'omit'` - which changes the plot's own rows, not just how they draw. */
+    get omits(): boolean;
+    /** `series` without those turned off with `'omit'`. */
+    withoutOmitted<S extends {
+        name: string;
+    }>(series: S[]): S[];
+    /**
+     * Records what the plot `source` draws, replacing what it recorded before.
+     * A series or mark that is off keeps its entry, in its place, even when
+     * the plot no longer draws it (an `'omit'`): the legend must still list it
+     * to turn it back on.
+     */
+    register(source: unknown, entries: LegendEntry[]): void;
+    unregister(source: unknown): void;
+    /**
+     * Everything the plots draw: series first, then what names itself, then
+     * scales - each once, however many plots (or facet panels) draw it: a
+     * series or mark by its name, a size or symbol scale by its title.
+     */
+    get entries(): LegendEntry[];
+    /**
+     * The legend {@link entries} read as, with `extension` added: one discrete
+     * section of every series and every segment or marker that names itself -
+     * a dot as a circle, a line as its stroke, anything else as a swatch - with
+     * `extension.items` after them; a continuous section per color scale, a
+     * size section per dot size scale and a symbol section per dot shape
+     * scale, each titled by its field name (see `legend.pretty`);
+     * then `extension.sections`. A lone series, with nothing else to tell it
+     * from, shows no discrete section; with other sections beside it, the
+     * discrete one is titled `legend.seriesTitle`.
+     */
+    sections(extension?: LegendExtension): LegendSection[];
+    /**
+     * The author's own `sections`, each discrete item that names something the
+     * plots draw - a series, or a segment or marker that names itself - in its
+     * color, unless the item sets one. Any other item keeps its own color, or
+     * the palette's in item order.
+     */
+    colorize(sections: LegendSection[]): LegendSection[];
+    /**
+     * What a plot draws, as legend entries: each of its series, by name, in
+     * its color, drawn as the plot's own mark - the first of its markers a
+     * legend can show, as dots in the shape they share - then each of its
+     * segments and markers that names itself (its `legend`), in its own color
+     * and mark, then what the plot's and its markers' `color`, `opacity`, `r`
+     * and `symbol` channels draw with.
+     */
+    static entriesOf(plot: LegendPlot): LegendEntry[];
+}

package/dist/layout/legend/LegendState.svelte.js

@@ -0,0 +1,333 @@
+import { getContext, setContext, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { MarkerKinds } from '../../markers/MarkerKinds';
+import { LegendChannels } from './LegendChannels';
+import { LegendText } from './LegendText';
+const LEGEND_KEY = Symbol('dct-legend');
+/**
+ * A figure's legend, shared by every plot and legend under it: what the
+ * reader turned off - each series' {@link LegendDisabledAction}, and the
+ * range a continuous section narrows to - and what the plots draw, as each
+ * registers it ({@link register}): its series, their colors and marks, and
+ * its continuous scales. From those, {@link sections} reads as a legend of
+ * its own, for a figure that sets none.
+ */
+export class LegendState {
+    /** Series name → what turning it off does. A series in here is off. */
+    disabled = new SvelteMap();
+    /** The narrowed range of the first interactive continuous section, or `null`. */
+    range = $state(null);
+    #sources = new SvelteMap();
+    /** The enclosing figure's legend, or `null` outside one. Call during component init. */
+    static current() {
+        return getContext(LEGEND_KEY) ?? null;
+    }
+    /** A new legend, shared with everything below. Call during component init. */
+    static provide() {
+        const legend = new LegendState();
+        setContext(LEGEND_KEY, legend);
+        return legend;
+    }
+    /** The enclosing figure's legend, or a private one for a legend drawn outside any. Call during component init. */
+    static ensure() {
+        return LegendState.current() ?? new LegendState();
+    }
+    /** Whether `value` lies within `range`; a missing value always does. */
+    static inRange(value, range) {
+        return value == null || (value >= range.min && value <= range.max);
+    }
+    /** Whether `series` is turned off. */
+    isOff(series) {
+        return this.disabled.has(series);
+    }
+    /** What turning `series` off does, while it is off. */
+    actionOf(series) {
+        return this.disabled.get(series);
+    }
+    turnOff(series, action) {
+        this.disabled.set(series, action);
+    }
+    turnOn(series) {
+        this.disabled.delete(series);
+    }
+    /** Turns `series` off with `action`, or back on. */
+    toggle(series, action) {
+        if (this.isOff(series))
+            this.turnOn(series);
+        else
+            this.turnOff(series, action);
+    }
+    /** Whether any series is off with `'omit'` - which changes the plot's own rows, not just how they draw. */
+    get omits() {
+        return [...this.disabled.values()].some((action) => action.mode === 'omit');
+    }
+    /** `series` without those turned off with `'omit'`. */
+    withoutOmitted(series) {
+        return series.filter((s) => this.actionOf(s.name)?.mode !== 'omit');
+    }
+    /**
+     * Records what the plot `source` draws, replacing what it recorded before.
+     * A series or mark that is off keeps its entry, in its place, even when
+     * the plot no longer draws it (an `'omit'`): the legend must still list it
+     * to turn it back on.
+     */
+    register(source, entries) {
+        untrack(() => {
+            const known = this.#sources.get(source);
+            const next = known ? this.#keepingOff(known, entries) : entries;
+            if (known && JSON.stringify(known) === JSON.stringify(next))
+                return;
+            this.#sources.set(source, next);
+        });
+    }
+    /** `entries` in the order `known` had them, with the off series and marks `entries` lacks kept from `known`. */
+    #keepingOff(known, entries) {
+        const key = (entry) => entry.type === 'series' || entry.type === 'mark' ? `${entry.type}:${entry.name}` : undefined;
+        const drawn = (entry) => entries.find((other) => key(other) === key(entry));
+        const isKept = (entry) => key(entry) !== undefined &&
+            !drawn(entry) &&
+            this.disabled.has(entry.name);
+        if (!known.some(isKept))
+            return entries;
+        const ordered = known.flatMap((entry) => {
+            const current = isKept(entry) ? entry : drawn(entry);
+            return current ? [current] : [];
+        });
+        return [...ordered, ...entries.filter((entry) => !ordered.includes(entry))];
+    }
+    unregister(source) {
+        this.#sources.delete(source);
+    }
+    /**
+     * Everything the plots draw: series first, then what names itself, then
+     * scales - each once, however many plots (or facet panels) draw it: a
+     * series or mark by its name, a size or symbol scale by its title.
+     */
+    get entries() {
+        const all = [...this.#sources.values()].flat();
+        const keyOf = (entry) => entry.type === 'series' || entry.type === 'mark'
+            ? `${entry.type}:${entry.name}`
+            : entry.type === 'size' || entry.type === 'symbol'
+                ? `${entry.type}:${entry.title ?? ''}`
+                : entry.type === 'scale' || entry.type === 'opacity'
+                    ? JSON.stringify(entry)
+                    : undefined;
+        const once = (type) => all.filter((entry, i) => entry.type === type &&
+            (keyOf(entry) === undefined ||
+                all.findIndex((other) => keyOf(other) === keyOf(entry)) === i));
+        return [
+            ...once('series'),
+            ...once('mark'),
+            ...once('scale'),
+            ...once('opacity'),
+            ...once('size'),
+            ...once('symbol')
+        ];
+    }
+    /**
+     * The legend {@link entries} read as, with `extension` added: one discrete
+     * section of every series and every segment or marker that names itself -
+     * a dot as a circle, a line as its stroke, anything else as a swatch - with
+     * `extension.items` after them; a continuous section per color scale, a
+     * size section per dot size scale and a symbol section per dot shape
+     * scale, each titled by its field name (see `legend.pretty`);
+     * then `extension.sections`. A lone series, with nothing else to tell it
+     * from, shows no discrete section; with other sections beside it, the
+     * discrete one is titled `legend.seriesTitle`.
+     */
+    sections(extension) {
+        const entries = this.entries;
+        const cfg = getConfiguration();
+        const format = (title) => LegendText.of(title, cfg);
+        const adjust = (channel, title) => LegendState.#adjustment(extension?.[channel], title, format);
+        const items = [];
+        const ramps = [];
+        let interactive = false;
+        for (const entry of entries) {
+            if (entry.type === 'size') {
+                const { title, domain, range, color, filled, symbol } = entry;
+                ramps.push({
+                    type: 'size',
+                    title: title && format(title),
+                    domain,
+                    range,
+                    color,
+                    filled,
+                    ...(symbol ? { symbol } : {}),
+                    ...adjust('size', title)
+                });
+            }
+            else if (entry.type === 'symbol') {
+                const { title, items: shapes, color, filled } = entry;
+                ramps.push({
+                    type: 'symbol',
+                    title: title && format(title),
+                    items: shapes,
+                    color,
+                    filled,
+                    ...adjust('symbol', title)
+                });
+            }
+            else if (entry.type === 'opacity') {
+                const { title, min, max, opacityMin, opacityMax, color } = entry;
+                ramps.push({
+                    type: 'continuous',
+                    title: title && format(title),
+                    min,
+                    max,
+                    opacity: [opacityMin, opacityMax],
+                    ...(color ? { colorMin: color } : {}),
+                    ...adjust('opacity', title)
+                });
+            }
+            else if (entry.type === 'scale') {
+                const { title, min, max, colorMin, colorMax, scheme, pivot } = entry;
+                const section = {
+                    type: 'continuous',
+                    title: title && format(title),
+                    min,
+                    max,
+                    colorMin,
+                    colorMax,
+                    ...(scheme !== undefined ? { scheme } : {}),
+                    ...(pivot !== undefined ? { pivot } : {}),
+                    ...adjust('color', title)
+                };
+                // The legend holds one range, so only the first interactive ramp drives it.
+                if (section.interactive?.enabled) {
+                    if (interactive)
+                        section.interactive = { ...section.interactive, enabled: false };
+                    interactive = true;
+                }
+                ramps.push(section);
+            }
+            else {
+                items.push(LegendState.#itemOf(entry));
+            }
+        }
+        items.push(...(extension?.items ?? []));
+        const named = entries.some((entry) => entry.type === 'mark') || !!extension?.items?.length;
+        const others = [...ramps, ...(extension?.sections ?? [])];
+        const title = cfg.legend.seriesTitle.enabled && others.length > 0;
+        const discrete = items.length > 1 || (named && items.length > 0)
+            ? [
+                {
+                    type: 'discrete',
+                    ...(title ? { title: cfg.legend.seriesTitle.text } : {}),
+                    items,
+                    ...LegendState.#adjustment(extension?.color, undefined, format),
+                    ...extension?.series
+                }
+            ]
+            : [];
+        return [...discrete, ...others];
+    }
+    /** What `override` changes in the section titled `title`: the entries that match it, in order, merged. */
+    static #adjustment(override, title, format) {
+        if (!override)
+            return {};
+        const list = Array.isArray(override) ? override : [override];
+        const merged = {};
+        for (const { match, ...config } of list) {
+            const matches = match === undefined ||
+                (title !== undefined && (match === title || match === format(title)));
+            if (matches)
+                Object.assign(merged, config);
+        }
+        return merged;
+    }
+    /**
+     * The author's own `sections`, each discrete item that names something the
+     * plots draw - a series, or a segment or marker that names itself - in its
+     * color, unless the item sets one. Any other item keeps its own color, or
+     * the palette's in item order.
+     */
+    colorize(sections) {
+        const colorOf = (name) => {
+            const entry = this.entries.find((e) => (e.type === 'series' || e.type === 'mark') && e.name === name);
+            return entry && (entry.type === 'series' || entry.type === 'mark') ? entry.color : undefined;
+        };
+        return sections.map((section) => section.type !== 'discrete'
+            ? section
+            : {
+                ...section,
+                items: section.items.map((item) => {
+                    const drawn = item.color ? undefined : colorOf(item.name);
+                    return drawn ? { ...item, color: drawn } : item;
+                })
+            });
+    }
+    /**
+     * What a plot draws, as legend entries: each of its series, by name, in
+     * its color, drawn as the plot's own mark - the first of its markers a
+     * legend can show, as dots in the shape they share - then each of its
+     * segments and markers that names itself (its `legend`), in its own color
+     * and mark, then what the plot's and its markers' `color`, `opacity`, `r`
+     * and `symbol` channels draw with.
+     */
+    static entriesOf(plot) {
+        const color = (name) => name !== undefined && name !== 'default' ? plot.colorForSeries?.(name) : undefined;
+        const mark = plot.markers
+            ?.map((marker) => MarkerKinds.of(marker.type)?.legendSymbol)
+            .find((kind) => kind !== undefined);
+        const dots = LegendChannels.look((plot.markers ?? []).filter((marker) => marker.type === 'dot' && !marker.legend));
+        const series = (plot.resolvedSeries ?? []).map((s) => ({
+            type: 'series',
+            name: s.name,
+            color: color(s.name),
+            ...(mark ? { mark } : {}),
+            ...(mark === 'dot' && dots.symbol ? { symbol: dots.symbol } : {}),
+            ...(mark === 'dot' && !dots.filled ? { filled: false } : {})
+        }));
+        const segments = Object.entries(plot.segments ?? {}).flatMap(([name, list]) => (list ?? []).flatMap((segment) => LegendState.#markEntry(segment, mark, color(name))));
+        const markers = (plot.markers ?? []).flatMap((marker) => LegendState.#markEntry(marker, MarkerKinds.of(marker.type)?.legendSymbol, color(marker.series)));
+        return [...series, ...segments, ...markers, ...LegendChannels.of(plot)];
+    }
+    /** A segment's or marker's own entry, when it names itself on the legend. */
+    static #markEntry(source, mark, fallbackColor) {
+        const legend = source.legend;
+        if (!legend)
+            return [];
+        const own = typeof legend === 'string' ? { label: legend } : legend;
+        const styles = source.styles ?? {};
+        const drawn = [
+            styles.fill,
+            styles.stroke,
+            styles.dotFill,
+            styles.dotStroke,
+            source.fill,
+            source.stroke
+        ].find((value) => typeof value === 'string' && value !== 'none');
+        const dashed = styles.strokeDasharray !== undefined && styles.strokeDasharray !== 'none';
+        const dot = mark === 'dot' ? LegendChannels.look([source]) : undefined;
+        const symbol = own.symbol ?? dot?.symbol;
+        const filled = own.filled ?? dot?.filled;
+        return [
+            {
+                type: 'mark',
+                name: own.label,
+                label: own.label,
+                color: own.color ?? drawn ?? fallbackColor,
+                ...(mark ? { mark } : {}),
+                ...(symbol ? { symbol } : {}),
+                ...(filled === false ? { filled } : {}),
+                ...(own.lineStyle || dashed ? { lineStyle: own.lineStyle ?? 'dashed' } : {})
+            }
+        ];
+    }
+    /** A series or mark entry as a discrete legend item. */
+    static #itemOf(entry) {
+        return {
+            name: entry.name,
+            ...(entry.label ? { label: entry.label } : {}),
+            color: entry.color,
+            ...(entry.filled === false ? { filled: false } : {}),
+            ...(entry.symbol || entry.mark === 'dot'
+                ? { symbol: entry.symbol ?? 'circle' }
+                : entry.mark === 'line'
+                    ? { symbol: 'line', lineStyle: entry.lineStyle ?? 'solid' }
+                    : {})
+        };
+    }
+}

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

@@ -0,0 +1,12 @@
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+/** How a legend shows the names it reads off the data. */
+export declare class LegendText {
+    /** `name` as the legend shows it: as words, unless `legend.pretty` is off. */
+    static of(name: string, cfg: Pick<PlotStylesConfig, 'legend'>): string;
+    /**
+     * A field or category name as words: `_` and camel-case humps split it,
+     * all lowercase but the first letter - `gdp_per_capita` and `gdpPerCapita`
+     * both read "Gdp per capita". All-caps words (acronyms) keep their case.
+     */
+    static humanize(name: string): string;
+}

package/dist/layout/legend/LegendText.js

@@ -0,0 +1,22 @@
+/** How a legend shows the names it reads off the data. */
+export class LegendText {
+    /** `name` as the legend shows it: as words, unless `legend.pretty` is off. */
+    static of(name, cfg) {
+        return cfg.legend.pretty ? LegendText.humanize(name) : name;
+    }
+    /**
+     * A field or category name as words: `_` and camel-case humps split it,
+     * all lowercase but the first letter - `gdp_per_capita` and `gdpPerCapita`
+     * both read "Gdp per capita". All-caps words (acronyms) keep their case.
+     */
+    static humanize(name) {
+        const words = name
+            .replace(/_+/g, ' ')
+            .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+            .trim()
+            .split(/\s+/)
+            .map((word) => (word === word.toUpperCase() ? word : word.toLowerCase()))
+            .join(' ');
+        return words.charAt(0).toUpperCase() + words.slice(1);
+    }
+}

package/dist/layout/legend/SizeSection.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { ticks } from 'd3-array';
+	import type { SizeLegendSection } from '../../types/layout/legend';
+	import { SymbolPath } from '../../utils/symbol';
+	import { AxisNumberFormat } from './AxisNumberFormat';
+	import { getConfiguration } from '../../configuration/config.svelte';
+
+	/**
+	 * A size legend: a row of dots, each the radius one value draws at - its
+	 * `domain` onto `range` (px) on a square-root scale, as a plot's `r`
+	 * channel sizes its dots - bottom-aligned, with the value under each,
+	 * spaced by whichever is wider. Values read as the axes write theirs.
+	 * Filled, or drawn as rings, in the section's color.
+	 */
+	let { section }: { section: SizeLegendSection } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const fmt = $derived(section.format ?? AxisNumberFormat.of(section.domain, cfg));
+	/** A value's radius: `domain` onto `range` on a square-root scale. */
+	function radius(value: number): number {
+		const [d0, d1] = section.domain.map(Math.sqrt);
+		const [r0, r1] = section.range;
+		return r0 + ((r1 - r0) * (Math.sqrt(value) - d0)) / (d1 - d0 || 1);
+	}
+
+	/** A few round values across the domain, above zero: at most four. */
+	const values = $derived.by(() => {
+		if (section.values) return section.values;
+		const [lo, hi] = section.domain;
+		const round = ticks(lo, hi, 8).filter((v) => v > 0);
+		const step = Math.ceil(round.length / 4);
+		return round.filter((_, i) => (round.length - 1 - i) % step === 0);
+	});
+
+	const dots = $derived(values.map((value) => ({ value, r: Math.max(1, radius(value)) })));
+	const maxR = $derived(Math.max(1, ...dots.map((dot) => dot.r)));
+	const color = $derived(section.color ?? 'currentColor');
+	const filled = $derived(section.filled ?? true);
+	const symbol = $derived(section.symbol ?? 'circle');
+	const paint = $derived({
+		fill: filled ? color : 'none',
+		'fill-opacity': filled ? 0.85 : undefined,
+		stroke: color,
+		'stroke-width': 1
+	});
+</script>
+
+<div class="dct-size" role="img" aria-label={section.title ?? 'Size'}>
+	{#each dots as dot (dot.value)}
+		<div class="dct-size__item">
+			<svg width={2 * dot.r + 2} height={2 * maxR + 2} style="overflow: visible">
+				{#if symbol === 'circle'}
+					<circle cx={dot.r + 1} cy={1 + 2 * maxR - dot.r} r={dot.r} {...paint} />
+				{:else}
+					<path
+						d={SymbolPath.of(symbol, dot.r)}
+						transform="translate({dot.r + 1},{1 + 2 * maxR - dot.r})"
+						{...paint}
+					/>
+				{/if}
+			</svg>
+			<span class="dct-size__label">{fmt(dot.value)}</span>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.dct-size {
+		display: flex;
+		align-items: flex-end;
+		gap: var(--dct-legend-size-gap, 12px);
+	}
+	.dct-size__item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.125rem;
+	}
+	.dct-size__label {
+		font-size: var(--dct-continuous-label-size, 0.875rem);
+		line-height: 1.2;
+		white-space: nowrap;
+	}
+</style>

package/dist/layout/legend/SizeSection.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SizeLegendSection } from '../../types/layout/legend';
+type $$ComponentProps = {
+    section: SizeLegendSection;
+};
+declare const SizeSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type SizeSection = ReturnType<typeof SizeSection>;
+export default SizeSection;