chart of workout

package-lock.json

@@ -13,6 +13,7 @@
         "@vueuse/core": "^10.6.1",
         "axios": "^1.6.8",
         "chart.js": "^4.4.4",
+        "chartjs-adapter-moment": "^1.0.1",
         "chartjs-chart-geo": "^4.2.8",
         "chartjs-plugin-zoom": "^2.0.1",
         "epic-spinners": "^2.0.0",
@@ -26,6 +27,7 @@
         "vue": "3.3.9",
         "vue-chartjs": "^5.3.1",
         "vue-i18n": "^9.6.2",
+        "vue-moment": "^4.1.0",
         "vue-router": "^4.2.5",
         "vuestic-ui": "^1.9.0"
       },
@@ -8327,6 +8329,15 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-adapter-moment": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz",
+      "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0",
+        "moment": "^2.10.2"
+      }
+    },
     "node_modules/chartjs-chart-geo": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/chartjs-chart-geo/-/chartjs-chart-geo-4.2.8.tgz",
@@ -13590,6 +13601,14 @@
         "ufo": "^1.5.3"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -18018,6 +18037,17 @@
         "vue": ">=2"
       }
     },
+    "node_modules/vue-moment": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
+      "integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
+      "dependencies": {
+        "moment": "^2.19.2"
+      },
+      "peerDependencies": {
+        "vue": ">=1.x.x"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",

package.json

@@ -26,6 +26,7 @@
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.8",
     "chart.js": "^4.4.4",
+    "chartjs-adapter-moment": "^1.0.1",
     "chartjs-chart-geo": "^4.2.8",
     "chartjs-plugin-zoom": "^2.0.1",
     "epic-spinners": "^2.0.0",
@@ -39,6 +40,7 @@
     "vue": "3.3.9",
     "vue-chartjs": "^5.3.1",
     "vue-i18n": "^9.6.2",
+    "vue-moment": "^4.1.0",
     "vue-router": "^4.2.5",
     "vuestic-ui": "^1.9.0"
   },

src/pages/workouts/WorkoutItem.vue

@@ -6,6 +6,7 @@
 </template>
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
+import 'chartjs-adapter-moment';
 import { AxiosResponse, AxiosInstance } from "axios";
 import { ref, inject } from 'vue'
 import { useToast } from "vuestic-ui/web-components";
@@ -20,6 +21,7 @@ import {
     CategoryScale, 
     LogarithmicScale, 
     PointElement,
+    TimeScale
 } from 'chart.js'
 import LineWithLineChart from './components/LineWithLineChart.js'
 
@@ -32,17 +34,13 @@ ChartJS.register(
     LogarithmicScale, 
     LinearScale,
     PointElement,
-    zoomPlugin
+    zoomPlugin,
+    TimeScale
 )
 
 
 const { init } = useToast();
 const route = useRoute()
-// const chartData = {
-//     labels: ref<Array<string>>([]),
-//     // datasets: [ { data: [40, 20, 12] } ],
-//     datasets: ref<Array<ChartData>>([])
-// }
 
 type ChartDataset = {
     "radius": number,
@@ -62,9 +60,9 @@ const data = ref<ChartData>({
 const chartOptions ={
     responsive: true,
     scales: {
-        yLog: {
+        yAxes: {
             type: 'logarithmic',
-            position: 'right', // `axis` is determined by the position as `'y'`
+            position: 'right', 
             stacked: true,
             ticks: {
                 beginAtZero: true
@@ -72,6 +70,12 @@ const chartOptions ={
             gridLines: {
                 display: true
             }
+        },
+        x: {
+            type: 'time',
+            time: {
+                displayFormats: {hour: 'HH:mm'}
+            }
         }   
     },
     plugins: {
@@ -88,7 +92,7 @@ const chartOptions ={
       }
     }
 }
-
+const msToKmh = (ms: number) => ms * 3.6;
 const axiosAuth= inject('axiosAuth') as AxiosInstance;
 const initWorkout = (id: string) => {
     axiosAuth
@@ -100,7 +104,7 @@ const initWorkout = (id: string) => {
         let power = [];
         for (let i in response.data.results) {
             times.push(response.data.results[i].time);
-            speed.push(response.data.results[i].speed);
+            speed.push(msToKmh(response.data.results[i].speed));
             power.push(response.data.results[i].power);
             heart_rate.push(response.data.results[i].heart_rate);
         }

src/pages/workouts/components/LineWithLineChart.ts

@@ -10,7 +10,6 @@ class LineWithLineController extends LineController {
     if (this.chart?.tooltip && this.chart.tooltip.opacity > 0) {
       const ctx = this.chart.ctx
       const x = this.chart.tooltip.x
-      console.log(this.chart.scales);
       const topY = this.chart.scales.y.top
       const bottomY = this.chart.scales.y.bottom
 

yarn.lock

@@ -3922,13 +3922,18 @@ character-parser@^2.2.0:
   dependencies:
     is-regex "^1.0.3"
 
-chart.js@^4.1.0, chart.js@^4.1.1, chart.js@^4.4.4, chart.js@>=3.2.0:
+chart.js@^4.1.0, chart.js@^4.1.1, chart.js@^4.4.4, chart.js@>=3.0.0, chart.js@>=3.2.0:
   version "4.4.4"
   resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz"
   integrity sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==
   dependencies:
     "@kurkle/color" "^0.3.0"
 
+chartjs-adapter-moment@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz"
+  integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==
+
 chartjs-chart-geo@^4.2.8:
   version "4.2.8"
   resolved "https://registry.npmjs.org/chartjs-chart-geo/-/chartjs-chart-geo-4.2.8.tgz"
@@ -6813,6 +6818,11 @@ mlly@^1.2.0, mlly@^1.7.1:
     pkg-types "^1.1.1"
     ufo "^1.5.3"
 
+moment@^2.10.2, moment@^2.19.2:
+  version "2.30.1"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
@@ -9217,6 +9227,13 @@ vue-inbrowser-compiler-independent-utils@^4.69.0:
   resolved "https://registry.npmjs.org/vue-inbrowser-compiler-independent-utils/-/vue-inbrowser-compiler-independent-utils-4.71.1.tgz"
   integrity sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==
 
+vue-moment@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz"
+  integrity sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==
+  dependencies:
+    moment "^2.19.2"
+
 vue-router@^4.2.5, "vue-router@>= 4.1.0 < 5.0.0":
   version "4.2.5"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz"
@@ -9241,7 +9258,7 @@ vue-tsc@^1.8.22:
     "@vue/language-core" "1.8.27"
     semver "^7.5.4"
 
-"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.0-0 || ^2.7.0", vue@^3.0.4, vue@^3.2.0, vue@^3.2.25, "vue@>= 3.2.0 < 4.0.0", vue@>=2, vue@3.3.9:
+"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.0-0 || ^2.7.0", vue@^3.0.4, vue@^3.2.0, vue@^3.2.25, "vue@>= 3.2.0 < 4.0.0", vue@>=1.x.x, vue@>=2, vue@3.3.9:
   version "3.3.9"
   resolved "https://registry.npmjs.org/vue/-/vue-3.3.9.tgz"
   integrity sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==