www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Add hover styles

This commit is contained in:
Jared He 2022-06-18 20:46:00 -04:00
parent b025958cd8
commit 122d5a2450
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/PieChart.module.css
View File

@ -2,7 +2,16 @@
fill: #354265; fill: #354265;
} }
.path:hover { .text {
fill: #EF839D; display: none;
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7)); fill: white;
}
.group:hover>.path {
fill: #EF839D;
filter: drop-shadow(0px 0px 6px #CC5773);
}
.group:hover>.text {
display: inline
} }

7
components/PieChart.tsx
View File

@ -50,13 +50,14 @@ export function PieSlice(props: PieSliceProps<PieChartData>) {
const pathArc = props.path(arc); const pathArc = props.path(arc);
return ( return (
<g key={`arc-${arc.data.category}`}> <g key={`arc-${arc.data.category}`} className={styles.group}>
<path d={pathArc} className={styles.path} /> <path className={styles.path} d={pathArc} />
<text <text
className={styles.text}
x={centroidX} x={centroidX}
y={centroidY} y={centroidY}
textAnchor="middle" textAnchor="middle"
>{`${arc.data.value} %`}</text> >{`${arc.data.value}%`}</text>
</g> </g>
); );
}); });