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: #117
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>

components/ComponentWrapper.module.css

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

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));
-}
+}

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,
+    padRadius = width * 0.25,
-    innerRadius = width * 0.015,
+    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}
+              cornerRadius={cornerRadius}
-              padAngle={0.075}
+              padAngle={padAngle}
               padRadius={padRadius}
               innerRadius={innerRadius}
               outerRadius={pieWidth}

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,
   },
 ];

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>
 

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}

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}

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>
 

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}