high/PlotLine.js
import { line } from 'd3';
export const PlotLine = ({
centerX,
centerY,
strokeWidth,
performance
}) => {
const points = [
[centerX - centerX / 1.8, centerY + centerY / 2.5],
[centerX - centerX / 3.6, centerY + centerY / 5],
[centerX, centerY + centerY / 2.5],
[centerX + centerX / 3.2, centerY - centerY / 5],
[centerX + centerX / 1.6, centerY],
];
return (
<>
<path
d={line()(points.slice(0, 4))}
fill="none"
stroke="lightgrey"
stroke-width={strokeWidth}
marker-start={`url(#markerCircleHigh-${performance})`}
marker-mid={`url(#markerCircleHigh-${performance})`}
marker-end={`url(#markerCircleHighlight-${performance})`}
/>
<path
d={line()(points.slice(3, 5))}
fill="none"
stroke="lightgrey"
stroke-width={strokeWidth}
marker-start={`url(#markerCircleHighlight-${performance})`}
marker-end={`url(#markerCircleHighlight-${performance})`}
/>
</>
MIT Licensed