Skip to content

Commit

Permalink
added spacing between charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaron-wu1
aaron-wu1 committed Jul 31, 2023
1 parent 9a4f5ba commit 115d375
Showing 1 changed file with 73 additions and 72 deletions.
145 changes: 73 additions & 72 deletions frontend/src/pages/dashboard/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
// import "./Dashboard.css";
import { React, useState, useEffect } from "react";
import Chart from "chart.js/auto";
import { CategoryScale } from "chart.js";
import "chartjs-adapter-luxon";
import zoomPlugin from "chartjs-plugin-zoom";
import { getCellIds } from "../../services/cell";
import { getTerosData } from "../../services/teros";
import { getPowerData } from "../../services/power";
import PwrChart from "../../charts/PwrChart/PwrChart";
import VChart from "../../charts/VChart/VChart";
import VwcChart from "../../charts/VwcChart/VwcChart";
import TempChart from "../../charts/TempChart/TempChart";
import { DateTime } from "luxon";
import DownloadBtn from "../../components/DownloadBtn";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import DateRangeSel from "../../components/DateRangeSel";
import { React, useState, useEffect } from 'react';
import Chart from 'chart.js/auto';
import { CategoryScale } from 'chart.js';
import 'chartjs-adapter-luxon';
import zoomPlugin from 'chartjs-plugin-zoom';
import { getCellIds } from '../../services/cell';
import { getTerosData } from '../../services/teros';
import { getPowerData } from '../../services/power';
import PwrChart from '../../charts/PwrChart/PwrChart';
import VChart from '../../charts/VChart/VChart';
import VwcChart from '../../charts/VwcChart/VwcChart';
import TempChart from '../../charts/TempChart/TempChart';
import { DateTime } from 'luxon';
import DownloadBtn from '../../components/DownloadBtn';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import DateRangeSel from '../../components/DateRangeSel';
Chart.register(CategoryScale);
Chart.register(zoomPlugin);

Expand Down Expand Up @@ -50,7 +50,7 @@ function Dashboard() {
datasets: [
{
data: [],
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
},
],
Expand All @@ -60,25 +60,25 @@ function Dashboard() {
datasets: [
{
data: [],
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
yAxisID: "vAxis",
yAxisID: 'vAxis',
},
{
data: [],
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
yAxisID: "cAxis",
yAxisID: 'cAxis',
},
],
});
const [pwrChartData, setPwrChartData] = useState({
label: [],
datasets: [
{
label: "Voltage",
label: 'Voltage',
data: [],
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
},
],
Expand All @@ -87,18 +87,18 @@ function Dashboard() {
label: [],
datasets: [
{
label: "VWC",
label: 'VWC',
data: [],
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
yAxisID: "vwcAxis",
yAxisID: 'vwcAxis',
},
{
label: "EC",
label: 'EC',
data: [],
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
yAxisID: "ecAxis",
yAxisID: 'ecAxis',
},
],
});
Expand All @@ -119,22 +119,22 @@ function Dashboard() {
labels: powerDataObj.timestamp,
datasets: [
{
label: "Voltage (v)",
label: 'Voltage (v)',
data: powerDataObj.v,
borderColor: "lightgreen",
borderColor: 'lightgreen',
borderWidth: 2,
fill: false,
yAxisID: "vAxis",
yAxisID: 'vAxis',
radius: 2,
pointRadius: 2,
},
{
label: "Current (µA)",
label: 'Current (µA)',
data: powerDataObj.i,
borderColor: "purple",
borderColor: 'purple',
borderWidth: 2,
fill: false,
yAxisID: "cAxis",
yAxisID: 'cAxis',
radius: 2,
pointRadius: 2,
},
Expand All @@ -144,9 +144,9 @@ function Dashboard() {
labels: powerDataObj.timestamp,
datasets: [
{
label: "Power (µV)",
label: 'Power (µV)',
data: powerDataObj.p,
borderColor: "orange",
borderColor: 'orange',
borderWidth: 2,
fill: false,
radius: 2,
Expand All @@ -164,22 +164,22 @@ function Dashboard() {
labels: terosDataObj.timestamp,
datasets: [
{
label: "Volumetric Water Content (VWC)",
label: 'Volumetric Water Content (VWC)',
data: terosDataObj.vwc,
borderColor: "blue",
borderColor: 'blue',
borderWidth: 2,
fill: false,
yAxisID: "vwcAxis",
yAxisID: 'vwcAxis',
radius: 2,
pointRadius: 2,
},
{
label: "Electrical Conductivity (µS/cm)",
label: 'Electrical Conductivity (µS/cm)',
data: terosDataObj.ec,
borderColor: "black",
borderColor: 'black',
borderWidth: 2,
fill: false,
yAxisID: "ecAxis",
yAxisID: 'ecAxis',
radius: 2,
pointRadius: 2,
},
Expand All @@ -189,9 +189,9 @@ function Dashboard() {
labels: terosDataObj.timestamp,
datasets: [
{
label: "Temperature",
label: 'Temperature',
data: terosDataObj.temp,
borderColor: "red",
borderColor: 'red',
borderWidth: 2,
fill: false,
radius: 2,
Expand Down Expand Up @@ -226,26 +226,26 @@ function Dashboard() {

return (
<Stack
direction="column"
divider={<Divider orientation="horizontal" flexItem />}
justifyContent="spaced-evently"
sx={{ height: "100vh", boxSizing: "border-box" }}
direction='column'
divider={<Divider orientation='horizontal' flexItem />}
justifyContent='spaced-evently'
sx={{ height: '100vh', boxSizing: 'border-box' }}
>
<Stack
direction="row"
divider={<Divider orientation="vertical" flexItem />}
alignItems="center"
justifyContent="space-evenly"
direction='row'
divider={<Divider orientation='vertical' flexItem />}
alignItems='center'
justifyContent='space-evenly'
sx={{ p: 2 }}
flexItem
>
<FormControl sx={{ width: 1 / 4 }}>
<InputLabel id="cell-select">Cell</InputLabel>
<InputLabel id='cell-select'>Cell</InputLabel>
<Select
labelId="cell-select-label"
id="cell-select"
labelId='cell-select-label'
id='cell-select'
value={selectedCell}
label="Cell"
label='Cell'
defaultValue={selectedCell}
onChange={(e) => {
setSelectedCell(e.target.value);
Expand All @@ -260,7 +260,7 @@ function Dashboard() {
})}
</Select>
</FormControl>
<Box display="flex" justifyContent="center" alignItems="center">
<Box display='flex' justifyContent='center' alignItems='center'>
{/* <LocalizationProvider dateAdapter={AdapterLuxon}>
<DateTimePicker
label="Start Date"
Expand Down Expand Up @@ -289,21 +289,22 @@ function Dashboard() {
</Stack>
<Grid
container
sx={{ height: "100%", width: "100%", p: 2 }}
alignItems="center"
justifyContent="space-evenly"
spacing={3}
sx={{ height: '100%', width: '100%', p: 2 }}
alignItems='center'
justifyContent='space-evenly'
columns={{ xs: 4, sm: 8, md: 12 }}
>
<Grid item sx={{ height: "50%" }} xs={4} sm={4} md={5.5} p={0.25}>
<Grid item sx={{ height: '50%' }} xs={4} sm={4} md={5.5} p={0.25}>
<VChart data={vChartData} />
</Grid>
<Grid item sx={{ height: "50%" }} xs={4} sm={4} md={5.5} p={0.25}>
<Grid item sx={{ height: '50%' }} xs={4} sm={4} md={5.5} p={0.25}>
<PwrChart data={pwrChartData} />
</Grid>
<Grid item sx={{ height: "50%" }} xs={4} sm={4} md={5.5} p={0.25}>
<Grid item sx={{ height: '50%' }} xs={4} sm={4} md={5.5} p={0.25}>
<VwcChart data={vwcChartData} />
</Grid>
<Grid item sx={{ height: "50%" }} xs={4} sm={4} md={5.5} p={0.25}>
<Grid item sx={{ height: '50%' }} xs={4} sm={4} md={5.5} p={0.25}>
<TempChart data={tempChartData} />
</Grid>
</Grid>
Expand Down

0 comments on commit 115d375

Please sign in to comment.