Strategy Charts

apps/scouting/frontend/src/main.tsx

@@ -3,8 +3,8 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { registerSW } from "virtual:pwa-register";
 import "./index.css";
-import App from "./App";
 import { BrowserRouter } from "react-router-dom";
+import App from "./App";
 
 registerSW({ immediate: true });
 

apps/scouting/frontend/src/strategy/DatasetTemplate.ts

@@ -0,0 +1,8 @@
+// בס"ד
+export interface DataSet<T extends string | number> {
+  name: string;
+  points: Record<T, number>;
+  color?: string; //assign color if not defined
+}
+
+

apps/scouting/frontend/src/strategy/LineChart.tsx

@@ -0,0 +1,63 @@
+//בס"ד
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  ArcElement,
+} from "chart.js";
+
+import type { ChartData, ChartOptions } from "chart.js";
+import type { DataSet } from "./DatasetTemplate";
+
+ChartJS.register(
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  ArcElement,
+);
+
+export interface LineChartProps {
+  dataSetsProps: DataSet<any>[];
+  max?: number;
+  min?: number;
+}
+const convertDataToLineChartFormat = ({
+  dataSetsProps,
+}: LineChartProps): ChartData<"line", number[], string> => {
+  const defaultColors = ["blue", "red", "violet", "orange"];
+
+  const labels = Array.from(
+    new Set(dataSetsProps.flatMap((ds) => Object.keys(ds.points))),
+  ).sort((a, b) => Number(a) - Number(b));
+
+  return {
+    labels,
+    datasets: dataSetsProps.map((dataset, index) => ({
+      label: dataset.name,
+      data: labels.map((label) => dataset.points[label] ?? null),
+      borderColor: dataset.color ?? defaultColors[index % defaultColors.length],
+    })),
+  };
+};
+
+export const LineGraph = ({ dataSetsProps, min, max }: LineChartProps) => {
+  const options: ChartOptions<"line"> = {
+    scales: {
+      y: { min, max },
+    },
+  };
+  const data = convertDataToLineChartFormat({ dataSetsProps });
+  return <Line data={data} options={options} />;
+};

apps/scouting/frontend/src/strategy/PieChart.tsx

@@ -0,0 +1,60 @@
+//בס"ד
+import { Pie } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  ArcElement,
+} from "chart.js";
+
+import type { ChartData, ChartOptions } from "chart.js";
+import type { DataSet } from "./DatasetTemplate";
+
+ChartJS.register(
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  ArcElement,
+);
+
+const convertDataToPieChartFormat = ({
+  name,
+  points,
+  color,
+}: DataSet<string | number>): ChartData<"pie", number[], string> => {
+  const defaultColor = "red";
+
+  const labels = Object.keys(points);
+  const values = Object.values(points);
+
+  return {
+    labels,
+    datasets: [
+      {
+        label: name,
+        data: values,
+        backgroundColor: labels.map(() => color ?? defaultColor),
+      },
+    ],
+  };
+};
+
+export const PieGraph = ({ name, points, color }: DataSet<string | number>) => {
+  const data = convertDataToPieChartFormat({ name, points, color });
+  const options: ChartOptions<"pie"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+  return <Pie data={data} options={options} />;
+};