export function SparklineSVG({ strokeWidth, data, height, width, fill, stroke }) {
const padding = 2;
const xMargin = 25;
const xValues = data.map((d, i) => i);
const yValues = data.map(d => d);
const xMin = Math.min(...xValues);
const xMax = Math.max(...xValues);
const yMin = Math.min(...yValues);
const yMax = Math.max(...yValues);
const yMid = (yMin + yMax) / 2;
const xScale = x => ((x - xMin) / (xMax - xMin)) * (width - 2 * padding) + padding + xMargin;
const yScale = y => height - padding - ((y - yMin) / (yMax - yMin)) * (height - 2 * padding);
return (
<svg width={width} height={height}>
{}
{[yMin, yMid, yMax].map((y, index) => (
<text
key={index}
y={yScale(y)}
fontSize="10"
textAnchor="start"
dominantBaseline={index === 2 ? "hanging" : index === 0 ? "bottom" : "top"}
>
{Math.round(y / 100) / 10}s
</text>
))}
{}
<polyline
fill={fill}
stroke={stroke}
strokeWidth={strokeWidth}
points={data.map((d, i) => `${xScale(i)},${yScale(d)}`).join(" ")}
/>
</svg>
);
}