Skip to content
This repository was archived by the owner on Oct 1, 2025. It is now read-only.

chase‐car‐dashboard Project File Structure Walkthrough

Jump to bottom
srlam4634 edited this page Apr 21, 2024 · 1 revision

image

  1. Backend/ - The directory containing all of our backend code.

  • components/ - The directory contains all API related code that fetches data from database

    • init.py For marking directory

    • component_router.py API router, all components are linked to the program by this file

    • graph_api.py API for obtaining graph data

    • record_data.py API for generating excel file from database request

  • core/ - The director containing all code related to live data processing

    • init.py For marking directory

    • comms.py All code related to live communication, include data sockets and data parser

    • core_api.py API for live frontend data, send latest packet received

    • db.py Interface for fetching data from database, any database operation should be done through this interface

  • .babelrc, package.json, and package-lock.json - package.json contains metadata, such as dependencies and scripts, relevant to the backend for npm. Don't worry about the other two files.

    • If you need to add or change the version of a dependency, it should be done in package.json. Then, run npm -i in the Backend/ directory in your terminal to update the dependencies.

  • framework/ - The directory contains main router of the program and used for spawning necessary processes

    • init.py For marking directory

    • process.py For spawning threads and subprocesses needed

    • router.py project main router, links core and components router

  • .gitignore Put files in backend you want to be ignored by git here

  • config.py Program wise configuration file, put any user defined variables here

  • main.py This launches the program!

  • setup.py For pip to automatically install dependencies, any new libraries should be added into this file. to install dependencies run pip3 install .

  1. DataGenerator/ - The directory containing all of the code relevant to the data generator for this project.

  • gps_dataset Data for mocking gps location

  • src/ - This directory contains the main files for the data generator.

    • car.js - This file is not used in the project.

      • This file was intended to have a car model that generated more realistic data for our engineering dashboard than a random number generator. However, since the car model would have to change whenever we would change the data format (sc1-data-format/format.json), which went against the submodule’s purpose of propagating changes in the data format to the dashboard with minimal changes to the code, this idea was abandoned.

    • server.js - Contains a random number generator that parses the data format and generates random data for each piece of data listed in the format. It generates this data at fixed intervals and sends it to the backend using TCP.

See below

Below

lower!

.babelrc, package.json, and package-lock.json - package.json contains metadata, such as dependencies and scripts, relevant to the data generator for npm. Don't worry about the other two files.

If you need to add or change the version of a dependency, it should be done in package.json. Then, run npm -i in the DataGenerator/ directory in your terminal to update the dependencies.

README.md - A readme for the DataGenerator/ directory.

Frontend/ - The directory containing all of our front end code.

node_modules/ and public/ - public/ contains files related to the app, including index.html, which is the actual HTML document for the webpage and will be filled with the generated HTML for the app. However, you will most likely not need to edit these files, so don’t worry about them.

src/ - The directory containing the main code for the front end.

Components/ - The directory containing the custom components for the app. Each component and its assets/child components (with the exception of the Dashboard component and its child components that are in other directories) are grouped in directories.

BatteryCells/ - The components related to the BatteryCells and BatteryPack components.

The BatteryCells component displays information about each group of battery cells within the pack.

The BatteryPack component displays information related to the battery pack as a whole.

Dashboard/ - The components and assets for the Dashboard component. The Dashboard component is the top-level custom component for the app. It includes the code for retrieving data from the backend via an HTTP request and distributing it to all of its child components.

Faults/ - The FaultsView component and the image assets used within it. This component displays faults that occur with the solar car. The image assets are the icons that indicate each fault.

GeneralData/ - The DriverComms and IOView components.

The DriverComms component displays general information about the driver/cabin, as well as communication statuses.

The IOView component displays information about the low voltage boards.

Graph/ - The CustomGraph component and its assets and child components. The CustomGraph component is the generic graph component both new and saved graphs. CustomGraph.js also contains a GraphNameModal component, which is used for entering a name for a graph and saving it.

graph-data.json - Data needed for grouping pieces of data and cleaning up their names within the GraphSelectModal (see below).

GraphSelectModal.js - The modal for selecting datasets and time periods (/history lengths) to be shown in each graph.

PPC_MPPT/ - The PPC_MPPT component and its child components. The PPC_MPPT component displays information about the power path controller and maximum power point tracker.

Shared/ - Currently contains assets and components that are shared among the components listed above. However, this would ideally contain only components that are shared among the above components.

CustomScripts/ - A directory containing scripts that we write.

convertData.mjs - A script to parse the data format (sc1-data-format/format.json) and create the graph-data.json file described above (see 5).

updateDataConstants.mjs - A script to parse the data format and create an object listing useful constants (units and nominal min/max) for each piece of data. The object with the constants are written to a file called data-constants.json (see 3.b.v).

styles/ - Contains styling files for the front end.

theme.js - Contains global styles (e.g. default component styles) and configuration options (e.g. color mode settings) for the theme of the front end.

App.css, App.js, and App.test.js - Top-level files for the React App.

App.css - Stylesheet for the top-level React component (App). However, we don’t use this file for styling.

App.js - Top-level React component. This contains the ChakraProvider along with our theme settings, and it is where our Dashboard component is included within the app. All components within the app are descendants of this component.

App.test.js - Basic test file for the app. We do not currently have any tests set up, but this is something we will likely work more with this semester.

data-constants.json - JSON file containing constants for each piece of data as described by the data format. This file is generated by updateDataConstants.mjs (see 3.b.ii.2).

index.css and index.js - Files for styling and rendering our app. Don’t worry too much about these files.

index.css - Another style sheet that currently only has generic font styles. It can be used for global styles, but we set up our global styles in theme.js (see 3.b.iii.1) instead.

index.js - This file will run when the app starts. It imports the app code from App.js and renders it, along with a color mode script from Chakra UI, in the root div element in index.html (see 3.a).

reportWebVitals.js and setupTests.js - Files for setting up tests and measuring the performance of the app. We don’t currently use these files, but they may be useful when we set up more tests and improve our app’s performance later in the semester.

reportWebVitals.js - Used for measuring and analyzing performance metrics of the app.

setupTests.js - Contains test configurations.

babelrc, package.json, and package-lock.json - package.json contains metadata, such as dependencies and scripts, relevant to the front end for npm. Don't worry about the other two files.

If you need to add or change the version of a dependency, it should be done in package.json. Then, run npm -i in the Frontend/ directory in your terminal to update the dependencies.

node-modules/ - Don’t worry about these.

.gitignore and .gitmodules - .gitignore lists files that are ignored by git. For example, this includes node-modules/ and dist files. .gitmodules contains information about the submodule mentioned in 1.a.i.

.convertTZstamp.ps1 For converting time stamps

Dockerfile Instruction for docker to auto build the project

linux-pull-run.sh Bash script for automatic docker setup and launching the program

See below

See below

package.json and package-lock.json - package.json contains metadata, such as dependencies and scripts, relevant to the whole project for npm. Don't worry about the other file.

This package.json does not have any dependencies in it. Instead, we have dependencies for the front end, backend, and data generator included in the package.jsons in Frontend/, Backend/, and DataGenerator/. However, you should still be able to run npm -i in the root project directory in your terminal to update the dependencies in Frontend/, Backend/, and DataGenerator/.

README.md - This project’s readme. It contains details about this repository, such as libraries used in the project and how to set up, update, run, and contribute to the dashboard.

versioning.md - Versioning guideline for new development to the engineering dashboard

windows-pull-run.bat - Powershell script for automatic docker setup and launching the program

Clone this wiki locally