From 14d3d235a6e32c2bc00b58f7a4554c47b04bc27f Mon Sep 17 00:00:00 2001
From: shahanneda <shahan.neda@gmail.com>
Date: Sun, 12 Feb 2023 18:03:06 -0500
Subject: [PATCH] Added min width to missing graphs

---
 components/Boxplot.tsx          |  7 +++++++
 components/LineGraph.module.css |  8 ++++++++
 components/LineGraph.tsx        |  7 +++++++
 components/StackedBarGraph.tsx  | 12 ++++++++++++
 4 files changed, 34 insertions(+)

diff --git a/components/Boxplot.tsx b/components/Boxplot.tsx
index 051d12d..fab3462 100644
--- a/components/Boxplot.tsx
+++ b/components/Boxplot.tsx
@@ -69,6 +69,8 @@ export type StatsPlotProps = {
   boxPlotLeftOffset?: number;
   /** Boxplot padding  */
   boxPlotPadding?: number;
+  /** Minimum width of the graph. */
+  minWidth?: number;
 };
 
 export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
@@ -96,7 +98,12 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
     boxPlotWidthFactor = 0.4,
     boxPlotLeftOffset = 0.3,
     boxPlotPadding = 0.3,
+    minWidth = 500,
   }: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
+    if (width < minWidth) {
+      width = minWidth;
+    }
+
     // bounds
     const xMax = width;
     const yMax = height - 120;
diff --git a/components/LineGraph.module.css b/components/LineGraph.module.css
index 0a59a5b..86b9d41 100644
--- a/components/LineGraph.module.css
+++ b/components/LineGraph.module.css
@@ -22,4 +22,12 @@
   display: flex;
   margin: calc(16rem / 8);
   justify-content: center;
+}
+
+@media screen and (max-width: 900px) {
+
+  /* To fix legend being cut off on mobile */
+  .legend {
+    justify-content: start;
+  }
 }
\ No newline at end of file
diff --git a/components/LineGraph.tsx b/components/LineGraph.tsx
index 28c2ab2..c4020ec 100644
--- a/components/LineGraph.tsx
+++ b/components/LineGraph.tsx
@@ -50,6 +50,8 @@ interface LineGraphProps {
   yTickLabelSize?: number;
   /** Margin for each item in the legend */
   itemMargin?: string;
+  /** Minimum width of the graph. */
+  minWidth?: number;
 }
 
 const DEFAULT_LABEL_SIZE = 16;
@@ -72,7 +74,12 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
     hideTooltip,
     showTooltip,
     itemMargin = "0 0 0 15px",
+    minWidth = 500,
   }) => {
+    if (width < minWidth) {
+      width = minWidth;
+    }
+
     const xLength = data.xValues.length;
 
     if (data.lines.length != colorRange.length) {
diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx
index 88bb6f4..00a544b 100644
--- a/components/StackedBarGraph.tsx
+++ b/components/StackedBarGraph.tsx
@@ -61,6 +61,8 @@ export type StackedBarProps = {
   tooltipBottomLabel?: string;
   //** Display percentage */
   displayPercentage?: boolean;
+  /** Minimum width of the graph. */
+  minWidth?: number;
 };
 
 let tooltipTimeout: number;
@@ -91,7 +93,12 @@ export const StackedBarGraphVertical = withTooltip<
     tooltipBottomLabel = "",
     tooltipTopLabel = "",
     displayPercentage,
+    minWidth = 500,
   }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
+    if (width < minWidth) {
+      width = minWidth;
+    }
+
     const yTotals = data.reduce((allTotals, currCategory) => {
       const yTotal = keys.reduce((categoryTotal, k) => {
         categoryTotal += currCategory[k] as number;
@@ -284,7 +291,12 @@ export const StackedBarGraphHorizontal = withTooltip<
     tooltipBottomLabel = "",
     tooltipTopLabel = "",
     displayPercentage,
+    minWidth = 500,
   }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
+    if (width < minWidth) {
+      width = minWidth;
+    }
+
     const yTotals = data.reduce((allTotals, currCategory) => {
       const yTotal = keys.reduce((categoryTotal, k) => {
         categoryTotal += currCategory[k] as number;