Client: checkbox for chart

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

@@ -13,6 +13,7 @@ class ActivityCharts extends React.Component {
     super(props, context)
     this.state = {
       displayDistance: true,
+      dataToHide: []
     }
   }
 
@@ -40,6 +41,22 @@ class ActivityCharts extends React.Component {
     })
   }
 
+  handleLegendChange (e) {
+    const { dataToHide } = this.state
+    const name = e.target.name // eslint-disable-line prefer-destructuring
+    if (dataToHide.find(d => d === name)) {
+      dataToHide.splice(dataToHide.indexOf(name), 1)
+    } else {
+      dataToHide.push(name)
+    }
+    this.setState({ dataToHide })
+  }
+
+  displayData (name) {
+    const { dataToHide } = this.state
+    return !dataToHide.find(d => d === name)
+  }
+
   render() {
     const { chartData } = this.props
     const { displayDistance } = this.state
@@ -54,13 +71,15 @@ class ActivityCharts extends React.Component {
     }
     return (
       <div className="container">
+        {chartData && chartData.length > 0 ? (
+          <div>
             <div className="row chart-radio">
               <label className="radioLabel col-md-1">
                 <input
                   type="radio"
                   name="distance"
                   checked={displayDistance}
-              onChange={event => this.handleRadioChange(event)}
+                  onChange={e => this.handleRadioChange(e)}
                 />
                 distance
               </label>
@@ -69,13 +88,33 @@ class ActivityCharts extends React.Component {
                   type="radio"
                   name="duration"
                   checked={!displayDistance}
-              onChange={event => this.handleRadioChange(event)}
+                  onChange={e => this.handleRadioChange(e)}
                 />
                 duration
               </label>
             </div>
-        {chartData && chartData.length > 0 ? (
-          <div>
+            <div className="row chart-radio">
+              <div className="col-md-5" />
+              <label className="radioLabel col-md-1">
+                <input
+                  type="checkbox"
+                  name="speed"
+                  checked={this.displayData('speed')}
+                  onChange={e => this.handleLegendChange(e)}
+                />
+                speed
+              </label>
+              <label className="radioLabel col-md-1">
+                <input
+                  type="checkbox"
+                  name="elevation"
+                  checked={this.displayData('elevation')}
+                  onChange={e => this.handleLegendChange(e)}
+                />
+                elevation
+              </label>
+              <div className="col-md-5" />
+            </div>
             <div className="row chart">
               <ResponsiveContainer height={300}>
                 <ComposedChart
@@ -105,6 +144,7 @@ class ActivityCharts extends React.Component {
                     }}
                     yAxisId="right" orientation="right"
                   />
+                  {this.displayData('elevation') && (
                     <Area
                       yAxisId="right"
                       type="linear"
@@ -113,6 +153,8 @@ class ActivityCharts extends React.Component {
                       stroke="#cccccc"
                       dot={false}
                     />
+                  )}
+                  {this.displayData('speed') && (
                     <Line
                       yAxisId="left"
                       type="linear"
@@ -121,6 +163,7 @@ class ActivityCharts extends React.Component {
                       strokeWidth={2}
                       dot={false}
                     />
+                  )}
                   <Tooltip
                     labelFormatter={value => displayDistance
                                     ? `distance: ${value} km`