fix charts view

package-lock.json

@@ -14,6 +14,7 @@
         "axios": "^1.6.8",
         "chart.js": "^4.4.4",
         "chartjs-chart-geo": "^4.2.8",
+        "chartjs-plugin-zoom": "^2.0.1",
         "epic-spinners": "^2.0.0",
         "flag-icons": "^6.15.0",
         "ionicons": "^4.6.3",
@@ -8345,6 +8346,17 @@
         "chart.js": "^4.1.0"
       }
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -11379,6 +11391,14 @@
         "gunzip-maybe": "bin.js"
       }
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/handlebars": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",

package.json

@@ -27,6 +27,7 @@
     "axios": "^1.6.8",
     "chart.js": "^4.4.4",
     "chartjs-chart-geo": "^4.2.8",
+    "chartjs-plugin-zoom": "^2.0.1",
     "epic-spinners": "^2.0.0",
     "flag-icons": "^6.15.0",
     "ionicons": "^4.6.3",

src/pages/workouts/WorkoutItem.vue

@@ -1,21 +1,39 @@
 
 <template>
     <h1 class="page-title">Tренировка</h1>
-    <Line
+    <!-- @vue-ignore -->
-        id="my-chart-id"
+    <LineWithLineChart id="my-chart-id" :options="chartOptions"  :data="data" />
-        :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 zoomPlugin from 'chartjs-plugin-zoom';
-import { ChartData, Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js'
+import { 
+    Chart as ChartJS, 
+    Title, 
+    Tooltip, 
+    Legend,
+    LineElement, 
+    LinearScale,
+    CategoryScale, 
+    LogarithmicScale, 
+    PointElement,
+} from 'chart.js'
+import LineWithLineChart from './components/LineWithLineChart.js'
 
-ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)
+ChartJS.register(
+    Title, 
+    Tooltip, 
+    Legend, 
+    LineElement, 
+    CategoryScale, 
+    LogarithmicScale, 
+    LinearScale,
+    PointElement,
+    zoomPlugin
+)
 
 
 const { init } = useToast();
@@ -25,22 +43,52 @@ const route = useRoute()
 //     // datasets: [ { data: [40, 20, 12] } ],
 //     datasets: ref<Array<ChartData>>([])
 // }
-const data = ref<ChartData<'line'>>({
+
+type ChartDataset = {
+    "radius": number,
+    "label":string ,
+    "backgroundColor":string ,
+    "data":Array<number> ,
+}
+type ChartData = {
+    "labels":Array<string> ,
+    "datasets":Array<ChartDataset> ,
+}
+
+const data = ref<ChartData>({
     labels: [],
     datasets: [],
 })
-const chartOptions ={responsive: true}
+const chartOptions ={
+    responsive: true,
+    scales: {
+        yLog: {
+            type: 'logarithmic',
+            position: 'right', // `axis` is determined by the position as `'y'`
+            stacked: true,
+            ticks: {
+                beginAtZero: true
+            },
+            gridLines: {
+                display: true
+            }
+        }   
+    },
+    plugins: {
+      zoom: {
+        zoom: {
+            drag: {
+                enabled: true,
+            },
+            pinch: {
+                enabled: true
+            },
+            mode: 'x',
+        }
+      }
+    }
+}
 
-type WorkoutItem = {
-    "latitude": number,
-    "longitude":number ,
-    "time": string,
-    "power": number,
-    "heart_rate": number,
-    "cadence": number,
-    "temperature": number,
-    "speed": number
-};
 const axiosAuth= inject('axiosAuth') as AxiosInstance;
 const initWorkout = (id: string) => {
     axiosAuth
@@ -59,9 +107,9 @@ const initWorkout = (id: string) => {
         data.value = {
             labels: times,
             datasets: [
-                {label: 'Скорость', backgroundColor: '#f87979',data: speed},
+                {radius: 0, label: 'Скорость', backgroundColor: '#f87979',data: speed},
-                {label: 'Пульс', backgroundColor: '#a87979', data: heart_rate},
+                {radius: 0, label: 'Пульс', backgroundColor: '#a87979', data: heart_rate,},
-                {label: 'Мощность', backgroundColor: '#b87979', data: power},
+                {radius: 0, label: 'Мощность', backgroundColor: '#b87979', data: power,},
             ]
 
         }

yarn.lock

@@ -3922,7 +3922,7 @@ 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@^4.1.0, chart.js@^4.1.1, chart.js@^4.4.4, 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==
@@ -3944,6 +3944,13 @@ chartjs-chart-geo@^4.2.8:
     d3-scale-chromatic "^3.0.0"
     topojson-client "^3.1.0"
 
+chartjs-plugin-zoom@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz"
+  integrity sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==
+  dependencies:
+    hammerjs "^2.0.8"
+
 chokidar@^3.5.3, "chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
@@ -5630,6 +5637,11 @@ gunzip-maybe@^1.4.2:
     pumpify "^1.3.3"
     through2 "^2.0.3"
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz"
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
+
 handlebars@^4.7.7:
   version "4.7.8"
   resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz"