feat(chart): TrainingChart ECG furos laterais + LiveDot readout

src/components/TrainingChart.tsx

@@ -14,8 +14,9 @@ import {
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { runOnJS } from 'react-native-reanimated';
-import Svg, { Circle, Line, Path, Text as SvgText } from 'react-native-svg';
+import Svg, { Circle, Line, Path, Rect, Text as SvgText } from 'react-native-svg';
 import { Minus, Plus, RotateCcw } from 'lucide-react-native';
+import { LiveDot } from './LiveDot';
 import { type HeartRateSample } from '../training/trainingTypes';
 import {
   applyPan,
@@ -547,6 +548,19 @@ export function TrainingChart({
                   />
                 </>
               ) : null}
+              {[0, 1, 2, 3, 4, 5].map((index) => {
+                const x = PAD_X + 12 + index * 48;
+                return (
+                  <Rect
+                    fill={colors.line}
+                    height={4}
+                    key={`hole-${index}`}
+                    width={1.5}
+                    x={x}
+                    y={CHART_HEIGHT - 4}
+                  />
+                );
+              })}
             </Svg>
           </View>
         </GestureDetector>
@@ -569,6 +583,11 @@ export function TrainingChart({
         </View>
       </View>
       <View style={styles.readout}>
+        {viewport.liveTail ? (
+          <LiveDot live size={6} />
+        ) : (
+          <LiveDot live={false} size={6} />
+        )}
         <Text style={styles.readoutLabel}>
           {pinPoint
             ? 'AMOSTRA PINADA'