add icons to lists and solve money tracker bugs
All checks were successful
Test and deploy staging / staging (push) Successful in 2m30s
All checks were successful
Test and deploy staging / staging (push) Successful in 2m30s
This commit is contained in:
@@ -1,35 +1,74 @@
|
||||
<script lang="ts">
|
||||
import type { ChartSeries } from './charts';
|
||||
import type { ChartPoint, ChartSeries } from './charts';
|
||||
|
||||
let {
|
||||
series,
|
||||
title,
|
||||
unit = '€'
|
||||
}: { series: ChartSeries[]; title: string; unit?: string } = $props();
|
||||
const width = 800;
|
||||
const height = 260;
|
||||
const plot = { left: 72, right: 18, top: 14, bottom: 38 };
|
||||
unit = '€',
|
||||
marker
|
||||
}: {
|
||||
series: ChartSeries[];
|
||||
title: string;
|
||||
unit?: string;
|
||||
marker?: { date: string; label: string };
|
||||
} = $props();
|
||||
let clientWidth = $state(800);
|
||||
let width = $derived(Math.max(280, clientWidth));
|
||||
let compact = $derived(width < 520);
|
||||
let height = $derived(compact ? 240 : 280);
|
||||
let plot = $derived({ left: compact ? 52 : 72, right: 14, top: 18, bottom: 30 });
|
||||
let values = $derived(series.flatMap((item) => item.points.map((point) => point.value)));
|
||||
let dates = $derived(
|
||||
series.flatMap((item) => item.points.map((point) => Date.parse(`${point.date}T12:00:00Z`)))
|
||||
);
|
||||
let min = $derived(Math.min(0, ...values));
|
||||
let max = $derived(Math.max(0, ...values));
|
||||
let times = $derived(series.flatMap((item) => item.points.map((point) => time(point.date))));
|
||||
let scale = $derived(niceScale(Math.min(0, ...values), Math.max(0, ...values)));
|
||||
let min = $derived(scale.min);
|
||||
let max = $derived(scale.max);
|
||||
let span = $derived(max - min || 1);
|
||||
let from = $derived(Math.min(...dates));
|
||||
let until = $derived(Math.max(...dates));
|
||||
let from = $derived(Math.min(...times));
|
||||
let until = $derived(Math.max(...times));
|
||||
let dateSpan = $derived(until - from || 1);
|
||||
let snapDates = $derived(
|
||||
[...new Set(series.flatMap((item) => item.points.map((point) => point.date)))].sort()
|
||||
);
|
||||
let hoverDate = $state<string | null>(null);
|
||||
let hoverRows = $derived(
|
||||
hoverDate === null
|
||||
? []
|
||||
: series.flatMap((item) => {
|
||||
const point = pointAt(item.points, hoverDate!);
|
||||
return point ? [{ item, point }] : [];
|
||||
})
|
||||
);
|
||||
const money = new Intl.NumberFormat('en-NL', { maximumFractionDigits: 0 });
|
||||
const euros = new Intl.NumberFormat('en-NL', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
maximumFractionDigits: 0
|
||||
});
|
||||
const exact = new Intl.NumberFormat('en-NL', { style: 'currency', currency: 'EUR' });
|
||||
|
||||
/** Rounds the value range out to 1/2/5 × 10ⁿ steps so gridlines land on round amounts. */
|
||||
function niceScale(low: number, high: number) {
|
||||
const raw = (high - low || 1) / 3;
|
||||
const magnitude = 10 ** Math.floor(Math.log10(raw));
|
||||
const step = ([1, 2, 2.5, 5, 10].find((factor) => factor * magnitude >= raw) ?? 10) * magnitude;
|
||||
// A dip of a few euros below zero should not add a whole empty gridline band.
|
||||
const min = low > -step * 0.05 ? 0 : Math.floor(low / step) * step;
|
||||
const max = Math.ceil(high / step) * step;
|
||||
const ticks: number[] = [];
|
||||
for (let value = max; value >= min - step / 2; value -= step) ticks.push(value);
|
||||
return { min, max, ticks };
|
||||
}
|
||||
|
||||
function time(date: string) {
|
||||
return Date.parse(`${date}T12:00:00Z`);
|
||||
}
|
||||
function x(date: string) {
|
||||
return (
|
||||
plot.left +
|
||||
((Date.parse(`${date}T12:00:00Z`) - from) / dateSpan) * (width - plot.left - plot.right)
|
||||
);
|
||||
return plot.left + ((time(date) - from) / dateSpan) * (width - plot.left - plot.right);
|
||||
}
|
||||
function y(value: number) {
|
||||
return plot.top + (1 - (value - min) / span) * (height - plot.top - plot.bottom);
|
||||
}
|
||||
function path(points: ChartSeries['points']) {
|
||||
function path(points: ChartPoint[]) {
|
||||
return points
|
||||
.map(
|
||||
(point, index) =>
|
||||
@@ -37,26 +76,76 @@
|
||||
)
|
||||
.join(' ');
|
||||
}
|
||||
function dateLabel(value: number) {
|
||||
return new Date(value).toLocaleDateString('en-NL', {
|
||||
/** Solid part through `dashedFrom` and dashed part from the last solid point onward. */
|
||||
function segments(item: ChartSeries) {
|
||||
if (!item.dashedFrom) return { solid: item.points, dashed: [] };
|
||||
const split = item.points.findLastIndex((point) => point.date <= item.dashedFrom!);
|
||||
return split < 0
|
||||
? { solid: [], dashed: item.points }
|
||||
: { solid: item.points.slice(0, split + 1), dashed: item.points.slice(split) };
|
||||
}
|
||||
function pointAt(points: ChartPoint[], date: string) {
|
||||
if (!points.length || date < points[0].date || date > points.at(-1)!.date) return null;
|
||||
return points.findLast((point) => point.date <= date) ?? null;
|
||||
}
|
||||
function ticks() {
|
||||
const months = (until - from) / (30.44 * 86_400_000);
|
||||
const step = [1, 2, 3, 6, 12, 24].find((size) => months / size <= (compact ? 3 : 6)) ?? 48;
|
||||
const start = new Date(from);
|
||||
const result: string[] = [];
|
||||
let year = start.getUTCFullYear();
|
||||
let month = start.getUTCMonth() + 1;
|
||||
month = Math.ceil(month / step) * step;
|
||||
for (let guard = 0; guard < 60; guard++) {
|
||||
while (month >= 12) {
|
||||
month -= 12;
|
||||
year++;
|
||||
}
|
||||
const date = `${year}-${String(month + 1).padStart(2, '0')}-01`;
|
||||
if (time(date) > until) break;
|
||||
if (time(date) >= from) result.push(date);
|
||||
month += step;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function dateLabel(date: string, withDay = false) {
|
||||
return new Date(time(date)).toLocaleDateString('en-NL', {
|
||||
day: withDay ? 'numeric' : undefined,
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
year: withDay ? 'numeric' : '2-digit',
|
||||
timeZone: 'UTC'
|
||||
});
|
||||
}
|
||||
function format(value: number, precise = false) {
|
||||
if (unit !== '€') return `${money.format(value)} ${unit}`;
|
||||
return (precise ? exact : euros).format(value / 100);
|
||||
}
|
||||
function hover(event: PointerEvent) {
|
||||
const svg = event.currentTarget as SVGSVGElement;
|
||||
const box = svg.getBoundingClientRect();
|
||||
const position = ((event.clientX - box.left) / box.width) * width;
|
||||
const target = from + ((position - plot.left) / (width - plot.left - plot.right)) * dateSpan;
|
||||
let best: string | null = null;
|
||||
for (const date of snapDates)
|
||||
if (best === null || Math.abs(time(date) - target) < Math.abs(time(best) - target))
|
||||
best = date;
|
||||
hoverDate = best;
|
||||
}
|
||||
</script>
|
||||
|
||||
<figure class="chart">
|
||||
{#if values.length}
|
||||
<div class="chart-scroll" role="region" aria-label={title}>
|
||||
<div class="chart-area" bind:clientWidth>
|
||||
<svg
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
width={clientWidth ? undefined : width}
|
||||
role="img"
|
||||
aria-label={title}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
onpointermove={hover}
|
||||
onpointerdown={hover}
|
||||
onpointerleave={() => (hoverDate = null)}
|
||||
>
|
||||
{#each [0, 0.5, 1] as fraction (fraction)}
|
||||
{@const value = max - span * fraction}
|
||||
{#each scale.ticks as value (value)}
|
||||
<line
|
||||
x1={plot.left}
|
||||
x2={width - plot.right}
|
||||
@@ -66,53 +155,123 @@
|
||||
stroke-width="1"
|
||||
/>
|
||||
<text
|
||||
x={plot.left - 12}
|
||||
x={plot.left - 8}
|
||||
y={y(value) + 4}
|
||||
text-anchor="end"
|
||||
fill="var(--site-muted)"
|
||||
font-size="11">{unit}{money.format(value / (unit === '€' ? 100 : 1))}</text
|
||||
font-size="11">{format(value)}</text
|
||||
>
|
||||
{/each}
|
||||
{#each ticks() as tick (tick)}
|
||||
<text
|
||||
x={x(tick)}
|
||||
y={height - 8}
|
||||
text-anchor="middle"
|
||||
fill="var(--site-muted)"
|
||||
font-size="11">{dateLabel(tick)}</text
|
||||
>
|
||||
{/each}
|
||||
{#if marker && time(marker.date) >= from && time(marker.date) <= until}
|
||||
<line
|
||||
x1={x(marker.date)}
|
||||
x2={x(marker.date)}
|
||||
y1={plot.top - 6}
|
||||
y2={height - plot.bottom}
|
||||
stroke="var(--site-muted)"
|
||||
stroke-width="1"
|
||||
stroke-dasharray="2 3"
|
||||
/>
|
||||
<text
|
||||
x={x(marker.date)}
|
||||
y={plot.top - 8}
|
||||
text-anchor="middle"
|
||||
fill="var(--site-muted)"
|
||||
font-size="11">{marker.label}</text
|
||||
>
|
||||
{/if}
|
||||
{#each series as item (item.label)}
|
||||
{#if item.points.length}
|
||||
<path
|
||||
d={path(item.points)}
|
||||
fill="none"
|
||||
stroke={item.color}
|
||||
stroke-width={item.emphasis ? 3.5 : 2}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
{#if item.points.length === 1}
|
||||
<circle
|
||||
cx={x(item.points[0].date)}
|
||||
cy={y(item.points[0].value)}
|
||||
r={item.emphasis ? 4 : 3}
|
||||
fill={item.color}
|
||||
{@const parts = segments(item)}
|
||||
{#each [parts.solid, parts.dashed] as points, index (index)}
|
||||
{#if points.length > 1}
|
||||
<path
|
||||
d={path(points)}
|
||||
fill="none"
|
||||
stroke={item.color}
|
||||
stroke-width={item.emphasis ? 3 : 1.75}
|
||||
stroke-dasharray={index ? '6 5' : undefined}
|
||||
stroke-linecap={index ? 'butt' : 'round'}
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if item.points.length === 1}
|
||||
<circle
|
||||
cx={x(item.points[0].date)}
|
||||
cy={y(item.points[0].value)}
|
||||
r="4"
|
||||
fill={item.color}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
<text x={plot.left} y={height - 8} fill="var(--site-muted)" font-size="11"
|
||||
>{dateLabel(from)}</text
|
||||
>
|
||||
<text
|
||||
x={width - plot.right}
|
||||
y={height - 8}
|
||||
text-anchor="end"
|
||||
fill="var(--site-muted)"
|
||||
font-size="11">{dateLabel(until)}</text
|
||||
>
|
||||
{#if hoverDate}
|
||||
<line
|
||||
x1={x(hoverDate)}
|
||||
x2={x(hoverDate)}
|
||||
y1={plot.top}
|
||||
y2={height - plot.bottom}
|
||||
stroke="var(--site-muted)"
|
||||
stroke-width="1"
|
||||
/>
|
||||
{#each hoverRows as row (row.item.label)}
|
||||
<circle
|
||||
cx={x(hoverDate)}
|
||||
cy={y(row.point.value)}
|
||||
r="4"
|
||||
fill={row.item.color}
|
||||
stroke="var(--site-bg, #000)"
|
||||
stroke-width="2"
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
<rect
|
||||
x={plot.left}
|
||||
y={plot.top}
|
||||
width={width - plot.left - plot.right}
|
||||
height={height - plot.top - plot.bottom}
|
||||
fill="transparent"
|
||||
/>
|
||||
</svg>
|
||||
{#if hoverDate && hoverRows.length}
|
||||
<div
|
||||
class="tooltip"
|
||||
class:flip={x(hoverDate) > width / 2}
|
||||
style={`left:${x(hoverDate)}px`}
|
||||
role="status"
|
||||
>
|
||||
<p class="tooltip-date">
|
||||
{dateLabel(hoverDate, true)}{#if marker && hoverDate > marker.date} · projected{/if}
|
||||
</p>
|
||||
{#each hoverRows as row (row.item.label)}
|
||||
<p class:emphasis={row.item.emphasis}>
|
||||
<span class="swatch" style={`background:${row.item.color}`}></span>
|
||||
<span class="tooltip-label">{row.item.label}</span>
|
||||
<span class="tooltip-value">{format(row.point.value, true)}</span>
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if series.length > 1}
|
||||
{#if series.length > 1 || series.some((item) => item.dashedFrom)}
|
||||
<figcaption class="legend">
|
||||
{#each series as item (item.label)}
|
||||
<span class:emphasis={item.emphasis}
|
||||
><span class="swatch" style={`background:${item.color}`}></span>{item.label}</span
|
||||
>
|
||||
{/each}
|
||||
{#if series.some((item) => item.dashedFrom)}
|
||||
<span class="line-key first"><span class="key solid"></span>Actual</span>
|
||||
<span class="line-key"><span class="key dashed"></span>Projected</span>
|
||||
{/if}
|
||||
</figcaption>
|
||||
{/if}
|
||||
{:else}
|
||||
@@ -124,14 +283,54 @@
|
||||
.chart {
|
||||
min-width: 0;
|
||||
}
|
||||
.chart-scroll {
|
||||
overflow-x: auto;
|
||||
.chart-area {
|
||||
position: relative;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 540px;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
user-select: none;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
z-index: 2;
|
||||
min-width: 170px;
|
||||
max-width: 240px;
|
||||
margin-left: 12px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--site-border);
|
||||
border-radius: 7px;
|
||||
background: var(--site-bg, #000);
|
||||
box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tooltip.flip {
|
||||
transform: translateX(calc(-100% - 24px));
|
||||
}
|
||||
.tooltip p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin: 0;
|
||||
color: var(--site-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.tooltip p.emphasis {
|
||||
color: var(--site-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
.tooltip .tooltip-date {
|
||||
color: var(--site-text);
|
||||
}
|
||||
.tooltip-value {
|
||||
margin-left: auto;
|
||||
color: var(--site-text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
@@ -147,16 +346,27 @@
|
||||
gap: 7px;
|
||||
}
|
||||
.legend > span.emphasis {
|
||||
order: -1;
|
||||
flex-basis: 100%;
|
||||
color: var(--site-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
.legend > .line-key.first {
|
||||
margin-left: auto;
|
||||
}
|
||||
.key {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
border-top: 2px solid var(--site-muted);
|
||||
}
|
||||
.key.dashed {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
flex: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px var(--site-border);
|
||||
}
|
||||
.empty {
|
||||
padding: 70px 0;
|
||||
|
||||
Reference in New Issue
Block a user