Public
Back
Version 28
6/11/2024
/** @jsxImportSource https://esm.sh/react */
export function SparklineSVG({ strokeWidth, data, height, width, fill, stroke }) {
const padding = 10;
// Calculate the min and max values for x and y
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;
// Scaling functions
const xScale = x => ((x - xMin) / (xMax - xMin)) * (width - 2 * padding) + padding;
const yScale = y => height - padding - ((y - yMin) / (yMax - yMin)) * (height - 2 * padding);
return (
<svg width={width} height={height}>
{/* Y Axis Labels */}
{[yMin, yMid, yMax].map((y, index) => (
<text
key={index}
y={yScale(y) + 5}
fontSize="10"
textAnchor="start"
>
{y}
</text>
))}
{/* Line Path */}
<polyline
fill={fill}
stroke={stroke}
Updated: June 11, 2024