Flexible Pie Chart Solution

[00:00:00]
>> We were at this pie chart component, which is currently hard coded at using these four slices with these fixed percentages. And we wanted to make it flexible so that whoever uses this pie chart component can set the percentages and colors through these custom properties. So how can we do that?

[00:00:20]
Let's take it step by step. So the first value is easy, we can just replace the 20% with value1. And then for the second value, we do need to add it with the previous one, because color stop positions are absolute, not relative to where the previous stop ended.

[00:00:41]
So we could do something like this. But it starting to get a little unwieldy, especially once we start adding fallback all over the place. Which we need to have, because we need to be able to only set a few of these properties, not all. And it gets even worse when we get to the next one where we would need to repeat this entire thing, To get to the actual 30% that we have.

[00:01:13]
This is not scaling well, is it? So one way we could make this code a little bit more manageable is, just like we've seen before, we can set these fake private custom properties. Value1 would just be our actual value1 with the fallback, but value2, Would be, Value1, The one that actually has a fallback, plus the value2 property that the user of our component specified.

[00:01:56]
And then the good thing is that this only maintains two terms for each addition. Whereas, previously, the third term had three terms, the second term had two terms, and we would get to five terms when we got to value5. So here we can just add value2 with value3 because it's a cumulative sum.

[00:02:20]
So that's all we need. And we can actually specify all five at this point, why not? And let's increase these as well. So now we can go here, and instead of all of this, we just have our value1. And here we don't need this entire calc expression, we can just specify the value2 that we've already set internally.

[00:02:50]
Here we said we specify value3 and so on. And let's add the other color stops as well to allow up to five slices, since we've already defined them. And right now they all have the same color, so let's space them out a bit. And notice, by the way, at some point I said hsl is not a very good way of specifying colors.

[00:03:24]
I mean, it's definitely better than RGB because it's more human friendly. But notice the perceptual uniformity problem that I mentioned earlier, these last two colors still differ by 25 hue degrees. But notice how similar they look, compare that to this color and this color. These look quite different but they also differ by 25 degrees.

[00:03:50]
All of these colors, this red, this orange, this yellow, and these two greens, all of these differ by 25 degrees but they are not equally spaced, are they? That is one of the problems that LCH will solve as an aside. This is already useful, we can already use it to display various kinds of data, but we want to make the colors customizable as well.

[00:04:14]
So we have a color3 variable here, but we want the entire range to be possible to specify color1, color2, color3 up to 5, either all of them or just a few of them. So we still need to have fallbacks. So what we could do is we could go here and do color1 and then have this as a fallback, oops.

[00:04:46]
But it's getting a little bit unwieldy as well. So we're gonna specify them as separate variables too, I mean, this doesn't have the cumulative problem that we had earlier with the values. But it's still making this gradient quite long, especially if we start converting all colors to this.

[00:05:11]
So let's do the same thing. So color1 would be, This, And then we'll just add five of these. And here as well. And then all we need to do here is use these underscored properties that already have the fallbacks built in. Which makes our gradient much easier to read.

[00:06:03]
And we need to actually increase the index here, there we go. Alright, yeah, cuz we're setting all of these to the same color. So let's change the hues as well and now we should go back to what we had. So now this works but this is quite unwieldy, isn't it?

[00:06:22]
And we would also need to customize the background. Notice that here we have a final background layer, which allows us to specify what we want for any leftover percentages. So right now if the percentages we specified don't add up to a full 100%, we show this final gray slice.

[00:06:54]
So we allow a variable to specify that as well, and we use gray as a fallback.