Beautiful job.
Once we've got something displayed on the screen now, of course.
And let's spend a little bit of time to understand how it can work with fusion charts, library.
Now, I'm going to start, though, in repose because I would want to add a section.
I would want to add my wrapper and all that because, yeah, it's nice to have the chart rendered.
But I think it's gonna be a little bit better if we have the proper styling.
So I'm going to go with section first.
We're going to add a class name of global section.
And then we then this section, we're going to go with our wrapper and manual.
Also the class name of Section Center.
Let's do that section.
Center.
And now let's move up our example chart sucker and just place it in that section again.
Not the best look at the moment, but don't worry.
We're going to get there.
So let's first understand how we can work with this library.
So first, of course, they're importing react.
Yeah, that is what we do every time we set up the component.
And then they're importing two things.
One, from a reactor and charts.
That is one library.
And the second one is the fusion charts.
So we get the component.
And as you know, it is this is a default export.
So technically, we can name wherever we would one pages, namely react.
Have C, which stands for fusion charts.
I would assume online the fusion charts library itself.
And then two things.
We have the chart that we're going to render as well as the team.
Now, again, keep in mind that both of these are default exports.
So even though this says column two D essentially in the chart is where will change that information.
So if we keep on scrolling, notice this chart data and then chart config.
So chart data is going to be in chart configures.
That's going to be the data that is rendered.
But if you take a look at the type of the chart, this is world change, that chart that again, this
is just importing the chart from the fusion charts.
And the same goes for time.
So once they import all of these things, then they're adding the chart and a theme as a dependency
to the core using charts.
And the way they do that.
So the component that they import, they have a method.
So F.C. a road and then they place the fusion chart.
That is, of course, the core library than the chart that they would want to display.
And the fusion theme.
So that's how they set up that component.
And like I said, since these are defaults, you might as well change this around a bit.
So we're not confused where this is gonna be chart.
Instead of column today, because later we'll use different charts or mind as well.
Just have a more general naming for our chart.
So now, instead of column today, I just named a chart.
But let me repeat the type of chart we change later.
So it doesn't really matter at the moment.
So we said, OK.
Awesome.
And then we have the data that is going to be rendered.
And if you notice the way they want their data is as an object.
And then in that object, they have two properties.
They have a label and value label and value label.
So if I take a look at our project, for example, we have languages.
So all I would want to display what language is the user is usually setting up the with.
For example, I can notice here that 53 percent is JavaScript then to assess as well as the Asian demo.
So I know that this is set for the pie.
Don't worry.
We're going to do that the same way.
But since I would want to have our own data, why don't we do this?
When I change this around to here now and then 13.
So whatever is going to be the label and whatever is going to be my value.
Then we're going to have a success here.
And then, of course, fawzia's this.
We're going to do a little bit more so 23A.
And let's do JavaScript as far as the value.
We're going to go with 80.
Now we're going to remove rest of them.
There's definitely way too many there.
As far as data, once we serve it, not ours.
We have HD Amelle to assess.
And of course, we have Jotham.
Now, it is really hard to see right now because if you notice, the chart configures, we have the
width and height.
Now, eventually we'll make this responsive.
Don't worry.
But for the time being, I'm just gonna make this smaller.
I'm going to say 400.
So my charge right now is, of course, smaller.
So.
This is our data.
Whatever it's going to be, and yes, later will make this dynamic where we pass in the chart component.
So essentially, since I have access to the repos in the report component and since I render my example
chart, of course I'll pass in my data as a prop.
For the time being, we're just hard coding because we're still exploring the documentation.
So this is our chart data, whatever data we would want to render.
And then we have these chart contracts.
And the first thing here is the type.
So wherever type we're gonna use, whether that is going to be Donat, whether that is going to be bar,
whether that is going to be, I don't know, columns or whatever.
This is where you change that chart that you import a chart.
But now you decide, well, which chart you would want to use.
And then or here we have hardcoded values.
We have width and height and all that.
And like I said later, yes, we'll make this responsive.
And then data format, which is gonna be just on.
And then in this data source, this is where we do a specific configuration for our particular chart.
As you can see, they have a caption here to have sub caption know x axis, name, y axis name and suffixes
and all that.
And of course, here they also have the theme.
And down at the bottom, you can see chart data.
And that is the property in the object.
So within a data source, they have a chart as well as the data.
And that is set equal to the chart data.
So we can already put two and two together that if we would have this chart data in repose, which essentially
is how our setup is gonna work, because the Repos is going to be, of course, where we get our data.
We could pass the Senate.
And just change our set up a little bit around.
So let's try doing that, because as far as these properties, I'm going to show you where you can find
them.
So each and every time you'd want to render different type or in general, if you'd want to know your
options, of course, you can find these properties.
But then as we're setting up the charts, I'm just gonna go over the property that I'm adding and then
I'm going to show you the value.
So essentially what I'm trying to say, it's not like I'm gonna show each and every property for every
chart, because while that is just too time consuming, since they have so many options available.
Just remember that eventually I'll show you the place where you can get this info if you'd want to.
And then, of course, as we're working with our charts, I'll show you some of the properties that
we're going to add to our specific charts.
Now, once I'm done yammering and yammering, what I would want to do is make this dynamic.
So I would want to pass my data from the reports.
So that's gonna be the first part.
So in here, what I would want.
Well, I could set up the prop or act.
I would say, yeah, I'm gonna be looking here for the data prop.
I'm gonna pass it in.
And now let's remove this chart data show.
And yes, it's still going to be coded.
But in this case, it's coming from the Repos.
So it's copying paste.
Don't worry.
We'll change this over to reposing, not time.
And now, as far as the example chart, I'm just gonna go data.
And of course, I'm gonna set it equal to chart data.
Chart data.
Show.
And then where I have the example chart, take this whole thing.
The chart configures and just place it in the chart component.
So let me remove from my file and just paste in the chart on bond.
And then in here I'm going to say, yeah, there's going to be a data prop.
I'm just going to set it equal to my data that is in the data source.
Now we're going to make this dynamic where once we save course notice, we're gonna have no errors and
all that.
But if I'll pass in different values, you'll notice that now, of course, we are getting them from
the REPOLISH component.
So let's say it.
Now, of course, my success is going gonna be the biggest one because that has the biggest value.
Now, don't worry.
The arrest of the data doesn't really make sense, considering that we're working with Web development
and they have example, 40 oils and 200000 and all that.
That wasn't our main concern.
Our main concern was to make sure that we have our chart and now data.
We're passing dynamically from the report.
And once we've got that, then, of course, slowly but surely we could start setting up rest of the
charts as well.