Expenses | Creating a Statistics Page using react-chartjs-2

hey welcome to this video today we're going to be expanding our expenses application this is an application that we have been building over several videos so if you're new to the channel or this video please be sure to check those out so we're going to add this statistics page now so if we click here we're going to show a little donut with the expenses per category so if we go click click back to home we can see the expenses again so pretty much the donut is going to show groceries but it's going to add these two numbers up and it's going to show in the donut it's going to show student loans gas and credit card this is going to be dynamic so whatever we add here is what is going to show up on the actual donut so let's say we add one for we don't have eating out yet so let's do 58 here we add it so this is added and if we go to statistics we should be able to see eating out 58 as well as all of the other ones on this video we're going to make use of short js redux react and net don't forget to subscribe if you haven't already and let's get started alright so i have opened expenses.front end our frontend project in visual studio code and i also have open a terminal right here remember you can go to terminal at the top and click on your terminal and it would just open a terminal for you if you're using visual studio code and the first thing we're going to do is install charts this is what we or sharp this is what we're going to be using to display our statistics so let's do npm install react chart js dash 2 and let's do chart.js and hit enter all right now that it's finished let's head over to components and let's open up navbar and in here we want to add a couple of new routes we want to add one for our statistics and one for homepage that way once we navigate towards statistics and we want to go back to the homepage we can actually go back to it so right here if it's logged in we actually want to show more than just a log out now so let's do a diff and let's bring it down and wrap it up there you go and let's do a style we can do display flex and we can do align items center yeah format this and then we can do nav link style margin left let's give it one and then do a variant link and this one is going to point to home page so here's the root and then let's call it like home let's close this perfect now let's add one for statistics so nav link let's give it same style so i'm going to copy this actually and i'm going to copy all this stuff all right and this is going to be statistics there you go if i can spell that correctly yep okay and let's close it here and there you go if you were to do now an npm start on your console and this app should show up and if you run your backend and you log into an account you should be able to see now the button home and statistics so if you click on statistics it should bring you to your localhost slot column your port statistics as you can see it has page not found so we're missing some configuration on our react router and so we're going to do that next but if we click home it will take you back to our home page let's go ahead and create our statistics page so under components we can right click right here to new file and let's do statistics page that js let's go ahead and import donut from react short just to go and then we can do const statistics page the end we can do export default statistics page there you go and in here we can do return let's do a div and inside here we can have actually let's give it some style we can say style and we're going to do max with i'm going to copy this let's paste it here max width max height let's do margin auto that way centers and text align center okay inside of this let's do an h4 and let's give it some style as well so we can say margin top 10 pixels let me out of format that there you go and we can say expenses per category and right here is where we're going to show our donut now we will need to pass in data to it so we're going to do data and pass in a data object now let's create this data object so up here we can do const data and this would need to have labels so we're going to do labels this is going to be an array so we can do say shopping credit card this is just going to be a test so let's leave it like this for now let's do a data set where data sets and this is going to have the actual data or the numbers it's actually going to do be an array as well so we can have numbers say we do here like 10 comma and then do like three then lastly we got to do the background colors so we can do background color and i have some colors here that i'm just going to paste save time there you go so hot blue red yellow green and so on and so forth so now we have a statistics component and it has this data object and it has labels so this is going to be well actually it's going to show up on the donut itself so it's going to show shopping and credit card so how much of shopping is going to be 10 how much for a credit card it's going to be three and then the colors are going to show is in order so first going to show blue and then red and then these are not going to be used unless we have more labels so if we scroll down a little bit we can see that we have a div inside the diff we have this h4 which is just a heading same expenses per category and then we're just going to show our our donut and that's it for now we're going to finish hooking this up and we're going to give it a try before we actually try to put our data in here in labels and in data let's go ahead and open up our app js and if we scroll down or actually before we scroll down we can actually copy one of these references and do a quick import of statistics page there you go so we import this right at the back and if we scroll down and right here we can add a new route so we can do route path and we can do statistics and we're gonna do a render just like we have above pretty much and if it's locked in we want to render our new page so statistics page else we just want to go to sign in page previously when we checked our browser we had patient app found and that's because we didn't have this route added yet but now since we have slash statistics whenever we go to that page we should be able to render our component so pretty cool let's save this and let's check our browser okay so i'm at the browser let's click on set and we can see shopping and credit card and if you go to shopping we can see is value number 10 and credit card is valid number three cool little thing is if we click on this thing we get this for free pretty much so that's pretty awesome now that we have these donuts set up and the page set up and it's working the routing we can go back to home and go back to statistics then i think it's a good point for us to actually have real data here so we already know how this works we already know how the donor wants the data so on and so forth so let's actually go and get the actual data that we need essentially getting all the labels and all of the data itself of the amount is going to be calculated by the backend so we're going to make an endpoint we're going to call that endpoint that endpoint is going to return a list of just unique values or subscriptions or categories whatever you want to call it and its corresponding amounts so say there is three shopping each one has five bucks on it then that's going to be the backend is going to return shopping and it's going to return the number 15 along with it so that's going to be the back-end responsibility to do in the front end we need to make sure we call that endpoint once we retrieve that data from the back end we're going to store in our state and then eventually display it on the stats page but let's take it a step at a time so let's start off by creating that service that is going to make that call to our endpoint or our packet so let's right click on services and do new file and let's call this statistics dot js okay in here we have to import axis and this should be familiar because we're going to follow the same pattern that we are using for our other services so let's do const axios instance equal to axios that create and let's specify the best your base url so we're going to do process.emv that react app base url and then we can do slash statistics again this is the same that we have been using for our expenses so essentially we're just setting up the base url so we don't have to set it on every request this is going to be whatever is is right here on our environment so if we go to that env we're gonna see that our base app react.baseurl is this so this is pointing to our backend right now and then we're gonna do slash statistics so this is gonna be the base url for this statistic service and over here let's do axios instance that interceptors that request that use config let's do config the headers authorization let's do bearer space plus session storage attack item token and let's return that config again we have done this in the past this is just going to pretty much append a our token to our request this way we can actually hit that endpoint if we don't have a token we won't be able to access this stuff that we need all right so now let's get to the actual method that is going to make a call so we can do export const get expenses per category it's going to be asynchronous and then we're going to pass in a dispatch that's the pattern we have been using and in here we're going to do a try and catch get an error and just lock that error so we can do console.log error now the endpoint that we're going to be creating is going to be an http get so we can do const data equal to await axios instance that get so this is going to make a call to our endpoint our backend with the base url statistics to the http get method and it's going to retrieve the data and this is actually the data that we need to put in the donut so pretty cool we have the data now we have we need a way to store it in our state so put it in our state and the way to do that that we've been doing that is through a dispatch dispatch in action so we haven't created this action yet but we can just name it here so we can say set expense amount per category and we're going to pass in data that's it we're dispatching that action and the payload is going to be the data so the stuff that is returned from the endpoint so and actually let's since we already did this and we're about to create this let's pretend that we have that already and let's import it so we can do set expense amount per category it's going to be an action from app slash statistics slice there you go that's part of the slice so i guess you know it let's go and create that right now so let's scroll up the left menu here and i believe under app we have our slices so we can right click on app do new file and let's do statistics slice that jazz now this slice is going to import create slice from [Music] at redux jazz slash toolkit we're going to export cons statistics slice equal to create slice we're going to name this slice so this is going to be statistics let's give an initial state so initial state is going to be is what i'm going to have for now expense amount per category which is the only thing we have here and it's going to be an empty array and then for reducers let's do set expense amount per category pass in state let's pass in action and inside here we're going to do this return so we're going to leave the state as is and we're going to add this expense amount per category get that payload there you go so everything else on the state stays the same where we add in that expensive on per category then lastly let's not forget to export const set expense amount per category from the statistics slice that actions and let's export default statistics slice that reducer since we imported this before we created this let me make sure i have the names right so i'm going to copy this and just make sure that there you go so we're importing this action and we're dispatching that action and passing in data cool all right we have this let's save this and now let's head over to our store and let's finish hooking this up so i'm going to copy one of these or maybe it shouldn't because it's not that much so import statistics slice oh there you go auto complete for me that's great take it any day and then all we got to do here is on the bottom we're going to do a statistics slice statistics slice all right now this is hooked up for us so as of right now we are able to make a call to the endpoint we're about to create then that response we are dispatching an action passing in the data of the response and we are storing it in this state we haven't hooked up anything else yet so we'll we'll have to go to statistics page and actually pull that data from the state and display it in our donut but i say we go to our back end and actually implement that endpoint first okay so i have opened our expenses.web api application on visual studio and we're about to create our new endpoint and this endpoint should live in a new controller so if we right click on controllers and we go to add new class we can call this one statistics controller and on top of the class we should have authorize this way we make sure that the user has already logged in and we can do api controller make sure we import this let me get rid of this so you can see clearly that we are importing sp net core authorization sp net core and vc and lastly let's specify the route and this is the default we have been using pretty much so essentially what this notation means is we drop the controller part and the route is going to be statistics so whatever port number four slash statistics slash and then any other name that we may put for any of the specific endpoints you can also put the route for those but in our case since we're only going to have a get http get the route is going to be whatever port number slash statistics all right let's create our endpoint so we're going to do http get and this is going to be returning an action result and let's call it get expense amount per category okay this is going to return on ok and we're going to have to make a call to our servers here and call a method so let's go ahead and create our service that is going to take care of this logic so we're going to create two files so if we go to core this is where our logic is yeah this is where our logic is so let's right click here on expenses.core and go to add let's go to class and let's call this statistics statistics services i want to copy this for whenever we create an interface let's make this public before i forget and let's right click on expenses.core again and let's create a class this time i'm going to put interface and i'm going to call it i statistics services that's it just make sure this is public i'm going to get rid of this stuff and the only method we're going to have is going to return innumerable this way we can iterate through all these values so this is going to have a key value pair let's start so make sure we're using generics and it's going to be string comma a double so this could be for example credit card 25 bucks and that's i numero because it's going to be pretty much a some kind of array list of that now for the name we can call it like get expense amount per category i think that's good enough so let's save this file and right here we're going to do i statistics services pretty good and let's hit on implement interface now we need to implement this method and to do that we need to get the context so we can do private read-only and we've done this for the expenses this is going to be db dot app db context context and then let's create a read-only be that user okay so in here let's create a constructor so we can do public statistics services and this is going to get our db that app tv context and it's also going to get an hdp context accessor let's make sure we're using that so ucmicrosoft.asp.netcore.http cool so we're injecting these two things so this is pretty much the same if we go to our expensive services so we need to get the context so we're going to do context equal to context and then we're going to pull the user just to know who is the user so context that users and then we're going to get the first one make sure we are using system.link so we can do you that username equal to http context accessor that http contacts that user dot identity that name and we do this because we put the username inside our jwt and we're basically comparing the username of that we have on database with the username that we have on that token if that matches we essentially set that user so we now know what we're talking about okay now that we have that we are ready to implement this method so this is going to return directly so we can use the context and then we're going to do expenses then we're going to do where there you go where e dot user that id matches the user that means we're only looking at expenses that the user owns or this specific user's expenses and we're going to do a group buy before we can do a group buy we need to do as enumerable now we will get an exception and this is because some of the reasons that we're not going to cover in this video but um yes so we got to do something like asking removal and then we're gonna do we're gonna do group by description and we're gonna go to dictionary and then we're going to pull out the key e that key and we're going to do e that sum of x that amount pretty much we're setting in this dictionary we're setting the key so the key is going to be the description and then we're summing all the amounts so the example i gave before say the user has three credit card expenses and each is of five dollars so in here we'll create a key and then have all those transactions credit card and in here we're going to create a dictionary which has the key as say credit card and the sum of that so here's where we actually compute it and put it together as 15. finally let's do a select and do a new key value pair string double and we're going to do x that key comma x that value so at the end we're just going to have some kind of list that has each key value pair so it has string which is it could be for example credit card and 15 and the next key could be something like groceries and twenty dollars the next key could be like gas and ten dollars so that's the idea and as you can see with link is pretty concise to do all this logic if you don't feel too familiar or comfortable with link and you want to go with another approach please be sure to do so as well be sure to save this file and now let's head over back to our controller and let's make use of this so up here we'll need to inject our servers so let's do a private read-only i statistics services let's make sure we're using that so using expense as that core and now let's create a constructor so we can inject that so we can do public statistics controller i statistics controller i'm sorry i statistic services and then here we can do statistics services equal to statistics services all right so we injected this here so that's good and all we got to do now is do statistics services that yet expense amount per category call that method and that's pretty much it and before we try to run this we got to make sure we go to startup and make sure that this is ready and configure before we can use it so you see we have other transient here for expensive services and for user service so let's make sure we add transient for our statistics services so this pretty much creates an instance every time one is needed and that's it we have hooked up everything and our logic is ready so let's make sure we run this and let's head back to our front end code and we're getting errors saying the name okay does not exist in the current context and i think it's because we forgot here to extend from controller base and that's pretty much it so save that and make sure run it so our backing is working so the easiest way to actually test test that it's doing the right thing is to finish it hooking it up here in the front end so we can make the call that way we can pass the token and all that kind of stuff so let's go over to the statistics page and like i said before make sure your backend is running let's go to the sixth page and let's have let's create here a dispatch equal to use dispatch so we need to import the use dispatch from react redux and also while we add it let's import selector as well as let's import the get expenses per category from services statistics and lastly let's make sure we import the use effect and the use date from react okay so we have this let's make sure we are pulling whatever we have on the state for expenses amount category per category so let's do cons expense amount per category and then we're going to use the use selector for that so we passing the state and from the state we can pull the slice we can actually bring this down so we can pull this we can go inside this statistics not page statistics slice there you go that expense amount per category here we go so we're trying to get whatever data we have in the state and store in this variable right here let's also create some kind of object that we'll have our labels and the essentially the data so let's create something like that to be a little more organized so we can have say donut set donut oh i thought i had to end there you go set donut use states and then this is going to have the labels which is just an array and it's going to have the data so pretty much donut has the labels and it has the data this data for those of you not too familiar with react remember the use state how works is this is the variable this references whatever is inside here right this is the initial state so whatever you put here is oh essentially the initial state and the set toner this is the function that sets this variable so we can say set donut parentheses we pass in some kind of object and that's what donut is going to have is the value and you'll see in a second how that works but we're also going to use a use effect and then here we're going to call our get expenses for category function and we're going to pass this patch remember expensive use effect hook takes two arguments the first one is a function so we can do whatever we want function in this case we're just calling the get expenses per category which lives in our services statistics so this is going to call our endpoint the endpoint we just created we're going to pass this patch that way you can dispatch the action it needs and set the state correctly and then the second one is the dependencies so this is going to run depending on what we have here since i just put an empty array this is just going to run once only at the beginning so at the beginning we're going to make call and pull the data set it in the state and that's it once it's on the state we're actually going to get the value here on expense amount per category this value is going to get that state oh i mean the value from the state so we're actually going to do another use effect and this this use effect is going to run this function i'm sorry this function is going to run every time this changes so i'm going to put this in here so every time this changes we're going to run this and the reason for that is that we got to set the correct labels and data so we're going to do inside here set donut remember we're going to call this as a function like i said if it was a function we're going to pass in an object to it so we're going to pass in labels and then labels is going to be equal to expenses amount per category that map and then we're only going to grab the keys from there because that's how the donut wants it so we only have the keys meaning the description the category whatever you want to call it and the other thing we got to pass is the the data which is the actual values the actual numbers and this is going to be expense amounts per category that map and then it's going to be x that value and that's it for this part so all we got to do now is since we have all this stuff set you can see this this is not being used the moment so we should use it so we can replace this with donut did i miss an h here yeah i did miss an each so i'm going to put the h there donut that labels and we're going to replace this with donut dap data okay and oh actually key is capital let's make sure we do that key is capital and values capital and one more thing i want to do if you scroll down here to that div we can say this is hidden pretty much if we don't have an expense amount per category or if the array is just empty so to say that we can just do expense amount per category that length and that's pretty much it so let's save this and let's head to a browser see if this working correctly okay so i'm at the browser now and as you can see i have a few expenses logged so i have groceries twice student loans ones gas and credit card twice and if we look at our state we can see that statistics lies is has expense amount per category and is currently empty there's nothing there so now let's hit on the statistics and we can see the graph populated so that's pretty cool we have groceries student loans gas credit card and it seems like it added them correctly from what i can see and if we go ahead and go to redox again and go to state and go to the statistics slice we can see that we have the values here from our call to that endpoint we dispatch an action and we set these values so right here we can see it as well under actions we can see the payload that we passed so we passed some keys and some value so pretty pretty cool and with this we have reached the end of this video remember practice makes perfect so make sure to practice practice practice just watching me it's not going to be enough to stick this kind of stuff in your head you actually had to like figure out things on your own so be sure to have enough practice and you know be curious and try to add stuff on your own and try new things because that's the way to to learn the most efficient way so if you haven't already don't forget to subscribe and i'll catch you all on the next one

Channel: Asiel Alvarez

Views: 2,768

Keywords: React, ReactJs, Redux, ReduxJs, ASP.NET Core, .NET Core, .NET Core 3.1, .NET Core 5.0, Dot Net Core, Fullstack, Full-Stack, Full Stack, Full Application, Complete Application, React and .NET Core, Entity Framework Core, ASP.NET Core Web Api, Endpoints, LINQ, Full Stack Development, Axios, Bootstrap, Authentication, Authorization, Reac-Router-Dom, Database, middleware, log middleware, toast notifications, notifications, react toastify, react-toastify, chartjs, react-chartjs-2

Id: Uc6JfWBUtAQ

Length: 42min 47sec (2567 seconds)

Published: Tue Sep 21 2021