@faintshadow/flarecharts 26.3.1

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

@@ -0,0 +1,56 @@
+import type { BandSpec, LegendSpec, PlotLineSpec, PlotOptions, SeriesOptions, SimpleAxisOptions, TooltipSpec } from '../core/options.js';
+import type { ResponsiveRule } from '../core/responsive.js';
+import type { Padding } from '../core/types.js';
+declare function $$render<T>(): {
+    props: {
+        series: SeriesOptions<T>[];
+        xAxis?: SimpleAxisOptions;
+        yAxis?: SimpleAxisOptions;
+        bands?: BandSpec[];
+        lines?: PlotLineSpec[];
+        grid?: boolean;
+        tooltip?: boolean | TooltipSpec;
+        legend?: boolean | LegendSpec;
+        plotOptions?: PlotOptions<T>;
+        padding?: Padding;
+        label?: string;
+        description?: string;
+    } & {
+        responsive?: ResponsiveRule<{
+            series: SeriesOptions<T>[];
+            xAxis?: SimpleAxisOptions;
+            yAxis?: SimpleAxisOptions;
+            bands?: BandSpec[];
+            lines?: PlotLineSpec[];
+            grid?: boolean;
+            tooltip?: boolean | TooltipSpec;
+            legend?: boolean | LegendSpec;
+            plotOptions?: PlotOptions<T>;
+            padding?: Padding;
+            label?: string;
+            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 BoxPlotChart: $$IsomorphicComponent;
+type BoxPlotChart<T> = InstanceType<typeof BoxPlotChart<T>>;
+export default BoxPlotChart;

package/dist/charts/DonutChart.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import Chart from '../components/Chart.svelte';
+	import Svg from '../components/Svg.svelte';
+	import Arc from '../components/Arc.svelte';
+	import { applyResponsive } from '../core/responsive.js';
+	import type { ResponsiveRule } from '../core/responsive.js';
+
+	const formatTotalDefault = (total: number) => total.toLocaleString();
+
+	interface BaseProps {
+		/** number[] | { value, label? }[] | T[] with accessors. */
+		data: readonly T[];
+		value?: (datum: T, index: number) => number | null | undefined;
+		sliceLabel?: (datum: T, index: number) => string;
+		innerRadius?: number;
+		radius?: number;
+		padAngle?: number;
+		cornerRadius?: number;
+		colors?: readonly string[];
+		labels?: 'inside' | 'outside' | 'none';
+		/** Caption under the default center total. */
+		centerCaption?: string;
+		/** Show the built-in center total (donuts only). */
+		showTotal?: boolean;
+		formatTotal?: (total: number) => string;
+		label?: string;
+		/** Accessible chart description. */
+		description?: string;
+	}
+
+	interface Props extends BaseProps {
+		/** Replaces the built-in center entirely. */
+		center?: Snippet<[{ total: number; radius: number; innerRadius: number }]>;
+		responsive?: ResponsiveRule<BaseProps>[];
+		class?: string;
+	}
+
+	let {
+		data,
+		value,
+		sliceLabel,
+		innerRadius = 0.62,
+		radius = 0.8,
+		padAngle = 1,
+		cornerRadius = 2,
+		colors,
+		labels = 'outside',
+		centerCaption,
+		showTotal = true,
+		formatTotal = formatTotalDefault,
+		label = 'Donut chart',
+		description,
+		center,
+		responsive,
+		class: klass = ''
+	}: Props = $props();
+
+	let width = $state(0);
+
+	const eff = $derived(
+		applyResponsive(
+			{
+				data,
+				value,
+				sliceLabel,
+				innerRadius,
+				radius,
+				padAngle,
+				cornerRadius,
+				colors,
+				labels,
+				centerCaption,
+				showTotal,
+				formatTotal,
+				label,
+				description
+			},
+			responsive,
+			width
+		)
+	);
+
+	const centerOn = $derived(eff.showTotal && (eff.innerRadius ?? 0) > 0);
+</script>
+
+{#snippet defaultCenter({ total }: { total: number; radius: number; innerRadius: number })}
+	<text class="fc-donut-total" text-anchor="middle" dy={eff.centerCaption ? '-0.05em' : '0.35em'}>
+		{(eff.formatTotal ?? formatTotalDefault)(total)}
+	</text>
+	{#if eff.centerCaption}
+		<text class="fc-donut-caption" text-anchor="middle" dy="1.5em">{eff.centerCaption}</text>
+	{/if}
+{/snippet}
+
+<div class="fc-simple fc-donut-chart {klass}" bind:clientWidth={width}>
+	<Chart label={eff.label} description={eff.description}>
+		<Svg>
+			<Arc
+				data={eff.data}
+				value={eff.value}
+				label={eff.sliceLabel}
+				innerRadius={eff.innerRadius}
+				radius={eff.radius}
+				padAngle={eff.padAngle}
+				cornerRadius={eff.cornerRadius}
+				colors={eff.colors}
+				labelPosition={eff.labels}
+				center={center ?? (centerOn ? defaultCenter : undefined)}
+			/>
+		</Svg>
+	</Chart>
+</div>
+
+<style>
+	.fc-simple {
+		width: 100%;
+		height: 100%;
+	}
+	.fc-donut-chart :global(.fc-donut-total) {
+		font-size: 24px;
+		font-weight: 700;
+		fill: var(--fc-donut-total, currentColor);
+	}
+	.fc-donut-chart :global(.fc-donut-caption) {
+		font-size: 12px;
+		fill: var(--fc-axis-label, #64748b);
+	}
+</style>

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

@@ -0,0 +1,73 @@
+import type { Snippet } from 'svelte';
+import type { ResponsiveRule } from '../core/responsive.js';
+declare function $$render<T>(): {
+    props: {
+        /** number[] | { value, label? }[] | T[] with accessors. */
+        data: readonly T[];
+        value?: (datum: T, index: number) => number | null | undefined;
+        sliceLabel?: (datum: T, index: number) => string;
+        innerRadius?: number;
+        radius?: number;
+        padAngle?: number;
+        cornerRadius?: number;
+        colors?: readonly string[];
+        labels?: "inside" | "outside" | "none";
+        /** Caption under the default center total. */
+        centerCaption?: string;
+        /** Show the built-in center total (donuts only). */
+        showTotal?: boolean;
+        formatTotal?: (total: number) => string;
+        label?: string;
+        /** Accessible chart description. */
+        description?: string;
+    } & {
+        /** Replaces the built-in center entirely. */
+        center?: Snippet<[{
+            total: number;
+            radius: number;
+            innerRadius: number;
+        }]>;
+        responsive?: ResponsiveRule<{
+            /** number[] | { value, label? }[] | T[] with accessors. */
+            data: readonly T[];
+            value?: (datum: T, index: number) => number | null | undefined;
+            sliceLabel?: (datum: T, index: number) => string;
+            innerRadius?: number;
+            radius?: number;
+            padAngle?: number;
+            cornerRadius?: number;
+            colors?: readonly string[];
+            labels?: "inside" | "outside" | "none";
+            /** Caption under the default center total. */
+            centerCaption?: string;
+            /** Show the built-in center total (donuts only). */
+            showTotal?: boolean;
+            formatTotal?: (total: number) => string;
+            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 DonutChart: $$IsomorphicComponent;
+type DonutChart<T> = InstanceType<typeof DonutChart<T>>;
+export default DonutChart;

package/dist/charts/LineChart.svelte

@@ -0,0 +1,149 @@
+<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 Line from '../components/Line.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 { applyResponsive } from '../core/responsive.js';
+	import type { ResponsiveRule } from '../core/responsive.js';
+	import type { Padding } from '../core/types.js';
+
+	interface BaseProps {
+		series: SeriesOptions<T>[];
+		xAxis?: SimpleAxisOptions;
+		yAxis?: SimpleAxisOptions;
+		bands?: BandSpec[];
+		lines?: PlotLineSpec[];
+		grid?: boolean;
+		crosshair?: boolean;
+		tooltip?: boolean | TooltipSpec;
+		/** Defaults to on when there is more than one series. */
+		legend?: boolean | LegendSpec;
+		plotOptions?: PlotOptions<T>;
+		padding?: Padding;
+		label?: string;
+		/** Accessible chart description. */
+		description?: string;
+	}
+
+	interface Props extends BaseProps {
+		/** `{ maxWidth?/minWidth?, options }` rules merged over the props (precedence utility). */
+		responsive?: ResponsiveRule<BaseProps>[];
+		class?: string;
+	}
+
+	let {
+		series,
+		xAxis,
+		yAxis,
+		bands,
+		lines,
+		grid = true,
+		crosshair = false,
+		tooltip = true,
+		legend,
+		plotOptions,
+		padding,
+		label = 'Line chart',
+		description,
+		responsive,
+		class: klass = ''
+	}: Props = $props();
+
+	let width = $state(0);
+
+	const eff = $derived(
+		applyResponsive(
+			{ series, xAxis, yAxis, bands, lines, grid, crosshair, tooltip, legend, plotOptions, padding, label, description },
+			responsive,
+			width
+		)
+	);
+
+	const resolved = $derived(eff.series.map((s) => resolveSeries(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-line-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}
+			{#if eff.crosshair}<Crosshair />{/if}
+			{#each resolved as s, i (i)}
+				<Line
+					data={s.data}
+					x={s.x}
+					y={s.y}
+					color={s.color}
+					name={s.name}
+					description={s.description}
+					curve={s.curve}
+					strokeWidth={s.strokeWidth}
+					index={i}
+					markers={s.markers}
+					symbol={s.symbol}
+					symbolSize={s.symbolSize}
+				/>
+			{/each}
+			{#each resolved as s, i (i)}
+				{#if s.labels}
+					<Labels data={s.data} x={s.x} y={s.y} />
+				{/if}
+			{/each}
+			{#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/LineChart.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { BandSpec, LegendSpec, PlotLineSpec, PlotOptions, SeriesOptions, SimpleAxisOptions, TooltipSpec } from '../core/options.js';
+import type { ResponsiveRule } from '../core/responsive.js';
+import type { Padding } from '../core/types.js';
+declare function $$render<T>(): {
+    props: {
+        series: SeriesOptions<T>[];
+        xAxis?: SimpleAxisOptions;
+        yAxis?: SimpleAxisOptions;
+        bands?: BandSpec[];
+        lines?: PlotLineSpec[];
+        grid?: boolean;
+        crosshair?: boolean;
+        tooltip?: boolean | TooltipSpec;
+        /** Defaults to on when there is more than one series. */
+        legend?: boolean | LegendSpec;
+        plotOptions?: PlotOptions<T>;
+        padding?: Padding;
+        label?: string;
+        /** Accessible chart description. */
+        description?: string;
+    } & {
+        /** `{ maxWidth?/minWidth?, options }` rules merged over the props (precedence utility). */
+        responsive?: ResponsiveRule<{
+            series: SeriesOptions<T>[];
+            xAxis?: SimpleAxisOptions;
+            yAxis?: SimpleAxisOptions;
+            bands?: BandSpec[];
+            lines?: PlotLineSpec[];
+            grid?: boolean;
+            crosshair?: boolean;
+            tooltip?: boolean | TooltipSpec;
+            /** Defaults to on when there is more than one series. */
+            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 LineChart: $$IsomorphicComponent;
+type LineChart<T> = InstanceType<typeof LineChart<T>>;
+export default LineChart;

package/dist/charts/Sparkline.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" generics="T">
+	import Chart from '../components/Chart.svelte';
+	import Svg from '../components/Svg.svelte';
+	import Line from '../components/Line.svelte';
+	import Area from '../components/Area.svelte';
+	import Bars from '../components/Bars.svelte';
+	import Points from '../components/Points.svelte';
+	import { normalizePoints } from '../core/normalize.js';
+	import type { XValue } from '../core/normalize.js';
+
+	interface Props {
+		data: readonly T[];
+		x?: (datum: T, index: number) => XValue;
+		y?: (datum: T, index: number) => number | null | undefined;
+		type?: 'line' | 'area' | 'bars';
+		color?: string;
+		strokeWidth?: number;
+		/** Mark the last (non-gap) point. */
+		dot?: boolean;
+		/** Number = px. Defaults size a table cell: 120 × 32. */
+		width?: number | string;
+		height?: number | string;
+		/** Accessible name (role="img"). */
+		label?: string;
+		class?: string;
+	}
+
+	let {
+		data,
+		x,
+		y,
+		type = 'line',
+		color,
+		strokeWidth = 1.5,
+		dot = false,
+		width = 120,
+		height = 32,
+		label = 'Sparkline',
+		class: klass = ''
+	}: Props = $props();
+
+	const css = (v: number | string) => (typeof v === 'number' ? `${v}px` : v);
+
+	// Last non-gap point as an [x, y] tuple — position survives any accessor/data shape.
+	const lastPoint = $derived.by((): [XValue, number] | null => {
+		const points = normalizePoints(data, { x, y });
+		for (let i = points.length - 1; i >= 0; i--) {
+			const p = points[i];
+			if (p.y != null) return [p.x, p.y];
+		}
+		return null;
+	});
+</script>
+
+<span class="fc-sparkline {klass}" style="width: {css(width)}; height: {css(height)};">
+	<!-- keyboard/dataTable off: a cell-sized trend glyph; the label carries the meaning. -->
+	<Chart
+		{label}
+		x={{ nice: false }}
+		y={{ nice: false }}
+		padding={{ top: 2, right: 2, bottom: 2, left: 2 }}
+		keyboard={false}
+		dataTable={false}
+	>
+		<Svg>
+			{#if type === 'bars'}
+				<Bars {data} {x} {y} {color} barPadding={0.15} />
+			{:else if type === 'area'}
+				<Area {data} {x} {y} {color} {strokeWidth} fillOpacity={0.15} />
+			{:else}
+				<Line {data} {x} {y} {color} {strokeWidth} />
+			{/if}
+			{#if dot && lastPoint}
+				<Points data={[lastPoint]} {color} index={0} r={2.5} />
+			{/if}
+		</Svg>
+	</Chart>
+</span>
+
+<style>
+	.fc-sparkline {
+		display: inline-block;
+		vertical-align: middle;
+		line-height: 0;
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,40 @@
+import type { XValue } from '../core/normalize.js';
+declare function $$render<T>(): {
+    props: {
+        data: readonly T[];
+        x?: (datum: T, index: number) => XValue;
+        y?: (datum: T, index: number) => number | null | undefined;
+        type?: "line" | "area" | "bars";
+        color?: string;
+        strokeWidth?: number;
+        /** Mark the last (non-gap) point. */
+        dot?: boolean;
+        /** Number = px. Defaults size a table cell: 120 × 32. */
+        width?: number | string;
+        height?: number | string;
+        /** Accessible name (role="img"). */
+        label?: 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 Sparkline: $$IsomorphicComponent;
+type Sparkline<T> = InstanceType<typeof Sparkline<T>>;
+export default Sparkline;