mirror of
https://github.com/Team4388/ScoutingApp2022.git
synced 2026-06-09 00:38:03 -06:00
input fixed, started data grid
This commit is contained in:
Evan Lanham
@@ -1,8 +1,9 @@
|
||||
import React from "react";
|
||||
import "chart.js/auto";
|
||||
import { useLocalDb } from "../../DbContext";
|
||||
import { Pie, Bar, Chart } from "react-chartjs-2";
|
||||
import { 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
|
||||
@@ -16,15 +17,64 @@ const DashboardPage = () => {
|
||||
{
|
||||
label: "Climbs",
|
||||
data: pdb.teamData[4388].climb_counts,
|
||||
backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(150,230,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
|
||||
backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
// console.log(pdb);
|
||||
console.log(pdb);
|
||||
|
||||
//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);
|
||||
const roundPlaces = (n, d) => Math.round(n * Math.pow(10, d)) / Math.pow(10, d);
|
||||
team_data_array.forEach((value, index, array) => {
|
||||
grid_data.push({
|
||||
id: value.team_number,
|
||||
average_auto_points: roundPlaces(value.average_auto_points, 2),
|
||||
average_teleop_hub_points: roundPlaces(value.average_teleop_hub_points, 2),
|
||||
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 (
|
||||
<div>
|
||||
<Pie data={makePieChartData(pdb, 4388)} />
|
||||
{/* <Pie data={makePieChartData(pdb, 4388)} /> */}
|
||||
<Box
|
||||
sx={{
|
||||
height: "600px",
|
||||
m: 2,
|
||||
}}
|
||||
>
|
||||
<DataGrid
|
||||
rows={grid_data}
|
||||
columns={[
|
||||
{ field: "id", headerName: "Team", width: 100 },
|
||||
{ field: "average_total_match_points", headerName: "Avg Total Pts", width: 150 },
|
||||
{ field: "average_auto_points", headerName: "Avg Auto Pts", width: 150 },
|
||||
{ field: "average_teleop_hub_points", headerName: "Avg Teleop Hub Pts", width: 190 },
|
||||
{ field: "average_climb_points", headerName: "Avg Climb Pts", width: 150 },
|
||||
// { field: "matched_played", headerName: "Matches", width: 100 },
|
||||
]}
|
||||
checkboxSelection
|
||||
rowsPerPageOptions={[15]}
|
||||
/>
|
||||
</Box>
|
||||
{/* <Chart
|
||||
options={{
|
||||
chart: {
|
||||
width: 384,
|
||||
type: "pie",
|
||||
},
|
||||
labels: ["None", "Low", "Mid", "High", "Transversal"],
|
||||
}}
|
||||
series={pdb.teamData[4388].climb_counts}
|
||||
type="pie"
|
||||
width={380}
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
import React from "react";
|
||||
import { useLocalDb } from "../DbContext";
|
||||
import "./InputPage.css";
|
||||
// import { Button, Intent, Spinner } from "@blueprintjs/core";
|
||||
import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
|
||||
import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
|
||||
import componentMapper from "@data-driven-forms/blueprint-component-mapper/component-mapper";
|
||||
import FormTemplate from "@data-driven-forms/blueprint-component-mapper/form-template";
|
||||
import { Formik, FastField, Form } from "formik";
|
||||
import InputNumberField from "../components/InputNumberField.jsx";
|
||||
import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core";
|
||||
import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
|
||||
import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment, Box } from "@mui/material";
|
||||
|
||||
const InputPage = () => {
|
||||
const localdb = useLocalDb();
|
||||
let panel_sx = {
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: { xs: "center", sm: "center" },
|
||||
justifyContent: { xs: "flex-start", sm: "center" },
|
||||
bgcolor: "background.paper",
|
||||
p: 2,
|
||||
m: 1,
|
||||
gap: 2,
|
||||
maxWidth: "fit-content",
|
||||
borderRadius: "10px",
|
||||
boxShadow: 7,
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<br />
|
||||
@@ -64,49 +71,31 @@ const InputPage = () => {
|
||||
>
|
||||
{({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
|
||||
<Form>
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Grid item>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
|
||||
<Box sx={panel_sx}>
|
||||
<FastField type="input" as={TextField} name="team_number" label="Team #" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FastField type="input" as={TextField} name="match_number" label="Match Number" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Alliance</FormLabel>
|
||||
<RadioGroup aria-label="Alliance" name="alliance" row>
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="red" style={{ fontSize: 50 }} />} label="Red" />
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" />} label="Blue" />
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="red" sx={{ "&, &.Mui-checked": { color: "red_alliance" } }} />} sx={{ color: "red_alliance" }} label="Red" />
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" sx={{ "&, &.Mui-checked": { color: "blue_alliance" } }} />} sx={{ color: "blue_alliance" }} label="Blue" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div />
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Grid item>
|
||||
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
|
||||
<Grid item>
|
||||
<InputNumberField name="upper_hub_auto" label="Upper Hub Auto" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<InputNumberField name="lower_hub_auto" label="Lower Hub Auto" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
|
||||
<Grid item>
|
||||
<InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div />
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Grid item>
|
||||
</Box>
|
||||
|
||||
<Box sx={panel_sx}>
|
||||
<InputNumberField name="upper_hub_auto" label="Upper Hub Auto" />
|
||||
<InputNumberField name="lower_hub_auto" label="Lower Hub Auto" />
|
||||
<FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="taxi_auto" />} label="Auto Taxi" />
|
||||
</Box>
|
||||
|
||||
<Box sx={panel_sx}>
|
||||
<InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" />
|
||||
<InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" />
|
||||
</Box>
|
||||
|
||||
<Box sx={panel_sx}>
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Climbing</FormLabel>
|
||||
<RadioGroup aria-label="Climbing" name="climb_level" row>
|
||||
@@ -117,66 +106,45 @@ const InputPage = () => {
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="4" />} label="Traversal" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div />
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Grid item>
|
||||
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
|
||||
<Grid item>
|
||||
<InputNumberField name="fouls" label="Fouls" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<InputNumberField name="fouls_tech" label="Tech Fouls" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
|
||||
<Grid item>
|
||||
<InputNumberField name="red_cards" label="Red Cards" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<InputNumberField name="yellow_cards" label="Yellow Cards" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div />
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Grid item>
|
||||
</Box>
|
||||
|
||||
<Box sx={panel_sx}>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<InputNumberField name="fouls" label="Fouls" />
|
||||
<InputNumberField name="fouls_tech" label="Tech Fouls" />
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<InputNumberField name="red_cards" label="Red Cards" />
|
||||
<InputNumberField name="yellow_cards" label="Yellow Cards" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={panel_sx}>
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Defense</FormLabel>
|
||||
<RadioGroup aria-label="Defense" name="defence" row>
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="0" />} label="None" />
|
||||
{/* <Divider orientation="vertical" flexItem middle /> */}
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="1" />} label="Poor" />
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="2" />} label="Good" /> <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="3" />} label="Exceptional" />
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="2" />} label="Good" />
|
||||
<FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="3" />} label="Exceptional" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="disabled" />} label="Disabled" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ ...panel_sx, display: "flex", flexDirection: "column" }}>
|
||||
<h2>What they _______</h2>
|
||||
<Box sx={{ display: "flex", flexDirection: "row", gap: 2, p: 0, m: 0 }}>
|
||||
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="did well" />
|
||||
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="struggled with" />
|
||||
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="can't do" />
|
||||
</Box>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<div />
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Grid item>
|
||||
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="What they did Well" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="What they struggled with" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="What they can't do" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<div />
|
||||
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
Reference in New Issue
Block a user