1 00:00:01,260 --> 00:00:04,440 ‫Welcome to a really fun lecture 2 00:00:04,440 --> 00:00:08,430 ‫where we're gonna render an amazing-looking line chart 3 00:00:08,430 --> 00:00:11,133 ‫for the hotel sales over time. 4 00:00:12,720 --> 00:00:14,850 ‫Now, there are many chart libraries 5 00:00:14,850 --> 00:00:19,800 ‫in the React ecosystem but one of the most popular ones 6 00:00:19,800 --> 00:00:24,063 ‫and the most easy-to-use one as well is called Recharts. 7 00:00:25,950 --> 00:00:29,340 ‫So let's finally come back to our terminal 8 00:00:29,340 --> 00:00:34,233 ‫after a long time and then let's NPM install Recharts. 9 00:00:36,120 --> 00:00:39,123 ‫And let's do version number two. 10 00:00:40,170 --> 00:00:43,310 ‫And as always, you can then go 11 00:00:46,080 --> 00:00:51,080 ‫out and check the documentation for this library. 12 00:00:53,340 --> 00:00:57,960 ‫So that should be this first one right here, Recharts.org 13 00:00:57,960 --> 00:01:02,130 ‫even though this documentation is not really that great 14 00:01:02,130 --> 00:01:05,610 ‫so that's why it's gonna be helpful to have this video 15 00:01:05,610 --> 00:01:06,750 ‫and the next one, 16 00:01:06,750 --> 00:01:09,933 ‫so that you can really learn how to do this. 17 00:01:11,640 --> 00:01:12,570 ‫Alright. 18 00:01:12,570 --> 00:01:15,850 ‫And while we wait here that this is installing 19 00:01:16,740 --> 00:01:18,870 ‫let's check out the examples here. 20 00:01:18,870 --> 00:01:21,720 ‫And so what we are going to build now is something 21 00:01:21,720 --> 00:01:26,720 ‫like this line chart here, or maybe it's called an area 22 00:01:27,600 --> 00:01:29,343 ‫chart as well. 23 00:01:30,300 --> 00:01:31,850 ‫Yeah, something like this here. 24 00:01:33,450 --> 00:01:34,500 ‫All right. 25 00:01:34,500 --> 00:01:38,190 ‫And you have many different charts, like a bar chart 26 00:01:38,190 --> 00:01:41,370 ‫that we will actually not do. 27 00:01:41,370 --> 00:01:43,323 ‫You have a scatter chart. 28 00:01:44,322 --> 00:01:48,690 ‫And this pie one is what we're gonna do in the next lecture 29 00:01:48,690 --> 00:01:51,900 ‫but instead of messing here with the documentation 30 00:01:51,900 --> 00:01:54,630 ‫let's now learn right here in this video how 31 00:01:54,630 --> 00:01:58,533 ‫we can create a nice area or a line chart. 32 00:01:59,790 --> 00:02:03,600 ‫So in this lecture, we will work on 33 00:02:03,600 --> 00:02:05,943 ‫this sales chart right here. 34 00:02:06,870 --> 00:02:10,170 ‫So we already have a styled component, we have 35 00:02:10,170 --> 00:02:13,680 ‫some fake data so that we can get started, and then 36 00:02:13,680 --> 00:02:17,250 ‫we also have some other stuff here that we're going to 37 00:02:17,250 --> 00:02:18,960 ‫use later. 38 00:02:18,960 --> 00:02:23,400 ‫But for now, let's just create this sales chart 39 00:02:23,400 --> 00:02:28,113 ‫and then use the styled sales chart material. 40 00:02:29,430 --> 00:02:34,430 ‫Let's just get started with a heading like an H2 one. 41 00:02:39,930 --> 00:02:43,590 ‫And then here, let's for now, just write sales 42 00:02:43,590 --> 00:02:45,933 ‫and then we can include that right here. 43 00:02:46,920 --> 00:02:51,920 ‫So actually this last one, so sales chart. 44 00:02:53,820 --> 00:02:56,883 ‫All right, and down here it is. 45 00:02:57,930 --> 00:02:59,160 ‫So this chart 46 00:02:59,160 --> 00:03:03,150 ‫does indeed occupy the entire width of the container 47 00:03:03,150 --> 00:03:04,840 ‫and that's because of this grid column 48 00:03:04,840 --> 00:03:08,070 ‫which goes from the beginning to the end. 49 00:03:08,070 --> 00:03:10,563 ‫So that's that minus one right there. 50 00:03:12,690 --> 00:03:16,020 ‫Okay, and now let's actually get started 51 00:03:16,020 --> 00:03:18,003 ‫with the chart itself. 52 00:03:19,590 --> 00:03:23,910 ‫So let's bring in the area chart component 53 00:03:23,910 --> 00:03:27,900 ‫and then here we need to specify the data prop. 54 00:03:27,900 --> 00:03:31,800 ‫And so that data is that fake 55 00:03:31,800 --> 00:03:36,510 ‫or that test data that I have up there. 56 00:03:36,510 --> 00:03:38,460 ‫So what's it called? 57 00:03:38,460 --> 00:03:40,743 ‫Yeah, it's called fake data. 58 00:03:42,990 --> 00:03:45,150 ‫Now if we save it just like this 59 00:03:45,150 --> 00:03:47,550 ‫then nothing is really gonna happen. 60 00:03:47,550 --> 00:03:51,420 ‫And instead we just, well, we actually get nothing. 61 00:03:51,420 --> 00:03:55,830 ‫And so now in here we need to use the area charged 62 00:03:55,830 --> 00:04:00,270 ‫or the area component actually. 63 00:04:00,270 --> 00:04:02,730 ‫So we need to bring in this one right here. 64 00:04:02,730 --> 00:04:07,110 ‫And then what we need to specify is the data key. 65 00:04:07,110 --> 00:04:09,835 ‫And so this is where we specify what data 66 00:04:09,835 --> 00:04:12,750 ‫this area should be based on. 67 00:04:12,750 --> 00:04:14,310 ‫And so let's come here 68 00:04:14,310 --> 00:04:18,210 ‫to our data and check out what we actually have. 69 00:04:18,210 --> 00:04:22,710 ‫So this is an array with 30 objects for 30 days. 70 00:04:22,710 --> 00:04:26,070 ‫So each of them has the label, which is the date. 71 00:04:26,070 --> 00:04:29,970 ‫Then we have total sales, and then we have the extra sales 72 00:04:29,970 --> 00:04:32,670 ‫which is basically the breakfast. 73 00:04:32,670 --> 00:04:35,130 ‫And so we will want one area 74 00:04:35,130 --> 00:04:39,120 ‫for the total sales and one for extra sales. 75 00:04:39,120 --> 00:04:42,363 ‫And then the label for each of them will be this date. 76 00:04:46,080 --> 00:04:51,080 ‫So total sales, and this is a self-closing one. 77 00:04:52,380 --> 00:04:54,268 ‫And let's see if 78 00:04:54,268 --> 00:04:56,100 ‫with this we get something. 79 00:04:56,100 --> 00:04:57,873 ‫Well, apparently not yet. 80 00:05:03,060 --> 00:05:07,020 ‫So let's specify a few more props in here. 81 00:05:07,020 --> 00:05:12,020 ‫So we can specify the type here, let's make it monotone. 82 00:05:13,560 --> 00:05:15,210 ‫So with just one color. 83 00:05:15,210 --> 00:05:17,670 ‫And then as for the colors 84 00:05:17,670 --> 00:05:21,270 ‫we can specify both the stroke and the fill. 85 00:05:21,270 --> 00:05:24,483 ‫And here for now, I will just use some fake colors. 86 00:05:26,910 --> 00:05:29,793 ‫So red and orange maybe. 87 00:05:32,040 --> 00:05:34,020 ‫And so for now, that should be enough. 88 00:05:34,020 --> 00:05:38,460 ‫Then let's bring in a grid as well. 89 00:05:38,460 --> 00:05:42,570 ‫So another component here, which is the Cartesian grid. 90 00:05:44,460 --> 00:05:48,360 ‫And then actually, in order to make the chart visible 91 00:05:48,360 --> 00:05:51,360 ‫I think what we are missing here is the height 92 00:05:51,360 --> 00:05:53,190 ‫and width props. 93 00:05:53,190 --> 00:05:56,910 ‫So we actually need to give this chart some dimensions. 94 00:05:56,910 --> 00:06:01,910 ‫And so let's say the height is 300 for now at least. 95 00:06:04,530 --> 00:06:08,100 ‫And let's give it a width of 700. 96 00:06:08,100 --> 00:06:12,600 ‫And so now here is our chart. 97 00:06:12,600 --> 00:06:17,600 ‫It doesn't look that nice yet, but it is already something. 98 00:06:17,850 --> 00:06:19,980 ‫So now let's add some access here 99 00:06:19,980 --> 00:06:22,863 ‫to the sites and then also that tool tip. 100 00:06:24,150 --> 00:06:25,593 ‫So let's start with that. 101 00:06:26,610 --> 00:06:30,870 ‫So that is just using the tool tip component. 102 00:06:30,870 --> 00:06:33,990 ‫And so then as we hover here, it'll give us the value 103 00:06:33,990 --> 00:06:38,610 ‫for the current value here in the x axis 104 00:06:38,610 --> 00:06:40,500 ‫which we actually don't have yet. 105 00:06:40,500 --> 00:06:42,213 ‫And so let's specify that here. 106 00:06:43,110 --> 00:06:45,610 ‫So with this component 107 00:06:47,070 --> 00:06:51,150 ‫and now here we need to again give it the data key. 108 00:06:51,150 --> 00:06:54,603 ‫And so that is now called label. 109 00:06:56,100 --> 00:07:00,900 ‫So this one right here is to display the labels here. 110 00:07:00,900 --> 00:07:04,860 ‫So in the x axis, while this one here is the y axis 111 00:07:04,860 --> 00:07:08,793 ‫as you might have learned like in some math course or so. 112 00:07:09,960 --> 00:07:14,190 ‫But anyway, let's then also specify that one. 113 00:07:14,190 --> 00:07:18,090 ‫And here we can just give the unit. 114 00:07:18,090 --> 00:07:21,003 ‫So this one is just dollars. 115 00:07:21,840 --> 00:07:23,463 ‫So because that's the sales. 116 00:07:25,260 --> 00:07:27,840 ‫Now here about the width of the container 117 00:07:27,840 --> 00:07:31,230 ‫we actually want to make it fluid, right? 118 00:07:31,230 --> 00:07:33,480 ‫So if the page is this white 119 00:07:33,480 --> 00:07:36,510 ‫we want it to occupy the entire space. 120 00:07:36,510 --> 00:07:41,040 ‫And if it's a bit smaller, then it should still fit here. 121 00:07:41,040 --> 00:07:46,040 ‫So we don't want any of these vertical scroll bars. 122 00:07:46,230 --> 00:07:49,230 ‫And so here we can wrap the entire thing 123 00:07:49,230 --> 00:07:51,033 ‫into a responsive container. 124 00:07:52,410 --> 00:07:55,080 ‫So responsive container 125 00:07:55,080 --> 00:07:59,013 ‫which is also provided again by Recharts. 126 00:08:00,360 --> 00:08:03,000 ‫So wrapping the entire thing in there. 127 00:08:03,000 --> 00:08:05,040 ‫And then we remove these 128 00:08:05,040 --> 00:08:10,040 ‫from the chart itself, place them here, and then the width 129 00:08:10,170 --> 00:08:12,420 ‫we can set it to a percentage. 130 00:08:12,420 --> 00:08:17,420 ‫So for example, 100% as a string here. 131 00:08:18,810 --> 00:08:21,390 ‫And so then indeed it will simply 132 00:08:21,390 --> 00:08:23,943 ‫occupy that entire container. 133 00:08:25,200 --> 00:08:27,990 ‫Maybe now maybe if we reload 134 00:08:27,990 --> 00:08:31,410 ‫or maybe it really needs a bit more space. 135 00:08:31,410 --> 00:08:33,340 ‫So apparently that's the case 136 00:08:34,560 --> 00:08:37,950 ‫but then here at some point it really starts then 137 00:08:37,950 --> 00:08:41,163 ‫occupying it getting larger and larger. 138 00:08:42,240 --> 00:08:46,683 ‫Now next up, let's style a little bit these lines here. 139 00:08:47,700 --> 00:08:51,483 ‫So we can give them different type of strokes. 140 00:08:52,560 --> 00:08:57,300 ‫So we can do stroke dash array, which looks kind of weird 141 00:08:57,300 --> 00:08:59,850 ‫but then here we can specify some number 142 00:08:59,850 --> 00:09:01,233 ‫and then that will change. 143 00:09:02,070 --> 00:09:04,410 ‫And let's come up here 144 00:09:04,410 --> 00:09:07,770 ‫to our style because for some reason we cannot 145 00:09:07,770 --> 00:09:12,270 ‫really change the color of these lines. 146 00:09:12,270 --> 00:09:14,820 ‫And so I had to do this manually here. 147 00:09:14,820 --> 00:09:18,480 ‫So with this hack inside this style component. 148 00:09:18,480 --> 00:09:21,153 ‫So without this, the color would be a bit different. 149 00:09:22,260 --> 00:09:25,770 ‫So that's not really visible there right now. 150 00:09:25,770 --> 00:09:30,150 ‫But for dark mode, we will need this color to change. 151 00:09:30,150 --> 00:09:32,613 ‫And so that's why I set it there manually. 152 00:09:34,410 --> 00:09:38,730 ‫And speaking of colors, let's now actually get these colors 153 00:09:38,730 --> 00:09:42,240 ‫from this object that they have up here. 154 00:09:42,240 --> 00:09:45,840 ‫So here I have two different objects which will 155 00:09:45,840 --> 00:09:47,490 ‫give me different colors. 156 00:09:47,490 --> 00:09:49,740 ‫And so these colors will depend 157 00:09:49,740 --> 00:09:53,010 ‫whether we are in dark mode or not. 158 00:09:53,010 --> 00:09:56,670 ‫And so let's place these inside the component 159 00:09:56,670 --> 00:09:59,820 ‫because only inside the component we can actually figure 160 00:09:59,820 --> 00:10:02,733 ‫out whether we are in dark mode or not. 161 00:10:04,170 --> 00:10:06,180 ‫And so here we will now once again 162 00:10:06,180 --> 00:10:08,460 ‫use that custom hook that belongs 163 00:10:08,460 --> 00:10:11,493 ‫to the context provider that we built earlier. 164 00:10:12,570 --> 00:10:15,633 ‫So use dark mode. 165 00:10:19,320 --> 00:10:21,090 ‫And so now we can use colors, 166 00:10:21,090 --> 00:10:25,713 ‫dot total sales, dot stroke, and also dot fill. 167 00:10:27,360 --> 00:10:32,360 ‫So to change these right here, so colors 168 00:10:32,973 --> 00:10:36,033 ‫total sales dot stroke, 169 00:10:39,510 --> 00:10:43,650 ‫and colors total sales dot fill. 170 00:10:45,690 --> 00:10:47,130 ‫Give it a safe. 171 00:10:47,130 --> 00:10:50,400 ‫And so this now looks more in line with our application. 172 00:10:50,400 --> 00:10:54,600 ‫And if we then change to dark mode, then beautiful. 173 00:10:54,600 --> 00:10:57,513 ‫All of the colors change then as well. 174 00:10:59,790 --> 00:11:03,753 ‫Okay? Then we can also set the text color here. 175 00:11:04,890 --> 00:11:07,440 ‫Or actually what I meant is the color 176 00:11:07,440 --> 00:11:10,293 ‫of the ticks and of the tick line. 177 00:11:11,970 --> 00:11:14,040 ‫So there's a lot of stuff 178 00:11:14,040 --> 00:11:16,203 ‫as you can see that we can customize. 179 00:11:17,040 --> 00:11:18,610 ‫And so here we need to pass 180 00:11:19,446 --> 00:11:23,520 ‫in a basically an object CSS, so some styling. 181 00:11:23,520 --> 00:11:27,510 ‫And then here we will use the fill property set 182 00:11:27,510 --> 00:11:29,943 ‫to colors dot text. 183 00:11:31,140 --> 00:11:35,903 ‫And for the tick line we will do stroke 184 00:11:39,540 --> 00:11:42,633 ‫also equals colors dot text. 185 00:11:43,650 --> 00:11:45,570 ‫So there was a slight 186 00:11:45,570 --> 00:11:48,000 ‫but subtle change here in these colors. 187 00:11:48,000 --> 00:11:51,060 ‫And the same when we switch to dark mode. 188 00:11:51,060 --> 00:11:55,320 ‫So then they become white, where before they had this gray 189 00:11:55,320 --> 00:11:57,720 ‫which of course is not ideal. 190 00:11:57,720 --> 00:12:02,520 ‫And also this background here should change as well, right? 191 00:12:02,520 --> 00:12:04,683 ‫So that also shouldn't be white. 192 00:12:05,610 --> 00:12:08,610 ‫Let's actually keep that turned on. 193 00:12:08,610 --> 00:12:13,023 ‫And then I will just grab these, place them here. 194 00:12:14,160 --> 00:12:15,780 ‫And finally 195 00:12:15,780 --> 00:12:20,103 ‫let's then also change the content style property here. 196 00:12:22,470 --> 00:12:27,360 ‫Content style without the type. 197 00:12:27,360 --> 00:12:29,733 ‫So here again, an object with CSS. 198 00:12:30,870 --> 00:12:35,870 ‫So background color, and then here 199 00:12:36,450 --> 00:12:41,450 ‫colors dot background, okay, and that didn't work 200 00:12:43,530 --> 00:12:46,050 ‫and that's because this shouldn't be here. 201 00:12:46,050 --> 00:12:50,463 ‫But on the tool tip, nice. 202 00:12:51,750 --> 00:12:54,180 ‫So this is looking fantastic. 203 00:12:54,180 --> 00:12:59,180 ‫And so let's customize this area here a little bit more. 204 00:12:59,730 --> 00:13:04,730 ‫So here we can change the stroke width, for example to two. 205 00:13:07,200 --> 00:13:10,440 ‫So then the line there gets a bit bigger. 206 00:13:10,440 --> 00:13:12,750 ‫Then we can change the name that's gonna appear 207 00:13:12,750 --> 00:13:17,750 ‫in the tool tip to total sales and also set a unit. 208 00:13:20,850 --> 00:13:23,280 ‫So that's gonna be these dollars. 209 00:13:23,280 --> 00:13:26,640 ‫And so now in our tooltip, that will all show up. 210 00:13:26,640 --> 00:13:29,100 ‫So now we have those total sales here 211 00:13:29,100 --> 00:13:31,713 ‫and then also the dollar unit. 212 00:13:33,090 --> 00:13:38,090 ‫Great. And so let's just duplicate this for the extra sales. 213 00:13:38,760 --> 00:13:42,450 ‫So all we have to do is to change the name here 214 00:13:42,450 --> 00:13:44,103 ‫I think it's called extras. 215 00:13:44,940 --> 00:13:49,900 ‫And then here the same, and then here, extras. 216 00:13:51,630 --> 00:13:56,630 ‫And then nice, we get this second line on top 217 00:13:56,730 --> 00:13:59,100 ‫or basically the second area 218 00:13:59,100 --> 00:14:02,680 ‫and also the second position right here in our tooltip. 219 00:14:03,660 --> 00:14:05,280 ‫So this really looks more 220 00:14:05,280 --> 00:14:08,160 ‫and more like a real world application now. 221 00:14:08,160 --> 00:14:11,640 ‫So this is something that you might see in a banking app 222 00:14:11,640 --> 00:14:15,183 ‫or in a bookkeeping app or something like that. 223 00:14:16,500 --> 00:14:17,430 ‫Nice. 224 00:14:17,430 --> 00:14:20,400 ‫But now there's something very important 225 00:14:20,400 --> 00:14:22,410 ‫that is still not correct. 226 00:14:22,410 --> 00:14:26,163 ‫'Cause right now we have still this static data. 227 00:14:28,020 --> 00:14:31,230 ‫So this data is not coming from our actual bookings 228 00:14:31,230 --> 00:14:36,230 ‫but it is, as I just said, still this fake data right here. 229 00:14:36,360 --> 00:14:39,240 ‫And so now it's time to change that. 230 00:14:39,240 --> 00:14:42,990 ‫So here we need to receive the bookings 231 00:14:42,990 --> 00:14:46,890 ‫and we'll also need the number of days. 232 00:14:46,890 --> 00:14:48,423 ‫So let's pass that in. 233 00:14:53,070 --> 00:14:58,070 ‫And the number of days like that. 234 00:15:00,510 --> 00:15:03,090 ‫So what we need to do now is to basically 235 00:15:03,090 --> 00:15:06,450 ‫compute a data structure like this one. 236 00:15:06,450 --> 00:15:10,950 ‫So an array which contains one object for each day. 237 00:15:10,950 --> 00:15:13,950 ‫And that might include even days where they are 238 00:15:13,950 --> 00:15:15,450 ‫no sales at all. 239 00:15:15,450 --> 00:15:19,140 ‫But we still will want this chart here to have 240 00:15:19,140 --> 00:15:22,050 ‫basically one entry for each of the days 241 00:15:22,050 --> 00:15:24,963 ‫so that it really is like a time series. 242 00:15:26,400 --> 00:15:29,880 ‫Now, okay, so let's compute this kind of data here 243 00:15:29,880 --> 00:15:33,753 ‫from scratch using the bookings array that we receive. 244 00:15:34,830 --> 00:15:39,450 ‫So that sounds pretty complicated, but it's not that bad. 245 00:15:39,450 --> 00:15:41,850 ‫So let's start from the very beginning 246 00:15:41,850 --> 00:15:45,960 ‫and start by creating basically all of these dates. 247 00:15:45,960 --> 00:15:49,560 ‫And the way we can do that is by again, leveraging one 248 00:15:49,560 --> 00:15:53,310 ‫of the helper functions that are part of date F and S. 249 00:15:53,310 --> 00:15:57,100 ‫So that's called each day of interval 250 00:15:58,050 --> 00:16:00,087 ‫so exactly this one right here. 251 00:16:00,087 --> 00:16:02,131 ‫And then this takes in an object 252 00:16:02,131 --> 00:16:06,273 ‫with the start and the end property. 253 00:16:07,800 --> 00:16:10,954 ‫So here, the start date will basically be today 254 00:16:10,954 --> 00:16:15,810 ‫minus the number of days that we want to look at. 255 00:16:15,810 --> 00:16:19,563 ‫So if that is seven, then that is today minus seven days. 256 00:16:20,520 --> 00:16:25,170 ‫So let's then again, use the sub days function. 257 00:16:25,170 --> 00:16:27,780 ‫And so here you're starting to see how useful it 258 00:16:27,780 --> 00:16:32,310 ‫can be to have a date helper library like this one. 259 00:16:32,310 --> 00:16:34,770 ‫So this is an amazing library that I highly 260 00:16:34,770 --> 00:16:36,690 ‫recommend you to really check 261 00:16:36,690 --> 00:16:39,753 ‫out and read the documentation as well. 262 00:16:40,710 --> 00:16:45,480 ‫But anyway, here we can now just create today 263 00:16:45,480 --> 00:16:48,630 ‫and then subtract the number of days. 264 00:16:48,630 --> 00:16:50,530 ‫And actually we need then minus one 265 00:16:51,420 --> 00:16:53,943 ‫and the end is just gonna be today. 266 00:16:56,250 --> 00:16:57,597 ‫Date like this. 267 00:16:57,597 --> 00:17:00,573 ‫And then of course, we need to store this. 268 00:17:01,500 --> 00:17:06,450 ‫So all dates, and then let's just log this Query console 269 00:17:06,450 --> 00:17:09,693 ‫so that we see what we actually got there. 270 00:17:11,550 --> 00:17:16,550 ‫So indeed, that's an array right now with seven dates. 271 00:17:16,650 --> 00:17:21,360 ‫So today is May 17th, and then we have all these other ones. 272 00:17:21,360 --> 00:17:23,400 ‫And if we had 90 days, then 273 00:17:23,400 --> 00:17:27,180 ‫of course here we would get this huge array 274 00:17:27,180 --> 00:17:28,653 ‫with all these 90 ones. 275 00:17:29,880 --> 00:17:33,240 ‫So let's do 30 because that's the most common one. 276 00:17:33,240 --> 00:17:38,240 ‫And so based on this array, we can now create our data. 277 00:17:38,940 --> 00:17:42,480 ‫So basically we will loop over this array 278 00:17:42,480 --> 00:17:45,453 ‫and create a new one based on it. 279 00:17:46,440 --> 00:17:48,510 ‫So dot map. 280 00:17:48,510 --> 00:17:52,860 ‫And then for each date, we need to do a couple of things. 281 00:17:52,860 --> 00:17:56,880 ‫So we will need to create an object like this one. 282 00:17:56,880 --> 00:17:59,160 ‫So let's do that. 283 00:17:59,160 --> 00:18:00,450 ‫Let's return. 284 00:18:00,450 --> 00:18:02,790 ‫And first of all, the label. 285 00:18:02,790 --> 00:18:05,850 ‫And so here we can use yet another function 286 00:18:05,850 --> 00:18:09,393 ‫from date F, and yes, so that's format. 287 00:18:11,280 --> 00:18:14,910 ‫Then here we pass in a day, and then a string 288 00:18:14,910 --> 00:18:18,960 ‫which basically encodes the format that we want. 289 00:18:18,960 --> 00:18:23,430 ‫So here we want month, and then DD for day. 290 00:18:23,430 --> 00:18:27,030 ‫And again, you should check out the documentation to 291 00:18:27,030 --> 00:18:29,943 ‫actually see how exactly this function works. 292 00:18:33,360 --> 00:18:37,320 ‫Now, next up, we then need to total sales. 293 00:18:37,320 --> 00:18:40,890 ‫And so this one is gonna be a bit more complicated 294 00:18:40,890 --> 00:18:42,840 ‫but we can do it. 295 00:18:42,840 --> 00:18:45,810 ‫So let's take all the bookings that we have 296 00:18:45,810 --> 00:18:48,690 ‫and then from there, filter the ones only 297 00:18:48,690 --> 00:18:51,363 ‫for the current date in this loop. 298 00:18:52,380 --> 00:18:56,560 ‫So filter and then booking 299 00:18:57,960 --> 00:19:00,813 ‫and then yet another one of these functions. 300 00:19:02,100 --> 00:19:04,980 ‫So here we can basically check 301 00:19:04,980 --> 00:19:09,120 ‫and actually this is not the one I want, I want is same day. 302 00:19:09,120 --> 00:19:10,380 ‫So basically with this 303 00:19:10,380 --> 00:19:13,560 ‫we can check if today's are the same. 304 00:19:13,560 --> 00:19:18,560 ‫And so we check the current day in the loop with 305 00:19:19,110 --> 00:19:21,570 ‫and here we need to create a new date based 306 00:19:21,570 --> 00:19:25,933 ‫on the current booking dot created at. 307 00:19:27,720 --> 00:19:29,910 ‫So this library always needs to work 308 00:19:29,910 --> 00:19:32,640 ‫with JavaScript date objects. 309 00:19:32,640 --> 00:19:35,146 ‫And so we always need to create them 310 00:19:35,146 --> 00:19:36,646 ‫like this if we have a string. 311 00:19:39,120 --> 00:19:43,050 ‫All right, so with this, we get all the bookings 312 00:19:43,050 --> 00:19:48,030 ‫from the current date in this iteration, and then 313 00:19:48,030 --> 00:19:52,500 ‫all we have to do is to sum all of them up. 314 00:19:52,500 --> 00:19:55,323 ‫So we just use a normal reducer. 315 00:19:56,310 --> 00:19:58,113 ‫And so now this is very easy. 316 00:19:59,340 --> 00:20:01,770 ‫So we just add the accumulator 317 00:20:01,770 --> 00:20:06,770 ‫to the current dot total price 318 00:20:06,960 --> 00:20:10,113 ‫and the accumulator starts at zero. 319 00:20:12,390 --> 00:20:15,420 ‫So that's the total sales for this day. 320 00:20:15,420 --> 00:20:20,420 ‫And then the extra sales is gonna be the same thing 321 00:20:20,820 --> 00:20:25,740 ‫but here we just keep adding the extras sales 322 00:20:27,210 --> 00:20:32,193 ‫or actually it's called extras price in our database. 323 00:20:33,750 --> 00:20:37,893 ‫Okay, so let's see if we got it correctly. 324 00:20:40,740 --> 00:20:43,030 ‫So let's do it just for seven days 325 00:20:44,520 --> 00:20:49,230 ‫and, well, that's looking pretty great. 326 00:20:49,230 --> 00:20:50,430 ‫So we have for dates, 327 00:20:50,430 --> 00:20:54,063 ‫we have some sales where some of them don't have anything. 328 00:20:55,020 --> 00:20:59,130 ‫And well, let's try this out, then. 329 00:20:59,130 --> 00:21:02,250 ‫We are ready to now use this data 330 00:21:02,250 --> 00:21:04,083 ‫instead of our fake data. 331 00:21:07,830 --> 00:21:12,030 ‫Nice. So that's looking really great. 332 00:21:12,030 --> 00:21:13,950 ‫And if yours looks very different 333 00:21:13,950 --> 00:21:16,170 ‫and you don't have any sales right now 334 00:21:16,170 --> 00:21:19,590 ‫then maybe you need to upload the bookings again. 335 00:21:19,590 --> 00:21:21,273 ‫So I will actually do that now. 336 00:21:22,920 --> 00:21:24,720 ‫So that's gonna take some time. 337 00:21:24,720 --> 00:21:28,770 ‫And then if I reload, then that will probably 338 00:21:28,770 --> 00:21:31,143 ‫shift the bookings a bit to the right. 339 00:21:32,040 --> 00:21:34,770 ‫Yeah, great. 340 00:21:34,770 --> 00:21:37,330 ‫So now for the last 30 days. 341 00:21:38,455 --> 00:21:41,450 ‫And so here, then we get a completely different charge. 342 00:21:41,450 --> 00:21:43,923 ‫So for all the last 30 days. 343 00:21:43,923 --> 00:21:48,923 ‫And of course we can finally do the same thing for 90 days. 344 00:21:49,050 --> 00:21:54,033 ‫And so then here we see, or actually we don't see. 345 00:21:55,080 --> 00:21:59,190 ‫That's because we removed the console dot lock earlier. 346 00:21:59,190 --> 00:22:00,480 ‫So I was trying to look 347 00:22:00,480 --> 00:22:05,040 ‫for the 90 days, but yeah, it's no longer here. 348 00:22:05,040 --> 00:22:09,000 ‫Now I just want to delete this console dot lock there 349 00:22:09,000 --> 00:22:10,923 ‫from the dashboard layout. 350 00:22:14,340 --> 00:22:18,033 ‫Maybe there's another one, maybe not. 351 00:22:21,510 --> 00:22:24,581 ‫But anyway, this is all I had to show you here 352 00:22:24,581 --> 00:22:26,793 ‫for this line chart. 353 00:22:28,470 --> 00:22:32,370 ‫So again, there's a lot of stuff going on here. 354 00:22:32,370 --> 00:22:35,430 ‫And so as always, just make sure to head 355 00:22:35,430 --> 00:22:38,310 ‫over to the documentation if you want to learn more 356 00:22:38,310 --> 00:22:42,240 ‫about all of this and how you can expand this even more. 357 00:22:42,240 --> 00:22:45,270 ‫But for this lecture and for this course 358 00:22:45,270 --> 00:22:47,730 ‫this is more than enough, I think. 359 00:22:47,730 --> 00:22:50,730 ‫And so now let's move on to another type of chart 360 00:22:50,730 --> 00:22:52,773 ‫which will be a pie chart.