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

some fixes to charts
Gitea Actions Demo / build_and_push (push) Failing after 2m7s Details

This commit is contained in:
artem 2024-11-02 18:48:13 +03:00
parent 9eff34a1b7
commit f001054b72
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,6 +76,7 @@ type ChartDataset = {
"radius": number, "radius": number,
"label":string , "label":string ,
"backgroundColor":string , "backgroundColor":string ,
"borderColor":string ,
"data":Array<number> , "data":Array<number> ,
} }
type ChartData = { type ChartData = {
@ -172,9 +173,9 @@ const initWorkout = (id: string) => {
data.value = { data.value = {
labels: times, labels: times,
datasets: [ datasets: [
{radius: 0, label: 'Скорость', backgroundColor: '#f87979',data: speed}, {radius: 0, label: 'Скорость', borderColor: '#00aa00', backgroundColor: '#00aa00',data: speed},
{radius: 0, label: 'Пульс', backgroundColor: '#a87979', data: heart_rate,}, {radius: 0, label: 'Пульс',borderColor: '#990000', backgroundColor: '#990000', data: heart_rate,},
{radius: 0, label: 'Мощность', backgroundColor: '#b87979', data: power,}, {radius: 0, label: 'Мощность', borderColor: '#cccccc', backgroundColor: '#cccccc', data: power,},
] ]
} }

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

@ -1,27 +1,31 @@
import { createTypedChart } from 'vue-chartjs' import { createTypedChart } from 'vue-chartjs'
import { LineController } from 'chart.js' import { LineController } from 'chart.js'
const lineAlign = 8;
class LineWithLineController extends LineController { class LineWithLineController extends LineController {
static override id = 'line-with-line' static override id = 'line-with-line'
public override draw() { public override draw() {
super.draw() super.draw()
if (this.chart?.tooltip && this.chart.tooltip.opacity > 0) { if (this.chart?.tooltip && this.chart.tooltip.opacity > 0) {
const ctx = this.chart.ctx const ctx = this.chart.ctx;
const x = this.chart.tooltip.x let x = this.chart.tooltip.x - lineAlign;
const topY = this.chart.scales.y.top if (this.chart.tooltip.xAlign === 'right') {
const bottomY = this.chart.scales.y.bottom x = this.chart.tooltip.x + this.chart.tooltip.width + lineAlign;
}
const topY = this.chart.scales.y.top;
const bottomY = this.chart.scales.y.bottom;
// draw line // draw line
ctx.save() ctx.save();
ctx.beginPath() ctx.beginPath();
ctx.moveTo(x, topY) ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY) ctx.lineTo(x, bottomY);
ctx.lineWidth = 2 ctx.lineWidth = 1;
ctx.strokeStyle = '#07C' ctx.strokeStyle = '#07C';
ctx.stroke() ctx.stroke();
ctx.restore() ctx.restore();
} }
} }
} }