Added min width to missing graphs (#176)

Closes #129
Closes #120

Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #176
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>

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;

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;
+  }
 }

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) {

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;