Client - display a marker on map when mouse is over the chart - fix #4

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx

@@ -58,7 +58,7 @@ class ActivityCharts extends React.Component {
   }
 
   render() {
-    const { chartData } = this.props
+    const { chartData, updateCoordinates } = this.props
     const { displayDistance } = this.state
     const xInterval = chartData ? parseInt(chartData.length / 10, 10) : 0
     let xDataKey, xScale
@@ -120,6 +120,8 @@ class ActivityCharts extends React.Component {
                 <ComposedChart
                   data={chartData}
                   margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
+                  onMouseMove={e => updateCoordinates(e.activePayload)}
+                  onMouseLeave={() => updateCoordinates(null)}
                 >
                   <XAxis
                     allowDecimals={false}

fittrackee_client/src/components/Activity/ActivityDisplay/ActivityMap.jsx

@@ -1,6 +1,6 @@
 import hash from 'object-hash'
 import React from 'react'
-import { GeoJSON, Map, TileLayer } from 'react-leaflet'
+import { GeoJSON, Map, Marker, TileLayer } from 'react-leaflet'
 import { connect } from 'react-redux'
 
 import { getActivityGpx } from '../../../actions/activities'
@@ -32,7 +32,7 @@ class ActivityMap extends React.Component {
   }
 
   render() {
-    const { activity, gpxContent } = this.props
+    const { activity, coordinates, gpxContent } = this.props
     const { jsonData } = getGeoJson(gpxContent)
     const bounds = [
       [activity.bounds[0], activity.bounds[1]],
@@ -58,6 +58,11 @@ class ActivityMap extends React.Component {
               key={hash(jsonData)}
               data={jsonData}
             />
+            {coordinates.latitude && (
+              <Marker
+                position={[coordinates.latitude, coordinates.longitude]}
+              />
+            )}
           </Map>
         )}
       </div>

fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx

@@ -17,6 +17,10 @@ class ActivityDisplay extends React.Component {
     super(props, context)
     this.state = {
       displayModal: false,
+      coordinates: {
+        latitude: null,
+        longitude: null,
+      },
     }
   }
 
@@ -32,12 +36,31 @@ class ActivityDisplay extends React.Component {
   }
 
   displayModal(value) {
-    this.setState({ displayModal: value })
+    this.setState(prevState => ({
+      ...prevState,
+      displayModal: value
+    }))
+  }
+
+  updateCoordinates(activePayload) {
+    const coordinates = (activePayload && activePayload.length > 0)
+      ? {
+          latitude: activePayload[0].payload.latitude,
+          longitude: activePayload[0].payload.longitude,
+        }
+      : {
+          latitude: null,
+          longitude: null,
+        }
+    this.setState(prevState => ({
+      ...prevState,
+      coordinates
+    }))
   }
 
   render() {
     const { activities, message, onDeleteActivity, sports, user } = this.props
-    const { displayModal } = this.state
+    const { coordinates, displayModal } = this.state
     const [activity] = activities
     const title = activity ? activity.title : 'Activity'
     const [sport] = activity
@@ -81,7 +104,10 @@ class ActivityDisplay extends React.Component {
                         <div className="row">
                           <div className="col-md-8">
                             {activity.with_gpx ? (
-                              <ActivityMap activity={activity} />
+                              <ActivityMap
+                                activity={activity}
+                                coordinates={coordinates}
+                              />
                             ) : (
                               <ActivityNoMap />
                             )}
@@ -102,7 +128,12 @@ class ActivityDisplay extends React.Component {
                           <div className="row">
                             <div className="col">
                               <div className="chart-title">Chart</div>
-                              <ActivityCharts activity={activity} />
+                              <ActivityCharts
+                                activity={activity}
+                                updateCoordinates={
+                                  e => this.updateCoordinates(e)
+                                }
+                              />
                             </div>
                           </div>
                         </div>