Component Switcher (#169)

Closes Issue #142.

Created a new PR for component switcher changes.

https://richardshuai-component-switcher-csc-class-pr-snedadah.k8s.csclub.cloud/samplePage/
Co-authored-by: ricsign <ricsign123@gmail.com>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #169
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>

components/ComponentSwitcher.module.css

@@ -0,0 +1,59 @@
+.btn {
+  --button-color: var(--primary-accent-darker);
+  --border-color: var(--link);
+
+  --selected-button-color: var(--primary-accent-dark);
+  --selected-button-border-color: var(--link-hover);
+
+  --hover-button-color: var(--primary-accent-dark);
+  --hover-button-border-color: var(--link-hover);
+
+  display: inline-block;
+  height: calc(60rem / 16);
+  line-height: calc(30rem / 16);
+  background-color: var(--button-color);
+  padding: 0 calc(30rem / 16);
+  border-radius: 99em;
+  text-decoration: none;
+  color: #fff;
+  font-size: calc(18rem / 16);
+  vertical-align: bottom;
+  white-space: nowrap;
+  border: calc(3rem / 16) solid var(--border-color);
+  font-family: "Inconsolata", monospace;
+  transition: .15s background-color, .15s border-color, .15s color, .15s fill;
+  font-weight: 600;
+  cursor: pointer;
+  margin: calc(8rem / 16) calc(3rem / 16);
+  text-align: center;
+}
+
+.btn:hover {
+  --button-color: var(--hover-button-color);
+  --border-color: var(--hover-button-border-color);
+
+  background-color: var(--button-color);
+  border: calc(3rem / 16) solid var(--border-color);
+}
+
+.btnContainer {
+  display: block;
+  text-align: center;
+  margin: auto;
+}
+
+.selectedBtn {
+  --button-color: var(--selected-button-color);
+  --border-color: var(--selected-button-border-color);
+
+  background-color: var(--button-color);
+  border: calc(3rem / 16) solid var(--border-color);
+}
+
+.selectedBtn:hover {
+  --button-color: var(--hover-button-color);
+  --border-color: var(--hover-button-border-color);
+
+  background-color: var(--button-color);
+  border: calc(3rem / 16) solid var(--border-color);
+}

components/ComponentSwitcher.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+
+import styles from "./ComponentSwitcher.module.css";
+
+type ComponentSwitcherProps = {
+  buttonList: string[];
+  graphList: React.ReactNode[];
+};
+
+export function ComponentSwitcher({
+  buttonList,
+  graphList,
+}: ComponentSwitcherProps) {
+  const [selectedButton, setSelectedButton] = useState(buttonList[0]);
+  const [currentGraph, setCurrentGraph] = useState(graphList[0]);
+
+  const handleSwitch = (buttonName: string) => {
+    const graphIndex = buttonList.indexOf(buttonName);
+    setSelectedButton(buttonName);
+    setCurrentGraph(graphList[graphIndex]);
+  };
+
+  useEffect(() => {
+    setCurrentGraph(graphList[0]);
+  }, [graphList]);
+
+  return (
+    <div>
+      <div>{currentGraph}</div>
+      <div className={styles.btnContainer}>
+        {buttonList.map((buttonName, idx) => (
+          // we may also apply style if currently selected button === buttonName
+          <button
+            key={idx}
+            className={`${styles.btn} ${
+              selectedButton === buttonName ? styles.selectedBtn : ""
+            }`}
+            onClick={() => handleSwitch(buttonName)}
+          >
+            {buttonName}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

pages/samplePage.tsx

@@ -13,6 +13,7 @@ import { useIsMobile } from "utils/isMobile";
 import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
 import { BottomNav } from "@/components/BottomNav";
 import { BoxPlot } from "@/components/Boxplot";
+import { ComponentSwitcher } from "@/components/ComponentSwitcher";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { LineGraph } from "@/components/LineGraph";
@@ -52,6 +53,102 @@ export default function SamplePage() {
         title="Demographics"
         subtitle="An insight into the demographics of UW’s CS programs"
       />
+      <ComponentWrapper
+        heading="TESTING?"
+        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="right"
+        noBackground
+      >
+        <ComponentSwitcher
+          graphList={[
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
+          ]}
+          buttonList={["1A", "1B", "2A", "2B", "3A", "3B", "4A", "4B"]}
+        />
+      </ComponentWrapper>
       <ComponentWrapper
         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."
@@ -161,20 +258,6 @@ export default function SamplePage() {
           height={defaultGraphHeight}
         />
       </ComponentWrapper>
-      <ComponentWrapper
-        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="right"
-        noBackground
-      >
-        <BarGraphHorizontal
-          className={styles.barGraphDemo}
-          data={mockCategoricalData}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultHorizontalBarGraphMargin}
-        />
-      </ComponentWrapper>
       <ComponentWrapper
         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."

utils/defaultProps.ts

@@ -50,3 +50,5 @@ export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
     labelTextSize: DefaultProp.labelSize,
   };
 };
+
+export const termsList = ["1A", "1B", "2A", "2B", "3A", "3B", "4A", "4B"];