feat: Add Brush component to GearGraph

b4mad · Nov 2, 2024 · 22856c5 · 22856c5
1 parent 80c3239
commit 22856c5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/LineGraph.tsx b/src/components/LineGraph.tsx
@@ -1,4 +1,4 @@
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine, Brush } from 'recharts';
 import { TelemetryPoint } from '../services/types';
 
 interface DataKeyConfig {
@@ -13,6 +13,8 @@ interface LineGraphProps {
   unit?: string;
   stepLine?: boolean;
   title?: string;
+  syncId?: string;
+  showBrush?: boolean;
 }
 
 interface CurrentValueDisplayProps {
@@ -34,7 +36,7 @@ function CurrentValueDisplay({ value, label, unit }: CurrentValueDisplayProps) {
   );
 }
 
-export function SpeedGraph({ currentLapData }: { currentLapData: TelemetryPoint[] }) {
+export function SpeedGraph({ currentLapData, syncId }: { currentLapData: TelemetryPoint[], syncId?: string }) {
   return (
     <LineGraph
       data={currentLapData}
@@ -43,11 +45,12 @@ export function SpeedGraph({ currentLapData }: { currentLapData: TelemetryPoint[
       ]}
       unit=" km/h"
       title="Speed in kph"
+      syncId={syncId}
     />
   );
 }
 
-export function PedalsGraph({ currentLapData }: { currentLapData: TelemetryPoint[] }) {
+export function PedalsGraph({ currentLapData, syncId }: { currentLapData: TelemetryPoint[], syncId?: string }) {
   return (
     <LineGraph
       data={currentLapData}
@@ -57,11 +60,12 @@ export function PedalsGraph({ currentLapData }: { currentLapData: TelemetryPoint
         { key: "handbrake", name: "Handbrake", color: "#ff9800" }
       ]}
       unit="%"
+      syncId={syncId}
     />
   );
 }
 
-export function GearGraph({ currentLapData }: { currentLapData: TelemetryPoint[] }) {
+export function GearGraph({ currentLapData, syncId, showBrush }: { currentLapData: TelemetryPoint[], syncId?: string, showBrush?: boolean }) {
   return (
     <LineGraph
       data={currentLapData}
@@ -70,11 +74,13 @@ export function GearGraph({ currentLapData }: { currentLapData: TelemetryPoint[]
       ]}
       unit=""
       stepLine
+      syncId={syncId}
+      showBrush={showBrush}
     />
   );
 }
 
-export function LineGraph({ data, dataKeys, unit = '', stepLine = false, title }: LineGraphProps) {
+export function LineGraph({ data, dataKeys, unit = '', stepLine = false, title, syncId, showBrush }: LineGraphProps) {
   const currentValue = data.length > 0 ? data[data.length - 1][dataKeys[0].key] : 0;
   const distance = data.length > 0 ? Math.round(data[data.length - 1].distance) : 0;
 
@@ -93,6 +99,7 @@ export function LineGraph({ data, dataKeys, unit = '', stepLine = false, title }
         <LineChart
           data={data}
           margin={{ top: 40, right: 20, bottom: 5, left: 20 }}
+          syncId={syncId}
         >
           <CartesianGrid
             strokeDasharray="3 3"
@@ -127,6 +134,7 @@ export function LineGraph({ data, dataKeys, unit = '', stepLine = false, title }
               isAnimationActive={false}
             />
           ))}
+          {showBrush && <Brush dataKey="distance" height={30} stroke="#8884d8" />}
         </LineChart>
       </ResponsiveContainer>
     </div>

diff --git a/src/components/TelemetryVisualization.tsx b/src/components/TelemetryVisualization.tsx
@@ -24,13 +24,13 @@ export function TelemetryVisualization({ currentLapData, mapDataAvailable }: Tel
           {currentLapData.length > 0 && (
             <>
               <Box sx={{ height: "200px" }}>
-                <SpeedGraph currentLapData={currentLapData} />
+                <SpeedGraph currentLapData={currentLapData} syncId="telemetry" />
               </Box>
               <Box sx={{ height: "200px" }}>
-                <PedalsGraph currentLapData={currentLapData} />
+                <PedalsGraph currentLapData={currentLapData} syncId="telemetry" />
               </Box>
               <Box sx={{ height: "200px" }}>
-                <GearGraph currentLapData={currentLapData} />
+                <GearGraph currentLapData={currentLapData} syncId="telemetry" showBrush={true} />
               </Box>
             </>
           )}