From 4cd27dbbaf7e93c273c53286ed37dee5dadae95e Mon Sep 17 00:00:00 2001
From: Miniapple8888 <miniapple8888@gmail.com>
Date: Mon, 29 Aug 2022 14:30:59 -0400
Subject: [PATCH] move legend to the right of the graph

---
 components/StackedBarGraph.module.css |  8 ++++++--
 components/StackedBarGraph.tsx        | 21 +++++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css
index 347b174..425ef98 100644
--- a/components/StackedBarGraph.module.css
+++ b/components/StackedBarGraph.module.css
@@ -1,12 +1,16 @@
+.container {
+  position: relative;
+}
+
 .barStack:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
 }
 
 .legend {
-  position: relative;
+  position: absolute;
   display: flex;
-  justify-content: center;
   font-size: 16px;
+  top: 0;
 }
 
 .toolTip {
diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx
index e18c4c9..f3b740a 100644
--- a/components/StackedBarGraph.tsx
+++ b/components/StackedBarGraph.tsx
@@ -45,11 +45,18 @@ export type StackedBarProps = {
   numTicksLeftAxis?: number;
   /** Distance between the left axis labels and the start of the lines of the graph, in px. */
   valueAxisLeftOffset?: number;
+  /** 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;
   /** Width of the lines in the graph, in px. */
   strokeWidth?: number;
   /** Length of the dashes and the gaps in the graph, in px. */
   strokeDashArray?: string;
+  /** Padding between each bar in the stacked bar graph, from 0 to 1 */
   scalePadding?: number;
+  /** Margin for each item in the legend */
+  itemMargin?: string;
 };
 
 const tooltipStyles = {
@@ -73,6 +80,9 @@ export function StackedBarGraph({
   valueAxisLeftOffset = 40,
   strokeWidth = 2.5,
   strokeDashArray = "10,4",
+  legendLeftOffset = 40,
+  legendTopOffset = 40,
+  itemMargin = "15px 0 0 0",
 }: StackedBarProps) {
   const yTotals = data.reduce((allTotals, currCategory) => {
     const yTotal = keys.reduce((categoryTotal, k) => {
@@ -125,7 +135,7 @@ export function StackedBarGraph({
   yScale.range([yMax, 0]);
 
   return width < 10 ? null : (
-    <div>
+    <div className={styles.container}>
       <svg ref={containerRef} width={width} height={height}>
         <Group top={margin.top} left={margin.left}>
           <GridRows
@@ -228,11 +238,14 @@ export function StackedBarGraph({
           />
         </Group>
       </svg>
-      <div className={styles.legend} style={{ width: width }}>
+      <div
+        className={styles.legend}
+        style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+      >
         <LegendOrdinal
           scale={colorScale}
-          direction="row"
-          labelMargin="0 15px 0 0"
+          direction="column"
+          itemMargin={itemMargin}
         />
       </div>