mirror of
https://github.com/Team4388/ScoutingApp2022.git
synced 2026-06-08 16:28:04 -06:00
re-render on pdb update
This commit is contained in:
Evan Lanham
+26
-22
@@ -1,6 +1,7 @@
|
||||
import PouchDB from "pouchdb";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { ProcessedDataBucketContext } from "./ProcessedDataBucketContext";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { ProcessedDataBucketContext, useProcessedDataBucket } from "./ProcessedDataBucketContext";
|
||||
import { getProcessedDataBucket, updateProcessedDataBucket } from "./ProcessedDataBucket";
|
||||
|
||||
const LocalDbContext = React.createContext();
|
||||
const RemoteDbContext = React.createContext();
|
||||
@@ -14,7 +15,9 @@ export function useRemoteDb() {
|
||||
}
|
||||
|
||||
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"));
|
||||
//used in development server
|
||||
const [remotedb, setRemotedb] = useState(
|
||||
@@ -27,27 +30,28 @@ export function DbProvider({ children }) {
|
||||
})
|
||||
);
|
||||
|
||||
pdb.updateData(localdb);
|
||||
localdb
|
||||
.sync(remotedb, {
|
||||
live: true,
|
||||
retry: true,
|
||||
})
|
||||
.on("change", function (change) {
|
||||
console.log('DB CHANGED');
|
||||
pdb.updateData(localdb);
|
||||
})
|
||||
.on("paused", function (info) { })
|
||||
.on("active", function (info) { })
|
||||
.on("error", function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
useEffect(() => {
|
||||
console.log("TEST");
|
||||
updateProcessedDataBucket(localdb, setProcessedDataBucket);
|
||||
localdb
|
||||
.sync(remotedb, {
|
||||
live: true,
|
||||
retry: true,
|
||||
})
|
||||
.on("change", function (change) {
|
||||
console.log("DB CHANGED");
|
||||
updateProcessedDataBucket(localdb, setProcessedDataBucket);
|
||||
})
|
||||
.on("paused", function (info) {})
|
||||
.on("active", function (info) {})
|
||||
.on("error", function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
}, [localdb, setProcessedDataBucket]);
|
||||
|
||||
return (
|
||||
<LocalDbContext.Provider value={localdb}>
|
||||
<RemoteDbContext.Provider value={remotedb}>
|
||||
{children}
|
||||
</RemoteDbContext.Provider>
|
||||
<LocalDbContext.Provider value={{ localdb, setLocaldb }}>
|
||||
<RemoteDbContext.Provider value={{ remotedb, setRemotedb }}>{children}</RemoteDbContext.Provider>
|
||||
</LocalDbContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,35 +1,50 @@
|
||||
import React from "react";
|
||||
import { useLocalDb } from "../../DbContext";
|
||||
import { useProcessedDataBucket } from "../../ProcessedDataBucketContext";
|
||||
import { ProcessedDataBucketContext, useProcessedDataBucket } from "../../ProcessedDataBucketContext";
|
||||
import Chart from "react-apexcharts";
|
||||
import { DataGrid } from "@mui/x-data-grid";
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
const DashboardPage = () => {
|
||||
//https://react-charts.js.org/examples/column
|
||||
const pdb = useProcessedDataBucket();
|
||||
const makePieChartData = (pdb, team_num) => {
|
||||
// console.log(team_num);
|
||||
// console.log(pdb.teamData);
|
||||
return {
|
||||
labels: ["None", "Low", "Mid", "High", "Transversal"],
|
||||
datasets: [
|
||||
{
|
||||
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);
|
||||
// <ProcessedDataBucketContext.Consumer>
|
||||
{
|
||||
/* {(pdbCtx) => { */
|
||||
}
|
||||
// const pdb = useProcessedDataBucket().processedDataBucket;
|
||||
// const makePieChartData = (pdb, team_num) => {
|
||||
// // console.log(team_num);
|
||||
// // console.log(pdb.teamData);
|
||||
// return {
|
||||
// labels: ["None", "Low", "Mid", "High", "Transversal"],
|
||||
// datasets: [
|
||||
// {
|
||||
// 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)"],
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// };
|
||||
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
|
||||
let grid_data = [];
|
||||
//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);
|
||||
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({
|
||||
id: value.team_number,
|
||||
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_total_match_points: roundPlaces(value.average_total_match_points, 2),
|
||||
});
|
||||
});
|
||||
}
|
||||
// });
|
||||
console.log(grid_data);
|
||||
|
||||
return (
|
||||
@@ -60,6 +76,7 @@ const DashboardPage = () => {
|
||||
// { field: "matched_played", headerName: "Matches", width: 100 },
|
||||
]}
|
||||
checkboxSelection
|
||||
pageSize={15}
|
||||
rowsPerPageOptions={[15]}
|
||||
/>
|
||||
</Box>
|
||||
@@ -77,6 +94,8 @@ const DashboardPage = () => {
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
//}}
|
||||
// </ProcessedDataBucketContext.Consumer>
|
||||
};
|
||||
|
||||
export default DashboardPage;
|
||||
|
||||
@@ -1,92 +1,88 @@
|
||||
export class ProcessedDataBucket {
|
||||
constructor() {
|
||||
this.teamData = {};
|
||||
this.matchData = {};
|
||||
this.updateData = (db) => {
|
||||
db.allDocs({
|
||||
include_docs: true,
|
||||
})
|
||||
.then((result) => {
|
||||
//reset data
|
||||
this.teamData = {};
|
||||
this.matchData = {};
|
||||
export function updateProcessedDataBucket(db, setProcessedDataBucket) {
|
||||
return db
|
||||
.allDocs({
|
||||
include_docs: true,
|
||||
})
|
||||
.then((result) => {
|
||||
//reset data
|
||||
let teamData = {};
|
||||
let matchData = {};
|
||||
|
||||
// console.log(result);
|
||||
result.rows.forEach((dbentry) => {
|
||||
let doc = dbentry.doc;
|
||||
// console.log(doc);
|
||||
// console.log(result);
|
||||
result.rows.forEach((dbentry) => {
|
||||
let doc = dbentry.doc;
|
||||
// console.log(doc);
|
||||
|
||||
//if there's no processed data on a team yet, create a default data entry
|
||||
if (typeof this.teamData[doc.team_number] === "undefined") {
|
||||
this.teamData[doc.team_number] = {
|
||||
team_number: doc.team_number,
|
||||
matched_played: 0,
|
||||
data_sets: {
|
||||
upper_hub_auto: [],
|
||||
lower_hub_auto: [],
|
||||
upper_hub_teleop: [],
|
||||
lower_hub_teleop: [],
|
||||
auto_points: [],
|
||||
teleop_hub_points: [],
|
||||
climb_points: [],
|
||||
total_match_points: [],
|
||||
},
|
||||
climb_counts: [0, 0, 0, 0, 0],
|
||||
average_auto_points: 0,
|
||||
average_teleop_hub_points: 0,
|
||||
average_climb_points: 0,
|
||||
average_total_match_points: 0,
|
||||
num_disables: 0,
|
||||
num_flips: 0,
|
||||
fouls: 0,
|
||||
fouls_tech: 0,
|
||||
red_cards: 0,
|
||||
yellow_cards: 0,
|
||||
};
|
||||
}
|
||||
//if there's no processed data on a team yet, create a default data entry
|
||||
if (typeof teamData[doc.team_number] === "undefined") {
|
||||
teamData[doc.team_number] = {
|
||||
team_number: doc.team_number,
|
||||
matched_played: 0,
|
||||
data_sets: {
|
||||
upper_hub_auto: [],
|
||||
lower_hub_auto: [],
|
||||
upper_hub_teleop: [],
|
||||
lower_hub_teleop: [],
|
||||
auto_points: [],
|
||||
teleop_hub_points: [],
|
||||
climb_points: [],
|
||||
total_match_points: [],
|
||||
},
|
||||
climb_counts: [0, 0, 0, 0, 0],
|
||||
average_auto_points: 0,
|
||||
average_teleop_hub_points: 0,
|
||||
average_climb_points: 0,
|
||||
average_total_match_points: 0,
|
||||
num_disables: 0,
|
||||
num_flips: 0,
|
||||
fouls: 0,
|
||||
fouls_tech: 0,
|
||||
red_cards: 0,
|
||||
yellow_cards: 0,
|
||||
};
|
||||
}
|
||||
|
||||
//add this game's data to the respective team data:
|
||||
let thisTeamData = this.teamData[doc.team_number];
|
||||
thisTeamData.matched_played++;
|
||||
//add this game's data to the respective team data:
|
||||
let thisTeamData = teamData[doc.team_number];
|
||||
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 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 total_match_points = auto_points + teleop_hub_points + climb_points;
|
||||
//data sets
|
||||
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.upper_hub_teleop.push(parseInt(doc.upper_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.teleop_hub_points.push(teleop_hub_points);
|
||||
thisTeamData.data_sets.climb_points.push(climb_points);
|
||||
thisTeamData.data_sets.total_match_points.push(total_match_points);
|
||||
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 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;
|
||||
//data sets
|
||||
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.upper_hub_teleop.push(parseInt(doc.upper_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.teleop_hub_points.push(teleop_hub_points);
|
||||
thisTeamData.data_sets.climb_points.push(climb_points);
|
||||
thisTeamData.data_sets.total_match_points.push(total_match_points);
|
||||
|
||||
//climb data
|
||||
thisTeamData.climb_counts[parseInt(doc.climb_level)]++;
|
||||
//climb data
|
||||
thisTeamData.climb_counts[parseInt(doc.climb_level)]++;
|
||||
|
||||
//misc data
|
||||
thisTeamData.num_disables += doc.disabled ? 1 : 0;
|
||||
thisTeamData.num_flips += doc.flipped ? 1 : 0;
|
||||
thisTeamData.fouls += parseInt(doc.fouls);
|
||||
thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
|
||||
thisTeamData.red_cards += parseInt(doc.red_cards);
|
||||
thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
|
||||
//misc data
|
||||
thisTeamData.num_disables += doc.disabled ? 1 : 0;
|
||||
thisTeamData.num_flips += doc.flipped ? 1 : 0;
|
||||
thisTeamData.fouls += parseInt(doc.fouls);
|
||||
thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
|
||||
thisTeamData.red_cards += parseInt(doc.red_cards);
|
||||
thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
|
||||
|
||||
//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
|
||||
const sum = (accum, current) => accum + current;
|
||||
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_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;
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("Error while processing data!");
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
}
|
||||
//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
|
||||
const sum = (accum, current) => accum + current;
|
||||
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_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;
|
||||
});
|
||||
setProcessedDataBucket({ teamData: teamData, matchData: matchData });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("Error while processing data!");
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import { ProcessedDataBucket } from "./ProcessedDataBucket.jsx"
|
||||
import { ProcessedDataBucket } from "./ProcessedDataBucket.jsx";
|
||||
|
||||
export const ProcessedDataBucketContext = React.createContext();
|
||||
export function useProcessedDataBucket() {
|
||||
return useContext(ProcessedDataBucketContext);
|
||||
return useContext(ProcessedDataBucketContext);
|
||||
}
|
||||
|
||||
export function ProcessedDataBucketProvider({ children }) {
|
||||
//create the processed data bucket object
|
||||
const [processedDataBucket, setProcessedDataBucket] = useState(new ProcessedDataBucket());
|
||||
return (
|
||||
<ProcessedDataBucketContext.Provider value={processedDataBucket}>
|
||||
{children}
|
||||
</ProcessedDataBucketContext.Provider>
|
||||
);
|
||||
};
|
||||
//create the processed data bucket object
|
||||
const [processedDataBucket, setProcessedDataBucket] = useState(null);
|
||||
return <ProcessedDataBucketContext.Provider value={{ processedDataBucket, setProcessedDataBucket }}>{children}</ProcessedDataBucketContext.Provider>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user