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

fittrackee_client/src/components/Workout/WorkoutChart/index.vue

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

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue

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

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -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[]>,
       },

fittrackee_client/src/types/workouts.ts

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

fittrackee_client/src/utils/workouts.ts

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

fittrackee_client/src/views/Workout.vue

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

fittrackee_client/tests/unit/utils/workouts.spec.ts

@@ -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 },
+        ],
       },
     },
   ]