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 this video, we'll create an algorithm…that will allow us to get an overall team rating…for each skill, and visualize those skills on the chart.…If you look at the static data right now,…we have ball manipulation that is a 65,…and the other numbers as well.…So let's make those numbers live and dynamic.…And the first thing I'm going to do is just briefly…explain what we're doing here.…So, the first thing we need to do,…and this is with su tu go.…
The first thing you need to go is…get a total number for that skill set for the teams.…So, for example, for ball manipulation,…we need to get what is the total for the team,…so we can set this in a variable, for example.…Team.…And then, we need to get the total…possible for the team.…
So, remember our scoring system is zero, two, three.…So, if we get the possible…number for the team…or potential number,…so if everybody has a two…or if everybody has a three,…then it's three times the number of players.…So, remember we have set a variable which calculates…the number of players in the array.…
- 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
Learning Meteor Application Developmentwith Isaac Strack1h 52m 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.