auspice
Version:
Web app for visualizing pathogen evolution
48 lines (45 loc) • 1.01 kB
JavaScript
import React from "react";
import { updateTipRadii } from "../../../actions/tree";
import { dataFont, darkGrey } from "../../../globalStyles";
const LegendItem = ({
dispatch,
transform,
clipId,
legendRectSize,
legendSpacing,
rectStroke,
rectFill,
label,
tooltip,
value
}) => (
<g
transform={transform}
onMouseEnter={() => {
dispatch(updateTipRadii({selectedLegendItem: value}));
}}
onMouseLeave={() => {
dispatch(updateTipRadii());
}}
>
<rect
style={{strokeWidth: 2}}
width={legendRectSize}
height={legendRectSize}
fill={rectFill}
stroke={rectStroke}
>
<title>{tooltip}</title>
</rect>
<text
x={legendRectSize + legendSpacing + 5}
y={legendRectSize - legendSpacing}
style={{fontSize: 12, fill: darkGrey, fontFamily: dataFont}}
clipPath={clipId?`url(#${clipId})`:undefined}
>
<title>{tooltip}</title>
{label}
</text>
</g>
);
export default LegendItem;