Client: display chart w/ duration or distance for x axis

mpwo_client/src/components/Activities/ActivityDisplay/ActivityCharts.jsx

@@ -9,6 +9,13 @@ import { getActivityChartData } from '../../../actions/activities'
 
 
 class ActivityCharts extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      displayDistance: true,
+    }
+  }
+
   componentDidMount() {
     this.props.loadActivityData(this.props.activity.id)
   }
@@ -24,49 +31,94 @@ class ActivityCharts extends React.Component {
     this.props.loadActivityData(null)
   }
 
+  handleRadioChange (changeEvent) {
+    this.setState({
+      displayDistance:
+        changeEvent.target.name === 'distance'
+          ? changeEvent.target.value
+          : !changeEvent.target.value
+    })
+  }
+
   render() {
     const { chartData } = this.props
+    const { displayDistance } = this.state
+    let xDataKey, xScale
+    if (displayDistance) {
+      xDataKey = 'distance'
+      xScale = 'linear'
+    } else {
+      xDataKey = 'duration'
+      xScale = 'time'
+    }
     return (
-      <div>
+      <div className="container">
-        <ResponsiveContainer height={300}>
+        <div className="row chart-radio">
-          <LineChart
+          <label className="radioLabel col-md-1">
-            data={chartData}
+            <input
-            margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
+              type="radio"
-          >
+              name="distance"
-            <XAxis
+              checked={displayDistance}
-              dataKey="duration"
+              onChange={event => this.handleRadioChange(event)}
-              label={{ value: 'duration', offset: 0, position: 'bottom' }}
-              scale="time"
-              tickFormatter={time => format(time, 'HH:mm:ss')}
-              type="number"
             />
-            <YAxis
+            distance
-              label={{ value: 'speed (km/h)', angle: -90, position: 'left' }}
+          </label>
-              yAxisId="left"
+          <label className="radioLabel col-md-1">
+            <input
+              type="radio"
+              name="duration"
+              checked={!displayDistance}
+              onChange={event => this.handleRadioChange(event)}
             />
-            <YAxis
+            duration
-              label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
+          </label>
-              yAxisId="right" orientation="right"
+        </div>
-            />
+        <div className="row chart">
-            <Line
+          <ResponsiveContainer height={300}>
-              yAxisId="left"
+            <LineChart
-              type="linear"
+              data={chartData}
-              dataKey="speed"
+              margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
-              stroke="#8884d8"
+            >
-              dot={false}
+              <XAxis
-            />
+                allowDecimals={false}
-            <Line
+                dataKey={xDataKey}
-              yAxisId="right"
+                label={{ value: xDataKey, offset: 0, position: 'bottom' }}
-              type="linear"
+                scale={xScale}
-              dataKey="elevation"
+                tickFormatter={value => displayDistance
-              stroke="#808080"
+                                        ? value
-              dot={false}
+                                        : format(value, 'HH:mm:ss')}
-            />
+                type="number"
-            <Tooltip
+              />
-              labelFormatter={time => format(time, 'HH:mm:ss')}
+              <YAxis
-            />
+                label={{ value: 'speed (km/h)', angle: -90, position: 'left' }}
-          </LineChart>
+                yAxisId="left"
-        </ResponsiveContainer>
+              />
+              <YAxis
+                label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
+                yAxisId="right" orientation="right"
+              />
+              <Line
+                yAxisId="left"
+                type="linear"
+                dataKey="speed"
+                stroke="#8884d8"
+                dot={false}
+              />
+              <Line
+                yAxisId="right"
+                type="linear"
+                dataKey="elevation"
+                stroke="#808080"
+                dot={false}
+              />
+              <Tooltip
+                labelFormatter={value => displayDistance
+                                ? `${value} km`
+                                : format(value, 'HH:mm:ss')}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
       </div>
     )
   }

mpwo_client/src/components/App.css

@@ -96,6 +96,23 @@ input, textarea {
   text-align: center;
 }
 
+.chart {
+  font-size: 0.9em;
+}
+
+.chart-radio {
+  display: flex;
+  font-size: 0.8em;
+}
+
+.chart-radio label {
+  display: flex;
+}
+
+.chart-radio input {
+  margin-right: 10px;
+}
+
 .custom-modal {
   background-color: #fff;
   border-radius: 5px;