37 lines
856 B
TypeScript
37 lines
856 B
TypeScript
import type { UiSeverity } from "../../types";
|
|
|
|
export interface SparklineProps {
|
|
values?: number[];
|
|
severity?: UiSeverity;
|
|
}
|
|
|
|
export function Sparkline({
|
|
values = [],
|
|
severity = "neutral",
|
|
}: SparklineProps) {
|
|
const points = toPoints(values);
|
|
|
|
return (
|
|
<svg
|
|
className="sparkline"
|
|
data-severity={severity}
|
|
viewBox="0 0 100 24"
|
|
aria-hidden="true"
|
|
>
|
|
{points ? <polyline points={points} /> : null}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function toPoints(values: number[]): string {
|
|
if (values.length === 0) return "";
|
|
const max = Math.max(...values, 1);
|
|
const step = values.length > 1 ? 100 / (values.length - 1) : 100;
|
|
return values
|
|
.map((value, index) => {
|
|
const x = index * step;
|
|
const y = 24 - (Math.max(0, value) / max) * 22;
|
|
return `${x.toFixed(2)},${y.toFixed(2)}`;
|
|
})
|
|
.join(" ");
|
|
}
|