From b8590f7a28f17c6bc94f497ec384e759fd61f470 Mon Sep 17 00:00:00 2001
From: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Date: Wed, 28 Dec 2022 01:32:07 -0500
Subject: [PATCH] Adjust pie chart (#117)

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: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/117
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 components/ComponentWrapper.module.css |  2 +-
 components/PieChart.module.css         | 10 +++++++++-
 components/PieChart.tsx                | 18 ++++++++++++++----
 data/post-grad.ts                      |  6 +++---
 pages/demographics.tsx                 |  6 +++++-
 pages/friends.tsx                      |  1 +
 pages/miscellaneous.tsx                |  1 +
 pages/post-grad.tsx                    |  7 ++++++-
 pages/samplePage.tsx                   | 13 +++++++++++--
 9 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/components/ComponentWrapper.module.css b/components/ComponentWrapper.module.css
index 09f37ea..d10c7c4 100644
--- a/components/ComponentWrapper.module.css
+++ b/components/ComponentWrapper.module.css
@@ -76,7 +76,7 @@
   }
 
   .horizontalScrollOnMobile {
-    overflow: scroll;
+    overflow-x: scroll;
   }
 }
 
diff --git a/components/PieChart.module.css b/components/PieChart.module.css
index a7e0703..b209dca 100644
--- a/components/PieChart.module.css
+++ b/components/PieChart.module.css
@@ -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));
-}
+}
\ No newline at end of file
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
index 765e36e..5b72e7a 100644
--- a/components/PieChart.tsx
+++ b/components/PieChart.tsx
@@ -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}
diff --git a/data/post-grad.ts b/data/post-grad.ts
index a6af396..e320a51 100644
--- a/data/post-grad.ts
+++ b/data/post-grad.ts
@@ -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,
   },
 ];
diff --git a/pages/demographics.tsx b/pages/demographics.tsx
index d9a3c54..c07fddc 100644
--- a/pages/demographics.tsx
+++ b/pages/demographics.tsx
@@ -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>
 
diff --git a/pages/friends.tsx b/pages/friends.tsx
index 94ce041..72afdf3 100644
--- a/pages/friends.tsx
+++ b/pages/friends.tsx
@@ -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}
diff --git a/pages/miscellaneous.tsx b/pages/miscellaneous.tsx
index 9d6174e..e4fd436 100644
--- a/pages/miscellaneous.tsx
+++ b/pages/miscellaneous.tsx
@@ -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}
diff --git a/pages/post-grad.tsx b/pages/post-grad.tsx
index b3dc10e..0d55723 100644
--- a/pages/post-grad.tsx
+++ b/pages/post-grad.tsx
@@ -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>
 
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx
index ccf08b8..4207bd9 100644
--- a/pages/samplePage.tsx
+++ b/pages/samplePage.tsx
@@ -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}