react-sparklines-ts
Version:
Beautiful and expressive Sparklines component for React (continued)
37 lines (36 loc) • 1.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function SparklinesLine(props) {
const { data, points, width, height, margin, color, style, onMouseMove } = props;
const linePoints = points
.map((p) => [p.x, p.y])
.reduce((a, b) => a.concat(b));
const closePolyPoints = [
points[points.length - 1].x,
height - margin,
margin,
height - margin,
margin,
points[0].y,
];
const fillPoints = linePoints.concat(closePolyPoints);
const lineStyle = {
stroke: color || style?.stroke || "slategray",
strokeWidth: style?.strokeWidth || "1",
strokeLinejoin: style?.strokeLinejoin || "round",
strokeLinecap: style?.strokeLinecap || "round",
fill: "none",
};
const fillStyle = {
stroke: style?.stroke || "none",
strokeWidth: "0",
fillOpacity: style?.fillOpacity || ".1",
fill: style?.fill || color || "slategray",
pointerEvents: "auto",
};
const tooltips = props.tooltips
? points.map((p, i) => {
return (_jsx("circle", { cx: p.x, cy: p.y, r: 2, style: fillStyle, onMouseEnter: (e) => onMouseMove?.("enter", data[i], p), onClick: (e) => onMouseMove?.("click", data[i], p) }, i));
})
: null;
return (_jsxs("g", { children: [tooltips, _jsx("polyline", { points: fillPoints.join(" "), style: fillStyle }), _jsx("polyline", { points: linePoints.join(" "), style: lineStyle })] }));
}