From a3eeef15eb66ecaca9b9b93be8dd6c1efe85dbfd Mon Sep 17 00:00:00 2001
From: slice <ryaneft@gmail.com>
Date: Fri, 13 Jul 2018 19:36:42 -0700
Subject: [PATCH] remove graph y axis on small devices

---
 priv/frontend/src/components/Graph.js | 40 ++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/priv/frontend/src/components/Graph.js b/priv/frontend/src/components/Graph.js
index 45f724f..1f60c3e 100644
--- a/priv/frontend/src/components/Graph.js
+++ b/priv/frontend/src/components/Graph.js
@@ -6,6 +6,24 @@ import { ResponsiveLine } from '@nivo/line';
 import './Graph.css';
 
 export default class Graph extends Component {
+  state = {
+    screenWidth: window.innerWidth,
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleScreenChange);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleScreenChange);
+  }
+
+  handleScreenChange = () => {
+    this.setState({
+      screenWidth: window.innerWidth,
+    });
+  }
+
   processData() {
     const { data: unprocessedData } = this.props;
 
@@ -24,28 +42,30 @@ export default class Graph extends Component {
   }
 
   isSmallScreen() {
-    return window.innerWidth < 500;
+    return this.state.screenWidth < 500;
   }
 
   render() {
+    const leftAxis = {
+      format: (d) => `${d}ms`,
+      tickCount: 3,
+      legend: 'latency',
+      legendPosition: 'center',
+      legendOffset: -55,
+      tickSize: 0,
+    };
+
     return (
       <div className="graph-container">
         <ResponsiveLine
           data={this.processData()}
-          margin={{ top: 30, left: 70, bottom: 50 }}
+          margin={{ top: 30, left: this.isSmallScreen() ? 0 : 70, bottom: 50 }}
           maxY="auto"
           curve="monotoneX"
 
           tooltipFormat={(d) => `${d}ms`}
 
-          axisLeft={{
-            format: (d) => `${d}ms`,
-            tickCount: 3,
-            legend: 'latency',
-            legendPosition: 'center',
-            legendOffset: -55,
-            tickSize: 0,
-          }}
+          axisLeft={this.isSmallScreen() ? null : leftAxis}
 
           axisBottom={{
             format: (epoch) => {