preloader, point marker

src/pages/workouts/WorkoutItem.vue

@@ -20,6 +20,9 @@
                         stroke: [{ color: '#007afce6', width: 4 }],
                     },
                 }" />
+                <yandex-map-default-marker v-if="currentCoordinates" :settings="{
+                    coordinates: currentCoordinates,
+                }" />
             </yandex-map>
         </div>
         <div id="workout-short-data">
@@ -63,7 +66,15 @@
         <VaZoomOut />
     </VaButton>
     <!-- @vue-ignore -->
-    <LineWithLineChart id="chart" ref="chart" :options="chartOptions" :data="data" />
+    <LineWithLineChart 
+    id="chart" 
+    ref="chart" 
+    :options="chartOptions" 
+    :plugins="chartPlugins" 
+    :data="data" 
+    pointerAxies="currentCoordinates" 
+    >
+    </LineWithLineChart>
     </div>
     <div v-else>
         <VaInnerLoading
@@ -97,14 +108,15 @@ import {
 } from 'chart.js'
 import LineWithLineChart from './components/LineWithLineChart.js'
 import type { YMap } from '@yandex/ymaps3-types';
-import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer } from 'vue-yandex-maps';
-import { WorkoutItem, Attachment, secondsToDuration, distConvert, speedConvert } from "./Definitions.vue";
+import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapDefaultMarker } from 'vue-yandex-maps';
+import { WorkoutItem, distConvert, speedConvert } from "./Definitions.vue";
 
 //Можно использовать для различных преобразований
 const map = shallowRef<null | YMap>(null);
 const chart = ref();
 let mapCenter = ref<Array<number>>([37.617644, 55.755819]);
 let lineCoordinates = ref<Array<Array<number>>>([]);
+let currentCoordinates = ref<Array<number> | null>([]);
 ChartJS.register(
     Title,
     Tooltip,
@@ -118,7 +130,6 @@ ChartJS.register(
     TimeScale
 )
 
-
 const { init } = useToast();
 const route = useRoute()
 
@@ -133,11 +144,27 @@ type ChartData = {
     "labels": Array<string>,
     "datasets": Array<ChartDataset>,
 }
+type afterEventEvent = {
+    "type": string
+}
+type afterEventArgs = {
+    "event": afterEventEvent,
+}
 let workoutItem = ref<WorkoutItem>();
 const data = ref<ChartData>({
     labels: [],
     datasets: [],
 })
+const chartPlugins = [
+{
+    id: 'eventPlugin',
+    afterEvent(chart: any, args: afterEventArgs, opts: any) {
+      if (args.event.type == "mouseout") {
+        currentCoordinates.value = null;
+      }
+    }
+}
+];
 const chartOptions = {
     responsive: true,
     scales: {
@@ -167,13 +194,13 @@ const chartOptions = {
             displayColors: false,
             callbacks: {
                 label: function (context: any) {
+                    currentCoordinates.value = lineCoordinates.value[context.dataIndex];
                     let label = context.dataset.label || '';
 
                     if (label) {
                         label += ': ';
                     }
                     if (context.parsed.x !== null) {
-                        console.log(typeof context)
                         label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                     }
                     return ["Скорость: " + data.value.datasets[0].data[context.dataIndex],
@@ -225,7 +252,6 @@ const initWorkout = (id: string) => {
                 longitude.push(response.data.results[i].longitude);
                 lineCoordinates.value.push([response.data.results[i].longitude, response.data.results[i].latitude]);
             }
-            console.log(lineCoordinates);
             mapCenter.value = [longitude[0], latitude[0]];
             data.value = {
                 labels: times,