@fundar/data-chart-telling 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.6.0] - 2026-11-02
+
+### Added
+
+- Every legend section takes `enabled`, on unless set: `legend: { series: { enabled: false } }` leaves the series section off the automatic legend, and `color`, `opacity`, `r` and `symbol` (with a `match`, to pick one of several) do the same for theirs. A section added through `legend.sections` takes it too.
+
+## [1.5.0] - 2026-10-31
+
+### Changed
+
+- Zooming or panning a map no longer re-projects every feature on each wheel tick or drag move. The features already drawn are carried to the new view with an SVG transform and the projection is moved, and the features redrawn, once the view has been still for 120 ms. A map of 6,000 features goes from about 340 ms to about 50 ms per wheel tick. Strokes and dots are briefly scaled while the view moves.
+
+### Fixed
+
+- A series' catch-all segments that name different facets, or a facet next to the unscoped one, no longer log the warning for two catch-alls: they do not compete.
+
 ## [1.4.0] - 2026-10-30
 
 ### Added

package/dist/layout/coordinates/ProjectionZoom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, setContext, type Snippet } from 'svelte';
+	import { getContext, setContext, untrack, type Snippet } from 'svelte';
 	import { ZoomedProjection } from './ZoomedProjection';
 	import type { GeoZoomTransform } from './zoom.svelte';
 	import type { StreamingProjection } from '../../plots/utils/tiles';
@@ -10,31 +10,65 @@
 	 * positions, while dots, text and strokes keep their size. Works by handing
 	 * the marks below a view of svelteplot's plot state whose `scales.projection`
 	 * is the moved one.
+	 *
+	 * Re-projecting every mark is the cost of that, and a map with thousands of
+	 * features pays it on each wheel tick. So while the view is moving, the marks
+	 * already drawn are carried to it with an SVG transform (cheap, if briefly
+	 * coarser: strokes and dots scale with it), and the projection is only moved,
+	 * and the marks redrawn, once the view has been still for `settleDelay` ms.
 	 */
 	let {
 		inner,
 		outer,
+		settleDelay = 120,
 		children
-	}: { inner: GeoZoomTransform; outer: GeoZoomTransform; children: Snippet } = $props();
+	}: {
+		inner: GeoZoomTransform;
+		outer: GeoZoomTransform;
+		/** Milliseconds the view must be still before the marks are re-projected */
+		settleDelay?: number;
+		children: Snippet;
+	} = $props();
+
+	const same = (a: GeoZoomTransform, b: GeoZoomTransform) =>
+		a.k === b.k && a.x === b.x && a.y === b.y;
+
+	// The view the marks are drawn for; the first one is the one they mount with.
+	let settled = $state.raw(untrack(() => ({ inner: { ...inner }, outer: { ...outer } })));
+
+	$effect(() => {
+		const next = { inner: { ...inner }, outer: { ...outer } };
+		if (same(next.inner, settled.inner) && same(next.outer, settled.outer)) return;
+		const timer = setTimeout(() => (settled = next), settleDelay);
+		return () => clearTimeout(timer);
+	});
+
+	const carry = $derived(
+		ZoomedProjection.between(
+			ZoomedProjection.compose(settled.inner, settled.outer),
+			ZoomedProjection.compose(inner, outer)
+		)
+	);
+	const carrying = $derived(carry.k !== 1 || carry.x !== 0 || carry.y !== 0);
 
 	type Scales = { projection?: StreamingProjection & { aspectRatio?: number } } | undefined;
 	type PlotState = { scales: Scales; publicState: object };
 	type PlotContext = { getPlotState: () => PlotState } & Record<string, unknown>;
 
 	const context = getContext<PlotContext>('svelteplot');
-	const state = context.getPlotState();
+	const plot = context.getPlotState();
 
 	const scales = $derived.by((): Scales => {
-		const own = state.scales;
+		const own = plot.scales;
 		return own?.projection
-			? { ...own, projection: ZoomedProjection.of(own.projection, inner, outer) }
+			? { ...own, projection: ZoomedProjection.of(own.projection, settled.inner, settled.outer) }
 			: own;
 	});
 
-	const publicState = new Proxy(state.publicState, {
+	const publicState = new Proxy(plot.publicState, {
 		get: (target, key) => (key === 'scales' ? scales : Reflect.get(target, key, target))
 	});
-	const movedState = new Proxy(state, {
+	const movedState = new Proxy(plot, {
 		get: (target, key) => {
 			if (key === 'scales') return scales;
 			if (key === 'publicState') return publicState;
@@ -45,4 +79,6 @@
 	setContext('svelteplot', { ...context, getPlotState: () => movedState });
 </script>
 
-{@render children()}
+<g transform={carrying ? `translate(${carry.x} ${carry.y}) scale(${carry.k})` : undefined}>
+	{@render children()}
+</g>

package/dist/layout/coordinates/ProjectionZoom.svelte.d.ts

@@ -3,6 +3,8 @@ import type { GeoZoomTransform } from './zoom.svelte';
 type $$ComponentProps = {
     inner: GeoZoomTransform;
     outer: GeoZoomTransform;
+    /** Milliseconds the view must be still before the marks are re-projected */
+    settleDelay?: number;
     children: Snippet;
 };
 declare const ProjectionZoom: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/layout/coordinates/ZoomedProjection.d.ts

@@ -2,6 +2,10 @@ import type { GeoZoomTransform } from './zoom.svelte';
 import type { StreamingProjection } from '../../plots/utils/tiles';
 /** A fitted projection with a pan and scale applied to where it puts things, so positions move and zoom while what is drawn at them keeps its size. */
 export declare class ZoomedProjection {
+    /** `outer` over `inner` as one pan and scale of the pixels. */
+    static compose(inner: GeoZoomTransform, outer: GeoZoomTransform): GeoZoomTransform;
+    /** The pan and scale that carries what is drawn through `settled` to where `live` puts it. */
+    static between(settled: GeoZoomTransform, live: GeoZoomTransform): GeoZoomTransform;
     /** `projection`, then `outer` over `inner` (each a pan and scale) as one move in pixels. */
     static of(projection: StreamingProjection & {
         aspectRatio?: number;

package/dist/layout/coordinates/ZoomedProjection.js

@@ -1,11 +1,18 @@
 import { geoTransform } from 'd3-geo';
 /** A fitted projection with a pan and scale applied to where it puts things, so positions move and zoom while what is drawn at them keeps its size. */
 export class ZoomedProjection {
+    /** `outer` over `inner` as one pan and scale of the pixels. */
+    static compose(inner, outer) {
+        return { k: inner.k * outer.k, x: outer.k * inner.x + outer.x, y: outer.k * inner.y + outer.y };
+    }
+    /** The pan and scale that carries what is drawn through `settled` to where `live` puts it. */
+    static between(settled, live) {
+        const k = live.k / settled.k;
+        return { k, x: live.x - settled.x * k, y: live.y - settled.y * k };
+    }
     /** `projection`, then `outer` over `inner` (each a pan and scale) as one move in pixels. */
     static of(projection, inner, outer) {
-        const k = inner.k * outer.k;
-        const x = outer.k * inner.x + outer.x;
-        const y = outer.k * inner.y + outer.y;
+        const { k, x, y } = ZoomedProjection.compose(inner, outer);
         if (k === 1 && x === 0 && y === 0)
             return projection;
         const move = geoTransform({

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

@@ -77,7 +77,8 @@ export declare class LegendState {
      * 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`.
+     * discrete one is titled `legend.seriesTitle`. A section whose adjustment sets
+     * `enabled: false` is left out.
      */
     sections(extension?: LegendExtension): LegendSection[];
     /**

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

@@ -195,7 +195,8 @@ export class LegendState {
      * 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`.
+     * discrete one is titled `legend.seriesTitle`. A section whose adjustment sets
+     * `enabled: false` is left out.
      */
     sections(extension) {
         const entries = this.entries;
@@ -286,7 +287,7 @@ export class LegendState {
                 }
             ]
             : [];
-        return [...discrete, ...others];
+        return [...discrete, ...others].filter((section) => section.enabled !== false);
     }
     /** What `override` changes in the section titled `title`: the entries that match it, in order, merged. */
     static #adjustment(override, title, format) {

package/dist/plots/utils/segments.d.ts

@@ -17,8 +17,11 @@ export declare function resolveSegmentsForSeries<TStyle>(segments: SegmentsConfi
 export declare function matchesSegmentX<TStyle>(xVal: AxisValue, seg: Segment<TStyle>): boolean;
 /**
  * Warns about obvious configuration mistakes: multiple catch-all segments
- * (no `areas`) in the same series list. Since catch-alls are evaluated last
- * and in order, only the first one can ever match; later ones are dead code.
+ * (no `areas`) in the same series list that reach the same facet panels.
+ * Since catch-alls are evaluated last and in order, only the first one can
+ * ever match; later ones are dead code. A catch-all that names a `facet`
+ * does not compete with one for another panel, nor with the unscoped one,
+ * which it overrides in its own panels.
  */
 export declare function validateSegments<TStyle>(segments: SegmentsConfig<TStyle>): void;
 export declare function buildGroupedSeries<S extends Series<any>, TStyle = LineSegmentStyle>(seriesList: S[], segments?: SegmentsConfig<TStyle>, connect?: boolean): VisualGroup<S, TStyle>[];

package/dist/plots/utils/segments.js

@@ -49,12 +49,22 @@ function areaMatchesXY(xVal, yVal, area) {
 /* eslint-enable @typescript-eslint/no-explicit-any */
 /**
  * Warns about obvious configuration mistakes: multiple catch-all segments
- * (no `areas`) in the same series list. Since catch-alls are evaluated last
- * and in order, only the first one can ever match; later ones are dead code.
+ * (no `areas`) in the same series list that reach the same facet panels.
+ * Since catch-alls are evaluated last and in order, only the first one can
+ * ever match; later ones are dead code. A catch-all that names a `facet`
+ * does not compete with one for another panel, nor with the unscoped one,
+ * which it overrides in its own panels.
  */
 export function validateSegments(segments) {
     const check = (label, segs) => {
-        const catchAlls = segs.filter((s) => !s.areas || s.areas.length === 0).length;
+        const perScope = new Map();
+        for (const seg of segs) {
+            if (seg.areas && seg.areas.length > 0)
+                continue;
+            const scope = JSON.stringify(seg.facet ?? null);
+            perScope.set(scope, (perScope.get(scope) ?? 0) + 1);
+        }
+        const catchAlls = Math.max(0, ...perScope.values());
         if (catchAlls > 1) {
             console.warn(`segments ${label}: ${catchAlls} entries have no areas - ` +
                 `only the first catch-all's style will be used.`);

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

@@ -91,6 +91,7 @@ export type DiscreteInteractiveConfig = {
 };
 export type DiscreteLegendSection = {
     type: 'discrete';
+    enabled?: boolean;
     title?: string;
     items: LegendItem[];
     columns?: number;
@@ -112,6 +113,7 @@ export type ContinuousInteractiveConfig = {
 };
 export type ContinuousLegendSection = {
     type: 'continuous';
+    enabled?: boolean;
     title?: string;
     /** The channel the section reads, which tells apart automatic sections that share a title. */
     channel?: Exclude<LegendChannel, 'series'>;
@@ -138,6 +140,7 @@ export type ContinuousLegendSection = {
  */
 export type SizeLegendSection = {
     type: 'size';
+    enabled?: boolean;
     title?: string;
     /** The channel the section reads, which tells apart automatic sections that share a title. */
     channel?: Exclude<LegendChannel, 'series'>;
@@ -162,6 +165,7 @@ export type SizeLegendSection = {
  */
 export type SymbolLegendSection = {
     type: 'symbol';
+    enabled?: boolean;
     title?: string;
     /** The channel the section reads, which tells apart automatic sections that share a title. */
     channel?: Exclude<LegendChannel, 'series'>;
@@ -276,7 +280,7 @@ export type LegendOverride<TSection extends {
  * takes what both sections share, plus each one's own - what a section lacks
  * is ignored. `interactive` takes either section's options.
  */
-export type ColorOverride = Omit<ContinuousLegendSection, 'type' | 'min' | 'max' | 'colorMin' | 'colorMax' | 'scheme' | 'pivot' | 'opacity' | 'interactive'> & Pick<DiscreteLegendSection, 'layout' | 'navButton'> & {
+export type ColorOverride = Omit<ContinuousLegendSection, 'type' | 'min' | 'max' | 'colorMin' | 'colorMax' | 'scheme' | 'pivot' | 'opacity' | 'interactive'> & Pick<DiscreteLegendSection, 'layout' | 'navButton' | 'enabled'> & {
     interactive?: ContinuousInteractiveConfig & DiscreteInteractiveConfig;
     /** Adjusts only the continuous section titled so. */
     match?: string;

package/docs/legend.md

@@ -101,6 +101,15 @@ legend={{
 
 Each key is the name of the channel (the plot's own prop: `r` for the size section) and adjusts the section that channel draws: any section field except what the plots compute (items, ranges, domains). An entry with `match` adjusts only the section whose title matches; a list of entries adjusts several.
 
+### Leaving a section disabled
+
+Every section takes `enabled`, on unless set. `enabled: false` leaves that section off the legend, while the others stay:
+
+```ts
+legend={{ series: { enabled: false } }}                       // no series section
+legend={{ color: { match: 'temperature', enabled: false } }}  // not that ramp
+```
+
 ### Turning series off from code
 
 `off` turns series off as if the reader had clicked them, without a click: a list of names (each dimmed, to `legend.disabledOpacity`), or a name → opacity or name → action map, where an action is the same `{ mode: 'dim' | 'hide' | 'omit' }` a toggle does. `highlight` is its inverse: it keeps the series it names on and dims all the others. An `off` entry for a series wins over `highlight`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Declarative charts, maps and small multiples for Svelte, built on svelteplot.",
   "license": "MIT",
   "author": "Ezequiel Puerta",