This commit is contained in:
2026-06-18 01:43:50 +02:00
parent d6d61df86a
commit 7773199b91
43 changed files with 3283 additions and 279 deletions
+42 -7
View File
@@ -61,7 +61,9 @@
const linePath = $derived(
coords.length
? coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.cx.toFixed(1)} ${c.cy.toFixed(1)}`).join(' ')
? coords
.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.cx.toFixed(1)} ${c.cy.toFixed(1)}`)
.join(' ')
: ''
);
// Area = the line, then down to the baseline and back — fills under the curve.
@@ -278,10 +280,32 @@
stroke-width="1"
opacity="0.25"
/>
<circle cx={active.cx} cy={active.cy} r="5.5" fill="none" stroke="var(--color-ink)" stroke-width="1.5" />
<circle
cx={active.cx}
cy={active.cy}
r="5.5"
fill="none"
stroke="var(--color-ink)"
stroke-width="1.5"
/>
<g transform="translate({tipX}, {Math.max(active.cy - 16, PAD.t + 8)})">
<rect x="-54" y="-26" width="108" height="34" rx="6" fill="var(--color-ash)" stroke="var(--color-smoke)" />
<text x="0" y="-12" text-anchor="middle" class="fill-ink" font-size="11" font-weight="700">
<rect
x="-54"
y="-26"
width="108"
height="34"
rx="6"
fill="var(--color-ash)"
stroke="var(--color-smoke)"
/>
<text
x="0"
y="-12"
text-anchor="middle"
class="fill-ink"
font-size="11"
font-weight="700"
>
{fmtMoney(active.price)}
</text>
<text x="0" y="2" text-anchor="middle" class="fill-mute" font-size="9">
@@ -303,10 +327,21 @@
<figcaption class="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs">
<span class="flex items-center gap-3 text-mute">
<span class="flex items-center gap-1"><span class="inline-block size-2 rounded-full" style="background:var(--color-gold)"></span>low {fmtMoney(coords[lowIdx].price)}</span>
<span class="flex items-center gap-1"><span class="inline-block size-2 rounded-full" style="background:var(--color-rose)"></span>high {fmtMoney(coords[highIdx].price)}</span>
<span class="flex items-center gap-1"
><span class="inline-block size-2 rounded-full" style="background:var(--color-gold)"
></span>low {fmtMoney(coords[lowIdx].price)}</span
>
<span class="flex items-center gap-1"
><span class="inline-block size-2 rounded-full" style="background:var(--color-rose)"
></span>high {fmtMoney(coords[highIdx].price)}</span
>
{#if anyOos}
<span class="flex items-center gap-1"><span class="inline-block h-2 w-3 rounded-sm" style="background:var(--color-rose);opacity:0.35"></span>out of stock</span>
<span class="flex items-center gap-1"
><span
class="inline-block h-2 w-3 rounded-sm"
style="background:var(--color-rose);opacity:0.35"
></span>out of stock</span
>
{/if}
</span>
{#if latest}