And once we have added these changes, of course, let's navigate to every pose and set up our functionality.
Now let me remove all my tabs.
So we have only one, the repos one.
We're going to, again, iterate over our array.
So that is going to be exactly the same.
I'm going to do that above the chart data.
True.
Eventually, of course, we're going to remove.
And then in here, we're just going to say a comment of stars and forks.
So the same deal we're using the reduce and all that.
So let's just go with light.
And we're going to structure stars and forks.
And you'll see why we're doing that in a second.
So we're going to go with the Repos and then reduce.
And then in here, course, we pass in the callback function.
And what I would want to return from my reduce is an object with two properties that our object itself.
One first stars and one Four Forks.
That's why we are de structuring right away from the reduced whatever returning the stars and the forks
and why we're using light.
Because we'll add some functionality as well a little bit later on.
And here we'll do the same thing.
Total total an item.
So that is going to represent each and every item in total.
Here's what we're turning.
So we're turning this stars and forks and within a function body.
This is where we set up the functionality.
And I'll start, as always, Baja's returning a total.
Otherwise, again, nothing is gonna happen.
And then in this case, I would wanted to structure the star gazers count.
So how many stars the ripple has?
How many forks the ripple has?
And what is the name of the ripple?
So I can go to concert.
And again, those are just properties that are on that repos object that is in my array.
So a gold star gazers count.
We go to name and we'll go with forks.
And all of that is in the item hard.
Now, of course, we need to keep in mind that what I'm returning is a object where the properties are
object itself and the way it's going to look like I'm going to say.
So roll and then stars some targeting.
My first property, which is an object.
And there I would want to create a new property with the amount of stars.
So I'm going to say star gazers count.
That is my value.
And that is going to be equal to an object where I'm going to have the label, which is going to be
the name of my repoll.
And then as far as the value, I'm going to go with star gazers count.
And there's already the structure, stars and forks from the object that I'm returning was just Consolo
log.
These stars, just so we all are on the same page.
So I'm going to head back to a bigger screen because it's gonna be easier to see.
And if we do inspect in a console, I should have the object.
And notice, now I have all of my repos.
But check it out.
So I have the property, which is the value of how many stars.
And then in here I have the label and a value.
Again, why we're doing that?
Well, it's simple because the chart is looking for the label and the value.
And then in that object, I'm just setting up these properties with these number of hours where I'm
saying, yeah, get me the star count.
Set it as a property and then set it equal to a repo.
And also the same thing with a value, because I need that value for my chart.
And once I have this now, I just need to massage this data.
But where again, I would want to have an array instead of the object that I have over here.
And I would want to do the same thing where I would want to display the one with the most stars.
Of course, first, as well as I would only want to display five of them.
So how we can do that?
Well, since we're using Lette over there, I could just say stars and land the same thing.
We go with object, object.
Then I'm looking for the values and then I'll pass in the stars.
So now this should be an.
All right.
Correct.
Then I'll make sure that I only get the last five because those are gonna be the biggest buyers.
Of course, as you see, we start with zero nine all the way up to a biggest star count.
That's why we're gonna go with slice.
Minus five.
So last five.
And then I also want to reverse them because I would want to display the one with the biggest stars
first.
And we just simply need to run our reverse method.
And now, instead of passing the CHA data in column, I'm gonna pass in stars.
Let's see whether everything works.
Of course it does.
Now I can see that jouster basic projects as the most stars, it's two, a six and then all the way
up to 17, which is a react Hooke's budget calculator.
Now, let me go one more time.
What we're doing here.
So I'm using reduce.
I am returning object with two properties that are object itself and I right away to structure them.
Then in a function body, of course, I have the total that I'm returning.
So this is my giant object.
And then each and every item, each my repoll that then from that repoll I get out.
Star gazers count name and forks and the worry will work on Forks in a second.
And then what I'm saying is in that property, in that object property, create a new property with
whatever value.
Have you all here?
If I have zero, then create zero.
If I have 206, create 206.
And I know what you're thinking.
Well, doesn't that mean that we're overriding and.
Yes, you're right, we are.
But in my case, what I was thinking is that we're only overriding for small values.
It's highly unlikely that you're going to have a or people with the same stars.
For example, 206.
Now, there might be the case, but most likely it was going to happen.
So that's why I was like, you know, it doesn't really matter if I'm overriding something from zero.
I can live with that because the only thing that I care about are, of course, the biggest stars anyway,
and that I'm setting this equal to a object.
And in there I have the reprogramme as well as the value.
I'm not eventually I'm just returning a total.
And now, since we already have seen how it works with stars, you probably already figure out that
the same is going to work for divorce.
So we're gonna go with Fork's Xenome dynamically creating that property with whatever value you have
fought for.
And then again, the same thing label is equal to the name of my repoll and the value is equal to a
fork's.
So whatever fork's I have and same thing we're gonna copy and paste.
However, in this case we just need to change these two around where.
Cause this is Fork's and this is also Fork's.
Now we can scroll down with donita char data anymore.
This was just our dummy data and mine for the bar one in the Forks.
So we say Faulkes.
We share it and we can nicely display the most porta repoll as well.
Hopefully you able to follow along and you have a nice looking chart.
So now, of course, we can start dealing with the fact that this is just static data.
So we need to make sure that we are fetching the user each and every time, whoever is using our application
types something and submits our form.