@faintshadow/flarecharts 26.3.1

package/dist/charts/StackChart.svelte

@@ -0,0 +1,157 @@
+<script lang="ts" generics="T">
+	import Chart from '../components/Chart.svelte';
+	import Svg from '../components/Svg.svelte';
+	import Axis from '../components/Axis.svelte';
+	import Grid from '../components/Grid.svelte';
+	import Area from '../components/Area.svelte';
+
+	import Labels from '../components/Labels.svelte';
+	import PlotBand from '../components/PlotBand.svelte';
+	import PlotLine from '../components/PlotLine.svelte';
+	import Tooltip from '../components/Tooltip.svelte';
+	import Crosshair from '../components/Crosshair.svelte';
+	import Legend from '../components/Legend.svelte';
+	import { resolveSeries, splitAxisOptions } from '../core/options.js';
+	import type {
+		BandSpec,
+		LegendSpec,
+		PlotLineSpec,
+		PlotOptions,
+		SeriesOptions,
+		SimpleAxisOptions,
+		TooltipSpec
+	} from '../core/options.js';
+	import type { StackOffset, StackOrder } from '../core/stack.js';
+	import { applyResponsive } from '../core/responsive.js';
+	import type { ResponsiveRule } from '../core/responsive.js';
+	import type { Padding } from '../core/types.js';
+
+	interface BaseProps {
+		series: SeriesOptions<T>[];
+		/** How the stack sits: normal/percent anchor at zero; stream/silhouette float. */
+		offset?: StackOffset;
+		/** Layer ordering within the stack. */
+		order?: StackOrder;
+		xAxis?: SimpleAxisOptions;
+		yAxis?: SimpleAxisOptions;
+		bands?: BandSpec[];
+		lines?: PlotLineSpec[];
+		grid?: boolean;
+		crosshair?: boolean;
+		tooltip?: boolean | TooltipSpec;
+		legend?: boolean | LegendSpec;
+		plotOptions?: PlotOptions<T>;
+		padding?: Padding;
+		label?: string;
+		/** Accessible chart description. */
+		description?: string;
+	}
+
+	interface Props extends BaseProps {
+		responsive?: ResponsiveRule<BaseProps>[];
+		class?: string;
+	}
+
+	let {
+		series,
+		offset = 'normal',
+		order = 'none',
+		xAxis,
+		yAxis,
+		bands,
+		lines,
+		grid = true,
+		crosshair = false,
+		tooltip = true,
+		legend,
+		plotOptions,
+		padding,
+		label = 'Stacked chart',
+		description,
+		responsive,
+		class: klass = ''
+	}: Props = $props();
+
+	let width = $state(0);
+
+	const eff = $derived(
+		applyResponsive(
+			{ series, offset, order, xAxis, yAxis, bands, lines, grid, crosshair, tooltip, legend, plotOptions, padding, label, description },
+			responsive,
+			width
+		)
+	);
+
+	// Stacked areas read more solidly than the default 0.2 fill; consumers can
+	// still override via plotOptions/series.
+	const resolved = $derived(eff.series.map((s) => resolveSeries({ fillOpacity: 0.85, ...eff.plotOptions }, s)));
+	const xa = $derived(splitAxisOptions(eff.xAxis));
+	const ya = $derived(splitAxisOptions(eff.yAxis));
+
+	const legendOn = $derived(
+		eff.legend === undefined ? eff.series.length > 1 : eff.legend !== false
+	);
+	const legendPos = $derived(
+		typeof eff.legend === 'object' && eff.legend ? (eff.legend.position ?? 'bottom') : 'bottom'
+	);
+	const tooltipOn = $derived(eff.tooltip !== false);
+	const tip = $derived(typeof eff.tooltip === 'object' && eff.tooltip ? eff.tooltip : {});
+	const pad = $derived({
+		...(legendOn ? (legendPos === 'top' ? { top: 48 } : { bottom: 56 }) : {}),
+		...eff.padding
+	});
+</script>
+
+<div class="fc-simple fc-stack-chart {klass}" bind:clientWidth={width}>
+	<Chart x={xa.scale} y={ya.scale} padding={pad} label={eff.label} description={eff.description}>
+		<Svg>
+			{#if eff.grid}<Grid y />{/if}
+			{#each eff.bands ?? [] as band, i (i)}
+				<PlotBand axis={band.axis} from={band.from} to={band.to} color={band.color} label={band.label} />
+			{/each}
+			{#each eff.lines ?? [] as pl, i (i)}
+				<PlotLine axis={pl.axis} value={pl.value} color={pl.color} dash={pl.dash} label={pl.label} />
+			{/each}
+			{#each resolved as s, i (i)}
+				<Area
+					data={s.data}
+					x={s.x}
+					y={s.y}
+					color={s.color}
+					name={s.name}
+					description={s.description}
+					curve={s.curve}
+					fillOpacity={s.fillOpacity}
+					stacking={eff.offset}
+					order={eff.order}
+					stack="fc-stack"
+					line={false}
+					index={i}
+				/>
+			{/each}
+			{#each resolved as s, i (i)}
+				{#if s.labels}
+					<Labels data={s.data} x={s.x} y={s.y} />
+				{/if}
+			{/each}
+			{#if eff.crosshair}<Crosshair />{/if}
+			{#if xa.visible}
+				<Axis placement="bottom" title={xa.display.title} ticks={xa.display.ticks} format={xa.display.format} rotate={xa.display.rotate} />
+			{/if}
+			{#if ya.visible}
+				<Axis placement="left" title={ya.display.title} ticks={ya.display.ticks} format={ya.display.format} rotate={ya.display.rotate} />
+			{/if}
+		</Svg>
+		{#if tooltipOn}
+			<Tooltip mode={tip.mode ?? 'bisect-x'} shared={tip.shared ?? true} formatX={tip.formatX} formatY={tip.formatY} />
+		{/if}
+		{#if legendOn}<Legend position={legendPos} />{/if}
+	</Chart>
+</div>
+
+<style>
+	.fc-simple {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/charts/StackChart.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { BandSpec, LegendSpec, PlotLineSpec, PlotOptions, SeriesOptions, SimpleAxisOptions, TooltipSpec } from '../core/options.js';
+import type { StackOffset, StackOrder } from '../core/stack.js';
+import type { ResponsiveRule } from '../core/responsive.js';
+import type { Padding } from '../core/types.js';
+declare function $$render<T>(): {
+    props: {
+        series: SeriesOptions<T>[];
+        /** How the stack sits: normal/percent anchor at zero; stream/silhouette float. */
+        offset?: StackOffset;
+        /** Layer ordering within the stack. */
+        order?: StackOrder;
+        xAxis?: SimpleAxisOptions;
+        yAxis?: SimpleAxisOptions;
+        bands?: BandSpec[];
+        lines?: PlotLineSpec[];
+        grid?: boolean;
+        crosshair?: boolean;
+        tooltip?: boolean | TooltipSpec;
+        legend?: boolean | LegendSpec;
+        plotOptions?: PlotOptions<T>;
+        padding?: Padding;
+        label?: string;
+        /** Accessible chart description. */
+        description?: string;
+    } & {
+        responsive?: ResponsiveRule<{
+            series: SeriesOptions<T>[];
+            /** How the stack sits: normal/percent anchor at zero; stream/silhouette float. */
+            offset?: StackOffset;
+            /** Layer ordering within the stack. */
+            order?: StackOrder;
+            xAxis?: SimpleAxisOptions;
+            yAxis?: SimpleAxisOptions;
+            bands?: BandSpec[];
+            lines?: PlotLineSpec[];
+            grid?: boolean;
+            crosshair?: boolean;
+            tooltip?: boolean | TooltipSpec;
+            legend?: boolean | LegendSpec;
+            plotOptions?: PlotOptions<T>;
+            padding?: Padding;
+            label?: string;
+            /** Accessible chart description. */
+            description?: 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 StackChart: $$IsomorphicComponent;
+type StackChart<T> = InstanceType<typeof StackChart<T>>;
+export default StackChart;

package/dist/components/Arc.svelte

@@ -0,0 +1,202 @@
+<script lang="ts" generics="T">
+	import { arc as d3arc, pie as d3pie } from 'd3-shape';
+	import type { PieArcDatum } from 'd3-shape';
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+	import { getChartContext } from '../core/context.svelte.js';
+	import { seriesColorVar } from '../core/palette.js';
+
+	interface Slice {
+		value: number;
+		label: string;
+		datum: T;
+		index: number;
+		color: string;
+		percent: number;
+	}
+
+	interface Props {
+		/** number[] | { value, label? }[] | T[] with accessors. Zero/negative values are skipped. */
+		data: readonly T[];
+		value?: (datum: T, index: number) => number | null | undefined;
+		label?: (datum: T, index: number) => string;
+		/** Inner radius as a 0–1 fraction of the outer radius (0 = pie, ~0.6 = donut). */
+		innerRadius?: number;
+		/** Outer radius as a 0–1 fraction of the available half-extent. */
+		radius?: number;
+		/** Gap between slices, degrees. */
+		padAngle?: number;
+		cornerRadius?: number;
+		/** Degrees, 0 = 12 o'clock, clockwise. */
+		startAngle?: number;
+		endAngle?: number;
+		/** Per-slice color overrides (any CSS strings); defaults to the palette. */
+		colors?: readonly string[];
+		labelPosition?: 'inside' | 'outside' | 'none';
+		/** Rendered at the center (SVG coordinates, origin = center) — donut totals etc. */
+		center?: Snippet<[{ total: number; radius: number; innerRadius: number }]>;
+		class?: string;
+	}
+
+	let {
+		data,
+		value,
+		label,
+		innerRadius = 0,
+		radius = 1,
+		padAngle = 0,
+		cornerRadius = 0,
+		startAngle = 0,
+		endAngle = 360,
+		colors,
+		labelPosition = 'none',
+		center,
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
+
+	const rad = (degrees: number) => (degrees * Math.PI) / 180;
+
+	function sliceValue(datum: T, index: number): number | null {
+		if (value) return value(datum, index) ?? null;
+		if (typeof datum === 'number') return datum;
+		if (datum && typeof datum === 'object' && 'value' in datum) {
+			const v = (datum as { value: unknown }).value;
+			return typeof v === 'number' ? v : null;
+		}
+		return null;
+	}
+
+	function sliceLabel(datum: T, index: number): string {
+		if (label) return label(datum, index);
+		if (datum && typeof datum === 'object' && 'label' in datum) {
+			return String((datum as { label: unknown }).label);
+		}
+		return String(index);
+	}
+
+	const slices = $derived.by((): Slice[] => {
+		const kept: Slice[] = [];
+		let total = 0;
+		for (let i = 0; i < data.length; i++) {
+			const v = sliceValue(data[i], i);
+			if (v == null || !Number.isFinite(v) || v <= 0) continue;
+			total += v;
+			kept.push({
+				value: v,
+				label: sliceLabel(data[i], i),
+				datum: data[i],
+				index: i,
+				color: colors?.[kept.length % (colors.length || 1)] ?? seriesColorVar(kept.length),
+				percent: 0
+			});
+		}
+		for (const s of kept) s.percent = total === 0 ? 0 : (s.value / total) * 100;
+		return kept;
+	});
+
+	const total = $derived(slices.reduce((sum, s) => sum + s.value, 0));
+
+	const outerR = $derived((Math.min(ctx.innerWidth, ctx.innerHeight) / 2) * radius);
+	const innerR = $derived(outerR * Math.max(0, Math.min(0.99, innerRadius)));
+
+	const arcs = $derived.by(() => {
+		const generator = d3pie<Slice>()
+			.sort(null)
+			.value((s) => s.value)
+			.startAngle(rad(startAngle))
+			.endAngle(rad(endAngle))
+			.padAngle(rad(padAngle));
+		return generator(slices);
+	});
+
+	const arcPath = $derived(
+		d3arc<PieArcDatum<Slice>>()
+			.innerRadius(innerR)
+			.outerRadius(outerR)
+			.cornerRadius(cornerRadius)
+	);
+
+	function labelPlacement(a: PieArcDatum<Slice>) {
+		if (labelPosition === 'inside') {
+			const [x, y] = arcPath.centroid(a);
+			return { x, y, anchor: 'middle' as const };
+		}
+		const mid = (a.startAngle + a.endAngle) / 2;
+		const r = outerR + 12;
+		return {
+			x: Math.sin(mid) * r,
+			y: -Math.cos(mid) * r,
+			anchor: mid > Math.PI ? ('end' as const) : ('start' as const)
+		};
+	}
+</script>
+
+<g class="fc-arc {klass}" class:fc-arc-enter={mounted} transform="translate({ctx.innerWidth / 2}, {ctx.innerHeight / 2})">
+	{#each arcs as a (a.data.index)}
+		<path class="fc-arc-slice" d={arcPath(a) ?? ''} fill={a.data.color} data-label={a.data.label} />
+	{/each}
+	{#if labelPosition !== 'none'}
+		{#each arcs as a (a.data.index)}
+			{@const placement = labelPlacement(a)}
+			<text
+				class="fc-arc-label fc-arc-label-{labelPosition}"
+				x={placement.x}
+				y={placement.y}
+				text-anchor={placement.anchor}
+				dy="0.32em"
+			>
+				{a.data.label}
+			</text>
+		{/each}
+	{/if}
+	{#if center}
+		<g class="fc-arc-center">
+			{@render center({ total, radius: outerR, innerRadius: innerR })}
+		</g>
+	{/if}
+</g>
+
+<style>
+	.fc-arc-enter {
+		animation: fc-arc-in var(--fc-duration, 500ms) var(--fc-ease, ease);
+	}
+	@keyframes fc-arc-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	.fc-arc-slice {
+		stroke: none;
+		transition: opacity var(--fc-duration-hover, 120ms) var(--fc-ease, ease);
+	}
+	.fc-arc-slice:hover {
+		opacity: 0.85;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.fc-arc-enter {
+			animation: none;
+		}
+		.fc-arc-slice {
+			transition: none;
+		}
+	}
+	.fc-arc-label {
+		font-size: 11px;
+	}
+	.fc-arc-label-outside {
+		fill: var(--fc-axis-label, #64748b);
+	}
+	.fc-arc-label-inside {
+		fill: var(--fc-arc-label-inside, #ffffff);
+	}
+</style>

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

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** number[] | { value, label? }[] | T[] with accessors. Zero/negative values are skipped. */
+        data: readonly T[];
+        value?: (datum: T, index: number) => number | null | undefined;
+        label?: (datum: T, index: number) => string;
+        /** Inner radius as a 0–1 fraction of the outer radius (0 = pie, ~0.6 = donut). */
+        innerRadius?: number;
+        /** Outer radius as a 0–1 fraction of the available half-extent. */
+        radius?: number;
+        /** Gap between slices, degrees. */
+        padAngle?: number;
+        cornerRadius?: number;
+        /** Degrees, 0 = 12 o'clock, clockwise. */
+        startAngle?: number;
+        endAngle?: number;
+        /** Per-slice color overrides (any CSS strings); defaults to the palette. */
+        colors?: readonly string[];
+        labelPosition?: "inside" | "outside" | "none";
+        /** Rendered at the center (SVG coordinates, origin = center) — donut totals etc. */
+        center?: Snippet<[{
+            total: number;
+            radius: number;
+            innerRadius: 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 Arc: $$IsomorphicComponent;
+type Arc<T> = InstanceType<typeof Arc<T>>;
+export default Arc;