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

This commit is contained in:
Sam 2021-09-26 11:21:09 +02:00
parent 2736368626
commit 279271af42
7 changed files with 77 additions and 11 deletions

View File

@ -23,7 +23,11 @@
{{ t('workouts.DURATION') }}
</label>
</div>
<LineChart v-bind="lineChartProps" class="line-chart" />
<LineChart
v-bind="lineChartProps"
class="line-chart"
@mouseleave="emitEmptyCoordinates"
/>
<div class="no-data-cleaning">
{{ t('workouts.NO_DATA_CLEANING') }}
</div>
@ -40,7 +44,11 @@
import Card from '@/components/Common/Card.vue'
import { IAuthUserProfile } from '@/types/user'
import { IWorkoutChartData, IWorkoutState } from '@/types/workouts'
import {
IWorkoutChartData,
IWorkoutState,
TCoordinates,
} from '@/types/workouts'
import { getDatasets } from '@/utils/workouts'
export default defineComponent({
@ -59,7 +67,8 @@
required: true,
},
},
setup(props) {
emits: ['getCoordinates'],
setup(props, { emit }) {
const { t } = useI18n()
let displayDistance = ref(true)
const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
@ -76,6 +85,9 @@
])
),
}))
const coordinates: ComputedRef<TCoordinates[]> = computed(
() => datasets.value.coordinates
)
const options = computed<ChartOptions<'line'>>(() => ({
responsive: true,
animation: false,
@ -151,6 +163,9 @@
: label + ' km/h'
},
title: function (tooltipItems) {
if (tooltipItems.length > 0) {
emitCoordinates(coordinates.value[tooltipItems[0].dataIndex])
}
return tooltipItems.length === 0
? ''
: displayDistance.value
@ -168,6 +183,12 @@
function formatDuration(duration: string | number): string {
return new Date(+duration * 1000).toISOString().substr(11, 8)
}
function emitCoordinates(coordinates: TCoordinates) {
emit('getCoordinates', coordinates)
}
function emitEmptyCoordinates() {
emitCoordinates({ latitude: null, longitude: null })
}
const { lineChartProps } = useLineChart({
chartData,
@ -177,6 +198,7 @@
displayDistance,
lineChartProps,
t,
emitEmptyCoordinates,
updateDisplayDistance,
}
},

View File

@ -17,6 +17,10 @@
:bounds="bounds"
/>
<LGeoJson :geojson="geoJson.jsonData" />
<LMarker
v-if="markerCoordinates.latitude"
:lat-lng="[markerCoordinates.latitude, markerCoordinates.longitude]"
/>
</LMap>
</div>
<div v-else class="no-map">{{ t('workouts.NO_MAP') }}</div>
@ -25,13 +29,13 @@
<script lang="ts">
import { gpx } from '@tmcw/togeojson'
import { LGeoJson, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
import { LGeoJson, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
import { ComputedRef, PropType, computed, defineComponent, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ROOT_STORE } from '@/store/constants'
import { GeoJSONData } from '@/types/geojson'
import { IWorkoutState } from '@/types/workouts'
import { IWorkoutState, TCoordinates } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { getApiUrl } from '@/utils'
@ -40,12 +44,17 @@
components: {
LGeoJson,
LMap,
LMarker,
LTileLayer,
},
props: {
workout: {
type: Object as PropType<IWorkoutState>,
},
markerCoordinates: {
type: Object as PropType<TCoordinates>,
required: false,
},
},
setup(props) {
const { t } = useI18n()

View File

@ -53,7 +53,7 @@
</div>
</template>
<template #content>
<WorkoutMap :workout="workout" />
<WorkoutMap :workout="workout" :markerCoordinates="markerCoordinates" />
<WorkoutData :workout="workout.workout" />
</template>
</Card>
@ -71,7 +71,7 @@
import { WORKOUTS_STORE } from '@/store/constants'
import { ISport } from '@/types/sports'
import { IAuthUserProfile } from '@/types/user'
import { IWorkoutState } from '@/types/workouts'
import { IWorkoutState, TCoordinates } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
@ -87,6 +87,10 @@
type: Object as PropType<IAuthUserProfile>,
required: true,
},
markerCoordinates: {
type: Object as PropType<TCoordinates>,
required: false,
},
sports: {
type: Object as PropType<ISport[]>,
},

View File

@ -104,8 +104,15 @@ export type TWorkoutDatasets = {
[key in TWorkoutDatasetKeys]: IChartDataset
}
export type TCoordinatesKeys = 'latitude' | 'longitude'
export type TCoordinates = {
[key in TCoordinatesKeys]: number | null
}
export interface IWorkoutChartData {
distance_labels: unknown[]
duration_labels: unknown[]
datasets: TWorkoutDatasets
coordinates: TCoordinates[]
}

View File

@ -1,6 +1,7 @@
import {
IWorkoutApiChartData,
IWorkoutChartData,
TCoordinates,
TWorkoutDatasets,
} from '@/types/workouts'
@ -29,13 +30,15 @@ export const getDatasets = (
}
const distance_labels: unknown[] = []
const duration_labels: unknown[] = []
const coordinates: TCoordinates[] = []
chartData.map((data) => {
distance_labels.push(data.distance)
duration_labels.push(data.duration)
datasets.speed.data.push(data.speed)
datasets.elevation.data.push(data.elevation)
coordinates.push({ latitude: data.latitude, longitude: data.longitude })
})
return { distance_labels, duration_labels, datasets }
return { distance_labels, duration_labels, datasets, coordinates }
}

View File

@ -13,11 +13,13 @@
:workout="workout"
:sports="sports"
:authUser="authUser"
:markerCoordinates="markerCoordinates"
/>
<WorkoutChart
v-if="workout.chartData.length > 0"
:workout="workout"
:authUser="authUser"
@getCoordinates="updateCoordinates"
/>
</div>
<div v-else>
@ -30,9 +32,11 @@
<script lang="ts">
import {
computed,
ComputedRef,
Ref,
computed,
defineComponent,
ref,
onBeforeMount,
onUnmounted,
} from 'vue'
@ -44,7 +48,7 @@
import WorkoutDetail from '@/components/Workout/WorkoutDetail/index.vue'
import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
import { IAuthUserProfile } from '@/types/user'
import { IWorkoutState } from '@/types/workouts'
import { IWorkoutState, TCoordinates } from '@/types/workouts'
import { useStore } from '@/use/useStore'
export default defineComponent({
@ -72,11 +76,22 @@
() => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
)
const sports = computed(() => store.getters[SPORTS_STORE.GETTERS.SPORTS])
let markerCoordinates: Ref<TCoordinates> = ref({
latitude: null,
longitude: null,
})
function updateCoordinates(coordinates: TCoordinates) {
markerCoordinates.value = {
latitude: coordinates.latitude,
longitude: coordinates.longitude,
}
}
onUnmounted(() => {
store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
})
return { authUser, sports, workout }
return { authUser, markerCoordinates, sports, workout, updateCoordinates }
},
})
</script>

View File

@ -36,6 +36,7 @@ describe('getDatasets', () => {
yAxisID: 'yElevation',
},
},
coordinates: [],
},
},
{
@ -94,6 +95,11 @@ describe('getDatasets', () => {
yAxisID: 'yElevation',
},
},
coordinates: [
{ latitude: 48.845574, longitude: 2.373723 },
{ latitude: 48.845578, longitude: 2.373732 },
{ latitude: 48.845591, longitude: 2.373811 },
],
},
},
]