Add unique and new player metrics (Refs #142)

src/lib/ui/metrics.ts

@@ -1,5 +1,31 @@
 const numberFormat = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
 
+/** Separate SVG paths at unavailable periods, including isolated recorded points. */
+export function metricPlayerPaths(values: readonly (number | null)[], ceiling: number) {
+    const segments: { x: number; y: number }[][] = [];
+    let segment: { x: number; y: number }[] = [];
+    for (let index = 0; index < values.length; index++) {
+        const value = values[index];
+        if (value === null) {
+            segment = [];
+            continue;
+        }
+        if (!segment.length) segments.push(segment);
+        segment.push({
+            x: ((index + 0.5) / values.length) * 100,
+            y: 100 - (value / ceiling) * 100
+        });
+    }
+    const line = (points: typeof segment) =>
+        points.map(({ x, y }, index) => `${index ? 'L' : 'M'}${x},${y}`).join(' ');
+    return {
+        line: segments.map(line).join(' '),
+        area: segments
+            .map((points) => `${line(points)} L${points.at(-1)!.x},100 L${points[0].x},100 Z`)
+            .join(' ')
+    };
+}
+
 /** Label the actual bucket start in the chosen timezone; never imply local calendar-day buckets. */
 export function metricPeriodLabels(
     points: readonly { startAt: number }[],