From 279271af42a342f9fc064a2c277d605b068d207c Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 26 Sep 2021 11:21:09 +0200
Subject: [PATCH] Client - display a marker on map when mouse is over the chart

---
 .../components/Workout/WorkoutChart/index.vue | 28 +++++++++++++++++--
 .../Workout/WorkoutDetail/WorkoutMap.vue      | 13 +++++++--
 .../Workout/WorkoutDetail/index.vue           |  8 ++++--
 fittrackee_client/src/types/workouts.ts       |  7 +++++
 fittrackee_client/src/utils/workouts.ts       |  5 +++-
 fittrackee_client/src/views/Workout.vue       | 21 ++++++++++++--
 .../tests/unit/utils/workouts.spec.ts         |  6 ++++
 7 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/fittrackee_client/src/components/Workout/WorkoutChart/index.vue b/fittrackee_client/src/components/Workout/WorkoutChart/index.vue
index 6f36bb37..b1a4bef7 100644
--- a/fittrackee_client/src/components/Workout/WorkoutChart/index.vue
+++ b/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,
       }
     },
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
index 05614d8b..9d4eeea3 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
+++ b/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()
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
index e4f7e54c..22ade5b8 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/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[]>,
       },
diff --git a/fittrackee_client/src/types/workouts.ts b/fittrackee_client/src/types/workouts.ts
index ac8b2c97..ea9825d2 100644
--- a/fittrackee_client/src/types/workouts.ts
+++ b/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[]
 }
diff --git a/fittrackee_client/src/utils/workouts.ts b/fittrackee_client/src/utils/workouts.ts
index e1a219b6..1c39fe0a 100644
--- a/fittrackee_client/src/utils/workouts.ts
+++ b/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 }
 }
diff --git a/fittrackee_client/src/views/Workout.vue b/fittrackee_client/src/views/Workout.vue
index 04c06979..2b17ede8 100644
--- a/fittrackee_client/src/views/Workout.vue
+++ b/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>
diff --git a/fittrackee_client/tests/unit/utils/workouts.spec.ts b/fittrackee_client/tests/unit/utils/workouts.spec.ts
index 5edd00d7..fc7f0408 100644
--- a/fittrackee_client/tests/unit/utils/workouts.spec.ts
+++ b/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 },
+        ],
       },
     },
   ]