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

Fix shadow not working
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Jared He 2022-07-27 23:27:09 -04:00
parent 87ed199f11
commit fc3512f72f
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/PieChart.module.css
View File

@ -1,9 +1,10 @@
.piePath { .piePath {
fill: #354265; fill: var(--tertiary-background);
} }
.labelPath { .labelPath {
fill: var(--primary-background); fill: var(--primary-background);
fill-opacity: 0;
} }
.pieText, .pieText,
@ -17,11 +18,11 @@
display: none; display: none;
} }
.group:hover>.piePath { .group:hover > .piePath {
fill: var(--primary-accent); fill: var(--primary-accent);
filter: drop-shadow(0px 0px 6px var(--primary-accent)); filter: drop-shadow(0px 0px 6px var(--primary-accent));
} }
.group:hover>.pieText { .group:hover > .pieText {
display: inline display: inline
} }

2
components/PieChart.tsx
View File

@ -31,7 +31,6 @@ export function PieChart({
<Group top={width * 0.5} left={width * 0.5}> <Group top={width * 0.5} left={width * 0.5}>
<Pie <Pie
data={props.data} data={props.data}
fill="aqua"
pieValue={(d: PieChartData) => d.value} pieValue={(d: PieChartData) => d.value}
cornerRadius={10} cornerRadius={10}
padAngle={0.075} padAngle={0.075}
@ -43,7 +42,6 @@ export function PieChart({
</Pie> </Pie>
<Pie <Pie
data={props.data} data={props.data}
fill="rgb(37, 45, 65)"
pieValue={(d: PieChartData) => d.value} pieValue={(d: PieChartData) => d.value}
innerRadius={pieWidth} innerRadius={pieWidth}
outerRadius={width * 0.5} outerRadius={width * 0.5}

6
pages/playground.tsx
View File

@ -1,6 +1,5 @@
import { mockPieData } from "data/mocks";
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph"; import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData } from "data/mocks"; import { mockPieData, mockCategoricalData } from "data/mocks";
import React from "react"; import React from "react";
import { PieChart } from "@/components/PieChart"; import { PieChart } from "@/components/PieChart";
@ -14,6 +13,9 @@ export default function Home() {
<div className={styles.page}> <div className={styles.page}>
<h1>Playground</h1> <h1>Playground</h1>
<p>Show off your components here!</p> <p>Show off your components here!</p>
<h2>
<code>{"<PieChart />"}</code>
</h2>
<div style={{ padding: "30px" }}> <div style={{ padding: "30px" }}>
<PieChart data={mockPieData} width={800} labelWidth={215} /> <PieChart data={mockPieData} width={800} labelWidth={215} />
</div> </div>