изменение интерфейса тренировок

src/pages/workouts/components/ChartGroup.ts

@@ -8,6 +8,10 @@ import { resetZoom } from "chartjs-plugin-zoom";
 export class ChartGroup {
   charts: Array<Chart>;
   private broadcasting = false;
+  // Guards against re-entrant hover propagation: activating a tooltip on the
+  // source chart redraws it synchronously, which re-invokes its tooltip
+  // callbacks -> setHover -> infinite recursion.
+  private hovering = false;
 
   constructor(charts: Array<Chart>) {
     this.charts = charts;
@@ -27,19 +31,51 @@ export class ChartGroup {
    * the same point order (a common time axis), so the index is identical.
    */
   setHover(dataIndex: number): void {
+    if (this.hovering) {
+      return;
+    }
+    this.hovering = true;
+    try {
       for (const chart of this.charts) {
         if (!chart.tooltip) {
           continue;
         }
-      chart.tooltip.setActiveElements([{ datasetIndex: 0, index: dataIndex }], {
+        // Optimization: skip charts whose tooltip is already active at the
+        // same index so the source chart is not redrawn twice per hover move.
+        const active = chart.tooltip.getActiveElements();
+        if (
+          active.length === 1 &&
+          active[0].index === dataIndex &&
+          active[0].datasetIndex === 0
+        ) {
+          continue;
+        }
+        chart.tooltip.setActiveElements(
+          [{ datasetIndex: 0, index: dataIndex }],
+          {
             x: 0,
             y: 0,
-      });
+          },
+        );
         chart.draw();
       }
+    } finally {
+      this.hovering = false;
+    }
   }
 
+  /**
+   * Clears the hover state on every chart. Idempotent; safe to call from
+   * mouseout at any time. Guarded by the same re-entrancy flag as setHover:
+   * if invoked while setHover is in progress, the caller's own setHover will
+   * have (re)established the correct state, so an early return loses nothing.
+   */
   clearHover(): void {
+    if (this.hovering) {
+      return;
+    }
+    this.hovering = true;
+    try {
       for (const chart of this.charts) {
         if (!chart.tooltip) {
           continue;
@@ -47,6 +83,9 @@ export class ChartGroup {
         chart.tooltip.setActiveElements([], { x: 0, y: 0 });
         chart.draw();
       }
+    } finally {
+      this.hovering = false;
+    }
   }
 
   /** Applies the same x range to every chart without re-triggering onZoomComplete. */

src/pages/workouts/components/WorkoutItem.vue

@@ -231,6 +231,7 @@
           </span>
         </span>
       </h4>
+      <div class="workout-chart-canvas">
         <LineWithLineChart
           :ref="(el) => setChartRef(config.key, el)"
           :options="config.options"
@@ -239,6 +240,7 @@
         />
       </div>
     </div>
+  </div>
   <VaModal
     v-if="isPrivate"
     v-model="showModalTitle"
@@ -646,6 +648,7 @@ const buildChartOptions = (
       duration: 0,
     },
     responsive: true,
+    maintainAspectRatio: false,
     scales: scales,
     plugins: {
       tooltip: {
@@ -1132,6 +1135,11 @@ h3 {
 .workout-chart {
   width: 100%;
 }
+.workout-chart-canvas {
+  position: relative;
+  width: 100%;
+  height: 160px;
+}
 .workout-chart-title {
   margin: 0 0 5px 0;
   font-size: 16px;