Add initial pie and pieslice components

Adds a `<BarGraphHorizontal />` component and a `<BarGraphVertical />` component.

Closes #1.

Possible changes for the future:
- Refactor to make the horizontal and vertical bar graphs into one component
- Add (optional) graph title

Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #16
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>

@@ -0,0 +4,4 @@
+
+.labelPath {
+  fill: var(--primary-background);
+  fill-opacity: 0;

@@ -0,0 +11,4 @@
+.labelText {
+  fill: var(--label);
+  font-size: 40px;
+  font-weight: 800;

@@ -0,0 +20,4 @@
+
+.group:hover > .piePath {
+  fill: var(--primary-accent);
+  filter: drop-shadow(0px 0px 6px var(--primary-accent));

@@ -0,0 +9,4 @@
+  width: number;
+  labelWidth: number;
+  padRadius?: number;
+  innerRadius?: number;

@@ -0,0 +27,4 @@
+}: PieChartProps) {
+  const pieWidth = width * 0.5 - labelWidth;
+  return (
+    <svg className={props.className} width={width} height={width}>

@@ -0,0 +30,4 @@
+    <svg className={props.className} width={width} height={width}>
+      <Group top={width * 0.5} left={width * 0.5}>
+        <Pie
+          data={props.data}

@@ -0,0 +57,4 @@
+  isLabel: boolean;
+};
+
+export function PieSlices({ isLabel, ...props }: PieSlicesProps<PieChartData>) {

@@ -0,0 +65,4 @@
+        const pathArc = props.path(arc) as string;
+
+        return (
+          <g className={styles.group} key={`arc-${arc.data.category}`}>

@@ -0,0 +71,4 @@
+              d={pathArc}
+            />
+            <text
+              className={isLabel ? styles.labelText : styles.pieText}

@@ -0,0 +72,4 @@
+              className={isLabel ? styles.labelPath : styles.piePath}
+              d={pathArc}
+            />
+            <text

@@ -0,0 +74,4 @@
+            />
+            <text
+              className={isLabel ? styles.labelText : styles.pieText}
+              x={isLabel ? centroidX : centroidX}

@@ -0,0 +10,4 @@
+  /** Width of the entire graph, including labels, in pixels. */
+  width: number;
+  /** Width of the outer ring of labels, in pixels. */
+  labelWidth: number;

@@ -0,0 +15,4 @@
+  padRadius?: number;
+  /** Distance of gap in center of pie graph, in pixels */
+  innerRadius?: number;
+  /** Font size of text inside the pie, in pixels*/

@@ -12,3 +18,3 @@
     <div className={styles.page}>
       <h1>Playground</h1>
-      <p>Show off your components here!</p>
+      <p>Show off your components here!</p>``