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

Use global vars

This commit is contained in:
Jared He 2022-07-06 19:44:48 -04:00
parent a5fa8bd52a
commit c1a6ac2194
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/PieChart.module.css
View File

@ -8,7 +8,7 @@
.pieText, .pieText,
.labelText { .labelText {
fill: white; fill: var(--label);
font-size: 40px; font-size: 40px;
font-weight: 800; font-weight: 800;
} }
@ -18,8 +18,8 @@
} }
.group:hover>.piePath { .group:hover>.piePath {
fill: #EF839D; fill: var(--primary-accent);
filter: drop-shadow(0px 0px 6px #CC5773); filter: drop-shadow(0px 0px 6px var(--primary-accent));
} }
.group:hover>.pieText { .group:hover>.pieText {

14
components/PieChart.tsx
View File

@ -8,6 +8,8 @@ interface PieChartProps {
data: PieChartData[]; data: PieChartData[];
width: number; width: number;
labelWidth: number; labelWidth: number;
padRadius?: number;
innerRadius?: number;
className?: string; className?: string;
} }
@ -16,7 +18,13 @@ interface PieChartData {
value: number; value: number;
} }
export function PieChart({ width, labelWidth, ...props }: PieChartProps) { export function PieChart({
width,
labelWidth,
padRadius = width * 0.35,
innerRadius = width * 0.015,
...props
}: PieChartProps) {
const pieWidth = width * 0.5 - labelWidth; const pieWidth = width * 0.5 - labelWidth;
return ( return (
<svg className={props.className} width={width} height={width}> <svg className={props.className} width={width} height={width}>
@ -27,8 +35,8 @@ export function PieChart({ width, labelWidth, ...props }: PieChartProps) {
pieValue={(d: PieChartData) => d.value} pieValue={(d: PieChartData) => d.value}
cornerRadius={10} cornerRadius={10}
padAngle={0.075} padAngle={0.075}
padRadius={width * 0.35} padRadius={padRadius}
innerRadius={width * 0.015} innerRadius={innerRadius}
outerRadius={pieWidth} outerRadius={pieWidth}
> >
{(pie) => <PieSlices {...pie} isLabel={false} />} {(pie) => <PieSlices {...pie} isLabel={false} />}