Adjust pie chart (#117)
continuous-integration/drone/push Build is passing Details

https://adjust-pie-1-csc-class-profile-staging-snedadah.k8s.csclub.cloud/academics/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
Reviewed-on: #117
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
This commit is contained in:
Shahan Nedadahandeh 2022-12-28 01:32:07 -05:00
parent dcc318b671
commit b8590f7a28
9 changed files with 51 additions and 13 deletions

View File

@ -76,7 +76,7 @@
}
.horizontalScrollOnMobile {
overflow: scroll;
overflow-x: scroll;
}
}

View File

@ -1,12 +1,20 @@
.piePath {
fill: var(--tertiary-background);
stroke: var(--label);
stroke-width: 1px;
stroke-dasharray: 0;
stroke-linecap: round;
}
.labelPath {
fill-opacity: 0;
}
.labelText {
fill: white;
}
.group:hover > .piePath {
fill: var(--primary-accent);
filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
}
}

View File

@ -26,6 +26,8 @@ interface PieChartProps {
labelTextXOffset?: number;
/** Y-axis offset of the label text, in pixels. */
labelTextYOffset?: number;
/** If set, the minimum width of this graph */
minWidth?: number;
/** Accessor function to get value to display as label text from datum. */
getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
className?: string;
@ -41,11 +43,12 @@ export const PieChart = withTooltip<PieChartProps>(
data,
width,
labelWidth,
padRadius = width * 0.35,
innerRadius = width * 0.015,
padRadius = width * 0.25,
innerRadius = width * 0,
labelTextSize = 40,
labelTextXOffset = 0,
labelTextYOffset = 0,
minWidth,
getLabelDisplayValueFromDatum = (datum: PieChartData) =>
`${datum.category}`,
className,
@ -56,7 +59,14 @@ export const PieChart = withTooltip<PieChartProps>(
hideTooltip,
showTooltip,
}) => {
if (minWidth) {
width = width < minWidth ? minWidth : width;
}
const pieWidth = width * 0.5 - labelWidth;
const cornerRadius = 0;
const padAngle = 0;
return (
<div>
<svg className={className} width={width} height={width}>
@ -64,8 +74,8 @@ export const PieChart = withTooltip<PieChartProps>(
<Pie
data={data}
pieValue={(d: PieChartData) => d.value}
cornerRadius={10}
padAngle={0.075}
cornerRadius={cornerRadius}
padAngle={padAngle}
padRadius={padRadius}
innerRadius={innerRadius}
outerRadius={pieWidth}

View File

@ -8,15 +8,15 @@ export const P1 = [
value: 20.4,
},
{
category: "Yes (Masters)",
category: "Masters",
value: 5,
},
{
category: "Yes (PhD)",
category: "PhD",
value: 4,
},
{
category: "Yes (PhD + Masters)",
category: "PhD + Masters",
value: 6.8,
},
];

View File

@ -68,7 +68,11 @@ export default function Demographics() {
<ComponentWrapper heading="Please indicate the pronouns that you use.">
<div className={styles.graphContainer}>
<PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
<PieChart
data={D3}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
/>
</div>
</ComponentWrapper>

View File

@ -55,6 +55,7 @@ export default function Demographics() {
heading="Rate how social you are."
bodyText="Looks like most people consider themselves to be in the middle."
align="center"
noBackground
>
<BarGraphVertical
data={F1}

View File

@ -107,6 +107,7 @@ export default function Demographics() {
heading="In what areas have you grown that are unrelated to CS?"
bodyText="University is an unforgettable, life-changing, and learning experience that we only get once in a lifetime! Make the most out of it! :)"
align="center"
noBackground
>
<WordCloud
data={M7}

View File

@ -41,7 +41,12 @@ export default function Demographics() {
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={P1} {...pieChartProps(isMobile, pageWidth)} />
<PieChart
data={P1}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
minWidth={500}
/>
</div>
</ComponentWrapper>

View File

@ -65,6 +65,7 @@ export default function SamplePage() {
heading="What program are you in?"
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
align="center"
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
@ -134,7 +135,11 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<ComponentWrapper
heading="What program are you in?"
align="center"
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
@ -181,7 +186,11 @@ export default function SamplePage() {
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<ComponentWrapper
heading="What program are you in?"
align="center"
noBackground
>
<BoxPlot
width={600}
height={400}