Fix Mobile Vertical Bar Graph Labels (Closes #50) (#83)

* Add alternating label functionality to vertical bar graphs when the width of the graph reaches its `minWidth`
* Add `minWidth` prop to horizontal and vertical bar graphs, by default, set to 500 (make a PR to contain these default prop values)
* Add overflow scroll on mobile for horizontal and vertical bar graphs

https://fix-mobile-bug-labels-csc-class-profile-stag-snedadah.k8s.csclub.cloud/
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #83
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>

components/BarGraph.tsx

@@ -43,6 +43,16 @@ interface BarGraphProps {
   valueAxisLabelSize?: number;
   /** Controls the distance between the value axis label and the value axis. */
   valueAxisLabelOffset?: number;
+  /** Minimum width of the graph. */
+  minWidth?: number;
+  /** Breakpoint width of graph where alernating labels are displayed. Only for Vertical graphs */
+  widthAlternatingLabel?: number;
+  /** Space added to the bottom of the graph to show overflowing labels. Only for Vertical graphs */
+  alternatingLabelSpace?: number;
+  /** Default position of labels in x-axis, in px. */
+  defaultLabelDy?: string;
+  /** Position of lower labels in x-axis, in px. Only for Vertical graphs */
+  lowerLabelDy?: string;
 }
 
 interface BarGraphData {
@@ -54,11 +64,11 @@ const DEFAULT_LABEL_SIZE = 16;
 
 export function BarGraphHorizontal(props: BarGraphProps) {
   const {
-    width,
     height,
     margin,
     data,
     className,
+    minWidth = 500,
     categoryTickLabelSize = DEFAULT_LABEL_SIZE,
     valueTickLabelSize = DEFAULT_LABEL_SIZE,
     hoverLabelSize,
@@ -68,8 +78,9 @@ export function BarGraphHorizontal(props: BarGraphProps) {
     valueAxisLabel,
     valueAxisLabelSize = DEFAULT_LABEL_SIZE,
     valueAxisLabelOffset = 0,
+    defaultLabelDy = "0",
   } = props;
-
+  const width = props.width < minWidth ? minWidth : props.width; // Ensuring graph's width >= minWidth
   const barPadding = 0.4;
 
   const categoryMax = height - margin.top - margin.bottom;
@@ -163,8 +174,6 @@ export function BarGraphHorizontal(props: BarGraphProps) {
           return {
             ...leftTickLabelProps(),
             className: styles.tickLabel,
-            dx: "-0.5rem",
-            dy: "0.25rem",
             fontSize: `${categoryTickLabelSize / 16}rem`,
           };
         }}
@@ -186,7 +195,7 @@ export function BarGraphHorizontal(props: BarGraphProps) {
           return {
             ...bottomTickLabelProps(),
             className: styles.tickLabel,
-            dy: "0.25rem",
+            dy: defaultLabelDy,
             fontSize: `${valueTickLabelSize / 16}rem`,
           };
         }}
@@ -203,11 +212,11 @@ export function BarGraphHorizontal(props: BarGraphProps) {
 
 export function BarGraphVertical(props: BarGraphProps) {
   const {
-    width,
     height,
     margin,
     data,
     className,
+    minWidth = 500,
     categoryTickLabelSize = DEFAULT_LABEL_SIZE,
     valueTickLabelSize = DEFAULT_LABEL_SIZE,
     hoverLabelSize,
@@ -217,12 +226,20 @@ export function BarGraphVertical(props: BarGraphProps) {
     valueAxisLabel,
     valueAxisLabelSize = DEFAULT_LABEL_SIZE,
     valueAxisLabelOffset = 0,
+    widthAlternatingLabel = 600,
+    alternatingLabelSpace = 80,
+    defaultLabelDy = `0px`,
+    lowerLabelDy = `30px`,
   } = props;
-
+  const width = props.width < minWidth ? minWidth : props.width; // Ensuring graph's width >= minWidth
   const barPadding = 0.4;
+  const alternatingLabel = width <= widthAlternatingLabel;
+  const final_margin_bottom = alternatingLabel
+    ? margin.bottom + alternatingLabelSpace
+    : margin.bottom;
 
   const categoryMax = width - margin.left - margin.right;
-  const valueMax = height - margin.top - margin.bottom;
+  const valueMax = height - margin.top - final_margin_bottom;
 
   const getCategory = (d: BarGraphData) => d.category;
   const getValue = (d: BarGraphData) => d.value;
@@ -308,11 +325,12 @@ export function BarGraphVertical(props: BarGraphProps) {
         left={margin.left}
         hideAxisLine
         hideTicks
-        tickLabelProps={() => {
+        tickLabelProps={(value, index) => {
+          const alternatingDy = index % 2 == 0 ? defaultLabelDy : lowerLabelDy;
           return {
             ...bottomTickLabelProps(),
             className: styles.tickLabel,
-            dy: "-0.25rem",
+            dy: alternatingLabel ? alternatingDy : defaultLabelDy,
             fontSize: `${categoryTickLabelSize / 16}rem`,
             width: categoryScale.bandwidth(),
             verticalAnchor: "start",

components/ComponentWrapper.module.css

@@ -45,7 +45,10 @@
 
 .wrapperNoBodyText {
   flex-direction: column;
-  align-items: center;
+}
+
+.wrapperNoBodyText .internalWrapper {
+  text-align: center;
 }
 
 @media screen and (max-width: 900px) {
@@ -61,6 +64,10 @@
   .wrapperCenter {
     padding: 0;
   }
+
+  .horizontalScrollOnMobile {
+    overflow: scroll;
+  }
 }
 
 .internalWrapper {

components/ComponentWrapper.tsx

@@ -37,7 +37,11 @@ export function ComponentWrapper({
         <h3>{heading}</h3>
         {bodyText ? <p>{bodyText}</p> : null}
       </div>
-      <div className={styles.internalWrapper}>{children}</div>
+      <div
+        className={`${styles.internalWrapper} ${styles.horizontalScrollOnMobile}`}
+      >
+        {children}
+      </div>
     </div>
   );
 }

pages/_app.css

@@ -2,6 +2,10 @@ html {
   scroll-behavior: smooth;
 }
 
+html, body {
+  overflow-x: hidden;
+}
+
 body {
   /* Theme colours */
   --pink: #EF839D;
@@ -68,6 +72,7 @@ body {
   color: var(--primary-text);
   font-family: "Inconsolata", monospace;
   margin: 0;
+  position: relative;
 
   /* Font styling for body */
   font-size: calc(18rem / 16);

pages/demographics.tsx

@@ -124,6 +124,7 @@ export default function Demographics() {
           width={defaultGraphWidth}
           height={defaultGraphHeight}
           margin={defaultBarGraphMargin}
+          widthAlternatingLabel={700}
         />
       </ComponentWrapper>
 
@@ -189,7 +190,7 @@ export default function Demographics() {
           data={D11}
           width={defaultGraphWidth}
           height={defaultGraphHeight}
-          margin={{ ...defaultBarGraphMargin, ...{ left: 200 } }}
+          margin={{ ...defaultBarGraphMargin, ...{ left: 220 } }}
         />
       </ComponentWrapper>