Max Richter
d068828b68
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 1m59s
33 lines
700 B
Svelte
33 lines
700 B
Svelte
<script lang="ts">
|
|
const { points }: { points: number[] } = $props();
|
|
|
|
const path = $derived.by(() => {
|
|
const max = Math.max(...points);
|
|
const min = Math.min(...points);
|
|
return points
|
|
.map((point, i) => {
|
|
const x = (i / (points.length - 1)) * 100;
|
|
const y = 100 - ((point - min) / (max - min)) * 100;
|
|
return `${x},${y}`;
|
|
})
|
|
.join(" ");
|
|
});
|
|
</script>
|
|
|
|
<svg preserveAspectRatio="none" viewBox="0 0 100 100">
|
|
<polyline vector-effect="non-scaling-stroke" points={path} />
|
|
</svg>
|
|
|
|
<style>
|
|
svg {
|
|
height: 40px;
|
|
width: 100%;
|
|
}
|
|
polyline {
|
|
fill: none;
|
|
stroke: var(--layer-3);
|
|
opacity: 1;
|
|
stroke-width: 1;
|
|
}
|
|
</style>
|