@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/blocks/time-range-picker.svelte

@@ -0,0 +1,229 @@
+<script lang="ts" module>
+	export interface TimeRange {
+		preset: string;
+		start: Date;
+		end: Date;
+	}
+
+	export type TimeRangePreset = { id: string; label: string } & (
+		{ duration: number } | { range: (now: Date) => { start: Date; end: Date } }
+	);
+
+	const day = 86_400_000;
+
+	export const defaultTimeRangePresets: readonly TimeRangePreset[] = [
+		{ id: "24h", label: "24 hours", duration: day },
+		{ id: "7d", label: "7 days", duration: 7 * day },
+		{ id: "30d", label: "30 days", duration: 30 * day },
+		{ id: "90d", label: "90 days", duration: 90 * day },
+		{
+			id: "12m",
+			label: "12 months",
+			range: (now) => {
+				const start = new Date(now);
+				start.setFullYear(start.getFullYear() - 1);
+				return { start, end: new Date(now) };
+			},
+		},
+	];
+
+	export function rangeFor(preset: TimeRangePreset, now: Date): TimeRange {
+		const { start, end } =
+			"range" in preset
+				? preset.range(now)
+				: {
+						start: new Date(now.getTime() - preset.duration),
+						end: new Date(now),
+					};
+		return { preset: preset.id, start, end };
+	}
+</script>
+
+<script lang="ts">
+	import {
+		type DateValue,
+		fromDate,
+		getLocalTimeZone,
+		toCalendarDate,
+		today,
+	} from "@internationalized/date";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import { Button } from "../ui/button/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+	import * as Popover from "../ui/popover/index.js";
+	import { RangeCalendar } from "../ui/range-calendar/index.js";
+	import * as ToggleGroup from "../ui/toggle-group/index.js";
+	import { cn } from "../../utils.js";
+
+	const defaultMessages = {
+		label: "Time range",
+		custom: "Custom",
+		customTitle: "Custom range",
+		apply: "Apply",
+		cancel: "Cancel",
+	};
+
+	interface Props {
+		presets?: readonly TimeRangePreset[];
+		value?: TimeRange;
+		onchange?: (value: TimeRange) => void;
+		messages?: Partial<typeof defaultMessages>;
+		class?: string;
+	}
+
+	let {
+		presets = defaultTimeRangePresets,
+		value = $bindable(initialRange()),
+		onchange,
+		messages = {},
+		class: className,
+	}: Props = $props();
+
+	function initialRange(): TimeRange {
+		const now = new Date();
+		const preset = presets.find((entry) => entry.id === "30d") ?? presets[0];
+		return preset
+			? rangeFor(preset, now)
+			: { preset: "", start: now, end: now };
+	}
+
+	const timeZone = getLocalTimeZone();
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const dayFormat = new Intl.DateTimeFormat(undefined, {
+		day: "numeric",
+		month: "short",
+	});
+
+	let open = $state(false);
+	let draft = $state<{
+		start: DateValue | undefined;
+		end: DateValue | undefined;
+	}>({ start: undefined, end: undefined });
+	let placeholder = $state<DateValue>(today(timeZone));
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const custom = $derived(value.preset === "custom");
+	const customLabel = $derived(
+		custom ? dayFormat.formatRange(value.start, value.end) : text.custom,
+	);
+
+	function commit(next: TimeRange) {
+		value = next;
+		onchange?.(next);
+	}
+
+	function choose(id: string) {
+		const preset = presets.find((entry) => entry.id === id);
+		if (preset && id !== value.preset) {
+			commit(rangeFor(preset, new Date()));
+		}
+	}
+
+	function resetDraft() {
+		const end = toCalendarDate(fromDate(value.end, timeZone));
+		draft = { start: toCalendarDate(fromDate(value.start, timeZone)), end };
+		placeholder = desktop.current ? end.subtract({ months: 1 }) : end;
+	}
+
+	function apply() {
+		if (!draft.start || !draft.end) {
+			return;
+		}
+		commit({
+			preset: "custom",
+			start: draft.start.toDate(timeZone),
+			end: new Date(draft.end.add({ days: 1 }).toDate(timeZone).getTime() - 1),
+		});
+		open = false;
+	}
+
+	const itemClass =
+		"text-muted-foreground hover:text-foreground data-[state=on]:bg-background data-[state=on]:text-foreground h-11 rounded-full px-4 hover:bg-transparent data-[state=on]:shadow-sm md:h-8 md:px-3";
+</script>
+
+{#snippet calendar(months: number)}
+	<RangeCalendar
+		bind:value={draft}
+		bind:placeholder
+		numberOfMonths={months}
+		maxValue={today(timeZone)}
+		class="mx-auto"
+	/>
+{/snippet}
+
+{#snippet actions()}
+	<Button variant="outline" class="h-11 md:h-9" onclick={() => (open = false)}
+		>{text.cancel}</Button
+	>
+	<Button
+		class="h-11 md:h-9"
+		disabled={!draft.start || !draft.end}
+		onclick={apply}>{text.apply}</Button
+	>
+{/snippet}
+
+<div class={cn("no-scrollbar w-full overflow-x-auto", className)}>
+	<div class="bg-muted inline-flex items-center gap-1 rounded-full p-1">
+		<ToggleGroup.Root
+			type="single"
+			spacing={1}
+			aria-label={text.label}
+			bind:value={() => value.preset, choose}
+		>
+			{#each presets as preset (preset.id)}
+				<ToggleGroup.Item value={preset.id} class={itemClass}
+					>{preset.label}</ToggleGroup.Item
+				>
+			{/each}
+		</ToggleGroup.Root>
+		{#if desktop.current}
+			<Popover.Root bind:open>
+				<Popover.Trigger
+					class={cn(
+						itemClass,
+						"text-sm font-medium whitespace-nowrap",
+						custom && "bg-background text-foreground shadow-sm",
+					)}
+					onclick={resetDraft}>{customLabel}</Popover.Trigger
+				>
+				<Popover.Content align="end" class="w-auto">
+					<Popover.Header>
+						<Popover.Title>{text.customTitle}</Popover.Title>
+					</Popover.Header>
+					{@render calendar(2)}
+					<div class="flex justify-end gap-2">
+						{@render actions()}
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		{:else}
+			<button
+				type="button"
+				class={cn(
+					itemClass,
+					"text-sm font-medium whitespace-nowrap",
+					custom && "bg-background text-foreground shadow-sm",
+				)}
+				aria-haspopup="dialog"
+				onclick={() => {
+					resetDraft();
+					open = true;
+				}}>{customLabel}</button
+			>
+			<Drawer.Root bind:open>
+				<Drawer.Content>
+					<Drawer.Header class="px-5 text-left">
+						<Drawer.Title>{text.customTitle}</Drawer.Title>
+					</Drawer.Header>
+					<div class="px-5">
+						{@render calendar(1)}
+					</div>
+					<Drawer.Footer class="pb-safe-bottom grid grid-cols-2 gap-2 px-5">
+						{@render actions()}
+					</Drawer.Footer>
+				</Drawer.Content>
+			</Drawer.Root>
+		{/if}
+	</div>
+</div>

package/dist/components/blocks/time-range-picker.svelte.d.ts

@@ -0,0 +1,33 @@
+export interface TimeRange {
+    preset: string;
+    start: Date;
+    end: Date;
+}
+export type TimeRangePreset = {
+    id: string;
+    label: string;
+} & ({
+    duration: number;
+} | {
+    range: (now: Date) => {
+        start: Date;
+        end: Date;
+    };
+});
+export declare const defaultTimeRangePresets: readonly TimeRangePreset[];
+export declare function rangeFor(preset: TimeRangePreset, now: Date): TimeRange;
+declare const TimeRangePicker: import("svelte").Component<{
+    presets?: readonly TimeRangePreset[];
+    value?: TimeRange;
+    onchange?: (value: TimeRange) => void;
+    messages?: Partial<{
+        label: string;
+        custom: string;
+        customTitle: string;
+        apply: string;
+        cancel: string;
+    }>;
+    class?: string;
+}, {}, "value">;
+type TimeRangePicker = ReturnType<typeof TimeRangePicker>;
+export default TimeRangePicker;

package/dist/components/blocks/time-series-chart/data-table.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	interface Props {
+		caption: string;
+		dateHeading: string;
+		names: string[];
+		rows: { time: number; date: string; values: string[] }[];
+		visible: boolean;
+		id: string;
+	}
+
+	const { caption, dateHeading, names, rows, visible, id }: Props = $props();
+</script>
+
+<div
+	{id}
+	class={visible ? "mt-3 max-h-72 overflow-auto rounded-xl border" : "sr-only"}
+>
+	<table class="w-full text-sm">
+		<caption class="sr-only">{caption}</caption>
+		<thead class="bg-muted sticky top-0">
+			<tr>
+				<th scope="col" class="px-3 py-2 text-left font-medium"
+					>{dateHeading}</th
+				>
+				{#each names as name, index (index)}
+					<th scope="col" class="px-3 py-2 text-right font-medium">{name}</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each rows as row (row.time)}
+				<tr class="border-t">
+					<th scope="row" class="px-3 py-1.5 text-left font-normal"
+						>{row.date}</th
+					>
+					{#each row.values as value, index (index)}
+						<td class="px-3 py-1.5 text-right tabular">{value}</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

package/dist/components/blocks/time-series-chart/data-table.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    caption: string;
+    dateHeading: string;
+    names: string[];
+    rows: {
+        time: number;
+        date: string;
+        values: string[];
+    }[];
+    visible: boolean;
+    id: string;
+}
+declare const DataTable: import("svelte").Component<Props, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/components/blocks/time-series-chart/legend.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Props {
+		entries: { name: string; color: string }[];
+		kind: "line" | "area" | "bar";
+	}
+
+	const { entries, kind }: Props = $props();
+</script>
+
+<ul class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
+	{#each entries as entry, index (index)}
+		<li class="flex items-center gap-2">
+			<span
+				aria-hidden="true"
+				class="shrink-0 {kind === 'line'
+					? 'h-0.5 w-4 rounded-full'
+					: 'size-2.5 rounded-[3px]'}"
+				style:background-color={entry.color}
+			></span>
+			{entry.name}
+		</li>
+	{/each}
+</ul>

package/dist/components/blocks/time-series-chart/legend.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    entries: {
+        name: string;
+        color: string;
+    }[];
+    kind: "line" | "area" | "bar";
+}
+declare const Legend: import("svelte").Component<Props, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/components/blocks/time-series-chart/marks.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import {
+		areaPath,
+		linePath,
+		type Position,
+	} from "./scale.js";
+
+	interface LineGeometry {
+		color: string;
+		segments: Position[][];
+		end: (Position & { label: string }) | null;
+	}
+
+	interface BarGeometry {
+		color: string;
+		bars: { path: string; column: number }[];
+	}
+
+	interface Props {
+		kind: "line" | "area" | "bar";
+		lines: LineGeometry[];
+		bars: BarGeometry[];
+		baseline: number;
+		activeColumn: number | null;
+		activeDots: (Position & { color: string })[];
+		directLabels: boolean;
+	}
+
+	const {
+		kind,
+		lines,
+		bars,
+		baseline,
+		activeColumn,
+		activeDots,
+		directLabels,
+	}: Props = $props();
+</script>
+
+{#if kind === "bar"}
+	{#each bars as entry, seriesIndex (seriesIndex)}
+		<g style:fill={entry.color}>
+			{#each entry.bars as bar (bar.column)}
+				<path
+					d={bar.path}
+					class="transition-opacity duration-150"
+					opacity={activeColumn === null || activeColumn === bar.column
+						? 1
+						: 0.45}
+				/>
+			{/each}
+		</g>
+	{/each}
+{:else}
+	{#each lines as entry, seriesIndex (seriesIndex)}
+		<g style:color={entry.color}>
+			{#each entry.segments as segment, segmentIndex (segmentIndex)}
+				{#if segment.length > 1}
+					{#if kind === "area"}
+						<path
+							d={areaPath(segment, baseline)}
+							fill="currentColor"
+							fill-opacity="0.1"
+						/>
+					{/if}
+					<path
+						d={linePath(segment)}
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linejoin="round"
+						stroke-linecap="round"
+						data-segment
+					/>
+				{:else if segment[0]}
+					<circle
+						cx={segment[0].x}
+						cy={segment[0].y}
+						r="4"
+						fill="currentColor"
+						class="stroke-background"
+						stroke-width="2"
+						data-segment
+					/>
+				{/if}
+			{/each}
+			{#if entry.end}
+				<circle
+					cx={entry.end.x}
+					cy={entry.end.y}
+					r="4"
+					fill="currentColor"
+					class="stroke-background"
+					stroke-width="2"
+				/>
+				{#if directLabels}
+					<text
+						x={entry.end.x + 9}
+						y={entry.end.y}
+						dominant-baseline="middle"
+						class="fill-foreground text-[11px] font-medium tabular"
+						>{entry.end.label}</text
+					>
+				{/if}
+			{/if}
+		</g>
+	{/each}
+{/if}
+{#each activeDots as dot, index (index)}
+	<circle
+		cx={dot.x}
+		cy={dot.y}
+		r="5"
+		style:fill={dot.color}
+		class="stroke-background pointer-events-none"
+		stroke-width="2"
+	/>
+{/each}

package/dist/components/blocks/time-series-chart/marks.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type Position } from "./scale.js";
+interface LineGeometry {
+    color: string;
+    segments: Position[][];
+    end: (Position & {
+        label: string;
+    }) | null;
+}
+interface BarGeometry {
+    color: string;
+    bars: {
+        path: string;
+        column: number;
+    }[];
+}
+interface Props {
+    kind: "line" | "area" | "bar";
+    lines: LineGeometry[];
+    bars: BarGeometry[];
+    baseline: number;
+    activeColumn: number | null;
+    activeDots: (Position & {
+        color: string;
+    })[];
+    directLabels: boolean;
+}
+declare const Marks: import("svelte").Component<Props, {}, "">;
+type Marks = ReturnType<typeof Marks>;
+export default Marks;

package/dist/components/blocks/time-series-chart/messages.d.ts

@@ -0,0 +1,13 @@
+export declare const defaultMessages: {
+    empty: string;
+    noValue: string;
+    date: string;
+    peak: string;
+    average: string;
+    showTable: string;
+    hideTable: string;
+    keyboardHint: string;
+    summary: (title: string, start: string, end: string) => string;
+    seriesSummary: (name: string, low: string, high: string, latest: string) => string;
+};
+export type TimeSeriesChartMessages = typeof defaultMessages;

package/dist/components/blocks/time-series-chart/messages.js

@@ -0,0 +1,12 @@
+export const defaultMessages = {
+    empty: "No data in this range yet.",
+    noValue: "No data",
+    date: "Date",
+    peak: "Peak",
+    average: "Average",
+    showTable: "Show data table",
+    hideTable: "Hide data table",
+    keyboardHint: "Use the arrow keys to read each value.",
+    summary: (title, start, end) => `${title}, from ${start} to ${end}.`,
+    seriesSummary: (name, low, high, latest) => `${name}: low ${low}, high ${high}, latest ${latest}.`,
+};

package/dist/components/blocks/time-series-chart/readout.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Row {
+		name: string;
+		color: string;
+		value: string;
+	}
+
+	interface Props {
+		label: string;
+		rows: Row[];
+		placement: "floating" | "above";
+		x: number;
+		width: number;
+	}
+
+	const { label, rows, placement, x, width }: Props = $props();
+
+	const flip = $derived(x > width / 2);
+</script>
+
+<div
+	data-readout
+	aria-hidden="true"
+	class="bg-popover text-popover-foreground pointer-events-none absolute z-10 rounded-xl border px-3 py-2 text-xs shadow-md {placement ===
+	'above'
+		? 'inset-x-0 bottom-full mb-2 flex flex-wrap items-baseline gap-x-4 gap-y-1'
+		: 'top-0 grid gap-1 whitespace-nowrap'}"
+	style:left={placement === "floating" && !flip ? `${x + 12}px` : undefined}
+	style:right={placement === "floating" && flip
+		? `${width - x + 12}px`
+		: undefined}
+>
+	<p class="text-muted-foreground">{label}</p>
+	{#each rows as row, index (index)}
+		<p class="flex items-center gap-2">
+			<span
+				class="h-0.5 w-3 shrink-0 rounded-full"
+				style:background-color={row.color}
+			></span>
+			<span class="font-semibold tabular">{row.value}</span>
+			<span class="text-muted-foreground">{row.name}</span>
+		</p>
+	{/each}
+</div>

package/dist/components/blocks/time-series-chart/readout.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Row {
+    name: string;
+    color: string;
+    value: string;
+}
+interface Props {
+    label: string;
+    rows: Row[];
+    placement: "floating" | "above";
+    x: number;
+    width: number;
+}
+declare const Readout: import("svelte").Component<Props, {}, "">;
+type Readout = ReturnType<typeof Readout>;
+export default Readout;

package/dist/components/blocks/time-series-chart/scale.d.ts

@@ -0,0 +1,24 @@
+export interface TimePoint {
+    at: Date;
+    value: number | null;
+}
+export interface TimeSeries {
+    name: string;
+    points: TimePoint[];
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export declare function niceStep(span: number, count: number): number;
+export declare function niceTicks(minimum: number, maximum: number, count: number): number[];
+export declare function scaleLinear(domain: [number, number], range: [number, number]): (value: number) => number;
+export declare function columnsOf(series: TimeSeries[]): number[];
+export declare function valueMap(series: TimeSeries): Map<number, number | null>;
+export declare function valueExtent(series: TimeSeries[]): [number, number] | null;
+export declare function segmentsOf(points: TimePoint[]): TimePoint[][];
+export declare function nearestIndex(times: number[], target: number): number;
+export declare function medianSpacing(times: number[]): number;
+export declare function linePath(positions: Position[]): string;
+export declare function areaPath(positions: Position[], baseline: number): string;
+export declare function barPath(left: number, width: number, top: number, baseline: number): string;