From f001054b72afcbfa0f722da9e7fb0594dec6cc9e Mon Sep 17 00:00:00 2001
From: artem <artem@webart-tech.ru>
Date: Sat, 2 Nov 2024 18:48:13 +0300
Subject: [PATCH] some fixes to charts

---
 src/pages/workouts/WorkoutItem.vue            |  7 +++--
 .../workouts/components/LineWithLineChart.ts  | 30 +++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/pages/workouts/WorkoutItem.vue b/src/pages/workouts/WorkoutItem.vue
index 3fa669d..a262abb 100644
--- a/src/pages/workouts/WorkoutItem.vue
+++ b/src/pages/workouts/WorkoutItem.vue
@@ -76,6 +76,7 @@ type ChartDataset = {
     "radius": number,
     "label":string ,
     "backgroundColor":string ,
+    "borderColor":string ,
     "data":Array<number> ,
 }
 type ChartData = {
@@ -172,9 +173,9 @@ const initWorkout = (id: string) => {
         data.value = {
             labels: times,
             datasets: [
-                {radius: 0, label: 'Скорость', backgroundColor: '#f87979',data: speed},
-                {radius: 0, label: 'Пульс', backgroundColor: '#a87979', data: heart_rate,},
-                {radius: 0, label: 'Мощность', backgroundColor: '#b87979', data: power,},
+                {radius: 0, label: 'Скорость', borderColor: '#00aa00', backgroundColor: '#00aa00',data: speed},
+                {radius: 0, label: 'Пульс',borderColor: '#990000', backgroundColor: '#990000', data: heart_rate,},
+                {radius: 0, label: 'Мощность', borderColor: '#cccccc', backgroundColor: '#cccccc', data: power,},
             ]
 
         }
diff --git a/src/pages/workouts/components/LineWithLineChart.ts b/src/pages/workouts/components/LineWithLineChart.ts
index b41135a..42f150d 100644
--- a/src/pages/workouts/components/LineWithLineChart.ts
+++ b/src/pages/workouts/components/LineWithLineChart.ts
@@ -1,27 +1,31 @@
 import { createTypedChart } from 'vue-chartjs'
 import { LineController } from 'chart.js'
 
+const lineAlign = 8;
+
 class LineWithLineController extends LineController {
   static override id = 'line-with-line'
 
   public override draw() {
     super.draw()
-
     if (this.chart?.tooltip && this.chart.tooltip.opacity > 0) {
-      const ctx = this.chart.ctx
-      const x = this.chart.tooltip.x
-      const topY = this.chart.scales.y.top
-      const bottomY = this.chart.scales.y.bottom
+      const ctx = this.chart.ctx;
+      let x = this.chart.tooltip.x - lineAlign;
+      if (this.chart.tooltip.xAlign === 'right') {
+        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
-      ctx.save()
-      ctx.beginPath()
-      ctx.moveTo(x, topY)
-      ctx.lineTo(x, bottomY)
-      ctx.lineWidth = 2
-      ctx.strokeStyle = '#07C'
-      ctx.stroke()
-      ctx.restore()
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x, topY);
+      ctx.lineTo(x, bottomY);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = '#07C';
+      ctx.stroke();
+      ctx.restore();
     }
   }
 }