@@ -33,5 +37,3 @@ const RaceSummary = ({ startingGrid, time, tires }: RaceSummaryProps) => {
);
};
-
-export default RaceSummary;
diff --git a/src/components/Stats/Slider.tsx b/src/components/Stats/Slider.tsx
index 89061d0..1960fb1 100644
--- a/src/components/Stats/Slider.tsx
+++ b/src/components/Stats/Slider.tsx
@@ -8,7 +8,7 @@ interface SliderProps {
totalParticipants: number;
}
-const Slider = (props: SliderProps) => {
+export const Slider = (props: SliderProps) => {
const rankPercent =
((props.totalParticipants - props.rank) / (props.totalParticipants - 1)) *
100;
@@ -62,5 +62,3 @@ const Slider = (props: SliderProps) => {
);
};
-
-export default Slider;
diff --git a/src/components/Stats/ThreeBars.tsx b/src/components/Stats/ThreeBars.tsx
index 15ae7d6..f76d816 100644
--- a/src/components/Stats/ThreeBars.tsx
+++ b/src/components/Stats/ThreeBars.tsx
@@ -15,7 +15,7 @@ interface ThreeBarsProps {
leader: Driver;
}
-const ThreeBars = ({
+export const ThreeBars = ({
title,
driver1,
driver2,
@@ -88,5 +88,3 @@ const ThreeBars = ({
);
};
-
-export default ThreeBars;
diff --git a/src/components/Stats/Tire.tsx b/src/components/Stats/Tire.tsx
index 902461e..619928f 100644
--- a/src/components/Stats/Tire.tsx
+++ b/src/components/Stats/Tire.tsx
@@ -20,7 +20,7 @@ const compoundMap = {
},
};
-const Tire = ({ compound, laps }: TireProps) => {
+export const Tire = ({ compound, laps }: TireProps) => {
const altSrc = compoundMap[compound];
return (
@@ -32,5 +32,3 @@ const Tire = ({ compound, laps }: TireProps) => {
);
};
-
-export default Tire;
diff --git a/src/components/Stats/index.tsx b/src/components/Stats/index.tsx
index 2fa7ebe..8a1b0b7 100644
--- a/src/components/Stats/index.tsx
+++ b/src/components/Stats/index.tsx
@@ -1,6 +1,6 @@
-import Slider from "./Slider";
-import RaceSummary from "./RaceSummary";
-import ThreeBars from "./ThreeBars";
+import { Slider } from "./Slider";
+import { RaceSummary } from "./RaceSummary";
+import { ThreeBars } from "./ThreeBars";
import { TrackMap } from "./TrackMap";
import { CornerAnalysis } from "./CornerAnalysis";
diff --git a/src/components/_experimental/CornerAnalysis.tsx b/src/components/_experimental/CornerAnalysis.tsx
new file mode 100644
index 0000000..b5f31c1
--- /dev/null
+++ b/src/components/_experimental/CornerAnalysis.tsx
@@ -0,0 +1,99 @@
+import * as d3 from "d3";
+import React, { useRef, useEffect, useMemo } from "react";
+import { useRefDimensions } from "libs/react/dimensions";
+import type { DriverData, Telemetry } from "libs/types";
+
+interface CornerAnalysisProps {
+ turnNumber: number;
+ driverData: DriverData[];
+ distanceFrom: number;
+ distanceTo: number;
+}
+
+export const CornerAnalysis = (props: CornerAnalysisProps) => {
+ const ref = useRef(null);
+ const dimensions = useRefDimensions(ref);
+ const svgRef = useRef(null);
+ const allDriverData: DriverTelemetry[] = props.driverData
+ .map((d) => {
+ return d.data.map((tel) => {
+ return {
+ ...tel,
+ Code: d.driverCode,
+ Color: d.driverColor,
+ };
+ });
+ })
+ .flat();
+
+ const [mx, my] = [14, 14];
+
+ // x scale bounds
+ const distanceScale = useMemo(() => {
+ const [xMin, xMax] = [props.distanceFrom, props.distanceTo];
+ return d3
+ .scaleLinear()
+ .domain([xMin ?? 0, xMax ?? 0])
+ .range([mx, dimensions.width - mx]);
+ }, [allDriverData, dimensions.width, mx]);
+
+ // y scale bounds
+ const speedScale = useMemo(() => {
+ const [yMin, yMax] = d3.extent(allDriverData, (d) => d.Speed);
+ return d3
+ .scaleLinear()
+ .domain([yMin ?? 0, yMax ?? 0])
+ .range([dimensions.height - my, my]);
+ }, [allDriverData, dimensions.height, my]);
+
+ // draw
+ useEffect(() => {
+ if (!distanceScale || !speedScale) {
+ return;
+ }
+
+ d3.select(svgRef.current).selectAll("*").remove();
+ drawSpeedGraph(allDriverData);
+ }, [props, distanceScale, speedScale]);
+
+ const drawSpeedGraph = () => {
+ const color = d3
+ .scaleOrdinal()
+ .domain(props.driverData.map((d) => d.driverCode))
+ .range(props.driverData.map((d) => d.driverColor));
+
+ const g = d3
+ .select(svgRef.current)
+ .selectAll(`.speed-graph`)
+ .data