‫And now let's build another fun chart,
‫this time a pie chart,
‫which is another very important chart
‫that you will see used all the time
‫in web applications.
‫But first, I actually want to complete the title
‫of this chart right here with the dates.
‫So right here in the heading,
‫let's add the from and to dates.
‫So sales from,
‫and then here,
‫that format function again
‫and then we grab all dates, the very first one,
‫so add zero
‫and then we format this using this string.
‫So month, month, month, day, day,
‫and then four times the year.
‫And then let's just grab this here,
‫to or maybe just an Em dash like this.
‫And then here, we want to take the last one,
‫so minus one.
‫And there we go.
‫So that looks really nice.
‫And if we do last seven days, then of course
‫that will go from May 11th to May 17th,
‫which is today.
‫Okay, so with this, we finished this chart
‫and now let's take care of the durations chart.
‫So we already have that component again.
‫So this one right here.
‫And here we even have some more stuff.
‫So we have this function here,
‫and then here we have two objects,
‫which will be our start data.
‫So based on this data is how we will build the pie chart.
‫Now what's different here is
‫that this data will actually later be updated based
‫on the space that we get into the component.
‫So here we have different objects
‫and each of them has a different duration interval.
‫So here basically, we will want to collect all
‫the stays that have the duration of one night.
‫Then here, all the ones that have two nights, three.
‫And then here, the ones with four to five.
‫And then here, these intervals keep increasing.
‫And so notice how all of them start at zero
‫and we will then use the function
‫that we have below there to update these values.
‫But for now, just for testing or for doing the first version
‫of the pie chart, let's just manually add some values here
‫that we will then delete later.
‫So let's see three, five,
‫and here, four,
‫maybe seven.
‫Here is zero,
‫two,
‫and that's enough.
‫Okay.
‫Then down here, let's create our component.
‫And this component needs to receive
‫the confirmed stays as an input.
‫And yeah, here we already have this styled component.
‫So let's use that here.
‫So this chart box,
‫let's just write something there
‫and then include this here.
‫So replacing this part is now
‫the duration chart.
‫There we go.
‫And this needs the confirmed
‫stays.
‫Okay.
‫And so here it is.
‫So taking up these two columns here basically
‫and leaving these two columns,
‫then for the final part of the dashboard
‫that we will build in the next video.
‫All right, and so let's head back here
‫and start building that pie chart.
‫So first of all,
‫we will again
‫write a heading,
‫and S,
‫and H2.
‫Then let's say, stay duration
‫summary,
‫and then also again a
‫responsive container coming
‫in from real charts.
‫Okay.
‫And now it's time to finally create that pie chart.
‫And the main component that we need in here
‫is called just pi.
‫So here we then need to specify the data.
‫And so for starters, let's just use
‫start data light.
‫Then let's just go back there
‫so that we know the names of the fields.
‫And so here we have the duration and the value.
‫So the colors are for styling later,
‫but what matters most for now here is
‫that this duration is the name key
‫and this one is the data key.
‫So the actual data is where the numbers are.
‫And so that is then that value.
‫So let's specify those here.
‫So the name key again is
‫duration.
‫So those are basically the categories.
‫And then the data key,
‫those are what we called values there.
‫And of course, you could call all these different
‫fields anything that you wanted,
‫and the same in the area chart
‫that we built in the previous lecture.
‫But anyway, this should actually already be enough
‫to render a very bare-bones pie chart there.
‫So let's see.
‫And indeed, there it is.
‫So that's already looking like something,
‫even though that's not really that pretty.
‫So let's now do a few formatting here.
‫So first of all, we can define some size
‫by defining the inner and the outer radius.
‫So here we can experiment with some values,
‫just so you see what each of them does.
‫And so this 80 right here is basically this difference.
‫So this distance from here to a center,
‫and then the outer one goes like out here.
‫So if I decrease this, then that space there disappears.
‫And the value that I found is the best, in this case
‫is 85 here
‫and 110 here.
‫So making this really like narrow like this.
‫Then we can also define the position of the center.
‫So for that we use Cx,
‫so Dx, coordinate of the center
‫and then the same for the Y-coordinate.
‫And here again, you can experiment around,
‫but I found that the values
‫that work the best are these ones,
‫at least if the screen here would be a bit bigger.
‫And finally, we can also define some space
‫between these different cells there.
‫So for that, we can use the padding angle.
‫And so here we can make it three degrees.
‫Just like this.
‫Or if we did like 10 degrees,
‫then you see there would be a lot more space.
‫Let's place it back.
‫And here we have some formatting errors,
‫but if we reloaded that, then that would get fixed.
‫(chuckles)
‫Well, not really.
‫But later on,
‫once we change some other stuff here,
‫that will then look better.
‫But anyway, of course,
‫now we want each of these different cells here
‫to have some different styling.
‫So each of them should get the color
‫that we defined up here.
‫So that's why we have these color fields.
‫So the way in which we do this is
‫to actually not make this a self-closing element,
‫but instead place one cell element
‫for each of the values in the array.
‫So for each of the categories that we have here.
‫So in this case, these five.
‫So the way we do that is as always.
‫So this is just a list now,
‫and so we can map over it.
‫So here, let's call each of them an entry.
‫And then for each of them, we can render a cell component.
‫And so this is where we can then define the fill
‫and the stroke.
‫So the fill, let's make it
‫entry.color,
‫and the same thing for the stroke as well.
‫So entry.color.
‫And finally, since this is a list,
‫it also needs a key.
‫So let's make this the entry.duration
‫because that's unique.
‫And there we have our bug.
‫(chuckles)
‫It's because for now we need to use this fake data
‫and nice.
‫So that's already looking a lot better,
‫but let's keep going.
‫So first of all, we want also there a legend,
‫so that we actually know what each
‫of these colors represent.
‫And so just like this would be enough,
‫but that's not really that nice.
‫So let's again format this a lot.
‫So here we can align this to the middle,
‫and also align it
‫this other way
‫in the middle as well.
‫Or actually that's the default.
‫So now we want this to the right,
‫and then we need to make this a lot more narrow as well.
‫So giving it a width of 30%,
‫and we should also set the layout to vertical.
‫Finally, we can change the icon size, let's say 15,
‫and then the icon type as well.
‫So I prefer circles,
‫and so that's looking a lot nicer in this way.
‫Okay.
‫And now finally, let's then add a tool tip,
‫so that we can actually
‫see the value as we hover over it.
‫All right, so that's looking pretty nice here.
‫And again, making this dashboard looking really real world.
‫But now let's also make the data here, real world.
‫So coming from the actual space,
‫and not the fake data that we created earlier.
‫Now here, we actually forgot to give this a size again.
‫So let's make it a width
‫of 100%,
‫and a height,
‫I will say 240 pixels.
‫All right.
‫And so now again, we are ready
‫to actually use the real data
‫to compute this chart.
‫Now, this time we will not write the logic by hand
‫because I already have the function written out here.
‫So it's this pretty confusing function here.
‫But basically what it does is to receive the start data,
‫which will be either this one or this one with, of course,
‫all the values set back to zero,
‫because that is the initial state.
‫So just like this.
‫So the difference
‫between these two here of course, is only these colors.
‫So this one is for the dark mode
‫and this one is for the light mode.
‫But anyway, what this function does is
‫to take that space array that we passed
‫in here and it will reduce it
‫into a new array where the starter array.
‫So this input to the reduced function is
‫that start data that we have right here.
‫So it starts with this.
‫And then basically for each of the values
‫in the states array, one of these objects here,
‫we'll see their value property increased by one.
‫So that increasing then happens here in this function.
‫So right here.
‫And so yeah, I will not go
‫through how this function here works.
‫It's a bit ugly and a bit confusing,
‫but sometimes, that's just what you have to do
‫when you have to deal with real world data.
‫So this is just some JavaScript here.
‫And so I'm not gonna go deeply into how that works.
‫What matters now is that first of all,
‫we need to get the information
‫whether we are in dark mode or not.
‫And then based on that, we need to select the start data.
‫So if is dark mode,
‫then the start data will be
‫start data dark,
‫and otherwise that's gonna be
‫start data light.
‫And then the data itself will be the result
‫of the prepare data function that we looked at briefly,
‫where we pass in the start data and the stays.
‫And so then here we replace this fake data
‫with the actual data here and here.
‫So now as I give this a safe, then nice.
‫Now we have the colors from dark mode,
‫then here we change to these other colors.
‫And indeed, if we change the dates, then here,
‫all this data changes dynamically as well.
‫The same, of course, for the 90 days.
‫And that function that we have here even
‫removes all the objects that have zero nights,
‫and so they don't appear here.
‫So here we really only have right now the six
‫colors that actually appear in the pie chart
‫while here, for example, we only have these four.
‫Nice.
‫So make sure to play around a little bit more
‫with this as this is really interesting.
‫So when I first built this chart here,
‫I took like an hour or two to experiment
‫with all the values here and here,
‫and so I think that's really fun.
‫But anyway, we are finished now with this part.
‫And so all there's left to do
‫in the next lecture is this, today's activity.