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

This commit is contained in:
Sam 2019-08-25 16:06:24 +02:00
parent f252620ac1
commit 5c9c848ffe
3 changed files with 45 additions and 7 deletions

View File

@ -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}

View File

@ -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>

View File

@ -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>