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.
- [Narrator] In this video, we'll add a Radar chart…to see the statistics of the team,…plus an area with the team totals for defense,…offense, and the actual totals of the team.…We'll leverage a library called React-chartjs-2,…which has built in components for all kinds of charts.…The very first thing you can see,…we added a few players to our teams.…If you haven't done so, please pause the video and do so.…When that is done, please go to this link.…This is basically the Repo that we're going to use…to do the charts, and has all kinds of built in components…for all the charts that are included in chartjs.…
The very first thing I want you to do…is go to the Examples,…go to the Components,…and go to Radar.…In a few seconds, we'll copy and paste…the exact code from here, but first we'll install it.…Let's go back to the terminal, and for Windows folks,…the Command Line Interface, stop the server,…Control+C, same thing for Windows folks,…and then let's do "yarn add react-chartjs-2,"…and this will add the dependencies…
- 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.