Team4388/ScoutingApp2022
1
0
Fork 0
mirror of https://github.com/Team4388/ScoutingApp2022.git synced 2026-06-09 00:38:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

re-render on pdb update

Browse Source
This commit is contained in:
Evan Lanham
2022-03-14 16:17:39 -06:00
parent d32bf23dd3
commit f7e82d1f5a
5 changed files with 152 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
couchdb/data/shards/00000000-7fffffff/testdata.1643440069.couch
BIN
View File
Binary file not shown.
webserver/src/DbContext.jsx
+26 -22
View File
@@ -1,6 +1,7 @@
import PouchDB from "pouchdb"; import PouchDB from "pouchdb";
import React, { useContext, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import { ProcessedDataBucketContext } from "./ProcessedDataBucketContext"; import { ProcessedDataBucketContext, useProcessedDataBucket } from "./ProcessedDataBucketContext";
import { getProcessedDataBucket, updateProcessedDataBucket } from "./ProcessedDataBucket";
const LocalDbContext = React.createContext(); const LocalDbContext = React.createContext();
const RemoteDbContext = React.createContext(); const RemoteDbContext = React.createContext();
@@ -14,7 +15,9 @@ export function useRemoteDb() {
} }
export function DbProvider({ children }) { export function DbProvider({ children }) {
const pdb = React.useContext(ProcessedDataBucketContext); // const pdbCtx = useProcessedDataBucket();
const { processedDataBucket, setProcessedDataBucket } = useContext(ProcessedDataBucketContext);
// console.log(pdb);
const [localdb, setLocaldb] = useState(new PouchDB("testdata")); const [localdb, setLocaldb] = useState(new PouchDB("testdata"));
//used in development server //used in development server
const [remotedb, setRemotedb] = useState( const [remotedb, setRemotedb] = useState(
@@ -27,27 +30,28 @@ export function DbProvider({ children }) {
}) })
); );
pdb.updateData(localdb); useEffect(() => {
localdb console.log("TEST");
.sync(remotedb, { updateProcessedDataBucket(localdb, setProcessedDataBucket);
live: true, localdb
retry: true, .sync(remotedb, {
}) live: true,
.on("change", function (change) { retry: true,
console.log('DB CHANGED'); })
pdb.updateData(localdb); .on("change", function (change) {
}) console.log("DB CHANGED");
.on("paused", function (info) { }) updateProcessedDataBucket(localdb, setProcessedDataBucket);
.on("active", function (info) { }) })
.on("error", function (err) { .on("paused", function (info) {})
console.error(err); .on("active", function (info) {})
}); .on("error", function (err) {
console.error(err);
});
}, [localdb, setProcessedDataBucket]);
return ( return (
<LocalDbContext.Provider value={localdb}> <LocalDbContext.Provider value={{ localdb, setLocaldb }}>
<RemoteDbContext.Provider value={remotedb}> <RemoteDbContext.Provider value={{ remotedb, setRemotedb }}>{children}</RemoteDbContext.Provider>
{children}
</RemoteDbContext.Provider>
</LocalDbContext.Provider> </LocalDbContext.Provider>
); );
} }
webserver/src/Pages/DashboardPage/DashboardPage.jsx
+40 -21
View File
@@ -1,35 +1,50 @@
import React from "react"; import React from "react";
import { useLocalDb } from "../../DbContext"; import { useLocalDb } from "../../DbContext";
import { useProcessedDataBucket } from "../../ProcessedDataBucketContext"; import { ProcessedDataBucketContext, useProcessedDataBucket } from "../../ProcessedDataBucketContext";
import Chart from "react-apexcharts"; import Chart from "react-apexcharts";
import { DataGrid } from "@mui/x-data-grid"; import { DataGrid } from "@mui/x-data-grid";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
const DashboardPage = () => { const DashboardPage = () => {
//https://react-charts.js.org/examples/column // <ProcessedDataBucketContext.Consumer>
const pdb = useProcessedDataBucket(); {
const makePieChartData = (pdb, team_num) => { /* {(pdbCtx) => { */
// console.log(team_num); }
// console.log(pdb.teamData); // const pdb = useProcessedDataBucket().processedDataBucket;
return { // const makePieChartData = (pdb, team_num) => {
labels: ["None", "Low", "Mid", "High", "Transversal"], // // console.log(team_num);
datasets: [ // // console.log(pdb.teamData);
{ // return {
label: "Climbs", // labels: ["None", "Low", "Mid", "High", "Transversal"],
data: pdb.teamData[4388].climb_counts, // datasets: [
backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"], // {
}, // label: "Climbs",
], // data: pdb.teamData[4388].climb_counts,
}; // backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
}; // },
console.log(pdb); // ],
// };
// };
let { processedDataBucket, setProcessedDataBucket } = useProcessedDataBucket();
console.log(processedDataBucket);
if (processedDataBucket == null) {
return <div />;
}
// const { processedDataBucket, setProcessedDataBucket } = pdbCtx;
// console.log(pdbCtx);
//format data for the data grid //format data for the data grid
let grid_data = []; let grid_data = [];
//turns the values of the key value pairs in the list into an array //turns the values of the key value pairs in the list into an array
let team_data_array = Object.values(pdb.teamData); console.log(processedDataBucket.teamData);
let team_data_array = Object.values(processedDataBucket.teamData);
// let team_data_array = Array.from(processedDataBucket.teamData);
const roundPlaces = (n, d) => Math.round(n * Math.pow(10, d)) / Math.pow(10, d); const roundPlaces = (n, d) => Math.round(n * Math.pow(10, d)) / Math.pow(10, d);
team_data_array.forEach((value, index, array) => { // team_data_array.forEach((value, index, array) => {
for (const property in processedDataBucket.teamData) {
console.log(property);
let value = processedDataBucket.teamData[property];
console.log(value);
grid_data.push({ grid_data.push({
id: value.team_number, id: value.team_number,
average_auto_points: roundPlaces(value.average_auto_points, 2), average_auto_points: roundPlaces(value.average_auto_points, 2),
@@ -37,7 +52,8 @@ const DashboardPage = () => {
average_climb_points: roundPlaces(value.average_climb_points, 2), average_climb_points: roundPlaces(value.average_climb_points, 2),
average_total_match_points: roundPlaces(value.average_total_match_points, 2), average_total_match_points: roundPlaces(value.average_total_match_points, 2),
}); });
}); }
// });
console.log(grid_data); console.log(grid_data);
return ( return (
@@ -60,6 +76,7 @@ const DashboardPage = () => {
// { field: "matched_played", headerName: "Matches", width: 100 }, // { field: "matched_played", headerName: "Matches", width: 100 },
]} ]}
checkboxSelection checkboxSelection
pageSize={15}
rowsPerPageOptions={[15]} rowsPerPageOptions={[15]}
/> />
</Box> </Box>
@@ -77,6 +94,8 @@ const DashboardPage = () => {
/> */} /> */}
</div> </div>
); );
//}}
// </ProcessedDataBucketContext.Consumer>
}; };
export default DashboardPage; export default DashboardPage;
webserver/src/ProcessedDataBucket.jsx
+80 -84
View File
@@ -1,92 +1,88 @@
export class ProcessedDataBucket { export function updateProcessedDataBucket(db, setProcessedDataBucket) {
constructor() { return db
this.teamData = {}; .allDocs({
this.matchData = {}; include_docs: true,
this.updateData = (db) => { })
db.allDocs({ .then((result) => {
include_docs: true, //reset data
}) let teamData = {};
.then((result) => { let matchData = {};
//reset data
this.teamData = {};
this.matchData = {};
// console.log(result); // console.log(result);
result.rows.forEach((dbentry) => { result.rows.forEach((dbentry) => {
let doc = dbentry.doc; let doc = dbentry.doc;
// console.log(doc); // console.log(doc);
//if there's no processed data on a team yet, create a default data entry //if there's no processed data on a team yet, create a default data entry
if (typeof this.teamData[doc.team_number] === "undefined") { if (typeof teamData[doc.team_number] === "undefined") {
this.teamData[doc.team_number] = { teamData[doc.team_number] = {
team_number: doc.team_number, team_number: doc.team_number,
matched_played: 0, matched_played: 0,
data_sets: { data_sets: {
upper_hub_auto: [], upper_hub_auto: [],
lower_hub_auto: [], lower_hub_auto: [],
upper_hub_teleop: [], upper_hub_teleop: [],
lower_hub_teleop: [], lower_hub_teleop: [],
auto_points: [], auto_points: [],
teleop_hub_points: [], teleop_hub_points: [],
climb_points: [], climb_points: [],
total_match_points: [], total_match_points: [],
}, },
climb_counts: [0, 0, 0, 0, 0], climb_counts: [0, 0, 0, 0, 0],
average_auto_points: 0, average_auto_points: 0,
average_teleop_hub_points: 0, average_teleop_hub_points: 0,
average_climb_points: 0, average_climb_points: 0,
average_total_match_points: 0, average_total_match_points: 0,
num_disables: 0, num_disables: 0,
num_flips: 0, num_flips: 0,
fouls: 0, fouls: 0,
fouls_tech: 0, fouls_tech: 0,
red_cards: 0, red_cards: 0,
yellow_cards: 0, yellow_cards: 0,
}; };
} }
//add this game's data to the respective team data: //add this game's data to the respective team data:
let thisTeamData = this.teamData[doc.team_number]; let thisTeamData = teamData[doc.team_number];
thisTeamData.matched_played++; thisTeamData.matched_played++;
let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2; let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2;
let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1; let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1;
let climb_points = (parseInt(doc.climb_level) == 0 ? 4 : 0) + (parseInt(doc.climb_level) == 1 ? 6 : 0) + (parseInt(doc.climb_level) == 2 ? 10 : 0) + (parseInt(doc.climb_level) == 3 ? 15 : 0); let climb_points = (parseInt(doc.climb_level) == 0 ? 4 : 0) + (parseInt(doc.climb_level) == 1 ? 6 : 0) + (parseInt(doc.climb_level) == 2 ? 10 : 0) + (parseInt(doc.climb_level) == 3 ? 15 : 0);
let total_match_points = auto_points + teleop_hub_points + climb_points; let total_match_points = auto_points + teleop_hub_points + climb_points;
//data sets //data sets
thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto)); thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto));
thisTeamData.data_sets.lower_hub_auto.push(parseInt(doc.lower_hub_auto)); thisTeamData.data_sets.lower_hub_auto.push(parseInt(doc.lower_hub_auto));
thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop)); thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop));
thisTeamData.data_sets.lower_hub_teleop.push(parseInt(doc.lower_hub_teleop)); thisTeamData.data_sets.lower_hub_teleop.push(parseInt(doc.lower_hub_teleop));
thisTeamData.data_sets.auto_points.push(auto_points); thisTeamData.data_sets.auto_points.push(auto_points);
thisTeamData.data_sets.teleop_hub_points.push(teleop_hub_points); thisTeamData.data_sets.teleop_hub_points.push(teleop_hub_points);
thisTeamData.data_sets.climb_points.push(climb_points); thisTeamData.data_sets.climb_points.push(climb_points);
thisTeamData.data_sets.total_match_points.push(total_match_points); thisTeamData.data_sets.total_match_points.push(total_match_points);
//climb data //climb data
thisTeamData.climb_counts[parseInt(doc.climb_level)]++; thisTeamData.climb_counts[parseInt(doc.climb_level)]++;
//misc data //misc data
thisTeamData.num_disables += doc.disabled ? 1 : 0; thisTeamData.num_disables += doc.disabled ? 1 : 0;
thisTeamData.num_flips += doc.flipped ? 1 : 0; thisTeamData.num_flips += doc.flipped ? 1 : 0;
thisTeamData.fouls += parseInt(doc.fouls); thisTeamData.fouls += parseInt(doc.fouls);
thisTeamData.fouls_tech += parseInt(doc.fouls_tech); thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
thisTeamData.red_cards += parseInt(doc.red_cards); thisTeamData.red_cards += parseInt(doc.red_cards);
thisTeamData.yellow_cards += parseInt(doc.yellow_cards); thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
//sum of all points in the match points data set for this team //sum of all points in the match points data set for this team
//function for getting the sum of an array, use in reduce function of array //function for getting the sum of an array, use in reduce function of array
const sum = (accum, current) => accum + current; const sum = (accum, current) => accum + current;
thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played; thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.average_teleop_hub_points = thisTeamData.data_sets.teleop_hub_points.reduce(sum, 0) / thisTeamData.matched_played; thisTeamData.average_teleop_hub_points = thisTeamData.data_sets.teleop_hub_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.average_climb_points = thisTeamData.data_sets.climb_points.reduce(sum, 0) / thisTeamData.matched_played; thisTeamData.average_climb_points = thisTeamData.data_sets.climb_points.reduce(sum, 0) / thisTeamData.matched_played;
thisTeamData.average_total_match_points = thisTeamData.data_sets.total_match_points.reduce(sum, 0) / thisTeamData.matched_played; thisTeamData.average_total_match_points = thisTeamData.data_sets.total_match_points.reduce(sum, 0) / thisTeamData.matched_played;
}); });
}) setProcessedDataBucket({ teamData: teamData, matchData: matchData });
.catch((err) => { })
console.log("Error while processing data!"); .catch((err) => {
console.error(err); console.log("Error while processing data!");
}); console.error(err);
}; });
}
} }
webserver/src/ProcessedDataBucketContext.jsx
+6 -10
View File
@@ -1,17 +1,13 @@
import React, { useContext, useState } from "react"; import React, { useContext, useState } from "react";
import { ProcessedDataBucket } from "./ProcessedDataBucket.jsx" import { ProcessedDataBucket } from "./ProcessedDataBucket.jsx";
export const ProcessedDataBucketContext = React.createContext(); export const ProcessedDataBucketContext = React.createContext();
export function useProcessedDataBucket() { export function useProcessedDataBucket() {
return useContext(ProcessedDataBucketContext); return useContext(ProcessedDataBucketContext);
} }
export function ProcessedDataBucketProvider({ children }) { export function ProcessedDataBucketProvider({ children }) {
//create the processed data bucket object //create the processed data bucket object
const [processedDataBucket, setProcessedDataBucket] = useState(new ProcessedDataBucket()); const [processedDataBucket, setProcessedDataBucket] = useState(null);
return ( return <ProcessedDataBucketContext.Provider value={{ processedDataBucket, setProcessedDataBucket }}>{children}</ProcessedDataBucketContext.Provider>;
<ProcessedDataBucketContext.Provider value={processedDataBucket}> }
{children}
</ProcessedDataBucketContext.Provider>
);
};