:fix: legend

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. */
@@ -81,11 +65,15 @@ interface LineGraphProps {
   yAxisLabelSize?: number;
   /** Controls the distance between the value axis label and the value axis. */
   yAxisLabelOffset?: number;
-  legendProps?: LegendProps;
+  /** Distance between the right side of the graph and the legend, in px. */
+  legendLeftOffset?: number;
+  /** Distance between the top of the graph and the legend, in px. */
+  legendTopOffset?: number;
+  /** 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*/
@@ -99,31 +87,18 @@ 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,
+    legendLeftOffset = 40,
+    legendTopOffset = 40,
+    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 +144,24 @@ 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 className={styles.container}>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
+          <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 +252,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