update money tracker

src/lib/money-tracker/MoneyChart.svelte

@@ -48,8 +48,7 @@
 
 <figure class="chart">
 	{#if values.length}
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex: the chart viewport scrolls horizontally on narrow screens -->
-		<div class="chart-scroll" role="region" tabindex="0" aria-label={title}>
+		<div class="chart-scroll" role="region" aria-label={title}>
 			<svg
 				viewBox={`0 0 ${width} ${height}`}
 				role="img"
@@ -80,11 +79,19 @@
 							d={path(item.points)}
 							fill="none"
 							stroke={item.color}
-							stroke-width="2"
+							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}
+							/>
+						{/if}
 					{/if}
 				{/each}
 				<text x={plot.left} y={height - 8} fill="var(--site-muted)" font-size="11"
@@ -102,7 +109,9 @@
 		{#if series.length > 1}
 			<figcaption class="legend">
 				{#each series as item (item.label)}
-					<span><span class="swatch" style={`background:${item.color}`}></span>{item.label}</span>
+					<span class:emphasis={item.emphasis}
+						><span class="swatch" style={`background:${item.color}`}></span>{item.label}</span
+					>
 				{/each}
 			</figcaption>
 		{/if}
@@ -137,6 +146,12 @@
 		align-items: center;
 		gap: 7px;
 	}
+	.legend > span.emphasis {
+		order: -1;
+		flex-basis: 100%;
+		color: var(--site-text);
+		font-weight: 600;
+	}
 	.swatch {
 		display: inline-block;
 		width: 8px;