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

chart of workout
Gitea Actions Demo / build_and_push (push) Successful in 3m45s Details

This commit is contained in:
artem 2024-09-30 20:00:43 +03:00
parent 585a1e6d01
commit 14de153712
5 changed files with 65 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

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

2
package.json
View File

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

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

@ -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);
}

1
src/pages/workouts/components/LineWithLineChart.ts
View File

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

21
yarn.lock
View File

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