devfel / forage-hybrid-table

Table and Chart presentation of data gathered from the University of Florida Field Day. This is a responsive project using HTML, CSS, TypeScript and React.

Hybrid Trial Table - Forage

Corn Silage and Forage Field Day - University of Florida - Animal Sciences

🔗 Try it live at: https://devfel.github.io/forage-hybrid-table/

---

Table and Chart presentation of data gathered from the University of Florida Field Day.

This is a responsive project using HTML, CSS and TypeScript and React.

---

📝 Table of Contents

• Test Here
• Application Features
• Getting Started
• Dependencies
• Built Using
• Acknowledgements
• Licenses
• Authors

---

🕹 Test Here

https://devfel.github.io/forage-hybrid-table/

---

🧐 Application Features

• Switch between table and chart: Buttons to switch from the table view to the chart view.
• Data in JSON file: Data gathered from excel file and converted into a JSON file.
• Search, Filter and Adition Information: In the table it is possible to filter data using the fielter fields or search for specific information in the search bar. It is also possible to show additional on a specific hybrid by clicking in the show details button.

With this application the user is able to:

1. navigate between two pages.
   
2. list all the hybrid data in a table format
   
3. check the scatter plot chart with all the hybrids
   

---

🏁 Getting Started

You can clone the repository through Command Prompt or Terminal just by typing:

git clone https://github.com/devfel/forage-hybrid-table.git

or download the zip from the green "Code" button.

Install dependencies packages with yarn

yarn

to run localy it is possible to using the yarn start command:

yarn start

---

🔁 Dependencies

Some project library dependencies includes but are not limited to:

• "@material-ui/core": "^4.12.3",
• "axios": "^0.21.1",
• "material-table": "^1.69.3",
• "polished": "^4.1.3",
• "react": "^17.0.2",
• "react-dom": "^17.0.2",
• "react-google-charts": "^3.0.15",
• "react-modal": "^3.14.3",
• "react-scripts": "4.0.3",
• "recharts": "^2.1.0",
• "styled-components": "^5.3.0",
• "web-vitals": "^1.0.1",
• "yarn": "^1.22.11"
• "gh-pages": "^3.2.3",
• "typescript": "^4.1.2"

---

⛏️ Built Using

• ReactJS - Web Framework
• Typescript - Programming Language
• JavaScript - Programming Language
• HTML - Markup Language
• CSS - Style Sheets
• JSON - Object Notation

---

🎉 Acknowledgements

• JSON file created based on data acquired from University of Florida research.

---

📝 Liceses

• Distributed under the MIT License - see the LICENSE.md file for details.

---

✍️ Author

• @devfel - Luiz Flávio Felizardo