@fundar/data-chart-telling 0.0.49 → 0.0.51

package/dist/markers/BarMarker.svelte

@@ -1,92 +1,153 @@
 <script lang="ts">
-  import { BarX, BarY, usePlot } from 'svelteplot';
-  import type { BarMarkerConfig } from '../types/markers/common';
+	import { BarX, BarY, usePlot } from 'svelteplot';
+	import type { BarMarkerConfig } from '../types/markers/common';
 
-  /**
-   * Renders one `'bar'` marker — `role: 'segment'` is a visible bar
-   * (`<BarX>`/`<BarY>`, per `isHorizontal`); `role: 'hitArea'` is an
-   * invisible hit region for one category, resolved against the live scale
-   * via `usePlot()`.
-   */
-  let { marker }: { marker: BarMarkerConfig } = $props();
+	/**
+	 * Renders one `'bar'` marker: `role: 'segment'` (visible bar via
+	 * `<BarX>`/`<BarY>`), `role: 'hitArea'` (invisible hover hit region for
+	 * one segment), or `role: 'highlight'` (visible area highlight).
+	 */
+	let { marker }: { marker: BarMarkerConfig } = $props();
 
-  const plot = usePlot();
-  function categoryScaleFor(isHorizontal: boolean) {
-    return isHorizontal ? plot.scales.y : plot.scales.x;
-  }
-  function valueScaleFor(isHorizontal: boolean) {
-    return isHorizontal ? plot.scales.x : plot.scales.y;
-  }
-  function valueExtentFor(isHorizontal: boolean): [number, number] {
-    const range = valueScaleFor(isHorizontal)?.fn?.range?.();
-    if (!range || range.length < 2) return [0, 0];
-    const a = Number(range[0]);
-    const b = Number(range[range.length - 1]);
-    return [Math.min(a, b), Math.max(a, b)];
-  }
+	const plot = usePlot();
+	function categoryScaleFor(isHorizontal: boolean) {
+		return isHorizontal ? plot.scales.y : plot.scales.x;
+	}
+	function valueScaleFor(isHorizontal: boolean) {
+		return isHorizontal ? plot.scales.x : plot.scales.y;
+	}
+	function valueExtentFor(isHorizontal: boolean): [number, number] {
+		const range = valueScaleFor(isHorizontal)?.fn?.range?.();
+		if (!range || range.length < 2) return [0, 0];
+		const a = Number(range[0]);
+		const b = Number(range[range.length - 1]);
+		return [Math.min(a, b), Math.max(a, b)];
+	}
+	// A `'hitArea'` marker's own value-axis slice, mapped to pixels.
+	function hitAreaValueRangeFor(
+		isHorizontal: boolean,
+		from: unknown,
+		to: unknown
+	): [number, number] {
+		if (typeof from !== 'number' || typeof to !== 'number') return valueExtentFor(isHorizontal);
+		const scale = valueScaleFor(isHorizontal);
+		const a = Number(scale?.fn?.(from) ?? 0);
+		const b = Number(scale?.fn?.(to) ?? 0);
+		return [Math.min(a, b), Math.max(a, b)];
+	}
 </script>
 
 {#if marker.role === 'segment'}
-  {#if marker.isHorizontal}
-    <BarX
-      data={marker.data}
-      y={marker.y}
-      x1={marker.x1}
-      x2={marker.x2}
-      insetTop={marker.insetTop}
-      insetBottom={marker.insetBottom}
-      fill={marker.style?.fill}
-      fillOpacity={marker.style?.fillOpacity}
-      stroke={marker.style?.stroke}
-      strokeWidth={marker.style?.strokeWidth}
-      strokeOpacity={marker.style?.strokeOpacity}
-      strokeDasharray={marker.style?.strokeDasharray}
-      borderRadius={marker.style?.borderRadius}
-    />
-  {:else}
-    <BarY
-      data={marker.data}
-      x={marker.x}
-      y1={marker.y1}
-      y2={marker.y2}
-      insetLeft={marker.insetLeft}
-      insetRight={marker.insetRight}
-      fill={marker.style?.fill}
-      fillOpacity={marker.style?.fillOpacity}
-      stroke={marker.style?.stroke}
-      strokeWidth={marker.style?.strokeWidth}
-      strokeOpacity={marker.style?.strokeOpacity}
-      strokeDasharray={marker.style?.strokeDasharray}
-      borderRadius={marker.style?.borderRadius}
-    />
-  {/if}
+	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
+	{#if marker.isHorizontal}
+		<BarX
+			data={marker.data}
+			y={marker.y}
+			x1={marker.x1}
+			x2={marker.x2}
+			insetTop={marker.insetTop != null ? marker.insetTop * bandwidth : undefined}
+			insetBottom={marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined}
+			fill={marker.style?.fill}
+			fillOpacity={marker.style?.fillOpacity}
+			stroke={marker.style?.stroke}
+			strokeWidth={marker.style?.strokeWidth}
+			strokeOpacity={marker.style?.strokeOpacity}
+			strokeDasharray={marker.style?.strokeDasharray}
+			borderRadius={marker.style?.borderRadius}
+		/>
+	{:else}
+		<BarY
+			data={marker.data}
+			x={marker.x}
+			y1={marker.y1}
+			y2={marker.y2}
+			insetLeft={marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined}
+			insetRight={marker.insetRight != null ? marker.insetRight * bandwidth : undefined}
+			fill={marker.style?.fill}
+			fillOpacity={marker.style?.fillOpacity}
+			stroke={marker.style?.stroke}
+			strokeWidth={marker.style?.strokeWidth}
+			strokeOpacity={marker.style?.strokeOpacity}
+			strokeDasharray={marker.style?.strokeDasharray}
+			borderRadius={marker.style?.borderRadius}
+		/>
+	{/if}
 {:else}
-  {@const categoryScale = categoryScaleFor(marker.isHorizontal)}
-  {#if categoryScale?.type === 'band'}
-    {@const bandwidth = categoryScale.fn.bandwidth()}
-    {@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
-    {@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    {#if marker.isHorizontal}
-      <rect
-        x={valueMin}
-        y={bandStart}
-        width={Math.max(0, valueMax - valueMin)}
-        height={bandwidth}
-        fill="transparent"
-        onpointerenter={marker.onpointerenter}
-        onpointerleave={marker.onpointerleave}
-      />
-    {:else}
-      <rect
-        x={bandStart}
-        y={valueMin}
-        width={bandwidth}
-        height={Math.max(0, valueMax - valueMin)}
-        fill="transparent"
-        onpointerenter={marker.onpointerenter}
-        onpointerleave={marker.onpointerleave}
-      />
-    {/if}
-  {/if}
+	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+	{#if categoryScale?.type === 'band'}
+		{@const bandwidth = categoryScale.fn.bandwidth()}
+		{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
+		{#if marker.role === 'hitArea'}
+			{@const [rangeMin, rangeMax] = marker.isHorizontal
+				? hitAreaValueRangeFor(marker.isHorizontal, marker.x1, marker.x2)
+				: hitAreaValueRangeFor(marker.isHorizontal, marker.y1, marker.y2)}
+			{@const insetLeft = (marker.insetLeft ?? 0) * bandwidth}
+			{@const insetRight = (marker.insetRight ?? 0) * bandwidth}
+			{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
+			{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
+			{#if marker.isHorizontal}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<rect
+					class="dct-hit-area"
+					x={rangeMin + insetLeft}
+					y={bandStart + insetBottom}
+					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
+					height={Math.max(0, bandwidth - insetTop - insetBottom)}
+					fill="transparent"
+					onpointerenter={marker.onpointerenter}
+					onpointerleave={marker.onpointerleave}
+				/>
+			{:else}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<rect
+					class="dct-hit-area"
+					x={bandStart + insetLeft}
+					y={rangeMin + insetBottom}
+					width={Math.max(0, bandwidth - insetLeft - insetRight)}
+					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
+					fill="transparent"
+					onpointerenter={marker.onpointerenter}
+					onpointerleave={marker.onpointerleave}
+				/>
+			{/if}
+		{:else}
+			{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
+			{@const thickness = bandwidth + 2}
+			{@const center = bandStart + bandwidth / 2}
+			{#if marker.isHorizontal}
+				<rect
+					class="hover-area"
+					x={valueMin}
+					y={center - thickness / 2}
+					width={Math.max(0, valueMax - valueMin)}
+					height={thickness}
+					fill={marker.style?.fill}
+					fill-opacity={marker.style?.fillOpacity}
+					stroke={marker.style?.stroke}
+					stroke-width={marker.style?.strokeWidth}
+					stroke-opacity={marker.style?.strokeOpacity}
+					stroke-dasharray={marker.style?.strokeDasharray}
+					rx={marker.style?.borderRadius}
+					pointer-events="none"
+				/>
+			{:else}
+				<rect
+					class="hover-area"
+					x={center - thickness / 2}
+					y={valueMin}
+					width={thickness}
+					height={Math.max(0, valueMax - valueMin)}
+					fill={marker.style?.fill}
+					fill-opacity={marker.style?.fillOpacity}
+					stroke={marker.style?.stroke}
+					stroke-width={marker.style?.strokeWidth}
+					stroke-opacity={marker.style?.strokeOpacity}
+					stroke-dasharray={marker.style?.strokeDasharray}
+					ry={marker.style?.borderRadius}
+					pointer-events="none"
+				/>
+			{/if}
+		{/if}
+	{/if}
 {/if}

package/dist/markers/HoverMarker.svelte

@@ -2,6 +2,7 @@
   import DotMarker from './DotMarker.svelte';
   import TextMarker from './TextMarker.svelte';
   import RuleMarker from './RuleMarker.svelte';
+  import BarMarker from './BarMarker.svelte';
   import { getConfiguration } from '../configuration/config.svelte';
   import type { MarkerProps } from '../types/markers/props';
   import type { HoverMarkerConfig } from '../types/markers/common';
@@ -22,10 +23,19 @@
    * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
    * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
    * "no crosshair".
+   *
+   * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
+   * default) for a thickened area highlight in place of the thin crosshair —
+   * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
+   * `role: 'highlight'`, so it renders nothing on an axis without a band
+   * scale (e.g. a line/scatter plot's continuous axis).
    */
   interface Props extends MarkerProps<HoverDisplayPoint> {
     /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'showLabels' | 'format' | 'ruleStyle' | 'dotStyle' | 'fontStyle'>;
+    marker: Pick<
+      HoverMarkerConfig,
+      'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'ruleStyle' | 'areaStyle' | 'dotStyle' | 'fontStyle'
+    >;
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;
@@ -46,9 +56,13 @@
   const showCrosshairY = $derived(marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true));
   const ruleX = $derived(showCrosshairX ? (activePoint?.x ?? null) : null);
   const ruleY = $derived(showCrosshairY ? (activePoint?.y ?? null) : null);
+  // areaX/areaY have no implied default — always off unless explicitly set.
+  const areaX = $derived(marker.areaX === true ? (activePoint?.x ?? null) : null);
+  const areaY = $derived(marker.areaY === true ? (activePoint?.y ?? null) : null);
   const showLabels = $derived(marker.showLabels ?? true);
   const format = $derived(marker.format);
   const ruleStyle = $derived(marker.ruleStyle);
+  const areaStyle = $derived({ ...cfg.hover.area, ...marker.areaStyle });
   const dotStyle = $derived(marker.dotStyle);
   const fontStyle = $derived(marker.fontStyle);
 
@@ -93,6 +107,32 @@
   }
 </script>
 
+{#if areaX != null}
+  <BarMarker
+    marker={{
+      type: 'bar',
+      role: 'highlight',
+      isHorizontal: false,
+      data: [],
+      category: areaX,
+      style: areaStyle,
+    }}
+  />
+{/if}
+
+{#if areaY != null}
+  <BarMarker
+    marker={{
+      type: 'bar',
+      role: 'highlight',
+      isHorizontal: true,
+      data: [],
+      category: areaY,
+      style: areaStyle,
+    }}
+  />
+{/if}
+
 {#if ruleX != null}
   <RuleMarker axis="x" value={ruleX} style={{ ...cfg.hover.rule, ...ruleStyle }} />
 {/if}

package/dist/markers/HoverMarker.svelte.d.ts

@@ -16,10 +16,16 @@ import type { HoverDisplayPoint } from '../types/layout/tooltip';
  * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
  * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
  * "no crosshair".
+ *
+ * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
+ * default) for a thickened area highlight in place of the thin crosshair —
+ * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
+ * `role: 'highlight'`, so it renders nothing on an axis without a band
+ * scale (e.g. a line/scatter plot's continuous axis).
  */
 interface Props extends MarkerProps<HoverDisplayPoint> {
     /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'showLabels' | 'format' | 'ruleStyle' | 'dotStyle' | 'fontStyle'>;
+    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'ruleStyle' | 'areaStyle' | 'dotStyle' | 'fontStyle'>;
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;

package/dist/plots/bar/Plot.svelte

@@ -2,7 +2,12 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledFillOverride } from '../utils/legendDisabled';
+	import {
+		disabledFillOverride,
+		resolveEffectiveDisabledStyle,
+		omitDisabledSeries,
+		buildSeriesColorIndex
+	} from '../utils/legendDisabled';
 	import { resolveAccessor } from '../utils/accessors';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import {
@@ -71,7 +76,15 @@
 	});
 
 	const cfg = $derived(getConfiguration());
-	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const legendInteraction = $derived(getLegendInteraction());
+	// Unfiltered series list, for stable per-name color indexing.
+	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
+	function colorForSeries(name: string): string {
+		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
+	}
+	// Drops series toggled off with `disabled: { mode: 'omit' }`.
+	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
 	const groupedSeries = $derived(
 		// connect: false — bars are discrete; there's no visual gap between
 		// adjacent categories to bridge (see buildGroupedSeries's own doc).
@@ -104,7 +117,7 @@
 		buildScopedMarkerGroups<TData, Series<TData>, BarSegmentStyle>({
 			groupedSeries,
 			segments,
-			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (series) => colorForSeries(series.name),
 			segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor
 		})
 	);
@@ -145,14 +158,27 @@
 		delete rest.type;
 		return rest;
 	}
-	// The single, fully-resolved scales object BasePlotLayout reads for
-	// everything (ticks, grid, sort, and the real svelteplot scale) — avoids
-	// keeping a second, separately-patched copy of `scales.x`/`scales.y` in
-	// sync with the one actually forwarded.
+	// Backs the category axis's `paddingInner`/`paddingOuter` — the gap
+	// *between* category groups — with the theme's `bar.paddingInner`/
+	// `paddingOuter` default, when the plot doesn't set its own (or the
+	// `padding` shorthand). BarPlot-only, unlike svelteplot's own hardcoded
+	// 0.15 fallback for every band scale.
+	function withDefaultPadding(scale?: AxisScale<TData>): AxisScale<TData> {
+		return {
+			...scale,
+			paddingInner: scale?.paddingInner ?? scale?.padding ?? cfg.bar.paddingInner,
+			paddingOuter: scale?.paddingOuter ?? scale?.padding ?? cfg.bar.paddingOuter
+		};
+	}
+	// The single, fully-resolved scales object both BasePlotLayout (ticks,
+	// grid, sort, the real svelteplot scale) and `createBarLayout` (the
+	// grouped-bar-width estimate) read for everything — avoids keeping a
+	// second, separately-patched copy of `scales.x`/`scales.y` in sync with
+	// the one actually forwarded.
 	const resolvedScales = $derived({
 		...scales,
-		x: stripCategoricalType(scales.x),
-		y: stripCategoricalType(scales.y)
+		x: stripCategoricalType(categoricalAxis === 'x' ? withDefaultPadding(scales.x) : scales.x),
+		y: stripCategoricalType(categoricalAxis === 'y' ? withDefaultPadding(scales.y) : scales.y)
 	});
 
 	// The accessor feeding each *visual* channel — swapped from the
@@ -166,7 +192,7 @@
 	 * rendering, value labels, and hover markers below. See `layout.svelte.ts`.
 	 */
 	const barLayout = createBarLayout<TData>({
-		scales: () => scales,
+		scales: () => resolvedScales,
 		isHorizontal: () => isHorizontal,
 		width: () => width,
 		height: () => height,
@@ -181,7 +207,6 @@
 	// which drive tick/domain computation and the Pointer's hit-testing) —
 	// `row` (see BasePlotLayout/HoverPoint) is what lets the template recover the
 	// semantic category regardless of which axis it landed on.
-	const legendInteraction = $derived(getLegendInteraction());
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
 
 	// A value label hovered while `styles.values.hoverIsolate` is on dims
@@ -191,18 +216,19 @@
 	let hoverIsolatedSeries = $state<string | null>(null);
 
 	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-		return (
-			legendInteraction?.disabledSeries.get(name) ??
-			(hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
-				? { opacity: cfg.legend.disabledOpacity }
-				: undefined)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 
 	// A legend-disabled series is dimmed on the bar itself, but never surfaces
 	// in hover/tooltip — its points are simply absent from the candidate list.
 	const hoverPoints = $derived(
-		buildHoverPoints(resolvedSeries, isHorizontal, barLayout, cfg.palette).filter(
+		buildHoverPoints(resolvedSeries, isHorizontal, barLayout, colorForSeries).filter(
 			(p) => !legendInteraction?.disabledSeries.has(p.series!)
 		)
 	);
@@ -220,8 +246,8 @@
 		// (via svelteplot's `RectPath`) actually render that band, which is
 		// enough to mismatch the neighbouring category once bands get thin
 		// (many categories). The `role: 'hitArea'` bar markers `buildBarMarkers`
-		// emits hit-test the category bands directly instead — see its own doc
-		// comment.
+		// emits hit-test each series' own segment directly instead — see its
+		// own doc comment.
 		pointMatching: 'contains' as const
 	});
 
@@ -294,7 +320,7 @@
 			barLayout,
 			isHorizontal,
 			hoverPoints,
-			palette: cfg.palette,
+			colorFor: colorForSeries,
 			disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
 			active: hover.active,
 			setHoverMatch,

package/dist/plots/bar/buildBarMarkers.d.ts

@@ -6,26 +6,16 @@ import type { BarMarkerConfig } from '../../types/markers/common';
 import type { BarLayout } from './layout.svelte';
 import type { DiscreteGapFill } from '../utils/gaps';
 /**
- * Every `'bar'` marker for one BarPlot render: one `role: 'segment'` marker
- * per series (stacked) or per visual segment (grouped/overlap), one
- * additional `role: 'segment'` marker per series per gap zone kind for any
- * row `styles.gaps` fills (distinctly styled, drawn at its interpolated
- * value — see `resolveDiscreteGapFills`), plus one `role: 'hitArea'` marker
- * per category, so a chart never gets segment markers without their hit
- * areas. A row whose value is missing and *not* filled by a gap zone is
- * skipped entirely — no bar drawn, rather than the broken zero/`NaN`
- * geometry a raw missing value would otherwise produce.
- *
- * `'hitArea'` geometry is left unresolved (just `category` + `data`) —
- * resolving it to pixels needs svelteplot's live scale, only available
- * where the marker actually renders.
+ * Every `'bar'` marker for one BarPlot render: visible `role: 'segment'`
+ * bars (real data + gap fills) plus one `role: 'hitArea'` hit region per row,
+ * sized to that row's own segment.
  */
 export declare function buildBarMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, BarSegmentStyle>[];
     barLayout: BarLayout<TData>;
     isHorizontal: boolean;
     hoverPoints: HoverPoint<TData>[];
-    palette: string[];
+    colorFor: (seriesName: string) => string;
     disabledFillFor: (seriesName: string) => {
         fill?: string;
         fillOpacity?: number;