Build a React Data Dashboard App | Next.js, MUI, Typescript - 6. Charts and Tables with Charts.js

what's up coders and welcome to the sixth video in the data dashboard series now in this video we'll be looking at all things data visualization and to help us on that Journey we're going to be using charts JS and material UI now to visualize our charts and graphs we're going to be using charts JS and for our table data visualization we're going to be using material uis data grid component as well as a few other bits and Bobs along the way we're going to be adding to the project that is what we'll be covering today so if that sounds interesting make sure to like And subscribe to support the channel and follow me on Twitter at the hashton to keep up to date with any new videos or developments on the channel so without further Ado let's go build some charts [Music] so the first thing we want to do is install some packages to use charts JS and mui data grid we're going to have to install them separately so let's do that now on the terminal so we'll be adding charts JS and the typescript types for that we'll also be adding the data grid component from mui X which is where some of their experimental components live so let's install that now excellent so that's all done so let's go take a look at the project and see what our next steps are going to be so this is our project right now we can see that we're currently not logged in which is absolutely fine but one thing I have noticed is if we inspect this and we go down to more of a mobile tablet view we kind of notice that this is slightly offset that's because we added a setting to offset the side menu but we didn't actually take into account that that isn't necessary when there isn't a side menu I.E when the user isn't logged in so we do need to just quickly tidy that up and I'll show you what I'm talking about right here you can see that it's got the extra padding on the left which is what we don't want so we want to remove that when the user is not signed in to prevent that from happening so let's go do that now so all we want to do here is just add some styling to say we actually don't want padding if the user is logged in so we'll add a style attribute to this main element and we'll be targeting padding and we'll say if the user is logged in then we want this padding on this main element otherwise if the user is not logged in we don't want any padding and let's go see what that looks like so if the user is not logged in you can see the style is being applied here and there's no padding now so we don't have to cater for the side menu so if we log in here we now see that styling is back so The Styling has been added inside the main class inline now if we go into the style sheet we can see that we do have the styling so we don't need it anymore and our website doesn't really cater for people who have JavaScript switched off so unfortunately um they're not really going to be accessing this site but if you were to build this in a way where you did cater for people who had JavaScript switched off then you probably would definitely keep this as a fallback but then you would have to tackle all the authentication issues and how they actually get to the dashboard without JavaScript there's a whole bunch of issues there um and I don't think it would work for a site like this so we'll delete these but obviously those types of things are considerations when you are building an app or building a website how do people like that who don't have JavaScript enable uh access something if there is no JavaScript and you're doing everything in line but there we go right so that is all tidied up and we've installed our charts JS and our material UI data grid component so the next bit of housekeeping is the light theme so I'll go off this so if we go to the light theme we can see that the background color is a very muddy gray color it's kind of a brownish color so what we want to do is slightly change that from it being a muddy gray dark gray color to something slightly lighter and More in line with the light theme so we'll go to light them here and we'll just update it so we've just updated these colors here to be a bit lighter so particularly this background color is now much lighter so if we check that out now it's a much better a light mode and it makes more sense so let's go to the dashboard page so this is the current dashboard page right now we've planned some kind of layout to have maybe some data cards up here perhaps a chart down here and then maybe another row below maybe with donut charts or something like that so to visualize that better we're going to start scaffolding some of these components and it's using a technique that I use when I first became a front-end developer which helped me a lot to learn JavaScript and learn to plan a project out or plan a feature out so if you go to the dashboard component here what we'll do is we'll replace all of that with some of this scaffolding so in here we're planning to add these three features so we'll have a data ribbon here showing numerical stats and we want that to show a list of numbers that are important to the user who's using this dashboard so these are immediate stats to do with maybe transactions or something like that and down here we want to show off a graph of some kind along with some cards to better visualize what that is so you'll have a graph and then some cards maybe on the right or something like that and then we probably want a few donut charts to break down some data into fractions maybe so we want to essentially have some data that's in a donut chart and the circular donut chart that's broken down into you know particular types of transactions maybe transactions per day per month so that could be quite interesting so to begin with what we'll do is we'll create the data ribbon component so we'll go up here to components we'll create a new one and we'll call it data ribbon and we'll just make sure we create an index.tsx file sorry TS file export the default okay that's all connected and within here what we'll do is we'll create a very basic data ribbon component just to show that it's working so we want a grid with a container property to show that this is a container grid from mui and then we'll just say it's a data ribbon so that's being exported and then we'll just go ahead and add this down here make sure that this is imported okay so now we're calling in the data ribbon component let's go to see if it's working brilliant so we can see that that's showing so that's all connected so let's go back here now in order to get this to where we want several data card components so let's go create that component here because we want three data card components like this um so let's go check that out now so let's create a new component Now to create the data card component what we'll need to do is we'll put it in the components folder but we're starting to collect a lot of dashboard components and it's a bit weird having components that are specifically for one page and one feature in one section just in the general components root so we'll create a dashboard folder and we'll create a data card component there so within here we'll create an index dot TS and we'll go to a data card here just create that we'll make it a H1 as well so that's created um now the thing is we've got the data ribbon outside of it we actually want that within the dashboard component so let's take that and put it in the dashboard component with datacard because that makes more sense than that just make sure to update the route here in your dashboard component so it's going from the right place and let's open up the data card we'll grab this a few times cool so that should be imported now from the date card component let's go take a look so we've got uh three data cards inside the data ribbon now let's just add a bit more to the data card brilliant so we've now added some core styling and essentially it's still within the grid container component we originally added and within there we've added our data ribbon H1 still and within there we've got our paper component that's wrapping it and we've added some padding of one REM and made sure that it's got a height of a hundred percent as some basic styling for our data card component and we're doing this in here just to visualize what we kind of want from our data card just to show it in the data ribbon for now we've added some base styling on the inside of flex making sure it's centered and then it's also aligned in the center as well vertically we've added some typography from Material UI and we've set it to H6 with the color of light gray which is kind of our uh sub header almost and then we're adding a tool tip component so that when you hover over you can actually see what the data visualization actually is and then there's some more text inside there to show what that is and then we've actually got our number here which is the data that we want to display which is 462 and we're trying to show total sales in this regard so total sales is 462. now let's go check that out and Visually that's what that would look like so we hover over that the total of all data soft products in The Current financial year which is 462. so that's what uh one data card will look like so we'll add some more to this component in the future but let's actually turn this into its own component now we already have that with the data card component so let's go ahead and bring that over and add it here so what we've done here is we've added our data card component we've added some props because we want to pass some value values to this component which is essentially a dumb component in that it it doesn't do any business logic with information so we're taking in title value and description so title then deconstructed here so we take title here and we're using that as the gray title that we saw earlier and then the value which is the number and then the description which goes in the tooltip and the title when I say the titles when you hover over so that's all set up as a data card component you can see here we've deconstructed our props in react and that's just so we don't have to type everything as props dot something and we can also add default values if we want if for example no data gets passed through we can just say something like no description as a default value and you can do that for all of these I've done I've actually done a video on react default props in functional components so go check that out if you want to cool and what we also want to do is just add some styling to the data card component so we'll add a SAS module for this and we'll add some basic styling so we'll add the data card component and we'll just make sure that it's positioned relative basic styling so now that we have the data card components set up let's reintroduce that to our data ribbon component So currently our data ribbon component looks like this which has one deconstructed data card component but let's now re-jig this and add our data card components for real so if we have a look here we're passing the title total sales and we have the value of 462 and the description of the totals of all data soft products in The Current financial year very simple very straightforward and you can see now we've got we've got no need for all the icons and things and components we used earlier so we can just delete these because they're now in the data card component and I've added three other data card components here so they're also having something else so this is total value this is average order value and the conversion rate so now that that is a part of the data ribbon component we just need to make sure that this is styled as well so let's add data ribbon Dot module.sas so we're just going to add some basic styling here and it's going to hinge around the tablet view so once it gets to tablet view which is traditionally 768 you can tweak this however you want but this is uh what works for me personally this is kind of the standard break point on this app is that we want it to be using grid CSS and we want essentially four columns so once it goes past tablet view we want it to go into four columns when it goes below tablet view we want it to only show one column so it goes to 100 width so we just need to make sure we add the class name here I believe that's right yep so that's all hooked up and let's go take a look oh I forgot to import SAS from data ribbon brilliant and that should be all tied up let's refresh so that's the data ribbon component so far what we want though is this to be on the same line so the icon and the title so let's go tidy that up now so we've got our header class name here so let's just go add that styling now display Flex and there we go so there's quite a lot of padding So within here we'll just say button has zero having and maybe we'll say that for the paragraph element as well maybe not all right let's say 0.25 REM there we go I think that's a lot better now what we've essentially done here is we're saying both of these have about 0.25 REM which is just a few pixels and that gives a nice little space between them but also it makes it look quite nice and you can see here once it goes below tablet it goes into full width into single columns and then once it's past tablet it goes into four columns so that's the data ribbon component working quite well and each one has their own unique bit of information about the data being shown what I would say is probably just needs a bit more overall padding on the actual data card because it looks very thin so let's do that now so let's add a little padding here so we'll just say 0.5 Ram uh that's okay maybe we'll just add a little bit more yeah and I think we're quite happy with that yeah it's quite nice uh maybe just a little bit less [Music] um we'll go one RM at the top and 0.5 on the sides so I think what we'll do here is we'll bump this up to slightly higher uh we'll use 900 pixels so we'll say on 900 pixels uh we want this to collapse so at 900 it then goes into this mode I think that looks a little bit better but obviously you can tweak and play around with this it depends on your data obviously the text sizes that you use but um yeah I think generally that should be fine it's a lot better than 768 pixels so the next component we want to add is the transactions per day so that one's going to set us up to use graphs on the project so let's get started now so we'll go within dashboard and we'll create transactions per day component and just export foreign and then just make sure that that is called in so if we go take a look here very basic and you can see that it's being hidden currently so we'll just add some margin top for now to show it so there we go that is the component uh we'll have to tidy that up in a moment so let's go to the transactions per day here and start adding some code to it and start building up this component so this is our transactions per day component what we've done is we've introduced a new type which is our transaction card type which brings in information for something similar to the data cards component we just created but these will be smaller ones for this transaction component so these will be transaction cards and very similar they need to title or value and a change value as well so almost like the value that we had for the numbers in the last one and then this component will have his own props where we pass in the data and the data is quite important so we don't really want it as an optional prop so we'll make sure that we don't have it as optional we've deconstructed that we haven't used it yet because we haven't introduced our charts so we'll be bringing in some theme options from mui so that's why we have this here which is what this is it's pulling in from mui and then we have our grid container component which includes a wrapper styling which we will add just now now what this does is it adds a breakpoint for all of our elements within the transaction per day module and essentially we're going to be showing everything on a row for all intents and purposes so we want display Flex there and then we have some styling for the transactions and the chart and the card wrapper so now that we've added that styling I'll show you the markup first and then we'll go and explain what the styling does so in here we've added a paper component to wrap it all so this is for the background of this component that's this is the color that we want for it and that should be able to switch colors when we switch between light and dark theme we've added a container for our chart which will go here and we've left a comment for where our chart will go and then we've just added a title here using the mui typography component and then this is our card so you can see there's a very clear division between the charts and the card wrappers so these are the cards that I spoke to you about and this is all contained within this paper component so we'll open this up and we'll have a look at the cards so you can see that we're using the card components from Material UI so there's default mui card components that we can use we're using the outlined version of these so that means that it's just the outline it's not so much filled and then we're adding our own styling on top of that so we'll open these up and have a look at one looks like very similar to the data card component has a title um and has a value and and then it has an interesting thing underneath it has um a percentage or change of that value and it's being used with the theme palette success color and that's why we're pulling in the theme from mui here so that's essentially what we're doing the rest is very similar we're using three bits of detail so total products by to detail and refunds so that's what we'll be using here and our styling is essentially doing that so our transactions and our chart styling so you can see here with our chart styling what we're saying is we want the chart to take up 80 percent of the width and we want the car to take up 20 of the width and then we have some general card styling to add some padding some border radius to the cards and just make sure it's all aligned in the center and yeah and then now did some styling for the fonts uh and just for some font sizes so that's it's a very basic styling let's go take a look at what that looks like so you can see here this is our styling it's left room for the chart to go here and we've got our cards on the right and if we switch from light to dark mode you can see because we've used material UI it switches with us which is perfect now let's go ahead and add our chart here now we're actually going to create a component that isn't within the dashboard component we're actually going to create a data chart component here and this will be separate because we may want to use this chart in separate places and I'll explain why just add an index file as well so this is our chart component I'll break it down for you so these are our props that we want to pass because we want to create a reusable chart component in it we'll be taking in the data that's used by the chart and then the options for the chart so the theme the type of uh chart it is so is it a line chart an area chart a polar chart a bar chart all of that is contained within here we also want to make sure that we're pulling in some other helper utility files and then we're using a use effect to make sure that we essentially run this once but it updates if the data changes which is very important to anyone who's using data that might update or it is basically streamed in or something like that so this is basically is changes whether if the data changes which is very handy and then we're using the canvas element to essentially show the chart and then charts JS just hooks into that and puts the chart into there so that's our data chart component now let's go add some of these files up here we need to add our themes file so let's just go here and create themes dot TS what this does is this essentially contains our light and dark themes for charts JS So within here we want our y access to beginner zero and we also want it to be a certain color we've chosen a lighter color for this because it obviously is the lighter theme and in the dark theme we have also asked it to begin at zero and chose slightly darker colors um for the wine X axes and the ticks which are essentially the incremental lines that dictate oh this is a a next bit of measurement um so you know if you had January February March the little lines that come down those are ticks and they have labels off them so that's essentially what that is and then just some plugins so we want the legends to be in a white color on obviously a dark background so that's all set up that should now be pulled in here we just need to add the months helper utility file so we'll go to the source folder here and we'll just create a new folder called Helper and then we'll create a util file now this particular utility file is mentioned in the documents of charge.js if you come across this it's not actually provided by charge.js annoyingly so you have to go in and create one yourself this is one that I've created for anything months based or time based so I've just added 12 months here in an array and then we've got some logic here to handle the months in the charts as well so all of this code will be in the repository I'll link in the description so you can check it out there so we go back here and then you can see that we now are able to connect to our utility file and grab our months and we also have our dark options here so now that our data chart is set up we can go ahead and add that back to our transactions per day component so if we go to line 26 and just add that there make sure we import that now you can see here that we want some data to add for this we currently don't have any right now but we will create some called line chart data because essentially this is a line chart let's go ahead and add our line chart data now so if we go within our dashboard component and this is simply because this is a UI tutorial we're going to mock our data and for those unfamiliar with the concept the idea is that normally when you work on projects like this you would have an API or a service from the back end or the backend team to work with to build a UI however in some circumstances that's not the case and the UI could be working ahead of the back end or there just simply isn't anything there right now so for that to work all we do is we mock It Out by creating our response and have it hard-coded just to use for now to get the UI to work so that's exactly what we'll do now so we'll create a mock data.ts file add our code and in here all we've got is our line chart data and then some donut chart data to add donut charts later to the project so we'll leave that for now but this is what we need to be focusing on you can see here we're utilizing the months helper file that we created all the month helper utility function we created and then this is our data set very basic data set and that should be enough to be getting on with get rid of that now so let's go import this in right now let's go take a look to see how this looks amazing so we can see here now that we have charts JS working and you can see that it's already animated and it's working great it's even actually responsive which is amazing and it works with material UI and also charts JS theme options that we added so if you go here you can see a light mode and then you can see a dark mode as well we even have our own Legend which we can toggle on or off if we want to see something so we click that it's toggled off we click it on and it animates back on again so it's asking us for some data here but we don't actually need to add the data uh at that point um so we could actually get rid of this uh prop so we don't actually need this perfect it's just a bit of future proofing in case we did uh but we don't we can get rid of all these go check that out yep it's still working a little unhappy with this Gap but we'll fix this soon now the next thing we want to do is we want to add our transactions bottom row component here um and to do that we'll just go back into the dashboard component folder and we will create a transactions bottom row component and we'll just add that there make sure to add an index.tx uh go back to dashboard here and transactions bottom row and let's see what that looks like well let's just change this to uh H1 cool and we can see that we now have our transactions bottom right here so let's go and add some code here so we've added some code here I've added some styling as well so we'll just quickly add that before I explain the markup so we'll just add some styling here so just again we're using the data grid component we're going to have four card components with the breakpoint at 900 pixels and just some simple Gap styling as well to add a bit of spacing between the Cards and then we'll just import that so now we have bottom row so I'll show you what we've got here and we've essentially got four of the same things but we're wrapping our paper components in a grid component and what we want is to show just a bit of text a title say transactions per user so that's the title for this particular card and then we want to add our data chart component again but this time we're using a donut type for the chart and we're importing donut chart data so this is coming from the mock data file we created earlier and that's just got our colors here um which are set here these are the labels for them so we can set this to anything we want we've just set this to the default just to essentially show you what it looks like but this will be just repeated several times and you can go in and tweak this and you can add several different versions of this if you want with all different data sets and that's totally up to you I'll use just this one data set for now repeated just to give you an idea so let's go back to transactions bottom row and you can see that it's a slightly different titles now if you wanted to take it one step further you could create individual components for these and add some titles and things but because it's only four and it's only used on the dashboard page um I don't think it needs to be recreated uh because if this needed to be used on another page then you could argue in the rule of two or in the dry principle I would need to recreate it but because we're not recreating it and because we're not repeating ourselves twice which is the rule of two then you don't do it just to explain the rule of two for those unfamiliar um if you do something once that's fine and if you need to do the very exact same thing again in your code generally then you start to abstract it and try to make it a lot less repeated some people use the rule of three but I prefer the rule of two but that's all down to preference so let's go check it out so this is one of our bottoms row component looks like and that kind of completes the dashboard view at a glance uh we just need to tidy up these two components here uh because they've got a spacing issue but we can easily sort that out by adding a grid component which we'll do now so we've rejigged the dashboard component and all we're doing is we're adding a wrapper grid component around these two components here we've added a little gap between them to add some spacing and a bit of margin top to give some spacing from the header so what we need to do to fix this issue is just change this Gap value to be four so between the components we just need to create a little extra space and what that does that is that gives us a nice bit of spacing between the data cards and this bottom row so now we can see that we've got an issue on these data card components and that is if we try to be responsive we have this little weird issue and that's because we've just forgotten to add some styling to these data cards you can see that they're not very styled right now so let's go back and add the final styling to finish those bottom row data cards off so the first thing we want to do is just add some styling to these cards so we'll give each of these a class name of datacard and then if we go into the style sheet the the module style sheet and we'll add the data card class which also Styles the paragraph element but what we're doing is we're setting the max width on this to take into account um some of the other padding and spacing so that we don't have that issue where we're overlapping in width at all so now if we try to do this you can see that that is styled and then when we try to reduce the width it corrects itself and the further down we go the more it corrects itself and then eventually when we go down to a low resolution a mobile resolution it goes down to this so we can sort these colors out as well so if for example we don't want red blue and yellow we can go for some other colors that might fit what we've been doing a bit better so let's go and quickly add some different colors so if you go into the mock data file and we'll change some of these colors so we'll add perhaps different shades of red do that maybe add like a bit of a purple Vibe and maybe a bit of a lighter color and if you go back and take a look we can now see that has updated and if we go to dark and light mode we can see that still stays the same so there you go you can see we've changed the colors there but uh what we want to do is fill out some of this space on the bottom we can see now that we've built the dashboard up but it seems pretty empty at the bottom so let's add our footer we'll go into components and we'll go new and we'll go flutter flutter dot TSX create a new footer component and we have to make an index file and we will make a style sheet as well so footer dot module.s because we're using module CSS or SAS cool export from the index file and then just make sure we include that in the layout component so let's go to the layout component so just under here under props.children we'll add the footer component brilliant that has been added let's go take a look now you can barely see it just about there but there is a footer component in fact let's go to footer and change this to a H1 and you should be able to see that a little bit better now so that's our footer component now we are going to replace that now let's replace this with a proper footer so just to explain what we've done here we've added a footer component and in here we've made sure to add our authentication session because we are going to be adding some sign out some sign in and sign out functionality we need to include our theme from mui for some styling for light and dark mode and we've included some styling for some links because our footer is essentially going to have links and we'll be using next link to Transporters from page to page through our different route and you can see I'm just using our theme colors here for our text and it's just tying into that so when it switches between themes it knows what to do and we've wrapped this up into a semantic footer element so if you don't know what semantic elements are they're essentially not your normal div and span type elements they're more semantic or meaningful for the reason you're using them so for example if you're using a heading or a header or a a list or a paragraph element or a footer then you use something like this a footer so we're using a footer here and we've got it wrapped in a paper element so similar to the cards and things so it has a background a nice background and card feel so you can switch in and out we've said we want it to be as large as it can be and we've set a default color and we've added a unordered list because that's going to contain our menu items we can see now that we're adding some list items now for accessibility reasons if you are using this as a menu you need to also tell screen readers that you are using this as a menu so make sure that wherever you are deciding to set your menu that you're setting the role to to menu as well so that you know that so that screen readers know that there is a menu here to be used within here we have some footer links which is essentially styled over the link component from next link and we're only styling the text and all the pages are here home data profile settings the same are in the side menu and they're linking us to the pages uh in question now you can abstract this by having a Roots file that contains all your roots and because we're using this twice now the rule of two uh we should probably set up a Roots file and put that in there now I'll leave that up to you to do and it can just be anything it can be a Json file can be a typescript file whatever it is and you just contain um an object with your roots in it and what it means is you just update it in one place and it updates everywhere and it's just a string the more interesting part is down here so we've got our terms and conditions and our accessibility statement which is what every website should have if you have the intention of making it accessible to everyone with disabilities so basically just outlining here what you're planning to do to make the site accessible what your goals are what rating you're trying to aim for what you've done to try and Achieve those goals and things like that really and the button down here is to help the user sign in and out and the reason why this is a really good option to have is because you're giving a second way for users to navigate the site now for good accessibility you do need more than one way to access the same page because if anything happens to one page and you know for one reason or another it become bugged or visually is obstructed it becomes difficult to visit that page for a keyboard only user but with something like this somebody else with a disability and uses only a keyboard and a screen reader can't access that site interesting fact or maybe not so interesting uh everyone not everyone that is a keyboard user uses a screen reader so there's that to consider as well but this is the situation we have now with the footer which is kind of a catch-all situation let's go have a look and see how that looks so if you go down currently that's what it looks like it's just missing a bit of styling so we can still visit all our Pages yeah and we can see that works and it's appearing on every page now because we've added it to the layout component but we just need to style it a little bit more so let's go ahead and do that perfect um so we want to make it a static position that stays at the bottom and we want to make sure it goes across a hundred percent and we want to have a little bit of space into the content above by about five REM and we just want to add a bit of flex box to the unordered list yeah some of the basic stylings to do with uh hovering so we want to add it underline when we hover over these links amazing let's go take a look so this is the footer so very simple but it has everything we need we've currently not added a terms and conditions paid or an accessibility statement what we've done for now is we've just added a pound sign and put terms and conditions which just means whichever page is on it will update so in the future you can go ahead and add your own page here in the pages section for terms and conditions accessibility statement and add your own and you can see here we've got the sign in and sign out method which comes from next off which gives us that functionality to use next off with confidence and be able to sign in and sign out depending on if they are already logged in it will show them the correct button and the correct text it also changes the color of the bus Button as well based on whether they're logged in or not so if they're logged in it's going to show a red button and ask them to sign up and if they are logged out we'll show them a green one success to ask them to log in so if we sign out we can then see the footer with the signing button here and then we click sign in again and we're signed in and we can see our login page so now we've got this setup let's go to the data page now the dictator page is currently empty but what we want to add here is a really nice table from mui called the data grid table and we're going to add just some mock data that mui has provided themselves so we'll have a look to see what the data grid table actually looks like so this is the data grid table from mui and what we're going to build is something very similar to this version here so this has lots and lots of columns I think it's about 20 25 or something like that and each of them have this amazing mock data to help get up and running but the whole point of the data grid component is to be this very complex table component that you can do all kinds of stuff with there's page Nation sorting search exporting as a CSV yeah it's got the works um and there's a reason why they sell this as a pro version but we're going to be using the muix version which I believe is the free version so let's go to the data page and just edit this here let's close all these other tabs down so we want to add our mui grid component so this is the updated data component and essentially what we're doing is we're pulling demo data from the muix data grid generator and that just generates some dummy data for your data grid so we've chosen to use the commodity data set so it's commodity and then there's like some users or profiles or something like that so it's employee so that was the actual name for it but we'll use commodity for now we want the Roland to be about 500 and want there to be about 15 columns now you can reduce this or increase this as much as you want or as much data you want to show off uh we'll leave the H1 of data for now just to make sense of where we're at and we've got some dummy text here and then we've got our data grid component which we're pulling in from mui X and yeah that is that essentially that's the data coming in from the demo data so it's very simple that's essentially that's essentially it that's the data grid table there for now very simplified and it can get a little bit more complicated but this is the benefit of using mui it takes very complicated component components and makes it very simple for you uh has accessibility built in theming built-in light and dark mode already built in yeah very cool so let's go take a look and see what that looks like and there we go so that is our data component right here so you can see we have plenty of pages we have 500 bits of information 500 rows of information it goes down to 100 here you can make this as tall as you want so we go back here and we increase this height to 900. you can make this bigger and then you can actually see more and you can scroll through it and it's a very big database you can select you can sort uh you can filter so you can sort by descending you can choose how many you want to show on a page so if you want to just show 25 rows you can do and just increases you know how much you have to tap on the right but yeah it's all styled animated accessible it remembers what you've clicked that's our data page and this kind of showcases how we can visualize data in a table and tables can get very complicated I've built a few custom tables in the past accompanies I've worked at and it is always a crazy Endeavor so I'm very glad mui have built something as good as this because it does help a lot now one annoying thing is if we want to go back to the dashboard we don't actually have a menu option to go specifically to the dashboard and the dashboard itself is considered the home page of this admin section of this app so you would assume it's the home page but the only way you can get there is by clicking the logo so if you click the logo here then you get to the dashboard but there's no option here it's not very clear so we're going to make that a little bit more clearer by adding a home icon to this side menu and linking it to here and so let's go ahead and do that now let's just update it so let's open up the side menu and just make sure we pull in the home icon and we just want to update this menu root list to include the home page and then just update this to include home as well and then simply in the menu list icons array we add the home icon and it's as simple as that the rest has already been taken care of we don't need to add any more let's go take a look and you can see now there is a home icon and if we expand this we can see that it says home as well so you click that and we go to home if you want to go to the data page we're now on the data page and if we want to go back to home there we go so that is the data dashboard so far we do have a little bit we do have a few last things to do so we have uh the profile page and the and the settings page left to do but we're pretty much nearing the end of the series and we're almost complete so for all of those that have been following along from the first video or just wanted to see how you were going to add some charts and that is our dashboard and there we go so that is a little bit of data visualization added to our app in the form of charts and tables and there you go so we've added a lot of visual data to our data dashboard in the form of charts through charts JS and tables through muix we've added quite a bit and we've even updated the side menu and added a whole footer as well quite a lot for one session so if you have been follow along from the very start and coding as well or planning to code after the series has ended by the end of this you'll have a very impressive data dashboard to call your own now I will put the link to the repo in the description below so you can go take a look have a look at the code and uh see how I coded all of this in detail you can see all the steps how I went along we do have um a little bit more to go in the series and polish off the profile and settings page and maybe a few of the bits and Bobs but if you've enjoyed this series and make sure to like And subscribe to support the channel and keep informed of any new videos and series on the way similar to this and I'd also really appreciate it if you followed me on Twitter at the hashton but other than that take care and I'll see you the next one

Channel: Curious Byte

Views: 7,201

Keywords: react admin dashboard, react, reactjs, nextjs, charts, chart js, charts js react, chart js tutorial, next js tutorial, react js, data grid mui, data visualization, material ui, material ui react

Id: gTI8eiExlPA

Length: 51min 28sec (3088 seconds)

Published: Sun Apr 09 2023