TEL-189-Create-lap-table-component (#153)

* table for lap data and lap tab * moved code to RaceTab.tsx and deleted LapTab.tsx * overhaul to tanstack table --------- Co-authored-by: burtonjong <[email protected]>
UCSolarCarTeam · Dec 7, 2024 · 41f14d7 · 41f14d7
1 parent 72781c9
commit 41f14d7
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 2 deletions.
diff --git a/packages/amplify/tsconfig.json b/packages/amplify/tsconfig.json
@@ -4,4 +4,4 @@
     "amplify",
     ".eslintrc.cjs"
   ],
-}
+}
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -18,6 +18,7 @@
     "@react-three/fiber": "^8.15.16",
     "@react-three/postprocessing": "^2.16.0",
     "@shared/helios-types": "*",
+    "@tanstack/react-table": "^8.20.5",
     "@types/three": "^0.161.2",
     "framer-motion": "^11.0.6",
     "lodash": "^4.17.21",

diff --git a/packages/client/src/components/tabs/RaceTab.tsx b/packages/client/src/components/tabs/RaceTab.tsx
@@ -1,5 +1,214 @@
+import { useMemo } from "react";
+
+import type { ILapData } from "@shared/helios-types";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+const columnHelper = createColumnHelper<ILapData>();
+
+const columns = [
+  columnHelper.accessor("ampHours", {
+    cell: (info) => info.getValue(),
+    header: "Amp Hours",
+  }),
+  columnHelper.accessor("averagePackCurrent", {
+    cell: (info) => info.getValue(),
+    header: "Average Pack Current",
+  }),
+  columnHelper.accessor("averageSpeed", {
+    cell: (info) => info.getValue(),
+    header: "Average Speed",
+  }),
+  columnHelper.accessor("batterySecondsRemaining", {
+    cell: (info) => info.getValue(),
+    header: "Battery Seconds Remaining",
+  }),
+  columnHelper.accessor("distance", {
+    cell: (info) => info.getValue(),
+    header: "Distance",
+  }),
+  columnHelper.accessor("lapTime", {
+    cell: (info) => info.getValue(),
+    header: "Lap Time",
+  }),
+  columnHelper.accessor("netPowerOut", {
+    cell: (info) => info.getValue(),
+    header: "Net Power Out",
+  }),
+  columnHelper.accessor("timeStamp", {
+    cell: (info) => info.getValue(),
+    header: "Time Stamp",
+  }),
+  columnHelper.accessor("totalPowerIn", {
+    cell: (info) => info.getValue(),
+    header: "Total Power In",
+  }),
+  columnHelper.accessor("totalPowerOut", {
+    cell: (info) => info.getValue(),
+    header: "Total Power Out",
+  }),
+];
+
+// sample data
+const exampleData: ILapData[] = [
+  {
+    ampHours: 10,
+    averagePackCurrent: 11,
+    averageSpeed: 23,
+    batterySecondsRemaining: 23,
+    distance: 23,
+    lapTime: 23423,
+    netPowerOut: 13434,
+    timeStamp: 324234,
+    totalPowerIn: 1234,
+    totalPowerOut: 123,
+  },
+  {
+    ampHours: 15,
+    averagePackCurrent: 12,
+    averageSpeed: 25,
+    batterySecondsRemaining: 30,
+    distance: 25,
+    lapTime: 25000,
+    netPowerOut: 15000,
+    timeStamp: 324235,
+    totalPowerIn: 1500,
+    totalPowerOut: 150,
+  },
+  {
+    ampHours: 15,
+    averagePackCurrent: 12,
+    averageSpeed: 25,
+    batterySecondsRemaining: 30,
+    distance: 25,
+    lapTime: 25000,
+    netPowerOut: 15000,
+    timeStamp: 324235,
+    totalPowerIn: 1500,
+    totalPowerOut: 150,
+  },
+  {
+    ampHours: 15,
+    averagePackCurrent: 12,
+    averageSpeed: 25,
+    batterySecondsRemaining: 30,
+    distance: 25,
+    lapTime: 25000,
+    netPowerOut: 15000,
+    timeStamp: 324235,
+    totalPowerIn: 1500,
+    totalPowerOut: 150,
+  },
+  {
+    ampHours: 15,
+    averagePackCurrent: 12,
+    averageSpeed: 25,
+    batterySecondsRemaining: 30,
+    distance: 25,
+    lapTime: 25000,
+    netPowerOut: 15000,
+    timeStamp: 324235,
+    totalPowerIn: 1500,
+    totalPowerOut: 150,
+  },
+  {
+    ampHours: 15,
+    averagePackCurrent: 12,
+    averageSpeed: 25,
+    batterySecondsRemaining: 30,
+    distance: 25,
+    lapTime: 25000,
+    netPowerOut: 15000,
+    timeStamp: 324235,
+    totalPowerIn: 1500,
+    totalPowerOut: 150,
+  },
+  {
+    ampHours: 15,
+    averagePackCurrent: 12,
+    averageSpeed: 25,
+    batterySecondsRemaining: 30,
+    distance: 25,
+    lapTime: 25000,
+    netPowerOut: 15000,
+    timeStamp: 324235,
+    totalPowerIn: 1500,
+    totalPowerOut: 150,
+  },
+];
+
 function RaceTab() {
-  return <div className="size-full">Race Tab</div>;
+  const data = useMemo(() => exampleData, []);
+
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="m-4 flex justify-center gap-2">
+      <div className="mb-4 flex flex-col flex-wrap justify-end gap-2">
+        {table.getAllLeafColumns().map((column) => (
+          <label
+            className="flex items-center gap-1 text-sm text-helios"
+            key={column.id}
+          >
+            <input
+              checked={column.getIsVisible()}
+              className="accent-slate-200 hover:accent-red-500"
+              onChange={column.getToggleVisibilityHandler()}
+              type="checkbox"
+            />
+            {column.id}
+          </label>
+        ))}
+      </div>
+
+      <div className="w-3/4 overflow-x-auto">
+        <table className="w-full table-fixed divide-gray-200 border-b-2 border-helios">
+          <thead className="border-b-2 border-helios">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    className="text-gray-500 overflow-x-hidden px-4 py-2 text-center text-xs font-medium uppercase text-helios"
+                    key={header.id}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+
+          <tbody className="divide-y divide-gray-200 bg-white">
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    className={`text-gray-900 border-x-2 border-helios px-4 py-2 text-center text-sm`}
+                    key={cell.id}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
 }
 
 export default RaceTab;
diff --git a/yarn.lock b/yarn.lock
@@ -8764,6 +8764,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.20.5":
+  version: 8.20.5
+  resolution: "@tanstack/react-table@npm:8.20.5"
+  dependencies:
+    "@tanstack/table-core": "npm:8.20.5"
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10c0/574fa62fc6868a3b1113dbd043323f8b73aeb60555609caa164d5137a14636d4502784a961191afde2ec46f33f8c2bbfc4561d27a701c3d084e899a632dda3c8
+  languageName: node
+  linkType: hard
+
+"@tanstack/table-core@npm:8.20.5":
+  version: 8.20.5
+  resolution: "@tanstack/table-core@npm:8.20.5"
+  checksum: 10c0/3c27b5debd61b6bd9bfbb40bfc7c5d5af90873ae1a566b20e3bf2d2f4f2e9a78061c081aacc5259a00e256f8df506ec250eb5472f5c01ff04baf9918b554982b
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -11234,6 +11253,7 @@ __metadata:
     "@react-three/fiber": "npm:^8.15.16"
     "@react-three/postprocessing": "npm:^2.16.0"
     "@shared/helios-types": "npm:*"
+    "@tanstack/react-table": "npm:^8.20.5"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
     "@types/eslint": "npm:^8.56.10"
     "@types/google.maps": "npm:^3.55.11"
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ @@
         "amplify",
         ".eslintrc.cjs"
       ],
-    }
+    }