Initial

src/lib/features/prediction/CurveChart.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart as ChartJS, type ChartDataset } from 'chart.js/auto';
+	import { normalizeCurve, type RateCurvePoint } from '$domain';
+	import { t } from '$i18n';
+
+	interface Props {
+		points: RateCurvePoint[];
+	}
+	let { points }: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let chart: ChartJS | null = null;
+
+	const series = $derived(
+		normalizeCurve(points).map((p) => ({ x: p.time_constraint, y: p.alt_constraint }))
+	);
+
+	onMount(() => {
+		chart = new ChartJS(canvas.getContext('2d')!, {
+			type: 'line',
+			data: {
+				datasets: [
+					{
+						label: $t('curve.altitude'),
+						data: [],
+						borderColor: '#0d6efd',
+						backgroundColor: 'rgba(13,110,253,0.12)',
+						fill: true,
+						pointRadius: 4,
+						borderWidth: 2
+					} as ChartDataset<'line'>
+				]
+			},
+			options: {
+				responsive: true,
+				maintainAspectRatio: false,
+				animation: false,
+				plugins: { legend: { display: false } },
+				scales: {
+					x: {
+						type: 'linear',
+						title: { display: true, text: $t('curve.timeAxis'), font: { size: 10 } },
+						ticks: { font: { size: 9 } }
+					},
+					y: {
+						title: { display: true, text: $t('curve.altAxis'), font: { size: 10 } },
+						ticks: { font: { size: 9 } }
+					}
+				}
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!chart) return;
+		chart.data.datasets[0].data = series;
+		chart.update('none');
+	});
+
+	onDestroy(() => chart?.destroy());
+</script>
+
+<div style="position: relative; height: 200px;">
+	<canvas bind:this={canvas} data-testid="curve-chart"></canvas>
+</div>