webart
/
strava-frontend
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

fix charts view
Gitea Actions Demo / build_and_push (push) Failing after 2m17s Details

This commit is contained in:
artem 2024-09-30 17:16:22 +03:00
parent 0aa2f6cb72
commit e9f06eb8d5
4 changed files with 105 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

94
src/pages/workouts/WorkoutItem.vue
View File

@ -1,21 +1,39 @@
<template>
<h1 class="page-title">Tренировка</h1>
<Line
id="my-chart-id"
:options="chartOptions"
:data="data"
/>
<!-- @vue-ignore -->
<LineWithLineChart 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'
import zoomPlugin from 'chartjs-plugin-zoom';
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},
{label: 'Пульс', backgroundColor: '#a87979', data: heart_rate},
{label: 'Мощность', backgroundColor: '#b87979', data: power},
{radius: 0, label: 'Скорость', backgroundColor: '#f87979',data: speed},
{radius: 0, label: 'Пульс', backgroundColor: '#a87979', data: heart_rate,},
{radius: 0, label: 'Мощность', backgroundColor: '#b87979', data: power,},
]
}

14
yarn.lock
View File

@ -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"