option: "unique first names" and "relative/total"

prefs_page/src/App.css

@@ -1,5 +1,5 @@
 #root {
-  max-width: 60vw;
+  max-width: 70vw;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
@@ -11,4 +11,5 @@
 
 .read-the-docs {
   color: #888;
+  padding: 0;
 }

prefs_page/src/Table.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -6,12 +7,47 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import data from "./table.json";
+import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  Stack,
+  Switch,
+  Typography,
+} from "@mui/material";
+
+interface Data {
+  [index: string]: Teams;
+}
+
+interface Teams {
+  teamname: Row;
+}
 
 type Row = [player: string, fulfilled: number, total: number];
 
-export default function TeamTables() {
+function RenderTable(data: object) {
+  let nMatches: number = 0;
+  let nTotal: number = 0;
+  let nPlayers: number = 0;
+  let relativeScore: number = 0.0;
+  for (const rows of Object.values(data)) {
+    for (const row of rows) {
+      nMatches += row[1];
+      nTotal += row[2];
+      relativeScore += row[1] / row[2];
+      nPlayers++;
+    }
+  }
   return (
     <>
+      <Paper elevation={2} sx={{ p: 2, display: "inline-block" }}>
+        average wishes fulfilled:{" "}
+        <Typography sx={{ fontFamily: "monospace" }}>
+          {(nMatches / nPlayers).toPrecision(2)} (
+          {((relativeScore / nPlayers) * 100).toPrecision(3)}%)
+        </Typography>
+      </Paper>
       {Object.entries(data).map(([teamname, rows]) => (
         <>
           <h1>{teamname}</h1>
@@ -47,3 +83,69 @@ export default function TeamTables() {
     </>
   );
 }
+
+export default function TeamTables() {
+  const [total, setTotal] = useState("relative");
+  const [unique, setUnique] = useState("non-unique");
+
+  const handleTotalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      setTotal("relative");
+    } else {
+      setTotal("total");
+    }
+  };
+
+  const handleUniqueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      setUnique("unique");
+    } else {
+      setUnique("non-unique");
+    }
+  };
+
+  let tabledata: Data = data as unknown as Data;
+
+  return (
+    <>
+      <Box
+        sx={{
+          m: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+        }}
+      >
+        <Paper elevation={2} sx={{ m: 1, p: 1 }}>
+          <Typography className="read-the-docs">according to</Typography>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ p: "0 16px", m: "0 8px", alignItems: "center" }}
+          >
+            <Typography>total</Typography>
+            <Switch defaultChecked onChange={handleTotalChange} />
+            <Typography>relative</Typography>
+          </Stack>
+          <Typography className="read-the-docs">
+            number of wishes fulfilled
+          </Typography>
+        </Paper>
+
+        <Paper elevation={2} sx={{ m: 1, p: 1, justifyContent: "center" }}>
+          <FormControlLabel
+            sx={{ padding: 2, m: 1 }}
+            control={
+              <Checkbox
+                checked={unique === "unique"}
+                onChange={handleUniqueChange}
+              />
+            }
+            label="unique first names"
+          />
+        </Paper>
+      </Box>
+      {RenderTable(tabledata[[total, unique].join(",") as string])}
+    </>
+  );
+}