This page will go over the basics within the Dashboard GitHub repository, covering the layouts, components, and API files. React components are separated for easy repurposing in future coding developments, making them reusable and easier for production purposes. This page will go over the working main components within Dashboard Version 3 and its usage on the webpage.

Located: dashboard_react_v3/src/layouts/home.js
This is the layout page for the main landing page, displaying all collected data from the working weather boxes within the lab. It currently uses all the components and also fetches the data from the database using the API.

Located: dashboard_react_v3/src/layouts/apple.js
This is the layout page for a sample weatherbox page, specifically for the Apple Weatherbox. Unlike the home page, this page only displays the collected data from the Apple weatherbox within the SCEL. It currently uses all the components and also fetches the data from the local database using the API.

Located: dashboard_react_v3/src/components/SidebarComponent/Sidebar.js
This is the component for the Sidebar located on the left side of the webpage. It displays the links to the Home page as well as the individual Weatherbox pages.

Located: dashboard_react_v3/src/components/AverageSelector/AverageSelector.js
This is the component for the Average Selector. It uses the length of the data collected from the layout page and averages it with its getAverage function before displaying the final results onto its separate card. There are averages for humidity, pressure, temperature, and solar irradiance.

Located:dashboard_react_v3/src/components/MapComponent/MapComponent
This component displays the location of the Weatherbox. Currently, there are no GPS readings on Weatherboxes (because they would not be moving), so points are hard-coded into this component. Passing the name of the Weatherbox into this component would display the individual Weatherbox locations; otherwise, all Weatherbox locations would be shown.

Located:dashboard_react_v3/src/components/Graphs/
This component holds the individual graphs for each data (humidity, temperature, pressure, solar irradiance). Currently, the TemperatureGraph has the main code to be placed onto the dashboard. This component would parses through the data and plots the points onto a graph using the LineChart component from the 'recharts' library.

Located: dashboard_react_v3/server/api/models/index.js
This is the index code to test the API on https://localhost:3001. It contains the individual links that would test the API queries functions. Currently, the database only holds apple data, so only https://localhost:3001/apple would show weatherbox data.

Located: dashboard_react_v3/server/api/controllers/queries.js
This is the code that queries the database. It contains the individual functions to get Weatherbox data using PostgreSQL statements. If the request works, the results would be shown as a JSON response; otherwise, it would throw an error. Currently, only the ten most recent results are being pulled from the database.

Contributing authors:

Created by kliu on 2020/05/13 01:34.