diff --git a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx b/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx index ce924246..f5307914 100644 --- a/fittrackee_client/src/components/Activity/ActivityDisplay/ActivityCharts.jsx +++ b/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 { updateCoordinates(e.activePayload)} + onMouseLeave={() => updateCoordinates(null)} > + {coordinates.latitude && ( + + )} )} diff --git a/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx b/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx index 694e5255..4308f777 100644 --- a/fittrackee_client/src/components/Activity/ActivityDisplay/index.jsx +++ b/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 {
{activity.with_gpx ? ( - + ) : ( )} @@ -102,7 +128,12 @@ class ActivityDisplay extends React.Component {
Chart
- + this.updateCoordinates(e) + } + />