diff --git a/src/pages/workouts/WorkoutItem.vue b/src/pages/workouts/WorkoutItem.vue index 2cda52b..2ce98db 100644 --- a/src/pages/workouts/WorkoutItem.vue +++ b/src/pages/workouts/WorkoutItem.vue @@ -20,6 +20,9 @@ stroke: [{ color: '#007afce6', width: 4 }], }, }" /> +
@@ -63,7 +66,15 @@ - + +
(null); const chart = ref(); let mapCenter = ref>([37.617644, 55.755819]); let lineCoordinates = ref>>([]); +let currentCoordinates = ref | 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, "datasets": Array, } +type afterEventEvent = { + "type": string +} +type afterEventArgs = { + "event": afterEventEvent, +} let workoutItem = ref(); const data = ref({ 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,