1 00:00:01,260 --> 00:00:04,680 ‫And now let's build another fun chart, 2 00:00:04,680 --> 00:00:06,930 ‫this time a pie chart, 3 00:00:06,930 --> 00:00:09,450 ‫which is another very important chart 4 00:00:09,450 --> 00:00:11,670 ‫that you will see used all the time 5 00:00:11,670 --> 00:00:13,293 ‫in web applications. 6 00:00:14,850 --> 00:00:18,300 ‫But first, I actually want to complete the title 7 00:00:18,300 --> 00:00:21,303 ‫of this chart right here with the dates. 8 00:00:22,680 --> 00:00:25,230 ‫So right here in the heading, 9 00:00:25,230 --> 00:00:28,173 ‫let's add the from and to dates. 10 00:00:30,360 --> 00:00:32,583 ‫So sales from, 11 00:00:34,027 --> 00:00:35,010 ‫and then here, 12 00:00:35,010 --> 00:00:37,290 ‫that format function again 13 00:00:37,290 --> 00:00:42,290 ‫and then we grab all dates, the very first one, 14 00:00:42,570 --> 00:00:43,890 ‫so add zero 15 00:00:43,890 --> 00:00:47,010 ‫and then we format this using this string. 16 00:00:47,010 --> 00:00:49,620 ‫So month, month, month, day, day, 17 00:00:49,620 --> 00:00:51,873 ‫and then four times the year. 18 00:00:53,580 --> 00:00:57,423 ‫And then let's just grab this here, 19 00:00:58,620 --> 00:01:03,273 ‫to or maybe just an Em dash like this. 20 00:01:08,098 --> 00:01:10,650 ‫And then here, we want to take the last one, 21 00:01:10,650 --> 00:01:12,270 ‫so minus one. 22 00:01:12,270 --> 00:01:13,770 ‫And there we go. 23 00:01:13,770 --> 00:01:15,690 ‫So that looks really nice. 24 00:01:15,690 --> 00:01:18,990 ‫And if we do last seven days, then of course 25 00:01:18,990 --> 00:01:22,860 ‫that will go from May 11th to May 17th, 26 00:01:22,860 --> 00:01:24,123 ‫which is today. 27 00:01:26,130 --> 00:01:29,640 ‫Okay, so with this, we finished this chart 28 00:01:29,640 --> 00:01:32,733 ‫and now let's take care of the durations chart. 29 00:01:34,080 --> 00:01:38,880 ‫So we already have that component again. 30 00:01:38,880 --> 00:01:41,910 ‫So this one right here. 31 00:01:41,910 --> 00:01:44,280 ‫And here we even have some more stuff. 32 00:01:44,280 --> 00:01:46,740 ‫So we have this function here, 33 00:01:46,740 --> 00:01:49,470 ‫and then here we have two objects, 34 00:01:49,470 --> 00:01:51,903 ‫which will be our start data. 35 00:01:52,860 --> 00:01:57,660 ‫So based on this data is how we will build the pie chart. 36 00:01:57,660 --> 00:01:59,460 ‫Now what's different here is 37 00:01:59,460 --> 00:02:02,793 ‫that this data will actually later be updated based 38 00:02:02,793 --> 00:02:07,200 ‫on the space that we get into the component. 39 00:02:07,200 --> 00:02:09,510 ‫So here we have different objects 40 00:02:09,510 --> 00:02:13,023 ‫and each of them has a different duration interval. 41 00:02:13,860 --> 00:02:17,100 ‫So here basically, we will want to collect all 42 00:02:17,100 --> 00:02:20,640 ‫the stays that have the duration of one night. 43 00:02:20,640 --> 00:02:23,700 ‫Then here, all the ones that have two nights, three. 44 00:02:23,700 --> 00:02:26,460 ‫And then here, the ones with four to five. 45 00:02:26,460 --> 00:02:29,670 ‫And then here, these intervals keep increasing. 46 00:02:29,670 --> 00:02:33,600 ‫And so notice how all of them start at zero 47 00:02:33,600 --> 00:02:36,300 ‫and we will then use the function 48 00:02:36,300 --> 00:02:39,750 ‫that we have below there to update these values. 49 00:02:39,750 --> 00:02:44,750 ‫But for now, just for testing or for doing the first version 50 00:02:44,880 --> 00:02:49,410 ‫of the pie chart, let's just manually add some values here 51 00:02:49,410 --> 00:02:51,210 ‫that we will then delete later. 52 00:02:51,210 --> 00:02:53,493 ‫So let's see three, five, 53 00:02:54,420 --> 00:02:55,563 ‫and here, four, 54 00:02:56,970 --> 00:02:58,683 ‫maybe seven. 55 00:02:59,910 --> 00:03:00,963 ‫Here is zero, 56 00:03:02,310 --> 00:03:03,660 ‫two, 57 00:03:03,660 --> 00:03:04,653 ‫and that's enough. 58 00:03:06,750 --> 00:03:08,400 ‫Okay. 59 00:03:08,400 --> 00:03:12,630 ‫Then down here, let's create our component. 60 00:03:12,630 --> 00:03:14,620 ‫And this component needs to receive 61 00:03:15,870 --> 00:03:20,370 ‫the confirmed stays as an input. 62 00:03:20,370 --> 00:03:24,990 ‫And yeah, here we already have this styled component. 63 00:03:24,990 --> 00:03:26,523 ‫So let's use that here. 64 00:03:29,880 --> 00:03:31,563 ‫So this chart box, 65 00:03:32,940 --> 00:03:34,680 ‫let's just write something there 66 00:03:34,680 --> 00:03:36,843 ‫and then include this here. 67 00:03:37,920 --> 00:03:41,910 ‫So replacing this part is now 68 00:03:41,910 --> 00:03:43,803 ‫the duration chart. 69 00:03:44,700 --> 00:03:45,693 ‫There we go. 70 00:03:47,340 --> 00:03:49,240 ‫And this needs the confirmed 71 00:03:51,210 --> 00:03:52,043 ‫stays. 72 00:03:53,400 --> 00:03:54,540 ‫Okay. 73 00:03:54,540 --> 00:03:56,100 ‫And so here it is. 74 00:03:56,100 --> 00:03:59,610 ‫So taking up these two columns here basically 75 00:03:59,610 --> 00:04:00,990 ‫and leaving these two columns, 76 00:04:00,990 --> 00:04:03,930 ‫then for the final part of the dashboard 77 00:04:03,930 --> 00:04:06,513 ‫that we will build in the next video. 78 00:04:08,280 --> 00:04:12,210 ‫All right, and so let's head back here 79 00:04:12,210 --> 00:04:15,153 ‫and start building that pie chart. 80 00:04:16,140 --> 00:04:17,190 ‫So first of all, 81 00:04:17,190 --> 00:04:18,160 ‫we will again 82 00:04:19,770 --> 00:04:21,153 ‫write a heading, 83 00:04:22,980 --> 00:04:24,510 ‫and S, 84 00:04:24,510 --> 00:04:25,473 ‫and H2. 85 00:04:26,760 --> 00:04:29,980 ‫Then let's say, stay duration 86 00:04:31,560 --> 00:04:33,120 ‫summary, 87 00:04:33,120 --> 00:04:36,090 ‫and then also again a 88 00:04:36,090 --> 00:04:38,430 ‫responsive container coming 89 00:04:38,430 --> 00:04:40,203 ‫in from real charts. 90 00:04:41,160 --> 00:04:42,060 ‫Okay. 91 00:04:42,060 --> 00:04:46,533 ‫And now it's time to finally create that pie chart. 92 00:04:48,180 --> 00:04:51,090 ‫And the main component that we need in here 93 00:04:51,090 --> 00:04:53,043 ‫is called just pi. 94 00:04:55,200 --> 00:04:59,310 ‫So here we then need to specify the data. 95 00:04:59,310 --> 00:05:02,940 ‫And so for starters, let's just use 96 00:05:02,940 --> 00:05:06,090 ‫start data light. 97 00:05:06,090 --> 00:05:08,400 ‫Then let's just go back there 98 00:05:08,400 --> 00:05:11,490 ‫so that we know the names of the fields. 99 00:05:11,490 --> 00:05:15,030 ‫And so here we have the duration and the value. 100 00:05:15,030 --> 00:05:18,330 ‫So the colors are for styling later, 101 00:05:18,330 --> 00:05:21,240 ‫but what matters most for now here is 102 00:05:21,240 --> 00:05:23,700 ‫that this duration is the name key 103 00:05:23,700 --> 00:05:25,860 ‫and this one is the data key. 104 00:05:25,860 --> 00:05:29,760 ‫So the actual data is where the numbers are. 105 00:05:29,760 --> 00:05:32,133 ‫And so that is then that value. 106 00:05:33,090 --> 00:05:34,490 ‫So let's specify those here. 107 00:05:35,370 --> 00:05:37,750 ‫So the name key again is 108 00:05:39,930 --> 00:05:41,430 ‫duration. 109 00:05:41,430 --> 00:05:44,100 ‫So those are basically the categories. 110 00:05:44,100 --> 00:05:45,873 ‫And then the data key, 111 00:05:47,820 --> 00:05:50,880 ‫those are what we called values there. 112 00:05:50,880 --> 00:05:53,550 ‫And of course, you could call all these different 113 00:05:53,550 --> 00:05:55,860 ‫fields anything that you wanted, 114 00:05:55,860 --> 00:05:57,930 ‫and the same in the area chart 115 00:05:57,930 --> 00:06:00,033 ‫that we built in the previous lecture. 116 00:06:00,870 --> 00:06:04,620 ‫But anyway, this should actually already be enough 117 00:06:04,620 --> 00:06:07,743 ‫to render a very bare-bones pie chart there. 118 00:06:08,910 --> 00:06:10,230 ‫So let's see. 119 00:06:10,230 --> 00:06:12,160 ‫And indeed, there it is. 120 00:06:12,160 --> 00:06:15,390 ‫So that's already looking like something, 121 00:06:15,390 --> 00:06:18,540 ‫even though that's not really that pretty. 122 00:06:18,540 --> 00:06:22,530 ‫So let's now do a few formatting here. 123 00:06:22,530 --> 00:06:26,850 ‫So first of all, we can define some size 124 00:06:26,850 --> 00:06:30,450 ‫by defining the inner and the outer radius. 125 00:06:30,450 --> 00:06:33,363 ‫So here we can experiment with some values, 126 00:06:35,400 --> 00:06:37,923 ‫just so you see what each of them does. 127 00:06:38,940 --> 00:06:43,830 ‫And so this 80 right here is basically this difference. 128 00:06:43,830 --> 00:06:46,080 ‫So this distance from here to a center, 129 00:06:46,080 --> 00:06:49,350 ‫and then the outer one goes like out here. 130 00:06:49,350 --> 00:06:54,350 ‫So if I decrease this, then that space there disappears. 131 00:06:55,980 --> 00:06:59,250 ‫And the value that I found is the best, in this case 132 00:06:59,250 --> 00:07:01,019 ‫is 85 here 133 00:07:01,019 --> 00:07:03,630 ‫and 110 here. 134 00:07:03,630 --> 00:07:07,233 ‫So making this really like narrow like this. 135 00:07:08,520 --> 00:07:12,210 ‫Then we can also define the position of the center. 136 00:07:12,210 --> 00:07:14,880 ‫So for that we use Cx, 137 00:07:14,880 --> 00:07:18,330 ‫so Dx, coordinate of the center 138 00:07:18,330 --> 00:07:20,880 ‫and then the same for the Y-coordinate. 139 00:07:20,880 --> 00:07:23,700 ‫And here again, you can experiment around, 140 00:07:23,700 --> 00:07:25,290 ‫but I found that the values 141 00:07:25,290 --> 00:07:28,110 ‫that work the best are these ones, 142 00:07:28,110 --> 00:07:32,193 ‫at least if the screen here would be a bit bigger. 143 00:07:33,030 --> 00:07:35,940 ‫And finally, we can also define some space 144 00:07:35,940 --> 00:07:38,490 ‫between these different cells there. 145 00:07:38,490 --> 00:07:41,550 ‫So for that, we can use the padding angle. 146 00:07:41,550 --> 00:07:43,833 ‫And so here we can make it three degrees. 147 00:07:45,780 --> 00:07:47,370 ‫Just like this. 148 00:07:47,370 --> 00:07:49,260 ‫Or if we did like 10 degrees, 149 00:07:49,260 --> 00:07:51,963 ‫then you see there would be a lot more space. 150 00:07:53,370 --> 00:07:55,860 ‫Let's place it back. 151 00:07:55,860 --> 00:07:57,600 ‫And here we have some formatting errors, 152 00:07:57,600 --> 00:08:01,670 ‫but if we reloaded that, then that would get fixed. 153 00:08:01,670 --> 00:08:02,503 ‫(chuckles) 154 00:08:02,503 --> 00:08:03,480 ‫Well, not really. 155 00:08:03,480 --> 00:08:05,120 ‫But later on, 156 00:08:05,120 --> 00:08:07,530 ‫once we change some other stuff here, 157 00:08:07,530 --> 00:08:09,840 ‫that will then look better. 158 00:08:09,840 --> 00:08:11,640 ‫But anyway, of course, 159 00:08:11,640 --> 00:08:15,210 ‫now we want each of these different cells here 160 00:08:15,210 --> 00:08:17,310 ‫to have some different styling. 161 00:08:17,310 --> 00:08:19,410 ‫So each of them should get the color 162 00:08:19,410 --> 00:08:22,023 ‫that we defined up here. 163 00:08:23,130 --> 00:08:26,310 ‫So that's why we have these color fields. 164 00:08:26,310 --> 00:08:29,114 ‫So the way in which we do this is 165 00:08:29,114 --> 00:08:33,663 ‫to actually not make this a self-closing element, 166 00:08:34,620 --> 00:08:37,830 ‫but instead place one cell element 167 00:08:37,830 --> 00:08:41,160 ‫for each of the values in the array. 168 00:08:41,160 --> 00:08:44,490 ‫So for each of the categories that we have here. 169 00:08:44,490 --> 00:08:47,010 ‫So in this case, these five. 170 00:08:47,010 --> 00:08:51,210 ‫So the way we do that is as always. 171 00:08:51,210 --> 00:08:53,310 ‫So this is just a list now, 172 00:08:53,310 --> 00:08:55,083 ‫and so we can map over it. 173 00:08:56,430 --> 00:09:00,060 ‫So here, let's call each of them an entry. 174 00:09:00,060 --> 00:09:05,060 ‫And then for each of them, we can render a cell component. 175 00:09:06,180 --> 00:09:10,080 ‫And so this is where we can then define the fill 176 00:09:10,080 --> 00:09:11,073 ‫and the stroke. 177 00:09:12,210 --> 00:09:15,190 ‫So the fill, let's make it 178 00:09:16,170 --> 00:09:18,900 ‫entry.color, 179 00:09:18,900 --> 00:09:23,283 ‫and the same thing for the stroke as well. 180 00:09:24,570 --> 00:09:27,180 ‫So entry.color. 181 00:09:27,180 --> 00:09:30,000 ‫And finally, since this is a list, 182 00:09:30,000 --> 00:09:31,533 ‫it also needs a key. 183 00:09:33,450 --> 00:09:36,660 ‫So let's make this the entry.duration 184 00:09:36,660 --> 00:09:38,820 ‫because that's unique. 185 00:09:38,820 --> 00:09:41,710 ‫And there we have our bug. 186 00:09:41,710 --> 00:09:42,630 ‫(chuckles) 187 00:09:42,630 --> 00:09:47,630 ‫It's because for now we need to use this fake data 188 00:09:48,900 --> 00:09:50,310 ‫and nice. 189 00:09:50,310 --> 00:09:53,700 ‫So that's already looking a lot better, 190 00:09:53,700 --> 00:09:55,563 ‫but let's keep going. 191 00:09:56,970 --> 00:10:00,933 ‫So first of all, we want also there a legend, 192 00:10:02,250 --> 00:10:04,170 ‫so that we actually know what each 193 00:10:04,170 --> 00:10:05,913 ‫of these colors represent. 194 00:10:08,250 --> 00:10:11,340 ‫And so just like this would be enough, 195 00:10:11,340 --> 00:10:14,130 ‫but that's not really that nice. 196 00:10:14,130 --> 00:10:16,983 ‫So let's again format this a lot. 197 00:10:17,820 --> 00:10:20,433 ‫So here we can align this to the middle, 198 00:10:22,713 --> 00:10:24,630 ‫and also align it 199 00:10:24,630 --> 00:10:25,900 ‫this other way 200 00:10:27,076 --> 00:10:29,850 ‫in the middle as well. 201 00:10:29,850 --> 00:10:31,890 ‫Or actually that's the default. 202 00:10:31,890 --> 00:10:33,900 ‫So now we want this to the right, 203 00:10:33,900 --> 00:10:38,550 ‫and then we need to make this a lot more narrow as well. 204 00:10:38,550 --> 00:10:43,550 ‫So giving it a width of 30%, 205 00:10:44,010 --> 00:10:48,573 ‫and we should also set the layout to vertical. 206 00:10:50,040 --> 00:10:54,390 ‫Finally, we can change the icon size, let's say 15, 207 00:10:54,390 --> 00:10:57,243 ‫and then the icon type as well. 208 00:10:59,040 --> 00:11:01,050 ‫So I prefer circles, 209 00:11:01,050 --> 00:11:05,073 ‫and so that's looking a lot nicer in this way. 210 00:11:07,273 --> 00:11:08,160 ‫Okay. 211 00:11:08,160 --> 00:11:11,343 ‫And now finally, let's then add a tool tip, 212 00:11:12,660 --> 00:11:13,930 ‫so that we can actually 213 00:11:15,420 --> 00:11:18,720 ‫see the value as we hover over it. 214 00:11:18,720 --> 00:11:22,170 ‫All right, so that's looking pretty nice here. 215 00:11:22,170 --> 00:11:27,170 ‫And again, making this dashboard looking really real world. 216 00:11:27,870 --> 00:11:31,350 ‫But now let's also make the data here, real world. 217 00:11:31,350 --> 00:11:33,810 ‫So coming from the actual space, 218 00:11:33,810 --> 00:11:36,813 ‫and not the fake data that we created earlier. 219 00:11:38,610 --> 00:11:42,513 ‫Now here, we actually forgot to give this a size again. 220 00:11:44,040 --> 00:11:46,470 ‫So let's make it a width 221 00:11:46,470 --> 00:11:49,163 ‫of 100%, 222 00:11:49,163 --> 00:11:50,460 ‫and a height, 223 00:11:50,460 --> 00:11:53,643 ‫I will say 240 pixels. 224 00:11:55,440 --> 00:11:56,460 ‫All right. 225 00:11:56,460 --> 00:11:59,250 ‫And so now again, we are ready 226 00:11:59,250 --> 00:12:02,100 ‫to actually use the real data 227 00:12:02,100 --> 00:12:04,650 ‫to compute this chart. 228 00:12:04,650 --> 00:12:08,070 ‫Now, this time we will not write the logic by hand 229 00:12:08,070 --> 00:12:12,420 ‫because I already have the function written out here. 230 00:12:12,420 --> 00:12:15,600 ‫So it's this pretty confusing function here. 231 00:12:15,600 --> 00:12:19,500 ‫But basically what it does is to receive the start data, 232 00:12:19,500 --> 00:12:24,210 ‫which will be either this one or this one with, of course, 233 00:12:24,210 --> 00:12:27,003 ‫all the values set back to zero, 234 00:12:28,290 --> 00:12:30,573 ‫because that is the initial state. 235 00:12:32,640 --> 00:12:33,963 ‫So just like this. 236 00:12:36,240 --> 00:12:37,260 ‫So the difference 237 00:12:37,260 --> 00:12:41,640 ‫between these two here of course, is only these colors. 238 00:12:41,640 --> 00:12:43,350 ‫So this one is for the dark mode 239 00:12:43,350 --> 00:12:45,453 ‫and this one is for the light mode. 240 00:12:46,410 --> 00:12:48,870 ‫But anyway, what this function does is 241 00:12:48,870 --> 00:12:51,960 ‫to take that space array that we passed 242 00:12:51,960 --> 00:12:54,480 ‫in here and it will reduce it 243 00:12:54,480 --> 00:12:58,478 ‫into a new array where the starter array. 244 00:12:58,478 --> 00:13:01,980 ‫So this input to the reduced function is 245 00:13:01,980 --> 00:13:04,980 ‫that start data that we have right here. 246 00:13:04,980 --> 00:13:06,870 ‫So it starts with this. 247 00:13:06,870 --> 00:13:10,290 ‫And then basically for each of the values 248 00:13:10,290 --> 00:13:14,250 ‫in the states array, one of these objects here, 249 00:13:14,250 --> 00:13:17,643 ‫we'll see their value property increased by one. 250 00:13:19,410 --> 00:13:23,010 ‫So that increasing then happens here in this function. 251 00:13:23,010 --> 00:13:24,063 ‫So right here. 252 00:13:25,640 --> 00:13:27,840 ‫And so yeah, I will not go 253 00:13:27,840 --> 00:13:29,820 ‫through how this function here works. 254 00:13:29,820 --> 00:13:32,520 ‫It's a bit ugly and a bit confusing, 255 00:13:32,520 --> 00:13:35,310 ‫but sometimes, that's just what you have to do 256 00:13:35,310 --> 00:13:38,370 ‫when you have to deal with real world data. 257 00:13:38,370 --> 00:13:40,680 ‫So this is just some JavaScript here. 258 00:13:40,680 --> 00:13:45,090 ‫And so I'm not gonna go deeply into how that works. 259 00:13:45,090 --> 00:13:47,910 ‫What matters now is that first of all, 260 00:13:47,910 --> 00:13:50,670 ‫we need to get the information 261 00:13:50,670 --> 00:13:53,133 ‫whether we are in dark mode or not. 262 00:13:57,450 --> 00:14:01,563 ‫And then based on that, we need to select the start data. 263 00:14:04,830 --> 00:14:07,440 ‫So if is dark mode, 264 00:14:07,440 --> 00:14:09,220 ‫then the start data will be 265 00:14:10,350 --> 00:14:13,230 ‫start data dark, 266 00:14:13,230 --> 00:14:15,720 ‫and otherwise that's gonna be 267 00:14:15,720 --> 00:14:17,493 ‫start data light. 268 00:14:18,960 --> 00:14:22,680 ‫And then the data itself will be the result 269 00:14:22,680 --> 00:14:27,680 ‫of the prepare data function that we looked at briefly, 270 00:14:27,900 --> 00:14:31,863 ‫where we pass in the start data and the stays. 271 00:14:33,450 --> 00:14:37,060 ‫And so then here we replace this fake data 272 00:14:38,520 --> 00:14:42,330 ‫with the actual data here and here. 273 00:14:42,330 --> 00:14:47,070 ‫So now as I give this a safe, then nice. 274 00:14:47,070 --> 00:14:49,980 ‫Now we have the colors from dark mode, 275 00:14:49,980 --> 00:14:52,560 ‫then here we change to these other colors. 276 00:14:52,560 --> 00:14:56,370 ‫And indeed, if we change the dates, then here, 277 00:14:56,370 --> 00:15:00,510 ‫all this data changes dynamically as well. 278 00:15:00,510 --> 00:15:03,360 ‫The same, of course, for the 90 days. 279 00:15:03,360 --> 00:15:05,670 ‫And that function that we have here even 280 00:15:05,670 --> 00:15:09,570 ‫removes all the objects that have zero nights, 281 00:15:09,570 --> 00:15:12,030 ‫and so they don't appear here. 282 00:15:12,030 --> 00:15:15,180 ‫So here we really only have right now the six 283 00:15:15,180 --> 00:15:19,050 ‫colors that actually appear in the pie chart 284 00:15:19,050 --> 00:15:22,173 ‫while here, for example, we only have these four. 285 00:15:23,430 --> 00:15:24,990 ‫Nice. 286 00:15:24,990 --> 00:15:27,390 ‫So make sure to play around a little bit more 287 00:15:27,390 --> 00:15:30,510 ‫with this as this is really interesting. 288 00:15:30,510 --> 00:15:33,030 ‫So when I first built this chart here, 289 00:15:33,030 --> 00:15:35,550 ‫I took like an hour or two to experiment 290 00:15:35,550 --> 00:15:38,100 ‫with all the values here and here, 291 00:15:38,100 --> 00:15:40,950 ‫and so I think that's really fun. 292 00:15:40,950 --> 00:15:44,130 ‫But anyway, we are finished now with this part. 293 00:15:44,130 --> 00:15:45,810 ‫And so all there's left to do 294 00:15:45,810 --> 00:15:49,203 ‫in the next lecture is this, today's activity.