1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export function sparklineSVG({ strokeWidth, data, height, width, fill, stroke }) {
let vb_width = data.length - 1;
let vb_height = Math.max(...data);
let path = [
"M",
...data.map((value, i) => {
let x = i;
let y = vb_height - value;
return `${x} ${y}${i < vb_width ? " L " : ""}`;
}),
];
let closedPath = [...path, ` L ${vb_width} ${vb_height} L 0 ${vb_height} Z`];
return `
<svg height="${height}" width="${width}" viewBox="0 0 ${vb_width} ${vb_height}" preserveAspectRatio="none" role="img" xmlns="http://www.w3.org/2000/svg">
<path d="${
closedPath.join("")
}" stroke="transparent" fill="${fill}" />
<path d="${
path.join("")
}" stroke-width="${strokeWidth}" vector-effect="non-scaling-stroke" stroke="${stroke}" fill="transparent" />
</svg>
`;
}
// Forked from https://jsfiddle.net/buk3dsqv/