Code an amazing radar chart that shows our team stats and shows the team's totals for defense, offense, and overall score. Leverage chartJS and a React version of the library called React-chartjs-2 to build this quicker than manually code the component. Code a quick algorithm to calculate the totals for the team and return it into a percentage of the potential the team could attain if they had perfect scores on the ratings we gave them.
- [Instructor] In the last video we basically created…all the variables that we need for our chart.…In this video we'll create totals that we need…on the right side of the Team Stats.…So if you go back to the view,…you'll see that on the left we have…the radar charts with all the different labels.…On the right we have those totals,…so we need to create those and make sure…they show up on the view.…So let's go back to our editor…and let's recap just a bit before we move along.…If you've been following along, on the last video…you should have created eight different variables.…
And if you don't, please stop the video…and make sure that you have them.…So you should have ballManipulation,…kickingAbilities, passing Abilities,…duelTackling, fieldCoverage,blockingAbilities,…gameStrategy, and playmakingRisks.…And also those should be reflected…in your data array in your object.…So you should have each of these variables in the array.…If you don't please take the time and pause the video,…and please put them in there.…
So the next thing we're going to do is create…
- Setting up your editor
- Understanding the file structure and player components
- Setting up static data
- Routing with React
- Creating a schema and player form
- Building functions to add a player
- Adding a user login
- Assigning players to the user
- Securing database transactions
- Editing and deleting players
- Using Chart.js to display team stats
Skill Level Intermediate
1. Setting Up
2. React Refresher: Basic Player View
3. Reduce Player Stats
4. Players CRUD and Team View
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.