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,