drizzle 0.2.0

A type-safe SQL query builder for Rust
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<script lang="ts">
	import { Area, Chart, getChartContext, Highlight, Svg } from 'layerchart';
	import * as ChartUI from '#lib/components/ui/chart/index.js';
	import ChartTip from './ChartTip.svelte';
	import { METRICS, metricChartConfig } from '#lib/metrics';
	import { ssrBox } from '#lib/chart-ssr';
	import { toPoints, type SeriesPoint, type TargetChart } from '#lib/chart-series';

	/**
	 * The chart arrives already derived, from the server on first render and from the remote
	 * function on a client-side metric switch. This component only draws.
	 */
	let { chart }: { chart: TargetChart } = $props();

	const config = $derived(metricChartConfig(chart.metric));
	const format = $derived(METRICS[chart.metric].format);
</script>

<!-- A hover readout, so a sparkline can be read at a point instead of only as a shape. -->
{#snippet tip()}
	{@const ctx = getChartContext()}
	{@const datum = ctx.tooltip.data as SeriesPoint | null}
	{#if datum}
		<ChartTip>
			<div class="text-micro text-muted-foreground font-mono uppercase">
				second {datum.index + 1}
			</div>
			<div class="flex items-center gap-3">
				<span class="text-foreground-secondary">{chart.label}</span>
				<span class="text-foreground ml-auto font-mono tabular-nums">
					{datum.value === null ? 'no sample' : format(datum.value)}
				</span>
			</div>
		</ChartTip>
	{/if}
{/snippet}

<div class="mt-1">
	<div
		class="text-micro text-muted-foreground flex justify-between gap-3 font-mono tracking-wide uppercase"
	>
		<span>{chart.label}</span>
		<span>latest {chart.valueText} / {chart.sampleText}</span>
	</div>

	<!-- The 3rem box is reserved in the markup, so the chart, the empty state and the loading
	     placeholder all occupy identical space and nothing reflows when one replaces another. -->
	<div class="h-12 w-full overflow-hidden">
		{#if chart.hasSeries}
			<ChartUI.Container {config} class="aspect-auto h-12 w-full justify-start">
				<Chart
					data={toPoints(chart.series)}
					x="index"
					y="value"
					yNice
					padding={{ top: 2, bottom: 2 }}
					tooltipContext={{ mode: 'bisect-x' }}
					{...ssrBox(360, 48)}
				>
					<Svg>
						<Area
							y0={() => 0}
							defined={(d: SeriesPoint) => d.value !== null}
							fill="var(--color-value)"
							fillOpacity={0.16}
							line={{ stroke: 'var(--color-value)', strokeWidth: 1.5 }}
						/>
						<Highlight points lines />
					</Svg>

					{@render tip()}
				</Chart>
			</ChartUI.Container>
		{:else}
			<div class="text-label text-muted-foreground flex h-12 items-center font-mono">
				no samples in this trial
			</div>
		{/if}
	</div>
</div>