======Dashboard Version 3======

This is the current version of the Dashboard, utilizing a ReactJS framework. This is the next generation of the dashboard that SCEL will be developing as part of Analysis, Distribution, and Visualization of Weather Data for Sustainability Applications.

**Dashboard Repository**:
  * [[https://github.com/scel-hawaii/dashboard_v3_react|Current Dashboard V3 - ReactJS]]
  * [[https://github.com/scel-hawaii/dashboard_v3|Previous Dashboard V3 - HTML]]

=== Design Procedure ===
  - Design and Mock up any new ideas (web pages, functionality, components)
  - Generate electronic copy of any ideas (draw.io or other mock software)
  - Create Design Document for the idea
  - Develop Minimum Viable Product (MVP) based on design document
  - Re-evaluate the design document for any changes
{{ :weatherbox:dashboard_v3:design_procedure.png?600 |}}

=== Overall Block Diagram ===
  - Weatherboxes will send packets to the database
  - Dashboard will pull results from specific weatherboxes in pages
{{ :weatherbox:dashboard_v3:block_diagram.png?600 |}}
----

===== Current Status =====
All design docs and meeting details will be located under the current status tab.

=== Onboarding ===
[[weatherbox::dashboard_v2::onboarding::start |Dashboard Team Onboarding]]\\

=== Design Docs ===
[[weatherbox::dashboard_v3::components::start |Dashboard Components Overview]]\\
[[weatherbox::dashboard_v3::resources::start |Online Resources/Tutorials]]\\
[[weatherbox::dashboard_v3::improvements::start |Future Improvements]]\\

**Previous Relevant Design Docs**:\\
[[weatherbox::dashboard_v2::techstack::start |Tech Stack Overview]]\\
[[weatherbox::dashboard_v2::react::start |React Design Doc]]\\

=== Dashboard Meeting Notes ===
** Spring 2020 **\\
May \\
[[UST: Meeting Minutes May 11 - 15]]\\
[[UST: Meeting Minutes May 4 - 8]]\\

April \\
[[UST: Meeting Minutes Apr. 27 - May 1]]\\
[[UST: Meeting Minutes Apr. 20 - 24]]\\
[[UST: Meeting Minutes Apr. 13 - 17]]\\
[[UST: Meeting Minutes Apr. 6 - 10]]\\
[[UST: Meeting Minutes Mar. 30 - Apr. 3]]\\

March\\
[[UST: Meeting Minutes Mar. 23 - 27]]\\
[[UST: Meeting Minutes Mar. 13]]\\
[[UST: Meeting Minutes Mar. 11]]\\
[[UST: Meeting Minutes Mar. 9]]\\
[[UST: Meeting Minutes Mar. 6]]\\
[[UST: Meeting Minutes Mar. 4]]\\
[[UST: Meeting Minutes Mar. 2]]\\

February \\
[[UST: Meeting Minutes Feb. 28]]\\
[[UST: Meeting Minutes Feb. 24]]\\
[[UST: Meeting Minutes Feb. 21]]\\
[[UST: Meeting Minutes Feb. 19]]\\
[[UST: Meeting Minutes Feb. 14]]\\
[[UST: Meeting Minutes Feb. 12]]\\
[[UST: Meeting Minutes Feb. 10]]\\
[[UST: Meeting Minutes Feb. 7]]\\
[[UST: Meeting Minutes Feb. 5]]\\
[[UST: Meeting Minutes Feb. 3]]\\

January \\
[[UST: Meeting Minutes Jan. 31]]\\
[[UST: Meeting Minutes Jan. 29]]\\
[[UST: Meeting Minutes Jan. 27]]\\
[[UST: Meeting Minutes Jan. 24]]\\
[[UST: Meeting Minutes Jan. 22]]\\

=== Spring 2020 Members ===
Kevin Liu\\
Jianna Orias\\
Andrew Salazar\\
Jonathan Tu\\

----
===== Dashboard Deployment & Development =====
If you are interested in working on the dashboard please contact the current lead developer. The lead developer will be able to give you access to the right repositories and will walk you through the documentation on the wiki.

=== Development Tools ===
If you are planning on joining the dashboard team and have initiated talking to SCEL leadership about making the change, please begin with the following.

  * Download Google Chrome if you do not have it already. (Firefox Quantum is pretty comparable nowadays)
  * In Google Chrome install [[https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en|React Developer Tools]]. This will allow you to debug React-based websites
  * Install Yarn and NPM. We are currently using the Yarn package manager, but npm is also a powerful package manager
  * If you are unfamiliar with Javascript, then please check out [[https://www.freecodecamp.org/|freecodecamp]] to brush up.
  * Read and practice [[http://es6-features.org/|ES6 syntax]] in particular 
  * Look at the [[https://reactjs.org/tutorial/tutorial.html| React documentation]]
  * Understand how to use [[https://www.tutorialspoint.com/git/index.htm|Git]]
=== Local Deployment ===
In order to locally deploy this dashboard, you must have access to the SCEL database. Please contact Kenny or firmware team to create an account. In addition, you must have access to the repository. Once you have granted those accesses, please do the following:
  - Using Git, clone the repository onto your main desktop in the folder you want to work on the project using <code>git clone https://github.com/scel-hawaii/dashboard_v3_react.git</code> 
  - Install the necessary modules using <code>npm install</code>
  - Once the installation is complete, connect to the SCEL database server and login with your credentials by replacing the username in <code>ssh username@server.scel-hawaii.org -p 11144 -L 5432:localhost:5432</code>
  - Once connected, open another terminal, navigate into the api/models/ folder, and test the API using <code>node index.js</code> You should then be able to see the results come into https://localhost:3001. You can preview the result by looking at https://localhost:3001/apple.
  - In another terminal, navigate to the project's main folder and run the dashboard application using <code>npm start</code> You should now see the local deployment of the dashboard with processed information coming from the locally-hosted database through the API. 
=== Developing Steps ===
If you are a current software member and have access to the repository please do the following.
  - Using Git, clone (git clone) the repository onto your main desktop in the folder you want to work on the project
  - Please consult with the lead developer/team member on which issue to work on. See current issues [[https://github.com/scel-hawaii/dashboard_v2/issues|here]].
  - Once assigned an issue create a new branch in the repository using <code>git checkout -b "issue#"</code> (# - issue number). Example branch in repository (issue01, issue02, issue03). You can find the issue # on the github issue you have been assigned.
  - Begin developing! You are free to edit any variables and do anything you can to get your code to work and to complete your issue. Change a few variables here and there and write readable code. You can run the React web app by navigating to the my-app directory and running the command <code>yarn dev</code>
  - If you get some failures, please run yarn install to make sure all dependencies have been added to your folder and node_modules

=== Pushing your code ===
Are you ready to push your code? Please look at the following procedures before you decide to push. 
  - Please triple-check that your code will not break anything currently in production. If this means you need to write some unit tests/integration tests, then please do. More on writing tests later.
  - Find someone to review your code. This can be anyone who has familiarity with the codebase you are currently designing. If your current issue is to fix a "chart bug" and the owner of that component is currently on the software team, then please ask them to review the code in your branch. This can be done informally or through the code review tool on GitHub.
  - If you choose to do the code review informally, then the next step is to generate a code review with the lead developer of the dashboard. This will be the second and final check before merging in your new code. This can be accomplished by pressing the merge tool on the github website for our repository. If you have any questions please ask someone on the software team how to merge and create a code review properly.
  - If you decided to make a formal code review for step 1 you can just add the lead developer to that code review.
  - Once you have received two approvals then you can proceed to merge your changes into the master branch. If anything breaks, you are responsible for reverting those changes and assigning any new issues to yourself.

----
===== Presentations =====
{{ :weatherbox:dashboard_v3:spring_2020_dashboard_proposal_presentation.pdf | Proposal}}\\
{{ :weatherbox:dashboard_v3:spring_2020_dashboard_pdr_presentation.pdf | Preliminary Design Review (PDR)}}\\
{{ :weatherbox:dashboard_v3:spring_2020_dashboard_cdr_presentation.pdf | Critical Design Review (CDR)}}\\
{{ :weatherbox:dashboard_v3:spring_2020_dashboard_final_presentation.pdf | Final}}\\