@fundar/data-chart-telling 0.0.64 → 1.1.0

package/examples/Markers.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './data';
+</script>
+
+<!-- Markers add marks to a plot: a hover highlight, a reference rule and a delta between two series. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={LIFE}
+	x="year"
+	y="value"
+	color="sex"
+	scales={{ x: { edgeTicks: true } }}
+	markers={[
+		{ type: 'hover' },
+		{ type: 'rule', axis: 'x', value: 2001, styles: { stroke: '#999', strokeDasharray: '4 4' } },
+		{
+			type: 'delta',
+			axis: 'x',
+			at: 1980,
+			from: { type: 'series', series: 'female' },
+			to: { type: 'series', series: 'male' },
+			formatDiff: (difference) => difference.toFixed(1)
+		}
+	]}
+/>

package/examples/MovingAverage.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- A 6-month moving average, run on the plot's rows. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	transforms={[{ type: 'windowY', k: 6, reduce: 'mean' }]}
+/>

package/examples/Pyramid.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { PyramidPlot } from '@fundar/data-chart-telling';
+	import { AGES } from './data';
+</script>
+
+<!-- A population pyramid: one side per `color` value. -->
+<PyramidPlot width={720} height={400} data={AGES} x="share" y="ageGroup" color="sex" />

package/examples/Regression.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ScatterPlot } from '@fundar/data-chart-telling';
+	import { COUNTRIES } from './data';
+</script>
+
+<!-- A linear regression with its 95% confidence band. -->
+<ScatterPlot
+	width={720}
+	height={400}
+	data={COUNTRIES}
+	x="gdp"
+	y="life"
+	statistics={[{ type: 'regression', regressionType: 'linear', confidence: 0.95 }]}
+/>

package/examples/ResponsiveLine.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	// A plot draws at the pixel size it is given. To fill a container (or the
+	// window), bind its size and pass it down.
+	let width = $state(0);
+	let height = $state(0);
+</script>
+
+<div class="fill" bind:clientWidth={width} bind:clientHeight={height}>
+	{#if width > 0 && height > 0}
+		<LinePlot
+			{width}
+			{height}
+			title="Monthly inflation by region"
+			subtitle="Change from the previous month, 2023-2026"
+			data={REGION_VALUES}
+			x="date"
+			y="value"
+			color="region"
+			scales={{
+				x: { label: 'Month' },
+				y: { label: 'Inflation (%)' }
+			}}
+			styles={{ values: { show: true, format: (v, name) => `${name}: ${v}` } }}
+			margins={{ right: 'auto' }}
+		/>
+	{/if}
+</div>
+
+<style>
+	.fill {
+		width: 100%;
+		height: 100vh;
+	}
+</style>

package/examples/Scales.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- Axis labels, a fixed domain with gridlines and a color per series. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	scales={{
+		x: { label: 'Month' },
+		y: { label: 'Index (Jan 2021 = 100)', domain: [0, 600], grid: true },
+		color: {
+			scheme: {
+				'Brent oil': '#1b9e77',
+				'Natural gas': '#d95f02',
+				Coal: '#7570b3',
+				Wheat: '#e7298a'
+			}
+		}
+	}}
+/>

package/examples/Scatter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ScatterPlot } from '@fundar/data-chart-telling';
+	import { COUNTRIES } from './data';
+</script>
+
+<!-- Points sized by `r`, colored by `color` and shaped by `symbol`. -->
+<ScatterPlot
+	width={720}
+	height={420}
+	data={COUNTRIES}
+	x="gdp"
+	y="life"
+	r="population"
+	color="continent"
+	symbol="income"
+/>

package/examples/SegmentHighlight.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	const gba = REGION_VALUES.filter((row) => row.region === 'GBA');
+</script>
+
+<!-- A grey line with the 2023-2024 surge drawn in red. -->
+<LinePlot
+	width={720}
+	height={380}
+	series={[{ name: 'GBA', x: 'date', y: 'value', data: gba }]}
+	segments={{
+		GBA: [
+			{ styles: { stroke: { stroke: '#94a3b8', strokeWidth: 1 } } },
+			{
+				areas: [{ x: { from: new Date('2023-07-01'), to: new Date('2024-03-01') } }],
+				styles: { stroke: { stroke: '#ef4444', strokeWidth: 3 } }
+			}
+		]
+	}}
+/>

package/examples/Segments.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import type { LineSegmentStyle, SegmentsConfig } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	// `segments` maps a series name (or 'default' for all series) to its rules.
+	const segments = {
+		default: [
+			{
+				areas: [{ x: { from: new Date('2025-01-01'), to: new Date('2026-08-01') } }],
+				styles: { stroke: { strokeDasharray: '6 4', strokeOpacity: 0.7 } }
+			}
+		]
+	} satisfies SegmentsConfig<LineSegmentStyle>;
+</script>
+
+<LinePlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	{segments}
+/>

package/examples/SegmentsBySeries.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { LIFE } from './data';
+</script>
+
+<!-- Segments per series name, plus `default` for rules shared by every series. -->
+<LinePlot
+	width={720}
+	height={380}
+	data={LIFE}
+	x="year"
+	y="value"
+	color="sex"
+	scales={{ x: { edgeTicks: true } }}
+	segments={{
+		female: [{ styles: { stroke: { stroke: 'steelblue' } } }],
+		male: [{ styles: { stroke: { stroke: 'tomato' } } }],
+		default: [
+			{
+				areas: [{ x: { from: 1965, to: 1980 } }],
+				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+			}
+		]
+	}}
+/>

package/examples/StackedArea.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AreaPlot } from '@fundar/data-chart-telling';
+	import { AGE_SHARES } from './data';
+</script>
+
+<!-- Each age group's share of the population, stacked with `stackY` so the bands add up to 100%. -->
+<AreaPlot
+	width={720}
+	height={400}
+	data={AGE_SHARES}
+	x="year"
+	y="share"
+	color="ageGroup"
+	scales={{ x: { ticks: [1991, 2001, 2010, 2022] } }}
+	transforms={[{ type: 'stackY' }]}
+/>

package/examples/StackedBars.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { SEX_SHARES } from './data';
+</script>
+
+<!-- Each sex's share of the population per census, stacked with `stackY` so a bar adds up to 100%. -->
+<BarPlot
+	width={720}
+	height={400}
+	data={SEX_SHARES}
+	x="year"
+	y="share"
+	color="sex"
+	transforms={[{ type: 'stackY' }]}
+/>

package/examples/TimelinePlayer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!--
+	`timeline` slices the rows by `accessor`. A timeline is a player by default:
+	play/pause, the current step and a slider in the chrome. `progress` sets where
+	it starts. `type: 'rule'` draws a guide beside the plot with no controls
+	instead (see TimelineRule). To build your own widget, read
+	`useFigure().timeline` (seek, play, pause, next, ...).
+-->
+<BarPlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="region"
+	y="value"
+	scales={{ y: { domain: [0, 30] } }}
+	timeline={{ accessor: 'date', progress: 0.25, player: { autoplay: false, loop: true } }}
+/>

package/examples/TimelineRule.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	// A rule has no controls of its own: the page moves it through `progress` (0 to 1).
+	// One step per year; a line plot shows every row up to the current step.
+	let progress = $state(0.5);
+</script>
+
+<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
+<LinePlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	timeline={{ accessor: (row) => row.date.getUTCFullYear(), type: 'rule', progress }}
+/>

package/examples/Tooltip.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!--
+	`tooltip` turns the floating box on (`true` for the defaults, or an object
+	to tune it); a `hover` marker draws the in-plot crosshair, dot and label.
+-->
+<LinePlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
+	y="value"
+	color="region"
+	tooltip={{ strategy: 'x', format: (row) => `${row.region}: ${row.value}` }}
+	markers={[{ type: 'hover' }]}
+/>

package/examples/TooltipCard.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	type Entry = { label: string; color: string; value: number; display: string };
+
+	let { heading, entries, footer }: { heading: string; entries: Entry[]; footer: string } =
+		$props();
+</script>
+
+<div class="rich-tooltip">
+	<div class="rich-tooltip__header">{heading}</div>
+	<div class="rich-tooltip__body">
+		{#each entries as entry (entry.label)}
+			<div class="rich-tooltip__row">
+				<span class="rich-tooltip__label">
+					<span class="rich-tooltip__swatch" style:background={entry.color}></span>
+					{entry.label}
+				</span>
+				<span class="rich-tooltip__value">{entry.display}</span>
+			</div>
+		{/each}
+	</div>
+	<div class="rich-tooltip__footer">{footer}</div>
+</div>
+
+<style>
+	.rich-tooltip {
+		min-width: 200px;
+		background: #fff;
+		color: #1f2937;
+		border-radius: 0.75rem;
+		overflow: hidden;
+		font-family: ui-sans-serif, system-ui, sans-serif;
+	}
+
+	.rich-tooltip__header {
+		padding: 0.6rem 0.9rem;
+		font-weight: 700;
+		font-size: 1rem;
+		text-transform: capitalize;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+	}
+
+	.rich-tooltip__body {
+		padding: 0.2rem 0.9rem;
+	}
+
+	.rich-tooltip__row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1.5rem;
+		padding: 0.35rem 0;
+		font-size: 0.85rem;
+		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+	}
+
+	.rich-tooltip__row:last-child {
+		border-bottom: none;
+	}
+
+	.rich-tooltip__label {
+		display: flex;
+		align-items: center;
+		gap: 0.45rem;
+	}
+
+	.rich-tooltip__swatch {
+		width: 0.65rem;
+		height: 0.65rem;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	.rich-tooltip__value {
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.rich-tooltip__footer {
+		padding: 0.45rem 0.9rem;
+		font-size: 0.7rem;
+		font-style: italic;
+		color: rgba(0, 0, 0, 0.5);
+		border-top: 1px solid rgba(0, 0, 0, 0.08);
+		background: rgba(0, 0, 0, 0.02);
+	}
+</style>

package/examples/ValueLabels.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { PRICES } from './data';
+</script>
+
+<!-- End-of-line value labels with a custom format and font size. -->
+<LinePlot
+	width={720}
+	height={400}
+	data={PRICES}
+	x="date"
+	y="index"
+	color="commodity"
+	styles={{
+		values: {
+			show: true,
+			format: (value, seriesName) => `${seriesName}: ${value.toFixed(0)}`,
+			fontStyle: { fontSize: 13 }
+		}
+	}}
+/>