@faintshadow/flarecharts 26.3.1

package/dist/components/Area.svelte

@@ -0,0 +1,264 @@
+<script lang="ts" generics="T">
+	import { onDestroy, onMount } from 'svelte';
+	import { area as d3area, line as d3line } from 'd3-shape';
+	import { getChartContext } from '../core/context.svelte.js';
+	import { normalizePoints } from '../core/normalize.js';
+	import type { NormalizedPoint, XValue } from '../core/normalize.js';
+	import { curveFor } from '../core/curves.js';
+	import type { CurveName } from '../core/curves.js';
+	import { isBandScale } from '../core/scales.js';
+	import { stackKey } from '../core/stack.js';
+	import type { StackOffset, StackOrder } from '../core/stack.js';
+	import { motionPath } 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;
+		name?: string;
+		description?: string;
+		describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+		curve?: CurveName;
+		stacking?: StackOffset;
+		order?: StackOrder;
+		stack?: string;
+		baseline?: number;
+		fillOpacity?: number;
+		line?: boolean;
+		strokeWidth?: number;
+		index?: number;
+		/** Marker visibility: 'always' | 'hover' | 'none'. */
+		markers?: MarkerMode;
+		/** Symbol shape for markers. */
+		symbol?: SymbolName | SymbolType;
+		/** Symbol area in px² (default 64). */
+		symbolSize?: number;
+		class?: string;
+	}
+
+	let {
+		data,
+		x,
+		y,
+		color,
+		name,
+		description,
+		describePoint,
+		curve = 'linear',
+		stacking,
+		order,
+		stack,
+		baseline = 0,
+		fillOpacity = 0.2,
+		line = true,
+		strokeWidth = 2,
+		index: indexProp,
+		markers = 'none',
+		symbol: symbolProp,
+		symbolSize = 64,
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	const points = $derived(normalizePoints(data, { x, y }));
+	const stackedMeta = $derived(
+		stacking ? { id: stack ?? 'fc-stack', offset: stacking, order } : undefined
+	);
+	const registration = ctx.registerSeries(() => ({
+		points,
+		name,
+		color: resolvedColor,
+		stacked: stackedMeta,
+		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 extents = $derived(stackedMeta ? ctx.stackFor(registration.index) : undefined);
+
+	const baselinePx = $derived.by(() => {
+		if (isBandScale(ctx.yScale)) return ctx.innerHeight;
+		const [lo, hi] = ctx.yScale.domain() as [number, number];
+		return ctx.yPos(Math.max(Math.min(lo, hi), Math.min(Math.max(lo, hi), baseline)));
+	});
+
+	const defined = (p: NormalizedPoint<T>) => {
+		if (p.y == null || !Number.isFinite(ctx.xPos(p.x))) return false;
+		if (extents && !extents.has(stackKey(p.x))) return false;
+		return true;
+	};
+
+	const y0Of = (p: NormalizedPoint<T>) =>
+		extents ? ctx.yPos(extents.get(stackKey(p.x))![0]) : baselinePx;
+	const y1Of = (p: NormalizedPoint<T>) =>
+		extents ? ctx.yPos(extents.get(stackKey(p.x))![1]) : ctx.yPos(p.y as number);
+
+	const areaPath = $derived.by(() => {
+		const generator = d3area<NormalizedPoint<T>>()
+			.defined(defined)
+			.x((p) => ctx.xPos(p.x))
+			.y0(y0Of)
+			.y1(y1Of)
+			.curve(curveFor(curve));
+		return generator(points) ?? '';
+	});
+
+	const linePath = $derived.by(() => {
+		if (!line) return '';
+		const generator = d3line<NormalizedPoint<T>>()
+			.defined(defined)
+			.x((p) => ctx.xPos(p.x))
+			.y(y1Of)
+			.curve(curveFor(curve));
+		return generator(points) ?? '';
+	});
+
+	// --- markers ---
+	const resolvedSymbol = $derived(
+		symbolProp ? symbolFor(symbolProp) : symbolByIndex(seriesIndex)
+	);
+	const markerPathD = $derived(markers !== 'none' ? symbolPath(resolvedSymbol, symbolSize) : '');
+
+	interface MarkerDot {
+		cx: number;
+		cy: number;
+		index: number;
+	}
+	const markerDots = $derived.by((): MarkerDot[] => {
+		if (markers === 'none') return [];
+		const out: MarkerDot[] = [];
+		for (const p of points) {
+			if (!defined(p)) continue;
+			out.push({ cx: ctx.xPos(p.x), cy: y1Of(p), index: p.index });
+		}
+		return out;
+	});
+
+	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 areaMorph = motionPath(() => areaPath, () => rootEl);
+	const lineMorph = motionPath(() => linePath, () => rootEl);
+</script>
+
+{#if visible}
+	<g class="fc-series fc-area {klass}" data-name={name} bind:this={rootEl}>
+		<path
+			class="fc-area-fill"
+			class:fc-fade={mounted}
+			d={areaMorph.d}
+			fill={resolvedColor}
+			fill-opacity={fillOpacity}
+		/>
+		{#if line && linePath}
+			<path
+				class="fc-area-line"
+				class:fc-draw={mounted}
+				d={lineMorph.d}
+				pathLength="1"
+				fill="none"
+				stroke={resolvedColor}
+				stroke-width={strokeWidth}
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		{/if}
+		{#if markers !== 'none'}
+			{#each markerDots as d (d.index)}
+				<g transform="translate({d.cx},{d.cy})">
+					<path
+						class="fc-marker"
+						class:fc-marker-active={markers === 'always' || d.index === hoveredIndex}
+						d={markerPathD}
+						fill={resolvedColor}
+					/>
+				</g>
+			{/each}
+		{/if}
+	</g>
+{/if}
+
+<style>
+	.fc-area-fill,
+	.fc-area-line {
+		transition: opacity var(--fc-duration-hover, 120ms) var(--fc-ease, ease);
+	}
+	.fc-fade {
+		animation: fc-fade-in var(--fc-duration, 500ms) var(--fc-ease, ease);
+	}
+	@keyframes fc-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	.fc-draw {
+		stroke-dasharray: 1 1;
+		animation: fc-draw-on var(--fc-duration, 500ms) var(--fc-ease, ease) both;
+	}
+	@keyframes fc-draw-on {
+		from {
+			stroke-dashoffset: 1;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+	:global(.fc-svg:has(.fc-series:hover)) .fc-series:not(:hover) .fc-area-fill,
+	:global(.fc-svg:has(.fc-series:hover)) .fc-series:not(:hover) .fc-area-line {
+		opacity: 0.25;
+	}
+
+	/* markers */
+	.fc-marker {
+		opacity: 0;
+		transform: scale(0.4);
+		transform-box: fill-box;
+		transform-origin: center;
+		transition:
+			opacity var(--fc-marker-out, 300ms) var(--fc-ease, ease),
+			transform var(--fc-marker-out, 300ms) var(--fc-ease, ease);
+	}
+	.fc-marker-active {
+		opacity: 1;
+		transform: scale(1);
+		transition:
+			opacity var(--fc-marker-in, 250ms) var(--fc-ease, ease),
+			transform var(--fc-marker-in, 250ms) var(--fc-ease, ease);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.fc-fade,
+		.fc-draw {
+			animation: none;
+		}
+		.fc-area-fill,
+		.fc-area-line,
+		.fc-marker {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,54 @@
+import type { NormalizedPoint, XValue } from '../core/normalize.js';
+import type { CurveName } from '../core/curves.js';
+import type { StackOffset, StackOrder } from '../core/stack.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;
+        name?: string;
+        description?: string;
+        describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+        curve?: CurveName;
+        stacking?: StackOffset;
+        order?: StackOrder;
+        stack?: string;
+        baseline?: number;
+        fillOpacity?: number;
+        line?: boolean;
+        strokeWidth?: number;
+        index?: number;
+        /** Marker visibility: 'always' | 'hover' | 'none'. */
+        markers?: MarkerMode;
+        /** Symbol shape for markers. */
+        symbol?: SymbolName | SymbolType;
+        /** Symbol area in px² (default 64). */
+        symbolSize?: number;
+        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 Area: $$IsomorphicComponent;
+type Area<T> = InstanceType<typeof Area<T>>;
+export default Area;

package/dist/components/Axis.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getChartContext } from '../core/context.svelte.js';
+	import type { XValue } from '../core/normalize.js';
+
+	type Placement = 'top' | 'bottom' | 'left' | 'right';
+
+	interface Props {
+		/** bottom/top render the x scale; left/right render the y scale. */
+		placement?: Placement;
+		/** Tick count hint (continuous scales). Defaults to a density-based count. */
+		ticks?: number;
+		/** Tick label formatter; defaults to the scale's own (locale/precision aware). */
+		format?: (value: XValue, index: number) => string;
+		/** Axis title. */
+		title?: string;
+		tickSize?: number;
+		/** Rotate tick labels by N degrees (opt-in, e.g. 45 for crowded x axes). */
+		rotate?: number;
+		class?: string;
+		/** Replace the default tick label text entirely. */
+		tick?: Snippet<[{ value: XValue; formatted: string; index: number }]>;
+	}
+
+	let {
+		placement = 'bottom',
+		ticks,
+		format,
+		title,
+		tickSize = 6,
+		rotate = 0,
+		class: klass = '',
+		tick
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	const isX = $derived(placement === 'top' || placement === 'bottom');
+	const values = $derived(isX ? ctx.xTicks(ticks) : ctx.yTicks(ticks));
+	const fmt = $derived.by(() => {
+		if (format) return format;
+		const f = isX ? ctx.xTickFormat(ticks) : ctx.yTickFormat(ticks);
+		return (value: XValue) => f(value);
+	});
+	const pos = $derived(isX ? ctx.xPos : ctx.yPos);
+
+	const offset = $derived.by(() => {
+		if (placement === 'bottom') return `translate(0, ${ctx.innerHeight})`;
+		if (placement === 'right') return `translate(${ctx.innerWidth}, 0)`;
+		return '';
+	});
+
+	// Outward direction: bottom/right grow positive, top/left negative.
+	const dir = $derived(placement === 'bottom' || placement === 'right' ? 1 : -1);
+	const labelGap = $derived((tickSize + 3) * dir);
+</script>
+
+<g class="fc-axis fc-axis-{isX ? 'x' : 'y'} fc-axis-{placement} {klass}" transform={offset}>
+	{#if isX}
+		<line class="fc-axis-line" x1="0" x2={ctx.innerWidth} y1="0" y2="0" />
+	{:else}
+		<line class="fc-axis-line" x1="0" x2="0" y1="0" y2={ctx.innerHeight} />
+	{/if}
+
+	{#each values as value, index (String(value))}
+		{@const p = pos(value)}
+		{#if Number.isFinite(p)}
+			<g class="fc-tick" transform={isX ? `translate(${p}, 0)` : `translate(0, ${p})`}>
+				{#if isX}
+					<line y2={tickSize * dir} />
+				{:else}
+					<line x2={tickSize * dir} />
+				{/if}
+				{#if tick}
+					{@render tick({ value, formatted: fmt(value, index), index })}
+				{:else if isX}
+					<text
+						class="fc-tick-label"
+						y={rotate ? labelGap - 2 : labelGap}
+						dy={dir === 1 ? '0.71em' : '0'}
+						text-anchor={rotate ? (dir === 1 ? 'end' : 'start') : 'middle'}
+						transform={rotate ? `rotate(${-rotate}, 0, ${labelGap})` : undefined}
+					>
+						{fmt(value, index)}
+					</text>
+				{:else}
+					<text
+						class="fc-tick-label"
+						x={labelGap}
+						dy="0.32em"
+						text-anchor={dir === 1 ? 'start' : 'end'}
+					>
+						{fmt(value, index)}
+					</text>
+				{/if}
+			</g>
+		{/if}
+	{/each}
+
+	{#if title}
+		{#if isX}
+			<text
+				class="fc-axis-title"
+				x={ctx.innerWidth / 2}
+				y={(tickSize + 26) * dir}
+				text-anchor="middle"
+			>
+				{title}
+			</text>
+		{:else}
+			<text
+				class="fc-axis-title"
+				transform="rotate(-90)"
+				x={-ctx.innerHeight / 2}
+				y={(tickSize + 30) * dir}
+				text-anchor="middle"
+			>
+				{title}
+			</text>
+		{/if}
+	{/if}
+</g>
+
+<style>
+	.fc-axis-line,
+	.fc-tick line {
+		stroke: var(--fc-axis, #94a3b8);
+		fill: none;
+	}
+	.fc-tick-label {
+		fill: var(--fc-axis-label, #64748b);
+		font-size: 11px;
+	}
+	.fc-axis-title {
+		fill: var(--fc-axis-label, #64748b);
+		font-size: 12px;
+		font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { XValue } from '../core/normalize.js';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+interface Props {
+    /** bottom/top render the x scale; left/right render the y scale. */
+    placement?: Placement;
+    /** Tick count hint (continuous scales). Defaults to a density-based count. */
+    ticks?: number;
+    /** Tick label formatter; defaults to the scale's own (locale/precision aware). */
+    format?: (value: XValue, index: number) => string;
+    /** Axis title. */
+    title?: string;
+    tickSize?: number;
+    /** Rotate tick labels by N degrees (opt-in, e.g. 45 for crowded x axes). */
+    rotate?: number;
+    class?: string;
+    /** Replace the default tick label text entirely. */
+    tick?: Snippet<[{
+        value: XValue;
+        formatted: string;
+        index: number;
+    }]>;
+}
+declare const Axis: import("svelte").Component<Props, {}, "">;
+type Axis = ReturnType<typeof Axis>;
+export default Axis;

package/dist/components/Bars.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" generics="T">
+	import { onDestroy } from 'svelte';
+	import { getChartContext } from '../core/context.svelte.js';
+	import { normalizePoints } from '../core/normalize.js';
+	import type { NormalizedPoint, XValue } from '../core/normalize.js';
+	import { isBandScale } from '../core/scales.js';
+	import { stackKey } from '../core/stack.js';
+	import type { StackOffset, StackOrder } from '../core/stack.js';
+	import { motionValue } from '../core/motion.svelte.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;
+		/**
+		 * Off (default) → side-by-side grouping with other bar series.
+		 * 'normal' → stack values; 'percent' → stack normalized to ±100.
+		 * (stream/silhouette also accepted but are intended for areas.)
+		 */
+		stacking?: StackOffset;
+		/** Layer ordering within the stack group. */
+		order?: StackOrder;
+		/** Stack group id — series sharing it stack together (default one shared group). */
+		stack?: string;
+		/** Fraction of the slot width trimmed from EACH side of a bar (0–0.5). */
+		barPadding?: number;
+		/** Corner radius. */
+		rx?: number;
+		/** Override the palette slot. */
+		index?: number;
+		class?: string;
+	}
+
+	let {
+		data,
+		x,
+		y,
+		color,
+		colorFor,
+		name,
+		description,
+		describePoint,
+		stacking,
+		order,
+		stack,
+		barPadding = 0.08,
+		rx = 0,
+		index: indexProp,
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	const points = $derived(normalizePoints(data, { x, y }));
+	const stackedMeta = $derived(
+		stacking ? { id: stack ?? 'fc-stack', offset: stacking, order } : undefined
+	);
+	// Getter runs lazily after init, so referencing deriveds declared below is safe.
+	const registration = ctx.registerSeries(() => ({
+		points,
+		name,
+		color: resolvedColor,
+		isBar: true,
+		stacked: stackedMeta,
+		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));
+
+	/** Bar width basis on continuous x scales: smallest gap between point centers. */
+	function continuousStep(centers: number[]): number {
+		if (centers.length < 2) return 24;
+		const sorted = [...centers].sort((a, b) => a - b);
+		let minDiff = Infinity;
+		for (let i = 1; i < sorted.length; i++) {
+			const diff = sorted[i] - sorted[i - 1];
+			if (diff > 0 && diff < minDiff) minDiff = diff;
+		}
+		return Number.isFinite(minDiff) ? minDiff * 0.8 : 24;
+	}
+
+	interface BarRect {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+		point: NormalizedPoint<T>;
+	}
+
+	const bars = $derived.by((): BarRect[] => {
+		if (!visible) return [];
+		const slot = ctx.barSlots.bySeries.get(registration.index);
+		if (slot === undefined) return [];
+		const slotCount = ctx.barSlots.count;
+		const extents = stackedMeta ? ctx.stackFor(registration.index) : undefined;
+		const xScale = ctx.xScale;
+		const band = isBandScale(xScale);
+		const step = band
+			? 0
+			: continuousStep(points.map((p) => ctx.xPos(p.x)).filter(Number.isFinite));
+		const clampY = (v: number) => Math.max(0, Math.min(ctx.innerHeight, v));
+
+		const out: BarRect[] = [];
+		for (const point of points) {
+			if (point.y == null) continue;
+
+			let groupStart: number;
+			let groupWidth: number;
+			if (band) {
+				const start = xScale(String(point.x));
+				if (start === undefined) continue;
+				groupStart = start;
+				groupWidth = xScale.bandwidth();
+			} else {
+				const center = ctx.xPos(point.x);
+				if (!Number.isFinite(center)) continue;
+				groupWidth = step;
+				groupStart = center - groupWidth / 2;
+			}
+
+			let v0 = 0;
+			let v1 = point.y;
+			if (extents) {
+				const extent = extents.get(stackKey(point.x));
+				if (!extent) continue;
+				[v0, v1] = extent;
+			}
+			const py0 = clampY(ctx.yPos(v0));
+			const py1 = clampY(ctx.yPos(v1));
+
+			const slotWidth = groupWidth / slotCount;
+			const inset = slotWidth * Math.max(0, Math.min(0.5, barPadding));
+			out.push({
+				x: groupStart + slot * slotWidth + inset,
+				y: Math.min(py0, py1),
+				width: Math.max(0, slotWidth - 2 * inset),
+				height: Math.abs(py1 - py0),
+				point
+			});
+		}
+		return out;
+	});
+
+	/** Pixel of value 0 — bars grow from this baseline. */
+	const baselinePx = $derived(Math.max(0, Math.min(ctx.innerHeight, ctx.yPos(0))));
+	const flatTarget = $derived(bars.flatMap((b) => [b.y, b.height]));
+	const flatCollapsed = $derived(bars.flatMap(() => [baselinePx, 0]));
+
+	let rootEl: SVGGElement | undefined = $state();
+	const anim = motionValue(
+		() => flatTarget,
+		() => flatCollapsed,
+		() => rootEl
+	);
+</script>
+
+{#if visible}
+	<g class="fc-series fc-bars {klass}" data-name={name} bind:this={rootEl}>
+		{#each bars as bar, i (bar.point.index)}
+			<rect
+				class="fc-bar"
+				x={bar.x}
+				y={anim.current[i * 2]}
+				width={bar.width}
+				height={anim.current[i * 2 + 1]}
+				{rx}
+				fill={colorFor?.(bar.point.datum, bar.point.index) ?? resolvedColor}
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.fc-bar {
+		transition: opacity var(--fc-duration-hover, 120ms) var(--fc-ease, ease);
+	}
+	:global(.fc-svg:has(.fc-series:hover)) .fc-series:not(:hover) .fc-bar {
+		opacity: 0.35;
+	}
+</style>