======Dashboard Version 2====== Currently in development. This is the next generation of 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_v2]] === 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 === Overall Block Diagram === {{ :weatherbox:dashboard_v2:overall_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_v2::techstack::start |Tech Stack Overview]]\\ [[weatherbox::dashboard_v2::semantic::start |CSS Framework Design Doc]]\\ [[weatherbox::dashboard_v2::graphsoftware::start |Graph Library Design Doc]]\\ [[weatherbox::dashboard_v2::mappingsoftware::start |Mapping Software Design Doc]]\\ [[weatherbox::dashboard_v2::react::start |React Design Doc]]\\ [[weatherbox::dashboard_v2::redux::start |Redux Design Doc]]\\ [[weatherbox::dashboard_v2::webapi::start |Weatherbox API Design Doc]]\\ [[weatherbox::dashboard_v2::database::start |Database Design Considerations]]\\ [[weatherbox::dashboard_v2::reusablecomp::start |Designing Reusable Components]]\\ [[weatherbox::dashboard_v2::GraphGenerator::start |Graph Generator]]\\ [[weatherbox::dashboard_v2::landingpage::start |Landing Page]]\\ [[weatherbox::dashboard_v2::weatherboxes::start |Weatherboxes Page]] \\ === Dashboard Meeting Notes === ** Fall 2019 **\\ August \\ [[UST: Meeting Minutes Aug.30]]\\ September\\ [[UST: Meeting Minutes Sept.6]]\\ [[UST: Meeting Minutes Sept.13]]\\ [[UST: Meeting Minutes Sept.20]]\\ [[UST: Meeting Minutes Sept.27]]\\ October\\ [[UST: Meeting Minutes Oct. 4]]\\ [[UST: Meeting Minutes Oct. 11]]\\ [[UST: Meeting Minutes Oct. 18]]\\ [[UST: Meeting Minutes Oct. 25]]\\ November\\ [[UST: Meeting Minutes Nov. 1]]\\ [[UST: Meeting Minutes Nov. 8]]\\ [[UST: Meeting Minutes Nov. 15]]\\ [[UST: Meeting Minutes Nov. 22]]\\ December\\ [[UST: Meeting Minutes Dec. 6]]\\ ** Spring 2019 **\\ January \\ [[UST: Meeting Minutes Jan. 23 & 25]]\\ [[UST: Meeting Minutes Jan. 30]]\\ February \\ [[UST: Meeting Minutes Feb. 1]]\\ [[UST: Meeting Minutes Feb. 6 & 8]]\\ [[UST: Meeting Minutes Feb. 13 & 15]]\\ [[UST: Meeting Minutes Feb. 20 & 22]]\\ [[UST: Meeting Minutes Feb. 26]]\\ March \\ [[UST: Meeting Minutes Mar. 1]]\\ [[UST: Meeting Minutes Mar. 6 & 8]]\\ [[UST: Meeting Minutes Mar. 13 & 15]]\\ [[UST: Meeting Minutes Mar. 27 & 29]]\\ ** Fall 2018 **\\ September\\ [[UST: Meeting Minutes Sept. 3 & 7]]\\ [[UST: Meeting Minutes Sept. 10 & 14]]\\ [[UST: Meeting Minutes Sept. 17 & 21]]\\ [[UST: Meeting Minutes Sept. 24 & 28]]\\ October\\ [[UST: Meeting Minutes Oct. 1 & 5]]\\ [[UST: Meeting Minutes Oct. 8]]\\ [[UST: Meeting Minutes Oct. 12]]\\ [[UST: Meeting Minutes Oct. 15]]\\ [[UST: Meeting Minutes Oct. 22 & 26]]\\ November\\ [[UST: Meeting Minutes Nov. 2]]\\ [[UST: Meeting Minutes Nov. 5]]\\ [[UST: Meeting Minutes Nov. 9]]\\ [[UST: Meeting Minutes Nov. 16]]\\ [[UST: Meeting Minutes Nov. 19]]\\ [[UST: Meeting Minutes Nov. 26 & 29]]\\ December\\ [[UST: Meeting Minutes Dec. 3]]\\ ** Spring 2018 **\\ January\\ [[UST: Meeting Minutes January 17, 2018]]\\ [[UST: Meeting Minutes January 24, 2018]]\\ [[UST: Meeting Minutes January 31, 2018]]\\ February\\ [[UST: Meeting Minutes February 7, 2018]]\\ [[UST: Meeting Minutes February 14, 2018]]\\ [[UST: Meeting Minutes February 21, 2018]]\\ [[UST: Meeting Minutes February 28, 2018]]\\ March\\ [[UST: Meeting Minutes March 7, 2018]]\\ [[UST: Meeting Minutes March 14, 2018]]\\ [[UST: Meeting Minutes March 21, 2018]]\\ April\\ [[UST: Meeting Minutes April 4, 2018]]\\ [[UST: Meeting Minutes April 11, 2018]]\\ [[UST: Meeting Minutes April 18, 2018]]\\ [[UST: Meeting Minutes April 25, 2018]]\\ === Current Members S19 === Jianna Orias \\ Allen Namoca\\ Andrew Salazar\\ === Past Members SP18 === Lead Developer: Kevin Cho\\ EE496: Gordon Li \\ Kyle Chan \\ Jonathan Lau \\ Akira Vernon \\ Kevin Liu \\ 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 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 now days) * 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]] === Current SCEL Software Members === 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 git checkout -b "issue#" (# - 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 yarn dev - 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. ---- ===== Problems/Resolutions ===== Some of the problems that the team has faced will be shown below. - D3.js is difficult to implement into a React App. The packages are deprecated and the documentation for making new D3 graph classes is weak. ---- ===== Presentations ===== {{ :weatherbox:dashboard_v2:dashboard_proposal_presentation.pdf | Proposal}}\\ {{ :weatherbox:dashboard_v2:dashboard_pdr_presentation.pdf | Preliminary Design Review (PDR)}}\\ {{ :weatherbox:dashboard_v2:dashboard_cdr_presentation.pdf | Critical Design Review (CDR)}}\\ {{ :weatherbox:dashboard_v2:dashboard_final_presentation.pdf | Final}}\\