Add hover styles
This commit is contained in:
parent
b025958cd8
commit
122d5a2450
|
@ -2,7 +2,16 @@
|
|||
fill: #354265;
|
||||
}
|
||||
|
||||
.path:hover {
|
||||
fill: #EF839D;
|
||||
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
|
||||
.text {
|
||||
display: none;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.group:hover>.path {
|
||||
fill: #EF839D;
|
||||
filter: drop-shadow(0px 0px 6px #CC5773);
|
||||
}
|
||||
|
||||
.group:hover>.text {
|
||||
display: inline
|
||||
}
|
|
@ -50,13 +50,14 @@ export function PieSlice(props: PieSliceProps<PieChartData>) {
|
|||
const pathArc = props.path(arc);
|
||||
|
||||
return (
|
||||
<g key={`arc-${arc.data.category}`}>
|
||||
<path d={pathArc} className={styles.path} />
|
||||
<g key={`arc-${arc.data.category}`} className={styles.group}>
|
||||
<path className={styles.path} d={pathArc} />
|
||||
<text
|
||||
className={styles.text}
|
||||
x={centroidX}
|
||||
y={centroidY}
|
||||
textAnchor="middle"
|
||||
>{`${arc.data.value} %`}</text>
|
||||
>{`${arc.data.value}%`}</text>
|
||||
</g>
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue