tests
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user