Nice work.
And I think we're going to start by building out the pie chart.
Now, for the time being, we're still going to use our dummy data, meaning the data that we have in
the Repos, the hardcoded one.
And then once we build out the chart, then we'll take a look at how we can iterate over our repos and
get meaningful data displayed in our parcher.
And the way it's gonna work is we're going to navigate the repos.
And I'm just gonna comment about the example chart just in case you ever would want to look over.
So there's just those for your reference, but.
Notice where we have the charts folder in there.
Look, for example, chart on one that we are working on, select everything and then navigate to buy
3D dress.
So select everything that you have currently in PI 3D and then copy and paste the example chart.
So once you've got that, we'll leave everything at the top.
So this is the same or of course, in order to change the chart, of course we would need to do that
in the chart and fix.
And as a quick side note.
I don't think I mentioned in big enough detail that the reason why we're able to delete the array has
a value for our data property.
Because this is what we're passing in.
So from the repos we pass in data prop and.
In the example chart or at the moment in 3D as well when we pass in that data.
We the structured and since we can use ESX shorthand where we just assign a value to this data.
This is why I was able to just delete the value.
So again, it would mean exactly the same if I would just type data is equal to a data prop that I'm
passing.
Hopefully this makes sense.
So let me delete it again.
And now it's finally set up our configuration and I'm going to start by changing of the value here.
So I'm going to say by three D that as far as the width for the time being.
I'll leave it at 400.
So that stays the same.
Data format stays the same.
And in here I'm just gonna delete everything and we'll start from scratch.
So you would want to have a caption.
We need to use a caption properly.
And then just come up with a value.
So in this case, I'm gonna go with language is like.
So then we'll right away set up a theme.
As far as the theme, we're gonna go with a fusion one line for time being.
We'll just leave it at that.
And then we'll add few more properties.
So let me save it.
Not the moment.
Of course, we shouldn't see anything because we haven't saved the repos.
So now what I would want to do is, like I said, leave this comment it out or you can just delete it,
whatever.
All I wanted to do is to leave it for your reference.
And the one that we're looking for is this by 3D.
Of course, we'll still pass this there because the moment we haven't iterated over the post.
So in the wrapper, we're just going to go with Y 3D.
Again, we still have a data property since we didn't change that in our setup waterpipe 3D.
And then let's pass in chart data.
Let's close it out.
And we should have our PI one.
Of course we do.
So now as you can see, we have H here now we have Josh script and we have CSX.
So this would be a default setup.
The moment we get it.
Of course, this just calculates what is the total value here.
So it calculates thirteen plus hundred sixty and eighty.
And this just gives you that, for example, CSX is 63 percent.
Because of course, that is 160 from that total volume.
Now, what's really cool is that we can click on them, notice how they move out.
And so we can, like, look at our chart and the same works.
If we click it over here.
Now, what more configuration options we can do while in the PI 3D?
For example, if I win one decimals, I can simply say decimals.
And in here they have values from zero or one.
So if the value is going to be one, then you will have decimals, which, by the way, of course is
the default one.
But if I'm gonna go with decimal zero, you'll notice how we don't have decimals anymore.
So now we're still calculating.
Of course, that is still true, but we're not showing the decimals.
Now, what we can also change is the radius of the pie.
How does that work?
Well, we could write PI radius property and set it up some kind of percentage of power.
So in my case, I'm going to go with thirty five percent.
And you'll notice that right now the PI should be bigger.
So the chart stays the same.
That's still true.
But the PI is bigger.
If you want even more bigger you can add here forty five, for example.
Just keep in mind, the bigger it gets and the more info you have, you might run into a situation where
while there's not enough space again at this point, as you're looking at, you might well, I don't
see how that could happen, but trust me, especially as you're changing the width of the chart.
And if you have more information or here, you might run into a situation where, for example, JavaScript
is going to be somewhere outside.
So just keep that in mind when you're setting up that.
Radius.
Not one more thing that we could do is to provide our own callers.
Just keep in mind one thing, that if you don't provide enough color options, if you have more selections
than the colors, then the color will be reused.
Now get back to our project.
The property we're looking for is Pallot all hours online.
We would need to provide a string.
And then in that string we provide hex colors.
We have Carmo separators, for example.
I could go with color EF zero, the B online for F, but you'll notice since I have more options now,
we're just using this color.
Of course, if you are using your own colors, just make sure that you provide an item, maybe 10 options
or whatever, because even though at the moment I'm just using three, I don't know how many languages
the user is gonna be using.
For example, maybe user goes with four.
So then again, I'm repeating the color.
So, yes, of course, you can provide your own colors.
Just make sure that you have the extensive list of those colors so you don't run into a situation where
the same color is repeated.
But that should do it for setting up our pie.
So now, of course, we could figure out how to set up a proper data in repose.
So instead of passing these dummy data, charred data, we would pass in the actual data from our EBOs.