- Moved frontend to a separate folder

- Updated README.md

frontend/src/Data/IChartPoint.ts

@@ -0,0 +1,21 @@
+import MaxSpeed from "./MaxSpeed";
+import Surface from "./Surface";
+
+/** Represents an aggregated point on the chart. */
+export default interface IChartPoint
+{
+	/** The distance from the start of the track. */
+	distance: number;
+	/** The distance until the next point. */
+	length: number;
+	/** The type of track surface */
+	surface: Surface;
+	/** The maximum speed of the point. */
+	maxSpeed: MaxSpeed;
+	/** The name of the point. */
+	name: string;
+	/** The height of the point. */
+	height: number;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	[key: string]: any;
+}

frontend/src/Data/IPoint.ts

@@ -0,0 +1,12 @@
+/** Represents a point with an ID, name, and height. */
+export default interface IPoint
+{
+	/** The unique identifier. */
+	id: number;
+
+	/** The name of the point. */
+	name: string;
+
+	/** The height of the point. */
+	height: number;
+}

frontend/src/Data/ITrack.ts

@@ -0,0 +1,21 @@
+import MaxSpeed from "./MaxSpeed";
+import Surface from "./Surface";
+
+/** Represents a track segment */
+export default interface ITrack
+{
+	/** First point ID */
+	firstId: number;
+
+	/** Second (last) point ID */
+	secondId: number;
+
+	/** Distance between points */
+	distance: number;
+
+	/** Surface type */
+	surface: Surface;
+
+	/** Maximum speed */
+	maxSpeed: MaxSpeed;
+}

frontend/src/Data/LoadMockData.ts

@@ -0,0 +1,51 @@
+import IPoint from "./IPoint";
+import ITrack from "./ITrack";
+
+/**
+ * Returns a random number between min and max
+ * @param min The minimum value (inclusive)
+ * @param max The maximum value (exclusive)
+ * @returns A random number between min and max
+ */
+const getRandom = (min: number, max: number): number =>
+	Math.floor(Math.random() * (max - min)) + min;
+
+const pointNames: string[] =
+	[
+		"Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India",
+		"Juliett", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo",
+		"Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"
+	];
+
+function LoadMockData(largeCount?: boolean): { tracks: ITrack[], points: IPoint[]; }
+{
+	const count: number = getRandom(10, 20) * (largeCount ? 10 : 1);
+	const points: IPoint[] = [];
+	const tracks: ITrack[] = [];
+
+	// Generate random data
+
+	for (let i = 0; i < count; i++)
+	{
+		points.push({
+			id: i,
+			name: `${pointNames[getRandom(0, pointNames.length)]}-${i}`,
+			height: getRandom(50, 200)
+		});
+	}
+
+	for (let i = 0; i < count - 1; i++)
+	{
+		tracks.push({
+			firstId: points[i].id,
+			secondId: points[i + 1].id,
+			distance: getRandom(1000, 2000),
+			surface: getRandom(0, 3),
+			maxSpeed: getRandom(0, 3)
+		});
+	}
+
+	return { tracks, points };
+}
+
+export default LoadMockData;

frontend/src/Data/MaxSpeed.ts

@@ -0,0 +1,9 @@
+/** Represents the maximum speed options. */
+enum MaxSpeed
+{
+	FAST,
+	NORMAL,
+	SLOW
+}
+
+export default MaxSpeed;

frontend/src/Data/Surface.ts

@@ -0,0 +1,9 @@
+/** Represents the type of surface. */
+enum Surface
+{
+	SAND,
+	ASPHALT,
+	GROUND
+}
+
+export default Surface;

frontend/src/Data/TrackChartDataProps.ts

@@ -0,0 +1,92 @@
+import { green, grey, orange, red, yellow } from "@mui/material/colors";
+import { AllSeriesType, ChartsAxisContentProps } from "@mui/x-charts";
+import IChartPoint from "./IChartPoint";
+import MaxSpeed from "./MaxSpeed";
+import Surface from "./Surface";
+
+/** Props for rendering trackline segments. */
+export const TracklineSeries: AllSeriesType[] = [
+	// There're three of them, because there are.
+	// Instead of trying to split signle line into different segments,
+	// I instead apply a mask to each line, which is a bit more efficient.
+	{
+		type: "line",
+		dataKey: "height",
+		curve: "catmullRom",
+		id: MaxSpeed[0],
+		color: green[500],
+	},
+	{
+		type: "line",
+		dataKey: "height",
+		curve: "catmullRom",
+		id: MaxSpeed[1],
+		color: orange[500],
+	},
+	{
+		type: "line",
+		dataKey: "height",
+		curve: "catmullRom",
+		id: MaxSpeed[2],
+		color: red[500],
+	},
+];
+
+/** Props for the chart tooltip. */
+export const TooltipProps = (dataset: IChartPoint[]): Partial<ChartsAxisContentProps> => ({
+	// @ts-expect-error - The type definition is incorrect
+	axis:
+	{
+		valueFormatter: (value: number): string => `${value} mi`
+	},
+	series:
+		[
+			{
+				type: "line",
+				data: dataset.map((_, index) => index),
+				label: "Point name",
+				id: "name",
+				valueFormatter: (value: number) => dataset[value].name,
+				color: green[500],
+			},
+			{
+				type: "line",
+				data: dataset.map(i => i.height),
+				label: "Height ASL",
+				id: "height",
+				valueFormatter: (value: number) => `${value} ft`,
+				color: green[500],
+			},
+			{
+				type: "line",
+				data: dataset.map(i => i.surface),
+				label: "Segment type",
+				id: "surface",
+				valueFormatter: (value: number) => Surface[value],
+				color: green[700],
+			},
+			{
+				type: "line",
+				data: dataset.map(i => i.length),
+				id: "length",
+				label: "Next point",
+				valueFormatter: (value: number) => value < 1 ? "FINISH" : `${value} mi`,
+				color: yellow[200],
+			},
+			{
+				type: "line",
+				data: dataset.map(i => i.maxSpeed),
+				id: "maxSpeed",
+				label: "Speed caution",
+				valueFormatter: (value: number) => MaxSpeed[value],
+				color: red[500],
+			},
+		]
+});
+
+/** Colors for each surface type. */
+export const SurfaceColors: Record<Surface, string> = {
+	[Surface.ASPHALT]: grey[400],
+	[Surface.SAND]: yellow[100],
+	[Surface.GROUND]: green[100],
+};