Fix Line Graph Legend Position (Close #100) (#107)

Co-authored-by: Beihao Zhou <beihaozhou@Beihaos-MacBook-Air.local>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #107
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>

components/LineGraph.module.css

@@ -18,4 +18,5 @@
 .legend {
   display: flex;
   margin: calc(16rem / 8);
+  justify-content: center;
 }

components/LineGraph.tsx

@@ -31,22 +31,6 @@ interface LineGraphData {
   lines: LineData[];
 }
 
-interface LegendProps {
-  /** Position of the legend, relative to the graph. */
-  position?: "top" | "right";
-  /** Font size of the labels in the legend, in pixels. Default is 16px. */
-  itemLabelSize?: number;
-  /** Gap between items in the legend, in pixels. */
-  itemGap?: number;
-  /** Distance between the legend and other adjacent elements, in pixels. */
-  margin?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
-}
-
 interface LineGraphProps {
   data: LineGraphData;
   /** Width of the entire graph, in pixels. */
@@ -62,33 +46,15 @@ interface LineGraphProps {
   };
   /** List of hexademical colours for each line, length of colorRange should match the length of data. */
   colorRange: string[];
-  className?: string;
   /** Font size of the category tick labels, in pixels. Default is 16px. */
   xTickLabelSize?: number;
   /** Font size of the value tick labels, in pixels. Default is 16px. */
   yTickLabelSize?: number;
-  /** Font size of the value that appears when hovering over a bar, in pixels. */
-  hoverLabelSize?: number;
-  /** Label text for the category axis. */
-  xAxisLabel?: string;
-  /** Font size of the label for the cateogry axis, in pixels. */
-  xAxisLabelSize?: number;
-  /** Controls the distance between the category axis label and the category axis. */
-  xAxisLabelOffset?: number;
-  /** Label text for the value axis. */
-  yAxisLabel?: string;
-  /** Font size of the label for the value axis, in pixels. */
-  yAxisLabelSize?: number;
-  /** Controls the distance between the value axis label and the value axis. */
-  yAxisLabelOffset?: number;
-  legendProps?: LegendProps;
+  /** Margin for each item in the legend */
+  itemMargin?: string;
 }
 
 const DEFAULT_LABEL_SIZE = 16;
-const DEFAULT_LEGEND_GAP = 16;
-
-// TODO: Address unused props in this file
-/* eslint-disable unused-imports/no-unused-vars*/
 
 type TooltipData = string;
 
@@ -99,31 +65,16 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
     margin,
     data,
     colorRange,
-    className,
     xTickLabelSize = DEFAULT_LABEL_SIZE,
     yTickLabelSize = DEFAULT_LABEL_SIZE,
-    hoverLabelSize,
-    xAxisLabel,
-    xAxisLabelSize = DEFAULT_LABEL_SIZE,
-    xAxisLabelOffset = 0,
-    yAxisLabel,
-    yAxisLabelSize = DEFAULT_LABEL_SIZE,
-    yAxisLabelOffset = 0,
     tooltipOpen,
     tooltipLeft,
     tooltipTop,
     tooltipData,
     hideTooltip,
     showTooltip,
-    legendProps,
+    itemMargin = "0 0 0 15px",
   }) => {
-    const {
-      position: legendPosition = "right",
-      itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
-      itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
-      margin: legendMargin = {},
-    } = legendProps ?? {};
-
     const xLength = data.xValues.length;
 
     if (data.lines.length != colorRange.length) {
@@ -169,20 +120,21 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
 
     const keys = data.lines.map((line) => line.label);
 
-    const legendScale = scaleOrdinal<string, string>({
+    const colorScale = scaleOrdinal<string, string>({
       domain: keys,
       range: colorRange,
     });
 
     return (
-      <div
-        className={
-          className ? `${className} ${styles.wrapper}` : styles.wrapper
-        }
-        style={{
-          flexDirection: legendPosition === "right" ? "row" : "column-reverse",
-        }}
-      >
+      <div>
+        <div className={styles.legend}>
+          <LegendOrdinal
+            scale={colorScale}
+            direction="row"
+            itemMargin={itemMargin}
+            labelAlign="center"
+          />
+        </div>
         <svg width={width} height={height}>
           <Group top={margin.top} left={margin.left}>
             <GridColumns
@@ -273,27 +225,6 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
             </Group>
           </Group>
         </svg>
-        <LegendOrdinal
-          className={styles.legend}
-          style={{
-            marginTop: legendMargin.top,
-            marginRight: legendMargin.right,
-            marginBottom: legendMargin.bottom,
-            marginLeft: legendMargin.left,
-            fontSize: legendLabelSize,
-          }}
-          scale={legendScale}
-          direction={legendPosition === "right" ? "column" : "row"}
-          itemMargin={
-            legendPosition === "right"
-              ? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
-                  legendItemGap / 2
-                }rem / 16) 0`
-              : `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
-                  legendItemGap / 2
-                }rem / 16)`
-          }
-        />
 
         {tooltipOpen && (
           <TooltipWrapper