{"id":20763315,"url":"https://github.com/tinspham209/sda-client","last_synced_at":"2026-05-19T10:36:03.863Z","repository":{"id":42662042,"uuid":"294866929","full_name":"tinspham209/SDA-client","owner":"tinspham209","description":"Scientific Research: A Collaborative Web-Based Environmental Data Visualization and Analysis in Vietnam.","archived":false,"fork":false,"pushed_at":"2023-12-15T08:34:46.000Z","size":1641,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T17:55:04.289Z","etag":null,"topics":["beautiful-react-diagrams","react-dnd","reactjs","redux-toolkit"],"latest_commit_sha":null,"homepage":"http://sda-research.ml/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinspham209.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-12T04:05:59.000Z","updated_at":"2020-12-25T16:35:30.000Z","dependencies_parsed_at":"2025-03-11T17:55:02.933Z","dependency_job_id":"d960c66f-d5f4-4720-9e44-6ca28db03452","html_url":"https://github.com/tinspham209/SDA-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tinspham209/SDA-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2FSDA-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2FSDA-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2FSDA-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2FSDA-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinspham209","download_url":"https://codeload.github.com/tinspham209/SDA-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2FSDA-client/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266552738,"owners_count":23947183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beautiful-react-diagrams","react-dnd","reactjs","redux-toolkit"],"created_at":"2024-11-17T10:43:47.221Z","updated_at":"2026-05-19T10:36:03.827Z","avatar_url":"https://github.com/tinspham209.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Science Research Project: Smart Dashboard Application - Client\n\n## Date: 20 - Aug to 25 - Dec - 2020\n\n### Functions:\n\n- Scientific research: Environment Analysis System in Vietnam\n- Dataset:\n  - Climate:\n    - [x] Temperature\n    - [x] Humidity\n    - [x] Rainfall\n  - [ ] Atmosphere\n  - [x] Population\n  - Industry\n    - [x] Industry Production\n  - Forest\n    - [x] Forest Cover Area\n    - [x] AfForestation\n- Feature:\n  - [x] Filter by year\n  - [x] Filter by city\n  - [x] Filter by year \u0026 cities\n  - [x] Filter by period of ciy\n  - [x] Statistics merge\n  - [ ] Simple Merge\n- Visualization\n  - [x] Maps\n  - [x] Table\n  - Charts\n    - [x] Column\n    - [x] Line\n    - [ ] Pie\n    - [x] Two Y-Axis Charts\n    - [x] Three Y-Axis Charts\n\n### Releases\n\n- https://sda-research.ml\n- http://sda-research.surge.sh\n\n### Server Endpoint:\n\nhttp://server.sda-research.ml\n\n### Screenshot\n\n\u003cimg src=\"./screenshot.png\" alt=\"screenshot1\"/\u003e\n\u003cimg src=\"./screenshot2.png\" alt=\"screenshot2\"/\u003e\n\n### Plan Of Action\n\n1. Initial Project\n2. Setup React \u0026 Install dependencies\n3. Setup Router\n4. Navbar component\n5. InfoSection component\n6. Add data to homepage\n7. Create Navbar Dashboard\n8. Implement Redux toolkit to app\n9. Update Navbar Dashboard\n10. Import Material-UI\n11. Grid layout for Dashboard\n12. Toolbar component\n13. Initial content component\n14. Setup draw diagrams\n15. Refactor Toolbar component with Redux\n16. addNewNode \u0026 removeNode\n17. First layout of Node\n18. Viz `Climate/Humidity` in TreeView\n19. Initial `LineChart` \u0026 `ColumnChart`\n20. `Info` container\n21. `Properties` component\n22. `Widget Infos` component\n23. `Output Log` component\n24. Viz `Industry/IndustryProduction` in TreeView\n25. Initial `Maps`\n26. Viz `Industry/IndustryProduction` 2012 in Maps\n27. Viz `Humidity` in `LineChart`\n28. Viz `Humidity` in `ColumnChart`\n29. Draw connector when onClick on RUN btn\n30. Clear all node when onClick on NEW btn\n31. Visualization `Humidity`\n32. Visualization `Temperature`\n33. Visualization `Rainfall`\n34. Visualization `Industry`\n35. Visualization `Forestation`\n36. Visualization `Population`\n37. Merge two data cube\n38. Visualization when merge two data cube\n39. Merge three data cube\n40. Visualization when merge three data cube\n\n### Next Steps:\n\n- Bug:\n  - Select year, cities, click run \u003e working \u003e After that, change another year \u003e click run \u003e Bug: city/2013/year/2013. Only can select year and cities again so that is working\n  - Select 1 city and multi years is not working\n\n### Directory Structure\n\n```\n\n.\n├── package.json\n├── package-lock.json\n├── README.md\n├── deploy-firebase\n├── firebase.json\n├── .gitignore\n└── src\n    ├── api\n        ├── vnId.js\n        └── index.js\n    ├── app\n        ├── store.js\n        ├── ItemTypes.js\n        ├── slice\n          └── dashboardSlice.js\n    ├── assets\n        └── img\n    ├── components\n        ├── Footer\n        ├── InfoSection\n        ├── Modal\n        ├── Navbar\n        ├── NavbarDashboard\n        ├── OutputLog\n        ├── Properties\n        ├── Toolbar\n          └── ListItem\n        ├── UI\n          ├── NotFound\n          ├── Spinner\n          └── index.js\n        ├── Visualization\n          ├── ColumnChart\n          ├── LineChart\n          ├── LineChartThreeAxis\n          ├── LineChartTwoAxis\n          ├── Maps\n          ├── Table\n        ├── WidgetInfo\n        ├── Widget\n          ├── Climate\n            ├── Humidity\n            ├── Rainfall\n            └── Temperature\n          ├── Forest\n            └── Afforestation\n          ├── Industry\n            └── Industry Production\n          ├── Operators\n            └── Statistic Merge\n          ├── Population\n           └── Population\n          ├── Visualization\n            ├── ColumnChart\n            ├── LineChart\n            ├── LineChartThreeAxis\n            ├── LineChartTwoAxis\n            ├── Maps\n            └── Table\n          └── index.js\n        ├── index.js\n        └── ScrollToTop.jsx\n    ├── containers\n        ├── Info\n        ├── MashupContent\n        ├── ModalIsDevelop\n        └── Dashboard\n    ├── data\n        └── index.js\n    ├── pages\n        ├── About\n        ├── Contact\n        ├── Dashboard\n        └── HomePage\n    ├── App.js\n    ├── GlobalStyles.js\n    ├── deploy-firebase\n    ├── deploy-surge\n    └── index.js\n```\n\nFor the project to build, these must exist with exact filenames:\n\n- `public/index.html` is the page template\n- `src/index.js` is the entry point\n- `src/GlobalStyles.js` is the Global Styles\n- `src/App.js` is the Router\n- `src/api` is\n- `src/containers` is\n- `src/data` is\n\n## Installation Guide\n\n### Production\n\n- Clone this project\n\n```\ngit clone https://github.com/tinspham209/SDA-client\n```\n\n- Install dependencies\n\n```\nnpm install\n```\n\n- Start the server\n\n```\nnpm start\n```\n\n### Development\n\n- Clone this project\n- Install dependencies\n\n```\nnpm install\n```\n\n- Start packager\n\n```\nnpm start\n```\n\n### Tech-Stack\n\n- react\n- @material-ui\n- react-icons\n- react-router-dom\n- styled-components\n- @reduxjs/toolkit\n- axios\n- react-dnd\n- beautiful-react-diagrams\n- highcharts\n\n### Folder function\n\n- `app`: store redux\n- `assets`: store image\n- `components`:\n- `container`:\n- `pages`:\n- `api`\n\n### Component function\n\n- i'll write it as soon as i can 😀\n\n### How to name a folder and a file\n\n- Folder name: - Ex: `InfoSection`\n- Component file name: should be -- Ex: `InfoSection.jsx`\n- Style component file name: should be -- Ex: `InfoSection.elements.js`\n\n### How to import and export module?\n\n- Import:\n\n```js\n//import every thing\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\n//for default export\nimport InfoSection from \"./InfoSection\";\n\n//for named export\nimport { InfoSec, InfoRow } from \"./InfoSection.elements\";\n```\n\n### How to style for each component?\n\n- Create a styled-component file. Ex: `InfoSection.elements.js`\n- Import to `jsx` file\n\n```js\n// InfoSection.jsx\n\nimport { InfoSec, InfoRow } from \"./InfoSection.elements\";\n```\n\n### How to deploy to firebase\n\ni'll write it as soon as i can 😀\n\n### How to setup Redux-Toolkit\n\ni'll write it as soon as i can 😀\n\n### How to update state in Redux of each component\n\ni'll write it as soon as i can 😀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinspham209%2Fsda-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinspham209%2Fsda-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinspham209%2Fsda-client/lists"}