Build Dashboards for Data Visualization in React with Tremor & Tailwind

the world is all just a bunch of data and to visualize that we need dashboards so let's see how we can build a dashboard for barberheimer in a react app with tremor [Music] so we're going to start off with the vanilla Vite react app where inside the code I haven't touched anything yet so we're just starting from scratch heading over to Tremor Tremor is a react Library that's going to allow us to really easily build these dashboards by putting them together kind of like Lego blocks if we look at some of the examples here where we have our different components we can look at the area chart and we can see that we can really just plug this in by copying some of the components and we can really just start to plug in our data but starting with the basics we need to actually get this installed first now one thing we need to do before moving forward is we need Tailwind installed as Tremor uses Tailwind to build all of its different components and then it allows us to also extend it over on the Tailwind documentation I want to use the Vite specific installation so I'm going to go ahead and search for that and find that installation guide where I'm going to go ahead and first run this command for installing all my dependencies and paste it into my terminal then I'm going to also run this init command for Tailwind paste that in as well where next we need to also update our template path so I'm going to go ahead and copy this content property from the Tailwind config and inside of our code we're going to now have this Tailwind config that was added via the that init command so I'm going to go ahead and paste that in and as a last step we just need to add the Tailwind directive so I'm going to go ahead and copy that as well and under Source index.css or really wherever you want to add this I'm going to paste in those directives and now we should be ready to go so we can take this example as an H1 tag I'm going to Simply replace everything inside of the app file with just this H1 tag and we can see that we're now ready to go with Tailwind so next let's actually install Tremor so this should be a little bit easier where all we're going to need to do is copy the CLI tool command so I'm going to paste that in my terminal and it's going to go through and it's actually going to configure everything for us let's select the framework we're going to use which is bytes we're going to say yes we want to run the command to install the dependencies and such so hit yes and we can see just like that we're already configured and if we look inside of our Tailwind config file we're going to see all the configurations that Tremor adds in order to make it work properly so let's start off with the basics where we're going to have our Barbie versus the Oppenheimer column so I'm going to go ahead and remove this H1 let's give this a nice wrapper div and then each of our items are going to have their own individual divs where we're going to have Barbie we're going to also have our Oppenheimer and each of these are going to be shown in a grid so what I'm going to do is set up a class name of grid grid calls two where it's going to give me two columns as well as a gap of let's just say 12 and we can also start to set up our different titles in an H2 so we can add some relevant header styles to that so we have our H2 and let's also add some styles to both of those H2S I'm going to add a class name of let's say text to Excel how about font bold and we can see that while simple we have our two columns ready to go now in order to dynamically pull in some of this data and the details I created these two Json files that you can find inside the source code in the description of this video but really if we look at Barbie for instance we have some Revenue numbers we also have a poster path we have a few things that's going to allow us to play around with the data inside of this dashboard so let's start off with something simple where how about I just want to grab the revenue and I want to throw that on the page if we start to look through all the components we can see that a lot of these are dealing with different data types and while we're going to get to that we want to start off with just some simple text so I'm going to use this card component where we can see it's just going to display some information for us but what we're going to do is we're going to first import this card component I'm going to paste it in at the top of my file and we can see that they even give us some nice usage examples where here we have this card where it has this nice little stylization it has the little subtitle so I'm going to do just that looks like we also need to pull in two additional components so I'm going to first make those available then I'm going to go ahead and copy this card as is let's go ahead and paste this below each of our headers where we're going to have a card for each of our different movies now of course we want these also to be revenue and before we actually pull them in Dynamic data let's just see if this works we can see with just that little bit we already have a nice working example where we have both of our columns and we have those stats for each so let's actually make this use real data so I'm going to start to import that where I have my Barbie data and that's from movie barbie.json and I also have Oppenheimer data where that's from a similar location now that Global Revenue value is going to be under that Global underscore Revenue value so inside of my metric I'm going to go ahead and update this to a dynamic value where I have my Barbie data dot Global Revenue I'm going to do the same thing for Oppenheimer where it's going to be Oppenheimer data gotta fix that e and we can see the numbers immediately work and we have our realistic data now just as a quick side note if you're wondering where I got this data from I'm using a mix of Box Office Mojo which is going to give me a lot of the numbers especially the domestic dailies as well as the movie database particularly the movie database API where I can get a lot of this programmatically and just as a quick fix before we continue moving on I actually don't want this text line to be centered so I'm going to go ahead and just remove that centered and I can probably get rid of most of that other CSS inside of app.css as it's not being used and I think I'm pretty content but we can see that we can use a little bit of margin which is why it's nice that not only does Tremor use Tailwind we also have direct access to that so we can use it just like we would any other application and get our Styles easily applied now another thing with this is it's a little bit hard to read typically at least in the US or other countries that use the same pattern we want to see the commas between each of those three digits just to make it a little bit easier to parse now while I'm sure it might be fun or challenging to write your own I'm a little bit lazy and I'd rather just have a robot do it so I asked chat gbt to create me an ad comment the number function so I'm going to paste that in at the top of my project and then I'm going to head over oops I need to type that to a number first I'm going to head down to where I'm actually using that data I'm going to Simply wrap it with that function including both numbers and we can see we easily now have those commas representing each of those values so let's add another data point how about not only do we want to know the revenue we want to know the budget we want to know how much they actually invested to see how much money they're actually making right so for each of these I'm going to go ahead and just clone down that card I'm going to change this to budget for each of them and inside of the data the property is simply budget so back inside of app.dsx I'm going to go ahead and update that property I'm going to also add some margin bottom to make sure we space this out a little bit for each of these cards and we can now see that while Barbie's budget is 145 million the revenue is currently at 811 million Oppenheimer is not doing too bad itself now as good as these numbers look let's start to stylize it a little bit how about we add the poster to the left of each of these cards just to make sure that it looks a little bit more representative of each of those movies now I have that image available at poster path so back inside of app.tsx for each of these I'm going to go ahead and add an image where for instance I'm going to do Oppenheimer data dot poster path we can set the alt as poster we can close that up I'm going to do the same for Barbie and make sure I update that to Barbie data but now these images are huge so let's break this down a little bit I'm going to set it up so each of these are going to be its own grid so I'm going to first wrap all those different data points I'm going to also wrap the cards themselves so that they're on their own as a specific part and we can see that it's looking pretty good so let's replicate that inside of Oppenheimer now honestly the easiest way to do this is I'm going to Simply clone that div and I'm going to get rid of the original div where I'm just going to make sure I update this back to Oppenheimer and I'm going to update all the Barbie data instances to Oppenheimer data and I think this is looking pretty good so we have the dollars in here but we don't have what the fans think maybe it's making more money but maybe the fans like one over the other inside of our data point we have this vote average so we can use this as a way to display how our movies are actually resonating with the fans now we could probably just display that as a number but that's a little bit boring so what I'm going to actually do is use a donut chart where this is probably a little bit of a different use case than you would typically expect but what we can do is we can add that number as one of the data points and we can add the remainder from 100 or 10 depending on what number you're using as the rest of it so it's going to give us the effect of having a nice little graphical way to show the fan response so let's look at a usage example where we have our Imports here and we can see how the data is going to be set up so we're really going to have two of these examples of how our data is going to look where then once we have our donut chart we can drop it in where we can add a title if we want and we can add that chart itself so inside of my data column I'm going to start off by creating a new div just to wrap this I'm going to go ahead and grab this example of both the title and that donut chart paste that in right inside of that div wrapper I'm going to also import these components at the top including title and my donut chart now we have two missing points here where we have the data itself but we also have this the value formatter where what that's going to do is when it actually drops it in the to the Chart which we'll see in an example later it's going to format it specifically for the viewing purposes not for the data consumption purposes but we don't actually need this for the donut chart so we're going to get rid of this for now but we do need our data so I'm going to set up an array where we can see that the way that this data is formatted where we have a name and then we have a label along with the value so I'm going to paste that in we can see that this label is going to be sales and I can update this category to what it is such as user score but then we want to actually update these values where we're going to have our Barbie data and that's going to be called our vote average and then we're going to have a similar one for our second data point but it's going to be 10 minus that vote average to give us the remainder now if we look at the chart we can see we have this nice visualization where we need to fix a few things but we can see it already working properly first let's get these numbers and the labels right where we don't necessarily need labels since we're really only showing one value starting with the colors how about we show a green and that slate where first of all let's reverse this because of the order that we're passing in our data so we're going to have green and slate and then again we don't actually need these labels because the way that we're showing our data doesn't really make sense since we're showing a singular value so let's just set this as false and now this is looking pretty good but how about the number on the inside I want to make that show the actual value not the total which is what it's currently showing so I'm going to take this vote average value and we're going to add a label prop we're inside so let's set this to a dynamic value of our about average but I'm going to also multiply this by 10 to turn it into a percent image so I'm going to also add that percentage symbol where now we can see that we have a big float to this and we don't necessarily need that so I'm going to wrap this in parentheses I'm going to also apply to fixed and we can now see that we have a nice number that represents how well our fans are liking this particular movie if we want we can even stylize this more such as I probably need some margin bottom on this to separate it away from the other cards how about I want the text to be a little bit bigger I want the font to be bold so it's nice and visible and then I also want to set it up so that it's not super big as it is now so how about a width of 24 and a height of 24. and we can see that that's looking a lot better sitting inside of here and if we also update this label to user rating I think we can call that complete so let's replicate this over to Oppenheimer so I'm going to go ahead and just simply copy this div that's wrapping our card and I'm going to go ahead and paste it on top of our Oppenheimer cards then as usual I want to make sure I update this to the Oppenheimer data where we have a Twist where even though it's not making as much money it looks like people are liking this movie more than Barbie now I think this is a pretty good overview but let's add one more thing let's have them competing against each other in one chart so for this last one we're going to use a line chart where we can see an example down here where we have two different streams of data where how about one is Barbie and one is Oppenheimer now just as a quick note in caveat the only data that I have is domestic data and that domestic is for the US so it's only going to be the data numbers the revenue numbers for the US for this first week or so so starting with this usage example I'm going to make sure that I have my card my title and my line chart where all I really need to do is add my LINE chart I'm going to copy in this chart data as well as this date former just so that I have an example to work from and specifically that formatter I'll show how that works in a second then I'm going to also copy in that card and for this one I'm going to paste in at the bottom of everything so I actually need to add yet another div to wrap all this so I'm going to make sure that I Nest this all inside of my top level div so at this point we can see that I have my chart with all that data inside I'm also going to just add some margin top just to make sure that it's spaced out a little bit but now let's actually update this chart data to relevant data for our movies so in both of these data files I have domestic daily and each of these represent a specific date and the revenue for that specific date so what we're going to do is we're going to match up that date and have the revenue numbers for both movies inside of each object that gets passed in now there's probably a better way to do this but I'm going to start off by creating my chart data constant and what I'm going to actually do is I'm going to map through RB data.domestic daily so what this is going to do is it's going to give me a new instance for each of those pieces of data now as I'm mapping through I'm going to have that revenue for Barbie and I'm going to also have the date so what I can do is inside of this map statement I'm going to ultimately return my dates and I'm going to also return actually I can just put that the colon and I can return my Barbie number as that Revenue number now when I said that I can probably do this about better way I probably want to have an array that's independent of my Barbie dated Oppenheimer data that has just the dates or something along those lines where I'm not just mapping through this data but for this purpose and just to kind of show as an example we're going to work with this but what I can do now is I can look for the Oppenheimer data that has that specific date so I'm going to say const Oppenheimer is equal to my Oppenheimer data dot domestic daily where I'm going to use the find method for op and I'm going to find where my op.date is equal to my date so what that's going to do is it's going to compare the date in the domestic daily for Oppenheimer compared to the specific value of the current instance of the map statement for that date it's going to find that value and once I have that I'm going to now be able to plug in for Oppenheimer my oppenheimer.revenue now of course this is yelling at me because it might not exist I'm going to make sure I add my conditional optional chaining there but now I can get rid of that original chart and I can start to look at how I'm going to actually add this into my data so if I scroll back down all the way to my card that has the line chart we can see that first of all it looks like I capitalized that differently than we originally had it so I'm going to go ahead and fix that but we can also update the categories where I have Barbie and I have Oppenheimer I think it's only appropriate that I make Barbie pink and if we look inside of our dashboard we can see already we have our data actually being added but it looks like something funky is going on where if we see inside of this little tool tip it has percentages where that's not necessarily the data format that we're working with if we look at this value formatter this is what we were talking about before or what this is going to do is allow us to change how the data looks for the presentation purposes if we look at the data format that copied in as the example it looks like what this is doing is it's kind of doing something similar to what we needed maybe I could have used that in the beginning but what I'm just going to do is get rid of that and I'm going to ultimately pass in my ad commas to number and once it's in there we can see that it's now working properly now if we also look on the side of this we can see that we also have an issue where we're not seeing the right values here where we just see a bunch of zeros on side of the line chart we have this y-axis width where we can control how much space is inside so if we set it to 120 for instance we can see that the issue was just the numbers were too big for that scale but now with that bigger width we can see the numbers as it goes through that chart and finally importantly we want to make sure that we update the title to the right thing so domestic daily and we can see that our label was updated but generally we can see that we had this nice look at a high level look of how barbieverse Oppenheimer did while this was a pretty simple example of some of the different components we can look at Tremor where there's a lot of different opportunities for the different types of data that we can show if we look at the blocks we can see that even more so it's going to give us a lot of options for pre-configured sets of components that give us a lot of really awesome ways to drop these in into our applications for instance if we wanted to track those Revenue numbers we wanted to see the trends we wanted to see how it's working daily we can use a card like this or if we wanted to start working with the full data set such as tabular data and actually dump that on the page for somebody to be able to browse through and see we have a lot of different table options as well but whatever your dashboard needs this really gives a lot of opportunity for these drop-in components to make things look a lot nicer than just a static bunch of text on a screen well the Tremor you can finally deliver that rundown whenever you actually figure out what that means if you're looking to learn more about how you can build full stack applications with the react such as maybe you want to store all this data inside of a database have user authentication I'm building a full stack react course that teaches you all these Concepts using operate so make sure you head over to spacejelly.dev react apparate where you can sign up to get updates as well as tips for react if you want to learn more about how you can liven up those dashboards or really any kind of web application with things like animations check out my video where I teach you how to do that with frame remotion that data is not going anywhere so make sure you give it a thumbs up subscribe and click that little notification Bell for more web dev tutorials thanks for watching

Channel: Colby Fayock

Views: 11,618

Keywords: data visualization, dashboard, data visualization dashboard react, data visualization dashboard using reactjs, reactjs dashboard, react data visualization, react tremor, react tremor dashboard, tremor dashboard, tremor dashboard react

Id: LAWjsToL7tQ

Length: 17min 13sec (1033 seconds)

Published: Thu Aug 10 2023