Client - display a marker on map when mouse is over the chart - fix #4
This commit is contained in:
parent
f252620ac1
commit
5c9c848ffe
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user