Flexible Pie Chart Exercise

[00:00:00]
>> So the next exercise, and this is probably one of the most substantial exercises of this workshop. We have a flexible pie chart, it's set through a single div element with a bunch of custom properties. Let's open this in a separate code, I wanna just show you, how this works, like what the finished product looks like.

[00:00:21]
It supports up to five slices, and you could set their percentages with custom properties. And it can be set in the HTML or it can be set in the CSS the custom properties they can be set however you want. You can set the colors optionally, but there are also default colors if you don't wanna do that.

[00:00:42]
So now we've set color three to sky blue we could just as easily set color one to sky blue. And notice that any colors we haven't set, are just automatically set to something. Let's make this a little bit bigger, And we can set the size. So this is how it's used, Now let's go back to the starting point, and let's open this in a new tab you should actually have this slide.

[00:01:20]
So you should be able to open the code pen in a separate tab, so how does this work? You might be thinking what is a conic gradient doing here? What the hell, how is this making a pie chart? Let's go to a simpler conic gradient, so I could walk you through how this is drawn.

[00:01:39]
So right now we have two colors, Let's remove this color stop as well. And this is the kind of conic gradient you know and are familiar with, and right now this is a gradient from red to gray. So, let's give our two colors, Some color stock positions. And let's bring them closer together slowly, And, we're bringing them closer together.

[00:02:15]
And you see that now as I bring them closer together, we get more areas of solid color, and less area of an actual gradient. Now 40% of the gradient is actually just red, another 40% here is just gray. And then we only have like 20% that is an actual gradient, and we can eliminate that completely.

[00:02:41]
We can bring the gray exactly at 40%, and now we get a very very basic pie chart. And in fact, these two values don't actually need to match. As long as the position of the second color stop is either the same, or smaller than the previous color stop, it just adapts, that's part of the typical gradient fix up that the browser does.

[00:03:08]
So it doesn't actually have to be 40% it can be 30%, it can be 20%, or it can just be 0. And I tend to use 0s there, because then I can change this number, without having to change anything else, so I can just change the number in one place.

[00:03:28]
And now let's add another color stop, And let's make it 40%. And notice that now, we still get a gradient between these two. So what we actually need to do if we want to have multiple slices, Is we need to insert another color stop for this orange that is at 20%, or as I said earlier 0.

[00:04:09]
And actually modern browsers allow us to combine these, when you have two consecutive color stops with two different positions, you can actually combine them. So this allows you to eliminate a little bit of repetition as well, Do notice something gradient color stops are specified absolutely. They are not relative to the previous color stop, so the orange ends at 40% of the gradient circle, not 40% after the red color stop had ended.

[00:04:41]
So to actually create a slice that shows 40%, we would need to specify 60% here. So, in other words it would be the position of the previous color stop, plus the percentage we actually want to display, let's see if that was 10% it would be this. Notice how the automatic colors I'm specifying here are equidistant in terms of HSL, they just have a hue that increases by 20% each time.

[00:05:17]
It's not ideal because HSL is not a great system for that, but it gives us something. The third one would actually be the position of the previous color stop plus whatever percentage we want to display there. So the exercise now is to actually utilize these value1, value2, value3 variables, and so on.

[00:05:37]
To make these slices not be hard coded but actually customizable cuz the hard coded pie chart's not that useful. We don't wanna be setting gradient every time we wanna change the values of this pie chart, we wanna be able to just write some HTML and set some properties.

[00:05:53]
And there it is, boom, we have a pie chart with whatever colors and values we want. So, let's break and take some time to do that, and if you do that really fast, you could also explore how you could use Sass to reduce whatever repetition you have in your CSS.