some charts

package.json

@@ -25,7 +25,7 @@
     "@vuestic/tailwind": "^0.1.3",
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.8",
-    "chart.js": "^4.4.1",
+    "chart.js": "^4.4.4",
     "chartjs-chart-geo": "^4.2.8",
     "epic-spinners": "^2.0.0",
     "flag-icons": "^6.15.0",
@@ -36,7 +36,7 @@
     "sass": "^1.69.5",
     "serve": "^14.2.1",
     "vue": "3.3.9",
-    "vue-chartjs": "^5.3.0",
+    "vue-chartjs": "^5.3.1",
     "vue-i18n": "^9.6.2",
     "vue-router": "^4.2.5",
     "vuestic-ui": "^1.9.0"

src/pages/workouts/WorkoutItem.vue

@@ -1,17 +1,35 @@
 
 <template>
     <h1 class="page-title">Tренировка</h1>
-    
+    <Line
+        id="my-chart-id"
+        :options="chartOptions"
+        :data="data"
+    />
 </template>
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import { AxiosResponse, AxiosInstance } from "axios";
 import { ref, inject } from 'vue'
 import { useToast } from "vuestic-ui/web-components";
+import { Line } from 'vue-chartjs'
+import { ChartData, Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)
+
 
 const { init } = useToast();
 const route = useRoute()
-
+// const chartData = {
+//     labels: ref<Array<string>>([]),
+//     // datasets: [ { data: [40, 20, 12] } ],
+//     datasets: ref<Array<ChartData>>([])
+// }
+const data = ref<ChartData<'line'>>({
+    labels: [],
+    datasets: [],
+})
+const chartOptions ={responsive: true}
 
 type WorkoutItem = {
     "latitude": number,
@@ -24,12 +42,29 @@ type WorkoutItem = {
     "speed": number
 };
 const axiosAuth= inject('axiosAuth') as AxiosInstance;
-let workoutItems = ref<Array<WorkoutItem>>([]);
 const initWorkout = (id: string) => {
     axiosAuth
     .get(`/api/v0/workouts/${id}`)
     .then((response: AxiosResponse) => {
-        workoutItems.value = response.data.results;
+        let times = [];
+        let speed = [];
+        let heart_rate = [];
+        let power = [];
+        for (let i in response.data.results) {
+            times.push(response.data.results[i].time);
+            speed.push(response.data.results[i].speed);
+            power.push(response.data.results[i].power);
+            heart_rate.push(response.data.results[i].heart_rate);
+        }
+        data.value = {
+            labels: times,
+            datasets: [
+                {label: 'Скорость', backgroundColor: '#f87979',data: speed},
+                {label: 'Пульс', backgroundColor: '#a87979', data: heart_rate},
+                {label: 'Мощность', backgroundColor: '#b87979', data: power},
+            ]
+
+        }
     })
     .catch((error: any) => {
         console.log(error);