‫Welcome to a really fun lecture
‫where we're gonna render an amazing-looking line chart
‫for the hotel sales over time.
‫Now, there are many chart libraries
‫in the React ecosystem but one of the most popular ones
‫and the most easy-to-use one as well is called Recharts.
‫So let's finally come back to our terminal
‫after a long time and then let's NPM install Recharts.
‫And let's do version number two.
‫And as always, you can then go
‫out and check the documentation for this library.
‫So that should be this first one right here, Recharts.org
‫even though this documentation is not really that great
‫so that's why it's gonna be helpful to have this video
‫and the next one,
‫so that you can really learn how to do this.
‫Alright.
‫And while we wait here that this is installing
‫let's check out the examples here.
‫And so what we are going to build now is something
‫like this line chart here, or maybe it's called an area
‫chart as well.
‫Yeah, something like this here.
‫All right.
‫And you have many different charts, like a bar chart
‫that we will actually not do.
‫You have a scatter chart.
‫And this pie one is what we're gonna do in the next lecture
‫but instead of messing here with the documentation
‫let's now learn right here in this video how
‫we can create a nice area or a line chart.
‫So in this lecture, we will work on
‫this sales chart right here.
‫So we already have a styled component, we have
‫some fake data so that we can get started, and then
‫we also have some other stuff here that we're going to
‫use later.
‫But for now, let's just create this sales chart
‫and then use the styled sales chart material.
‫Let's just get started with a heading like an H2 one.
‫And then here, let's for now, just write sales
‫and then we can include that right here.
‫So actually this last one, so sales chart.
‫All right, and down here it is.
‫So this chart
‫does indeed occupy the entire width of the container
‫and that's because of this grid column
‫which goes from the beginning to the end.
‫So that's that minus one right there.
‫Okay, and now let's actually get started
‫with the chart itself.
‫So let's bring in the area chart component
‫and then here we need to specify the data prop.
‫And so that data is that fake
‫or that test data that I have up there.
‫So what's it called?
‫Yeah, it's called fake data.
‫Now if we save it just like this
‫then nothing is really gonna happen.
‫And instead we just, well, we actually get nothing.
‫And so now in here we need to use the area charged
‫or the area component actually.
‫So we need to bring in this one right here.
‫And then what we need to specify is the data key.
‫And so this is where we specify what data
‫this area should be based on.
‫And so let's come here
‫to our data and check out what we actually have.
‫So this is an array with 30 objects for 30 days.
‫So each of them has the label, which is the date.
‫Then we have total sales, and then we have the extra sales
‫which is basically the breakfast.
‫And so we will want one area
‫for the total sales and one for extra sales.
‫And then the label for each of them will be this date.
‫So total sales, and this is a self-closing one.
‫And let's see if
‫with this we get something.
‫Well, apparently not yet.
‫So let's specify a few more props in here.
‫So we can specify the type here, let's make it monotone.
‫So with just one color.
‫And then as for the colors
‫we can specify both the stroke and the fill.
‫And here for now, I will just use some fake colors.
‫So red and orange maybe.
‫And so for now, that should be enough.
‫Then let's bring in a grid as well.
‫So another component here, which is the Cartesian grid.
‫And then actually, in order to make the chart visible
‫I think what we are missing here is the height
‫and width props.
‫So we actually need to give this chart some dimensions.
‫And so let's say the height is 300 for now at least.
‫And let's give it a width of 700.
‫And so now here is our chart.
‫It doesn't look that nice yet, but it is already something.
‫So now let's add some access here
‫to the sites and then also that tool tip.
‫So let's start with that.
‫So that is just using the tool tip component.
‫And so then as we hover here, it'll give us the value
‫for the current value here in the x axis
‫which we actually don't have yet.
‫And so let's specify that here.
‫So with this component
‫and now here we need to again give it the data key.
‫And so that is now called label.
‫So this one right here is to display the labels here.
‫So in the x axis, while this one here is the y axis
‫as you might have learned like in some math course or so.
‫But anyway, let's then also specify that one.
‫And here we can just give the unit.
‫So this one is just dollars.
‫So because that's the sales.
‫Now here about the width of the container
‫we actually want to make it fluid, right?
‫So if the page is this white
‫we want it to occupy the entire space.
‫And if it's a bit smaller, then it should still fit here.
‫So we don't want any of these vertical scroll bars.
‫And so here we can wrap the entire thing
‫into a responsive container.
‫So responsive container
‫which is also provided again by Recharts.
‫So wrapping the entire thing in there.
‫And then we remove these
‫from the chart itself, place them here, and then the width
‫we can set it to a percentage.
‫So for example, 100% as a string here.
‫And so then indeed it will simply
‫occupy that entire container.
‫Maybe now maybe if we reload
‫or maybe it really needs a bit more space.
‫So apparently that's the case
‫but then here at some point it really starts then
‫occupying it getting larger and larger.
‫Now next up, let's style a little bit these lines here.
‫So we can give them different type of strokes.
‫So we can do stroke dash array, which looks kind of weird
‫but then here we can specify some number
‫and then that will change.
‫And let's come up here
‫to our style because for some reason we cannot
‫really change the color of these lines.
‫And so I had to do this manually here.
‫So with this hack inside this style component.
‫So without this, the color would be a bit different.
‫So that's not really visible there right now.
‫But for dark mode, we will need this color to change.
‫And so that's why I set it there manually.
‫And speaking of colors, let's now actually get these colors
‫from this object that they have up here.
‫So here I have two different objects which will
‫give me different colors.
‫And so these colors will depend
‫whether we are in dark mode or not.
‫And so let's place these inside the component
‫because only inside the component we can actually figure
‫out whether we are in dark mode or not.
‫And so here we will now once again
‫use that custom hook that belongs
‫to the context provider that we built earlier.
‫So use dark mode.
‫And so now we can use colors,
‫dot total sales, dot stroke, and also dot fill.
‫So to change these right here, so colors
‫total sales dot stroke,
‫and colors total sales dot fill.
‫Give it a safe.
‫And so this now looks more in line with our application.
‫And if we then change to dark mode, then beautiful.
‫All of the colors change then as well.
‫Okay? Then we can also set the text color here.
‫Or actually what I meant is the color
‫of the ticks and of the tick line.
‫So there's a lot of stuff
‫as you can see that we can customize.
‫And so here we need to pass
‫in a basically an object CSS, so some styling.
‫And then here we will use the fill property set
‫to colors dot text.
‫And for the tick line we will do stroke
‫also equals colors dot text.
‫So there was a slight
‫but subtle change here in these colors.
‫And the same when we switch to dark mode.
‫So then they become white, where before they had this gray
‫which of course is not ideal.
‫And also this background here should change as well, right?
‫So that also shouldn't be white.
‫Let's actually keep that turned on.
‫And then I will just grab these, place them here.
‫And finally
‫let's then also change the content style property here.
‫Content style without the type.
‫So here again, an object with CSS.
‫So background color, and then here
‫colors dot background, okay, and that didn't work
‫and that's because this shouldn't be here.
‫But on the tool tip, nice.
‫So this is looking fantastic.
‫And so let's customize this area here a little bit more.
‫So here we can change the stroke width, for example to two.
‫So then the line there gets a bit bigger.
‫Then we can change the name that's gonna appear
‫in the tool tip to total sales and also set a unit.
‫So that's gonna be these dollars.
‫And so now in our tooltip, that will all show up.
‫So now we have those total sales here
‫and then also the dollar unit.
‫Great. And so let's just duplicate this for the extra sales.
‫So all we have to do is to change the name here
‫I think it's called extras.
‫And then here the same, and then here, extras.
‫And then nice, we get this second line on top
‫or basically the second area
‫and also the second position right here in our tooltip.
‫So this really looks more
‫and more like a real world application now.
‫So this is something that you might see in a banking app
‫or in a bookkeeping app or something like that.
‫Nice.
‫But now there's something very important
‫that is still not correct.
‫'Cause right now we have still this static data.
‫So this data is not coming from our actual bookings
‫but it is, as I just said, still this fake data right here.
‫And so now it's time to change that.
‫So here we need to receive the bookings
‫and we'll also need the number of days.
‫So let's pass that in.
‫And the number of days like that.
‫So what we need to do now is to basically
‫compute a data structure like this one.
‫So an array which contains one object for each day.
‫And that might include even days where they are
‫no sales at all.
‫But we still will want this chart here to have
‫basically one entry for each of the days
‫so that it really is like a time series.
‫Now, okay, so let's compute this kind of data here
‫from scratch using the bookings array that we receive.
‫So that sounds pretty complicated, but it's not that bad.
‫So let's start from the very beginning
‫and start by creating basically all of these dates.
‫And the way we can do that is by again, leveraging one
‫of the helper functions that are part of date F and S.
‫So that's called each day of interval
‫so exactly this one right here.
‫And then this takes in an object
‫with the start and the end property.
‫So here, the start date will basically be today
‫minus the number of days that we want to look at.
‫So if that is seven, then that is today minus seven days.
‫So let's then again, use the sub days function.
‫And so here you're starting to see how useful it
‫can be to have a date helper library like this one.
‫So this is an amazing library that I highly
‫recommend you to really check
‫out and read the documentation as well.
‫But anyway, here we can now just create today
‫and then subtract the number of days.
‫And actually we need then minus one
‫and the end is just gonna be today.
‫Date like this.
‫And then of course, we need to store this.
‫So all dates, and then let's just log this Query console
‫so that we see what we actually got there.
‫So indeed, that's an array right now with seven dates.
‫So today is May 17th, and then we have all these other ones.
‫And if we had 90 days, then
‫of course here we would get this huge array
‫with all these 90 ones.
‫So let's do 30 because that's the most common one.
‫And so based on this array, we can now create our data.
‫So basically we will loop over this array
‫and create a new one based on it.
‫So dot map.
‫And then for each date, we need to do a couple of things.
‫So we will need to create an object like this one.
‫So let's do that.
‫Let's return.
‫And first of all, the label.
‫And so here we can use yet another function
‫from date F, and yes, so that's format.
‫Then here we pass in a day, and then a string
‫which basically encodes the format that we want.
‫So here we want month, and then DD for day.
‫And again, you should check out the documentation to
‫actually see how exactly this function works.
‫Now, next up, we then need to total sales.
‫And so this one is gonna be a bit more complicated
‫but we can do it.
‫So let's take all the bookings that we have
‫and then from there, filter the ones only
‫for the current date in this loop.
‫So filter and then booking
‫and then yet another one of these functions.
‫So here we can basically check
‫and actually this is not the one I want, I want is same day.
‫So basically with this
‫we can check if today's are the same.
‫And so we check the current day in the loop with
‫and here we need to create a new date based
‫on the current booking dot created at.
‫So this library always needs to work
‫with JavaScript date objects.
‫And so we always need to create them
‫like this if we have a string.
‫All right, so with this, we get all the bookings
‫from the current date in this iteration, and then
‫all we have to do is to sum all of them up.
‫So we just use a normal reducer.
‫And so now this is very easy.
‫So we just add the accumulator
‫to the current dot total price
‫and the accumulator starts at zero.
‫So that's the total sales for this day.
‫And then the extra sales is gonna be the same thing
‫but here we just keep adding the extras sales
‫or actually it's called extras price in our database.
‫Okay, so let's see if we got it correctly.
‫So let's do it just for seven days
‫and, well, that's looking pretty great.
‫So we have for dates,
‫we have some sales where some of them don't have anything.
‫And well, let's try this out, then.
‫We are ready to now use this data
‫instead of our fake data.
‫Nice. So that's looking really great.
‫And if yours looks very different
‫and you don't have any sales right now
‫then maybe you need to upload the bookings again.
‫So I will actually do that now.
‫So that's gonna take some time.
‫And then if I reload, then that will probably
‫shift the bookings a bit to the right.
‫Yeah, great.
‫So now for the last 30 days.
‫And so here, then we get a completely different charge.
‫So for all the last 30 days.
‫And of course we can finally do the same thing for 90 days.
‫And so then here we see, or actually we don't see.
‫That's because we removed the console dot lock earlier.
‫So I was trying to look
‫for the 90 days, but yeah, it's no longer here.
‫Now I just want to delete this console dot lock there
‫from the dashboard layout.
‫Maybe there's another one, maybe not.
‫But anyway, this is all I had to show you here
‫for this line chart.
‫So again, there's a lot of stuff going on here.
‫And so as always, just make sure to head
‫over to the documentation if you want to learn more
‫about all of this and how you can expand this even more.
‫But for this lecture and for this course
‫this is more than enough, I think.
‫And so now let's move on to another type of chart
‫which will be a pie chart.