marked on map your line

src/pages/workouts/components/WorkoutItem.vue

@@ -15,7 +15,7 @@
                         coordinates: lineCoordinates,
                     },
                     style: {
-                        stroke: [{ color: '#007afce6', width: 4 }],
+                        stroke: [{ color: '#007afce6', width: 2 }],
                     },
                 }" />
                 <yandex-map-listener :settings="{ onClick: (_: any, e: any) => {
@@ -31,6 +31,15 @@
                         chart.chart.draw();
                     } 
                 }}"/>
+                <yandex-map-feature v-if="markedCoordinats" :settings="{
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: markedCoordinats,
+                    },
+                    style: {
+                        stroke: [{ color: '#EE82EE', width: 4 }],
+                    },
+                }" />
                 <yandex-map-default-marker v-if="currentCoordinates" :settings="{
                     coordinates: currentCoordinates,
                 }" />
@@ -160,6 +169,7 @@ interface Props {
     isPrivate: boolean,
     dzenLink?: string
   }
+const markedCoordinats = ref<Array<Array<number>>>([]);
 const { workoutItem, data, mapCenter, lineCoordinates, dzenLink: dzenLinkProps } = defineProps<Props>()
 const dzenLink = ref(dzenLinkProps);
 const map = shallowRef<null | YMap>(null);
@@ -298,6 +308,29 @@ const chartOptions = {
         },
         zoom: {
             zoom: {
+                onZoomComplete: function (chart: any) {
+                    const d1 = new Date(chart.chart.scales.x.min);
+                    const d2 = new Date(chart.chart.scales.x.max);
+                    let start = null
+                    let end = null;
+                    for (let i = 0; i < data.labels.length; i++) {
+                        let d3 = new Date(data.labels[i]);
+                        if (start == null && d3 > d1) {
+                            start = i;
+                        }
+                        if (end == null && d3 > d2)  {
+                            end = i;
+                        }
+    
+                    }
+                    if (start == null) {
+                        start = 0;
+                    }
+                    if (end == null) {
+                        end = lineCoordinates.length;
+                    }
+                    markedCoordinats.value = lineCoordinates.slice(start, end);
+                },
                 drag: {
                     enabled: true,
                 },