Spark

1import * as React from "react";
2import "./spark.css";
3 
4export type SparkTone = "accent" | "warn" | "faint";
5 
6const TONE: Record<SparkTone, string> = {
7  accent: "var(--moco-accent-dk)",
8  warn: "var(--moco-warn)",
9  faint: "var(--moco-faint)",
10};
11 
12export interface SparkProps {
13  data: number[];
14  w?: number;
15  h?: number;
16  dot?: boolean;
17  tone?: SparkTone;
18  label?: string;
19}
20 
21/**
22 * Inline sparklines. ~60×16, sits on the text baseline, no axes, no labels.
23 * These are punctuation, not charts.
24 */
25export function Spark({ data, w = 60, h = 16, dot = true, tone = "accent", label }: SparkProps) {
26  if (data.length < 2) return null;
27  const min = Math.min(...data);
28  const max = Math.max(...data);
29  const span = max - min || 1;
30  const x = (i: number) => (i / (data.length - 1)) * (w - 2) + 1;
31  const y = (v: number) => h - 2 - ((v - min) / span) * (h - 4);
32  const d = data.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(2)},${y(v).toFixed(2)}`).join(" ");
33 
34  return (
35    <svg
36      className="moco-spark"
37      width={w}
38      height={h}
39      viewBox={`0 0 ${w} ${h}`}
40      role="img"
41      aria-label={label ?? `sparkline, ${data.length} points, ${min.toFixed(2)} to ${max.toFixed(2)}`}
42    >
43      <path d={d} fill="none" stroke={TONE[tone]} strokeWidth="1" />
44      {dot ? (
45        <circle
46          cx={x(data.length - 1)}
47          cy={y(data[data.length - 1])}
48          r="1.6"
49          fill={TONE[tone]}
50        />
51      ) : null}
52    </svg>
53  );
54}
55 
56export interface SparkBarProps {
57  value: number;
58  max?: number;
59  w?: number;
60  h?: number;
61  tone?: SparkTone;
62  label?: string;
63}
64 
65/** A tiny inline proportion bar. */
66export function SparkBar({ value, max = 1, w = 60, h = 8, tone = "accent", label }: SparkBarProps) {
67  const k = Math.max(0, Math.min(1, value / max));
68  return (
69    <svg
70      className="moco-spark"
71      width={w}
72      height={h}
73      viewBox={`0 0 ${w} ${h}`}
74      role="img"
75      aria-label={label ?? `${Math.round(k * 100)} percent`}
76    >
77      <rect x="0" y={h / 2 - 2} width={w} height="4" fill="var(--moco-line)" />
78      <rect x="0" y={h / 2 - 2} width={w * k} height="4" fill={TONE[tone]} />
79    </svg>
80  );
81}