Client - display a marker on map when mouse is over the chart
This commit is contained in:
parent
2736368626
commit
279271af42
@ -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,
|
||||
}
|
||||
},
|
||||
|
@ -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()
|
||||
|
@ -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[]>,
|
||||
},
|
||||
|
@ -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[]
|
||||
}
|
||||
|
@ -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 }
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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 },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user