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,20 +31,62 @@ 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">
+        <div className="row chart-radio">
+          <label className="radioLabel col-md-1">
+            <input
+              type="radio"
+              name="distance"
+              checked={displayDistance}
+              onChange={event => this.handleRadioChange(event)}
+            />
+            distance
+          </label>
+          <label className="radioLabel col-md-1">
+            <input
+              type="radio"
+              name="duration"
+              checked={!displayDistance}
+              onChange={event => this.handleRadioChange(event)}
+            />
+            duration
+          </label>
+        </div>
+        <div className="row chart">
           <ResponsiveContainer height={300}>
             <LineChart
               data={chartData}
               margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
             >
               <XAxis
-              dataKey="duration"
-              label={{ value: 'duration', offset: 0, position: 'bottom' }}
-              scale="time"
-              tickFormatter={time => format(time, 'HH:mm:ss')}
+                allowDecimals={false}
+                dataKey={xDataKey}
+                label={{ value: xDataKey, offset: 0, position: 'bottom' }}
+                scale={xScale}
+                tickFormatter={value => displayDistance
+                                        ? value
+                                        : format(value, 'HH:mm:ss')}
                 type="number"
               />
               <YAxis
@@ -63,11 +112,14 @@ class ActivityCharts extends React.Component {
                 dot={false}
               />
               <Tooltip
-              labelFormatter={time => format(time, 'HH:mm:ss')}
+                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;