initial commit

web/src/lib/Graph.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    let {
+        data,
+        width,
+        height,
+    }: { data: Array<number>; width: number; height: number } = $props();
+
+    const lineStep = 1;
+    const labelStep = 2;
+
+    let minValue = $derived(Math.min(...data));
+    let maxValue = $derived(Math.max(...data));
+
+    const xScale = (i: number) => (i / (data.length - 1)) * width;
+    const yScale = (d: number) =>
+        height - ((d - minValue) / (maxValue - minValue)) * height;
+
+    let dPath = $derived(
+        data
+            .map((d, i) => `${i === 0 ? "M" : "L"}${xScale(i)},${yScale(d)}`)
+            .join(" "),
+    );
+
+    let lines: Array<number> = $derived(
+        Array.from(
+            { length: Math.ceil((maxValue - minValue) / lineStep) + 1 },
+            (_, i) => minValue + i * lineStep,
+        ),
+    );
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    {width}
+    {height}
+    viewBox={`0 0 ${width} ${height}`}
+    class="border-solid border-black border-2"
+>
+    <g>
+        {#each lines as line}
+            <line
+                x1="0"
+                y1={yScale(line)}
+                x2={width}
+                y2={yScale(line)}
+                stroke="#e0e0e0"
+                stroke-width="1"
+                data-foo={line}
+            />
+            {#if line % labelStep === 0}
+                <text
+                    x="30"
+                    y={yScale(line) - 2}
+                    font-size="10"
+                    text-anchor="end"
+                    fill="black"
+                    data-foo={line}
+                >
+                    {line}
+                </text>
+            {/if}
+        {/each}
+
+        <!-- Data line -->
+        <path d={dPath} fill="none" stroke="orange" stroke-width="2" />
+    </g>
+</svg>