@fundar/data-chart-telling 0.0.63 → 1.0.0

package/dist/plots/bar/markers.js

@@ -0,0 +1,232 @@
+import { getConfiguration } from '../../configuration/config.svelte';
+import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY, TransformsPhase } from '../../phases/transforms/TransformsPhase';
+import { seriesIdOf } from '../../utils/grouping';
+import { resolveGapAreaStyle } from '../utils/gaps';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import { ValueLabels } from '../../layout/styles/ValueLabels';
+const GAP_KINDS = ['start', 'middle', 'end'];
+/**
+ * Where a bar plot's bars sit, read off the state its phases leave: each
+ * processed row's category and span along the value axis, whether the series
+ * stack, and the slice of its category band each series takes when they sit
+ * side by side. Slices are fractions of the band, so they hold at any width.
+ */
+export function buildBarGeometry(state, seriesPadding) {
+    const valueAxis = PlotAxes.valueOf(state);
+    const categoryAxis = PlotAxes.categoryOf(state);
+    const domain = state.scales[valueAxis]?.domain;
+    // Bars rise from zero, or from the nearest end of a domain that leaves it out.
+    const baseline = (() => {
+        const lo = Number(domain?.[0]);
+        const hi = Number(domain?.[(domain?.length ?? 1) - 1]);
+        if (!domain || domain.length < 2 || Number.isNaN(lo) || Number.isNaN(hi))
+            return 0;
+        const [min, max] = [Math.min(lo, hi), Math.max(lo, hi)];
+        return min > 0 ? min : max < 0 ? max : 0;
+    })();
+    const { stacked, of: spanOf } = TransformsPhase.processedSpan(state.processedData, valueAxis, baseline);
+    const position = TransformsPhase.processedPosition(state.processedData, valueAxis);
+    const categoryOf = (row) => position[categoryAxis](row);
+    const names = [...new Set((state.groupedSeries ?? []).map((g) => g.series.name))];
+    // A lone series, or a stack, fills its whole band: there's nothing to set side by side.
+    const sideBySide = !stacked && names.length > 1;
+    const gap = Math.max(0, Math.min(1, seriesPadding));
+    /** A series' slice of the band, `undefined` while it takes the whole of it. */
+    const sliceOf = (name) => {
+        if (!sideBySide)
+            return undefined;
+        const index = names.indexOf(name);
+        const width = 1 / names.length;
+        const margin = (gap * width) / 2;
+        return {
+            start: index * width + margin,
+            end: (names.length - 1 - index) * width + margin
+        };
+    };
+    return { stacked, baseline, spanOf, categoryOf, sliceOf };
+}
+/**
+ * BarPlot's invisible `role: 'hitArea'` markers - one per hover candidate: a
+ * band across the whole plot along the value axis (full height for vertical
+ * bars, full width for horizontal ones), over its category, or its series'
+ * slice of it. The pointer needn't be over the visible bar. They drive the
+ * plot's hover when it is active.
+ */
+export function buildHitAreas(state, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+hover, ctx) {
+    const { categoryOf, sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const isHorizontal = state.axes?.isHorizontal ?? false;
+    return hover.points.map(({ row, series }) => {
+        const slice = series === undefined ? undefined : sliceOf(series);
+        return {
+            type: 'bar',
+            role: 'hitArea',
+            isHorizontal,
+            data: [row],
+            category: categoryOf(row),
+            hover: hover.active,
+            ...(slice
+                ? isHorizontal
+                    ? { insetTop: slice.start, insetBottom: slice.end }
+                    : { insetLeft: slice.start, insetRight: slice.end }
+                : {})
+        };
+    });
+}
+/**
+ * BarPlot's `styles.values` as one `'text'` marker per series, over the same
+ * processed rows its bars draw (gap rows never get a label). `anchor` places
+ * each label along its bar: past its top (`'outside'`), just inside it
+ * (`'start'`), at its base (`'end'`), or centred (`'middle'`); a stacked bar's
+ * label always sits at the middle of its own span. A grouped bar's label
+ * shifts with its series' slice of the band.
+ */
+export function buildValueLabels(labels, state, ctx) {
+    const { processedData } = state;
+    const isHorizontal = state.axes?.isHorizontal ?? false;
+    if (!processedData)
+        return [];
+    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const { font, anchor, format } = labels;
+    const valueOf = ValueLabels.valueOf(state);
+    const top = (d) => geometry.spanOf(d)?.[1] ?? 0;
+    const position = geometry.stacked
+        ? (d) => {
+            const [from, to] = geometry.spanOf(d) ?? [0, 0];
+            return (from + to) / 2;
+        }
+        : anchor === 'middle' && !isHorizontal
+            ? (d) => top(d) / 2
+            : anchor === 'end'
+                ? () => 0
+                : top;
+    // Outward from the bar's top along the value axis: up for a vertical bar, right for a horizontal one.
+    const outward = anchor === 'outside' ? 6 : anchor === 'start' ? -4 : anchor === 'end' ? 4 : 0;
+    const textAnchor = labels.textAnchor ??
+        (isHorizontal
+            ? anchor === 'outside' || anchor === 'end'
+                ? 'start'
+                : anchor === 'start'
+                    ? 'end'
+                    : 'middle'
+            : 'middle');
+    const lineAnchor = font?.lineAnchor ??
+        (isHorizontal
+            ? 'middle'
+            : anchor === 'outside' || anchor === 'end'
+                ? 'bottom'
+                : anchor === 'start'
+                    ? 'top'
+                    : 'middle');
+    const labelled = processedData.data.filter((d) => d[GAP_VALUE] === undefined && geometry.spanOf(d) !== undefined);
+    return (state.resolvedSeries ?? []).flatMap((s) => {
+        const data = labelled.filter((d) => d[SERIES_ID_KEY] === seriesIdOf(s));
+        if (data.length === 0)
+            return [];
+        return [
+            {
+                type: 'text',
+                data,
+                ...(isHorizontal
+                    ? { x: position, y: geometry.categoryOf }
+                    : { x: geometry.categoryOf, y: position }),
+                bandSlice: geometry.sliceOf(s.name),
+                text: (d) => format(Number(valueOf(d)), s.name),
+                styles: {
+                    ...font,
+                    fill: font?.fill ?? ctx.cfg.axis.color,
+                    fontSize: font?.fontSize ?? 12,
+                    dx: font?.dx ?? (isHorizontal ? outward : 0),
+                    dy: font?.dy ?? (isHorizontal ? 0 : -outward),
+                    textAnchor,
+                    lineAnchor
+                }
+            }
+        ];
+    });
+}
+/**
+ * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
+ * gap fills - drawing the rows the "transforms" phase left, prepended onto
+ * whatever the "statistics" phase already put in `state.markers`, and its
+ * value labels on top of everything.
+ */
+export function buildMarks(state, ctx) {
+    const { gapFillMaps, colorForSeries, processedData } = state;
+    const isHorizontal = state.axes?.isHorizontal ?? false;
+    const [categoryAxis, valueAxis] = isHorizontal ? ['y', 'x'] : ['x', 'y'];
+    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const { channels } = processedData;
+    const gapDefaults = getConfiguration().bar.gap;
+    // Forwarded raw when the transforms left a plain channel (a field key keeps
+    // feeding svelteplot's axis-title inference), read through the geometry otherwise.
+    const category = (channels[categoryAxis] ?? geometry.categoryOf);
+    const bottom = (row) => geometry.spanOf(row)?.[0] ?? geometry.baseline;
+    const top = (row) => geometry.spanOf(row)?.[1] ?? geometry.baseline;
+    // A gap-filled row reads its value through the processed value channel, which
+    // falls back to the filled value; a real row through its own series' one,
+    // which stays a field key whenever the plot has no transforms.
+    const valueOf = (channel) => (geometry.stacked || channel === undefined ? top : channel);
+    const gapValue = valueOf(channels[valueAxis]);
+    function makeMarker(data, slice, value, styles) {
+        if (data.length === 0)
+            return null;
+        const from = (geometry.stacked ? bottom : geometry.baseline);
+        const marker = {
+            type: 'bar',
+            role: 'segment',
+            isHorizontal,
+            data,
+            styles,
+            ...(isHorizontal
+                ? { y: category, x1: from, x2: value }
+                : { x: category, y1: from, y2: value })
+        };
+        if (slice) {
+            if (isHorizontal) {
+                marker.insetTop = slice.start;
+                marker.insetBottom = slice.end;
+            }
+            else {
+                marker.insetLeft = slice.start;
+                marker.insetRight = slice.end;
+            }
+        }
+        return marker;
+    }
+    const isReal = (row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined;
+    const segmentMarkers = [];
+    TransformsPhase.buildProcessedGroups(state, false).forEach((group) => {
+        const name = group.series.name;
+        const slice = geometry.sliceOf(name);
+        const defaultColor = colorForSeries(name);
+        const disabledFill = ctx.interaction?.fillFor(name);
+        for (const seg of group.visualSegments) {
+            const marker = makeMarker(seg.data.filter(isReal), slice, valueOf(group.series[valueAxis]), {
+                fill: disabledFill?.fill ?? seg.styles.fill ?? defaultColor,
+                fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1
+            });
+            if (marker)
+                segmentMarkers.push(marker);
+        }
+        const id = seriesIdOf(group.series);
+        const fills = [...(gapFillMaps.get(id)?.values() ?? [])];
+        const seriesRows = processedData.data.filter((row) => row[SERIES_ID_KEY] === id);
+        for (const kind of GAP_KINDS) {
+            const fill = fills.find((f) => f.kind === kind);
+            if (!fill)
+                continue;
+            const base = resolveGapAreaStyle(fill.style, defaultColor, gapDefaults);
+            const rows = seriesRows.filter((row) => row[GAP_KIND] === kind && geometry.spanOf(row) !== undefined);
+            const marker = makeMarker(rows, slice, gapValue, {
+                ...base,
+                fill: disabledFill?.fill ?? base.fill,
+                fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity
+            });
+            if (marker)
+                segmentMarkers.push(marker);
+        }
+    });
+    return segmentMarkers;
+}

package/dist/plots/geo/Core.svelte

@@ -0,0 +1,151 @@
+<script lang="ts" generics="TProps extends Record<string, unknown>">
+	import { createGeoFeatures } from './features.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { LegendState } from '../../layout/legend/LegendState.svelte';
+	import { ChannelName } from '../utils/ChannelName';
+	import { Margins } from '../../layout/margins/Margins';
+	import BasePlotLayout from '../../layout/base/BasePlotLayout.svelte';
+	import type { GeoPlotCoreProps } from '../../types/plots/geo/props';
+	import type { CoordinatesConfig } from '../../types/layout/coordinates';
+	import type { GeoPlotState, GeoPlotCtx } from '../../types/plots/geo/state';
+
+	/**
+	 * A map from GeoJSON or TopoJSON. `segments` styles features by id,
+	 * `color` + `scales.color` drive a choropleth ramp, and everything drawn on
+	 * top is a `markers` entry.
+	 */
+	type Props = GeoPlotCoreProps<TProps>;
+
+	let {
+		data,
+		object,
+		featureId,
+		color,
+		grouping,
+		opacity,
+		excludeParts,
+		width,
+		height,
+		styles = {},
+		segments = {},
+		markers = [],
+		scales = {},
+		coordinates = {},
+		margins = $bindable(),
+		tooltip = undefined,
+		pipeline
+	}: Props = $props();
+
+	const cfg = $derived(getConfiguration());
+
+	// ── Resolve data: GeoJSON is synchronous, TopoJSON is converted async ────
+	const resolved = createGeoFeatures<TProps>(
+		() => data,
+		() => object
+	);
+	const rawFeatures = $derived(resolved.features);
+
+	// ── Tile-layer / projection compatibility ────────────────────────────────
+	$effect(() => {
+		if (!styles.tileLayer) return;
+		const proj = coordinates.projection;
+		const name = typeof proj === 'string' ? proj : proj?.type;
+		if (name && name !== 'mercator' && name !== 'transverse-mercator') {
+			console.warn(
+				`GeoPlot: styles.tileLayer only renders correctly with a mercator-family projection - got "${name}". Rendering anyway.`
+			);
+		}
+	});
+
+	/** `coordinates`, with the projection defaulting to `'mercator'` under a tile layer. */
+	const resolvedCoordinates = $derived.by(
+		(): CoordinatesConfig => ({
+			...coordinates,
+			projection: coordinates.projection ?? (styles.tileLayer ? 'mercator' : undefined)
+		})
+	);
+
+	// ── Legend-driven range filter (mirrors HeatmapPlot's own) ────────────────
+	const legendInteraction = $derived(LegendState.current());
+	const range = $derived(legendInteraction?.range);
+
+	/** `scales` plus the fixed lon/lat frame every projection renders against. */
+	const layoutScales = $derived({
+		...scales,
+		x: { domain: [-180, 180] },
+		y: { domain: [90, -90] }
+	});
+
+	const ctx = $derived<GeoPlotCtx<TProps>>({
+		cfg,
+		range,
+		fill: styles.fill,
+		fillOpacity: styles.fillOpacity,
+		stroke: styles.stroke,
+		strokeWidth: styles.strokeWidth,
+		onFeatureClick: styles.onFeatureClick
+	});
+	// The kind's pipeline, built once by its plot, over the state this core seeds.
+	const plotState = $derived(
+		pipeline!.run(
+			{
+				rawFeatures,
+				featureId,
+				color,
+				grouping,
+				opacity,
+				excludeParts,
+				segments,
+				scales,
+				authoredMarkers: markers,
+				tooltip,
+				width,
+				height,
+				margins
+			},
+			ctx
+		) as GeoPlotState<TProps>
+	);
+
+	const allFeatures = $derived(plotState.allFeatures!);
+	const features = $derived(plotState.features!);
+
+	/** `styles`, with the drawn features handed to the tile layer for its fit. */
+	const resolvedStyles = $derived(
+		styles.tileLayer ? { ...styles, tileLayer: { ...styles.tileLayer, features } } : styles
+	);
+
+	// The features match the pointer themselves, while the plot's hover is active.
+	const markersOut = $derived(
+		(plotState.markers ?? []).map((m) =>
+			m.type === 'geo' && !plotState.hover!.active ? { ...m, hover: undefined } : m
+		)
+	);
+
+	/** What `BasePlotLayout` draws from: the features, where each sits, the hover config and scales. */
+	const layoutState = $derived({
+		hover: plotState.hover,
+		hoverPosition: plotState.hoverPosition,
+		hoverRows: plotState.hoverRows,
+		markers: markersOut,
+		scales: layoutScales,
+		channels: {
+			color: { source: ChannelName.of(color, 'color') },
+			opacity: { source: ChannelName.of(opacity, 'opacity') }
+		},
+		colorDomain: plotState.colorDomain,
+		opacityDomain: plotState.opacityDomain,
+		styles: resolvedStyles,
+		marginEstimate: Margins.GEO_ESTIMATE
+	});
+</script>
+
+<!-- `layoutScales` pins x/y to the lon/lat range, which `contour` markers read. -->
+<BasePlotLayout
+	{width}
+	{height}
+	state={layoutState}
+	coordinates={resolvedCoordinates}
+	bind:margins
+	geoAllFeatures={allFeatures}
+/>

package/dist/plots/geo/Core.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { GeoPlotCoreProps } from '../../types/plots/geo/props';
+declare function $$render<TProps extends Record<string, unknown>>(): {
+    props: GeoPlotCoreProps<TProps>;
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TProps extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TProps>>['props'];
+    events(): ReturnType<typeof $$render<TProps>>['events'];
+    slots(): ReturnType<typeof $$render<TProps>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TProps extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TProps>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TProps>['props']>, ReturnType<__sveltets_Render<TProps>['events']>, ReturnType<__sveltets_Render<TProps>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TProps>['bindings']>;
+    } & ReturnType<__sveltets_Render<TProps>['exports']>;
+    <TProps extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TProps>['props']> & {}): ReturnType<__sveltets_Render<TProps>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Core: $$IsomorphicComponent;
+type Core<TProps extends Record<string, unknown>> = InstanceType<typeof Core<TProps>>;
+export default Core;