@faintshadow/flarecharts 26.3.1

package/dist/components/Points.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" generics="T">
+	import { onDestroy, onMount } from 'svelte';
+	import { getChartContext } from '../core/context.svelte.js';
+	import { normalizePoints } from '../core/normalize.js';
+	import type { NormalizedPoint, XValue } from '../core/normalize.js';
+	import { motionValue } from '../core/motion.svelte.js';
+	import { hitBisectX } from '../core/hit.js';
+	import { symbolFor, symbolByIndex, symbolPath } from '../core/symbols.js';
+	import type { SymbolName } from '../core/symbols.js';
+	import type { SymbolType } from 'd3-shape';
+	import type { MarkerMode } from '../core/options.js';
+
+	interface Props {
+		data: readonly T[];
+		x?: (datum: T, index: number) => XValue;
+		y?: (datum: T, index: number) => number | null | undefined;
+		color?: string;
+		/** Per-point color override (wins over color/palette) — end of the precedence chain. */
+		colorFor?: (datum: T, index: number) => string | undefined;
+		name?: string;
+		/** Accessible series description (announced when keyboard focus enters the series). */
+		description?: string;
+		/** Per-point announcement override for keyboard navigation. */
+		describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+		r?: number;
+		/** Halo stroke around each point (e.g. the chart background color). */
+		stroke?: string;
+		strokeWidth?: number;
+		/** Override the palette slot (e.g. to match a companion <Line>). */
+		index?: number;
+		/** Symbol shape: name string or raw d3 SymbolType. */
+		symbol?: SymbolName | SymbolType;
+		/** Symbol area in px² (default 64). */
+		symbolSize?: number;
+		/** Marker visibility mode. */
+		markers?: MarkerMode;
+		class?: string;
+	}
+
+	let {
+		data,
+		x,
+		y,
+		color,
+		colorFor,
+		name,
+		description,
+		describePoint,
+		r = 3,
+		stroke,
+		strokeWidth = 1.5,
+		index: indexProp,
+		symbol: symbolProp,
+		symbolSize = 64,
+		markers = 'always',
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	const points = $derived(normalizePoints(data, { x, y }));
+	const registration = ctx.registerSeries(() => ({
+		points,
+		name,
+		color: resolvedColor,
+		description,
+		describePoint: describePoint as ((p: NormalizedPoint<unknown>) => string | undefined) | undefined
+	}));
+	onDestroy(registration.unregister);
+
+	const seriesIndex = $derived(indexProp ?? registration.index);
+	const resolvedColor = $derived(ctx.seriesColor(seriesIndex, color));
+	const visible = $derived(ctx.isSeriesVisible(registration.index));
+
+	const resolvedSymbol = $derived(
+		symbolProp ? symbolFor(symbolProp) : symbolByIndex(seriesIndex)
+	);
+	const pathD = $derived(symbolPath(resolvedSymbol, symbolSize));
+
+	interface Dot {
+		cx: number;
+		cy: number;
+		point: NormalizedPoint<T>;
+	}
+	const dots = $derived.by((): Dot[] => {
+		if (markers === 'none') return [];
+		const out: Dot[] = [];
+		for (const p of points) {
+			const cx = ctx.xPos(p.x);
+			if (p.y == null || !Number.isFinite(cx)) continue;
+			out.push({ cx, cy: ctx.yPos(p.y), point: p });
+		}
+		return out;
+	});
+	const flat = $derived(dots.flatMap((d) => [d.cx, d.cy]));
+
+	const hoveredIndex = $derived.by(() => {
+		if (markers !== 'hover') return -1;
+		const ptr = ctx.hoverPointer;
+		if (!ptr) return -1;
+		const hit = hitBisectX(points, ctx.xPos, ctx.yPos, ptr.x);
+		return hit ? hit.point.index : -1;
+	});
+
+	let rootEl: SVGGElement | undefined = $state();
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
+	const anim = motionValue(
+		() => flat,
+		() => flat,
+		() => rootEl
+	);
+</script>
+
+{#if markers !== 'none' && visible}
+	<g
+		class="fc-series fc-points {klass}"
+		class:fc-pop={mounted && markers === 'always'}
+		class:fc-markers-hover={markers === 'hover'}
+		data-name={name}
+		bind:this={rootEl}
+	>
+		{#each dots as d, i (d.point.index)}
+			<path
+				class="fc-point"
+				class:fc-marker-active={markers === 'always' || d.point.index === hoveredIndex}
+				d={pathD}
+				transform="translate({anim.current[i * 2]},{anim.current[i * 2 + 1]})"
+				fill={colorFor?.(d.point.datum, d.point.index) ?? resolvedColor}
+				stroke={stroke}
+				stroke-width={stroke ? strokeWidth : undefined}
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.fc-point {
+		transform-box: fill-box;
+		transform-origin: center;
+		transition: opacity var(--fc-duration-hover, 120ms) var(--fc-ease, ease);
+	}
+	/* Hover mode: dots hidden until active */
+	.fc-markers-hover .fc-point {
+		opacity: 0;
+		transition: opacity var(--fc-marker-out, 300ms) var(--fc-ease, ease);
+	}
+	.fc-markers-hover .fc-marker-active {
+		opacity: 1;
+		transition: opacity var(--fc-marker-in, 250ms) var(--fc-ease, ease);
+	}
+	/* Always mode: pop-in animation */
+	.fc-pop .fc-point {
+		animation: fc-pop-in var(--fc-duration, 500ms) var(--fc-ease, ease);
+	}
+	@keyframes fc-pop-in {
+		from {
+			opacity: 0;
+			transform: scale(0.2);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+	:global(.fc-svg:has(.fc-series:hover)) .fc-series:not(:hover) .fc-point {
+		opacity: 0.3;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.fc-pop .fc-point {
+			animation: none;
+		}
+		.fc-point {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/Points.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { NormalizedPoint, XValue } from '../core/normalize.js';
+import type { SymbolName } from '../core/symbols.js';
+import type { SymbolType } from 'd3-shape';
+import type { MarkerMode } from '../core/options.js';
+declare function $$render<T>(): {
+    props: {
+        data: readonly T[];
+        x?: (datum: T, index: number) => XValue;
+        y?: (datum: T, index: number) => number | null | undefined;
+        color?: string;
+        /** Per-point color override (wins over color/palette) — end of the precedence chain. */
+        colorFor?: (datum: T, index: number) => string | undefined;
+        name?: string;
+        /** Accessible series description (announced when keyboard focus enters the series). */
+        description?: string;
+        /** Per-point announcement override for keyboard navigation. */
+        describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+        r?: number;
+        /** Halo stroke around each point (e.g. the chart background color). */
+        stroke?: string;
+        strokeWidth?: number;
+        /** Override the palette slot (e.g. to match a companion <Line>). */
+        index?: number;
+        /** Symbol shape: name string or raw d3 SymbolType. */
+        symbol?: SymbolName | SymbolType;
+        /** Symbol area in px² (default 64). */
+        symbolSize?: number;
+        /** Marker visibility mode. */
+        markers?: MarkerMode;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Points: $$IsomorphicComponent;
+type Points<T> = InstanceType<typeof Points<T>>;
+export default Points;

package/dist/components/Svg.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getChartContext } from '../core/context.svelte.js';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: klass = '', children }: Props = $props();
+
+	const ctx = getChartContext();
+</script>
+
+<!-- aria-hidden: the <Chart> group carries the label, sr-only table and keyboard
+     navigation; the SVG itself is decoration to assistive technology. -->
+<svg
+	class="fc-svg {klass}"
+	width={ctx.width}
+	height={ctx.height}
+	viewBox="0 0 {ctx.width} {ctx.height}"
+	aria-hidden="true"
+>
+	<g transform="translate({ctx.padding.left}, {ctx.padding.top})">
+		{@render children?.()}
+	</g>
+</svg>
+
+<style>
+	.fc-svg {
+		position: absolute;
+		inset: 0;
+		display: block;
+		overflow: visible;
+	}
+</style>

package/dist/components/Svg.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const Svg: import("svelte").Component<Props, {}, "">;
+type Svg = ReturnType<typeof Svg>;
+export default Svg;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,211 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { ScaleBand } from 'd3-scale';
+	import { getChartContext } from '../core/context.svelte.js';
+	import type { SeriesEntry } from '../core/context.svelte.js';
+	import { hitBisectX, hitNearest, hitsAtBand } from '../core/hit.js';
+	import type { HitResult, TooltipData, TooltipMode, TooltipPoint } from '../core/hit.js';
+	import { bandInvert, isBandScale } from '../core/scales.js';
+	import type { XValue } from '../core/normalize.js';
+
+	interface Props {
+		/**
+		 * Hit-testing mode:
+		 * - 'bisect-x' (default): nearest point by x — time/linear series.
+		 * - 'nearest': nearest point by euclidean distance — scatter.
+		 * - 'band': the hovered category column — band x scales (falls back to bisect-x otherwise).
+		 */
+		mode?: TooltipMode;
+		/** true → one row per visible series at the anchor x; false (default) → single point. */
+		shared?: boolean;
+		/** Replace the default content. Receives typed tooltip data. */
+		children?: Snippet<[TooltipData<T>]>;
+		/** Format the x header in the default renderer. */
+		formatX?: (x: XValue) => string;
+		/** Format y values in the default renderer. */
+		formatY?: (y: number) => string;
+		class?: string;
+	}
+
+	let {
+		mode = 'bisect-x',
+		shared = false,
+		children,
+		formatX,
+		formatY,
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	function toTooltipPoint(entry: SeriesEntry, hit: HitResult): TooltipPoint<T> {
+		return {
+			x: hit.point.x,
+			y: hit.point.y,
+			datum: hit.point.datum as T,
+			pointIndex: hit.point.index,
+			seriesIndex: entry.index,
+			seriesName: entry.name,
+			color: entry.color,
+			px: hit.px,
+			py: hit.py
+		};
+	}
+
+	const data = $derived.by((): TooltipData<T> | null => {
+		const ptr = ctx.hoverPointer;
+		if (!ptr) return null;
+		const entries = ctx.seriesEntries.filter((e) => e.visible && e.points.length > 0);
+		if (entries.length === 0) return null;
+
+		const effectiveMode: TooltipMode =
+			mode === 'band' && !isBandScale(ctx.xScale) ? 'bisect-x' : mode;
+
+		if (effectiveMode === 'band') {
+			const category = bandInvert(ctx.xScale as ScaleBand<string>, ptr.x);
+			if (category == null) return null;
+			const px = ctx.xPos(category);
+			let points: TooltipPoint<T>[] = [];
+			for (const entry of entries) {
+				for (const p of hitsAtBand(entry.points, category)) {
+					points.push({
+						x: p.x,
+						y: p.y,
+						datum: p.datum as T,
+						pointIndex: p.index,
+						seriesIndex: entry.index,
+						seriesName: entry.name,
+						color: entry.color,
+						px,
+						py: ctx.yPos(p.y as number)
+					});
+				}
+			}
+			if (points.length === 0) return null;
+			if (!shared) {
+				points = [
+					points.reduce((a, b) => (Math.abs(a.py - ptr.y) <= Math.abs(b.py - ptr.y) ? a : b))
+				];
+			}
+			return { x: category, px, py: points[0].py, points };
+		}
+
+		if (effectiveMode === 'nearest') {
+			let best: { entry: SeriesEntry; hit: HitResult } | null = null;
+			for (const entry of entries) {
+				const hit = hitNearest(entry.points, ctx.xPos, ctx.yPos, ptr.x, ptr.y);
+				if (hit && (!best || hit.distance < best.hit.distance)) best = { entry, hit };
+			}
+			if (!best) return null;
+			if (!shared) {
+				return {
+					x: best.hit.point.x,
+					px: best.hit.px,
+					py: best.hit.py,
+					points: [toTooltipPoint(best.entry, best.hit)]
+				};
+			}
+			const points: TooltipPoint<T>[] = [];
+			for (const entry of entries) {
+				const hit = hitBisectX(entry.points, ctx.xPos, ctx.yPos, best.hit.px);
+				if (hit) points.push(toTooltipPoint(entry, hit));
+			}
+			return { x: best.hit.point.x, px: best.hit.px, py: best.hit.py, points };
+		}
+
+		// bisect-x
+		let best: { entry: SeriesEntry; hit: HitResult } | null = null;
+		const candidates: { entry: SeriesEntry; hit: HitResult }[] = [];
+		for (const entry of entries) {
+			const hit = hitBisectX(entry.points, ctx.xPos, ctx.yPos, ptr.x);
+			if (!hit) continue;
+			candidates.push({ entry, hit });
+			if (!best || hit.distance < best.hit.distance) best = { entry, hit };
+		}
+		if (!best) return null;
+		const chosen = shared ? candidates : [best];
+		return {
+			x: best.hit.point.x,
+			px: best.hit.px,
+			py: best.hit.py,
+			points: chosen.map(({ entry, hit }) => toTooltipPoint(entry, hit))
+		};
+	});
+
+	const positionStyle = $derived.by(() => {
+		const ptr = ctx.hoverPointer;
+		if (!data || !ptr) return '';
+		const flip = data.px > ctx.innerWidth * 0.55;
+		const left = ctx.padding.left + data.px + (flip ? -12 : 12);
+		const top = ctx.padding.top + Math.max(0, Math.min(ctx.innerHeight, ptr.y)) + 12;
+		return `left: ${left}px; top: ${top}px;${flip ? ' transform: translateX(-100%);' : ''}`;
+	});
+
+	const fmtX = $derived(
+		formatX ??
+			((x: XValue) =>
+				x instanceof Date
+					? x.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+					: String(x))
+	);
+	const fmtY = $derived(formatY ?? ((y: number) => String(Math.round(y * 100) / 100)));
+</script>
+
+{#if data}
+	<div class="fc-tooltip {klass}" style={positionStyle} aria-hidden="true">
+		{#if children}
+			{@render children(data)}
+		{:else}
+			<div class="fc-tooltip-title">{fmtX(data.x)}</div>
+			{#each data.points as p (p.seriesIndex + '-' + p.pointIndex)}
+				<div class="fc-tooltip-row">
+					<span class="fc-tooltip-swatch" style="background: {p.color}"></span>
+					<span class="fc-tooltip-name">{p.seriesName ?? `Series ${p.seriesIndex + 1}`}</span>
+					<span class="fc-tooltip-value">{p.y == null ? '—' : fmtY(p.y)}</span>
+				</div>
+			{/each}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.fc-tooltip {
+		position: absolute;
+		z-index: 10;
+		pointer-events: none;
+		background: var(--fc-tooltip-bg, #ffffff);
+		border: 1px solid var(--fc-tooltip-border, #e2e8f0);
+		color: var(--fc-tooltip-text, #0f172a);
+		border-radius: 8px;
+		padding: 6px 10px;
+		font-family: var(--fc-font, ui-sans-serif, system-ui, sans-serif);
+		font-size: 12px;
+		line-height: 1.45;
+		box-shadow: var(--fc-tooltip-shadow, 0 2px 8px rgba(15, 23, 42, 0.08));
+		white-space: nowrap;
+	}
+	.fc-tooltip-title {
+		font-weight: 600;
+		margin-bottom: 2px;
+	}
+	.fc-tooltip-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.fc-tooltip-swatch {
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+		flex: none;
+	}
+	.fc-tooltip-name {
+		color: var(--fc-axis-label, #64748b);
+	}
+	.fc-tooltip-value {
+		margin-left: auto;
+		padding-left: 10px;
+		font-variant-numeric: tabular-nums;
+		font-family: var(--fc-font-mono, ui-monospace, monospace);
+	}
+</style>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { TooltipData, TooltipMode } from '../core/hit.js';
+import type { XValue } from '../core/normalize.js';
+declare function $$render<T>(): {
+    props: {
+        /**
+         * Hit-testing mode:
+         * - 'bisect-x' (default): nearest point by x — time/linear series.
+         * - 'nearest': nearest point by euclidean distance — scatter.
+         * - 'band': the hovered category column — band x scales (falls back to bisect-x otherwise).
+         */
+        mode?: TooltipMode;
+        /** true → one row per visible series at the anchor x; false (default) → single point. */
+        shared?: boolean;
+        /** Replace the default content. Receives typed tooltip data. */
+        children?: Snippet<[TooltipData<T>]>;
+        /** Format the x header in the default renderer. */
+        formatX?: (x: XValue) => string;
+        /** Format y values in the default renderer. */
+        formatY?: (y: number) => string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tooltip: $$IsomorphicComponent;
+type Tooltip<T> = InstanceType<typeof Tooltip<T>>;
+export default Tooltip;

package/dist/core/bisect.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Nearest-value binary search over an ASCENDING array of pixel positions.
+ * The hot path for tooltip/crosshair hit-testing: O(log n) per series per move.
+ */
+export declare function bisectNearest(values: readonly number[], target: number): number;

package/dist/core/bisect.js

@@ -0,0 +1,23 @@
+/**
+ * Nearest-value binary search over an ASCENDING array of pixel positions.
+ * The hot path for tooltip/crosshair hit-testing: O(log n) per series per move.
+ */
+export function bisectNearest(values, target) {
+    const n = values.length;
+    if (n === 0)
+        return -1;
+    if (target <= values[0])
+        return 0;
+    if (target >= values[n - 1])
+        return n - 1;
+    let lo = 0;
+    let hi = n - 1;
+    while (hi - lo > 1) {
+        const mid = (lo + hi) >> 1;
+        if (values[mid] <= target)
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return target - values[lo] <= values[hi] - target ? lo : hi;
+}