1
00:00:00,180 --> 00:00:06,030
And once we have added these changes, of course, let's navigate to every pose and set up our functionality.

2
00:00:06,730 --> 00:00:08,370
Now let me remove all my tabs.

3
00:00:08,400 --> 00:00:11,490
So we have only one, the repos one.

4
00:00:12,620 --> 00:00:15,330
We're going to, again, iterate over our array.

5
00:00:15,510 --> 00:00:17,400
So that is going to be exactly the same.

6
00:00:18,350 --> 00:00:20,310
I'm going to do that above the chart data.

7
00:00:20,450 --> 00:00:20,580
True.

8
00:00:20,620 --> 00:00:22,980
Eventually, of course, we're going to remove.

9
00:00:23,460 --> 00:00:29,690
And then in here, we're just going to say a comment of stars and forks.

10
00:00:30,120 --> 00:00:32,490
So the same deal we're using the reduce and all that.

11
00:00:32,820 --> 00:00:35,270
So let's just go with light.

12
00:00:36,000 --> 00:00:39,840
And we're going to structure stars and forks.

13
00:00:39,930 --> 00:00:41,700
And you'll see why we're doing that in a second.

14
00:00:42,120 --> 00:00:45,440
So we're going to go with the Repos and then reduce.

15
00:00:46,410 --> 00:00:49,650
And then in here, course, we pass in the callback function.

16
00:00:50,010 --> 00:00:57,300
And what I would want to return from my reduce is an object with two properties that our object itself.

17
00:00:57,630 --> 00:01:00,450
One first stars and one Four Forks.

18
00:01:00,990 --> 00:01:08,160
That's why we are de structuring right away from the reduced whatever returning the stars and the forks

19
00:01:08,640 --> 00:01:09,690
and why we're using light.

20
00:01:09,750 --> 00:01:13,860
Because we'll add some functionality as well a little bit later on.

21
00:01:14,370 --> 00:01:16,110
And here we'll do the same thing.

22
00:01:16,560 --> 00:01:19,290
Total total an item.

23
00:01:19,740 --> 00:01:21,930
So that is going to represent each and every item in total.

24
00:01:22,200 --> 00:01:23,240
Here's what we're turning.

25
00:01:23,550 --> 00:01:28,290
So we're turning this stars and forks and within a function body.

26
00:01:28,380 --> 00:01:30,090
This is where we set up the functionality.

27
00:01:30,480 --> 00:01:33,120
And I'll start, as always, Baja's returning a total.

28
00:01:33,690 --> 00:01:35,720
Otherwise, again, nothing is gonna happen.

29
00:01:36,000 --> 00:01:40,080
And then in this case, I would wanted to structure the star gazers count.

30
00:01:40,440 --> 00:01:42,870
So how many stars the ripple has?

31
00:01:43,170 --> 00:01:44,880
How many forks the ripple has?

32
00:01:45,210 --> 00:01:47,700
And what is the name of the ripple?

33
00:01:48,150 --> 00:01:49,250
So I can go to concert.

34
00:01:49,350 --> 00:01:55,110
And again, those are just properties that are on that repos object that is in my array.

35
00:01:55,500 --> 00:01:57,150
So a gold star gazers count.

36
00:01:57,240 --> 00:01:59,580
We go to name and we'll go with forks.

37
00:01:59,940 --> 00:02:02,820
And all of that is in the item hard.

38
00:02:02,970 --> 00:02:10,140
Now, of course, we need to keep in mind that what I'm returning is a object where the properties are

39
00:02:10,230 --> 00:02:14,640
object itself and the way it's going to look like I'm going to say.

40
00:02:14,970 --> 00:02:18,210
So roll and then stars some targeting.

41
00:02:18,600 --> 00:02:20,790
My first property, which is an object.

42
00:02:21,260 --> 00:02:26,880
And there I would want to create a new property with the amount of stars.

43
00:02:27,300 --> 00:02:29,790
So I'm going to say star gazers count.

44
00:02:30,150 --> 00:02:31,380
That is my value.

45
00:02:31,740 --> 00:02:37,410
And that is going to be equal to an object where I'm going to have the label, which is going to be

46
00:02:37,410 --> 00:02:39,500
the name of my repoll.

47
00:02:39,870 --> 00:02:44,750
And then as far as the value, I'm going to go with star gazers count.

48
00:02:45,180 --> 00:02:51,160
And there's already the structure, stars and forks from the object that I'm returning was just Consolo

49
00:02:51,200 --> 00:02:51,660
log.

50
00:02:52,200 --> 00:02:55,470
These stars, just so we all are on the same page.

51
00:02:56,070 --> 00:02:59,850
So I'm going to head back to a bigger screen because it's gonna be easier to see.

52
00:03:00,420 --> 00:03:05,250
And if we do inspect in a console, I should have the object.

53
00:03:05,310 --> 00:03:09,690
And notice, now I have all of my repos.

54
00:03:10,080 --> 00:03:10,920
But check it out.

55
00:03:11,340 --> 00:03:15,450
So I have the property, which is the value of how many stars.

56
00:03:15,810 --> 00:03:17,680
And then in here I have the label and a value.

57
00:03:18,280 --> 00:03:19,600
Again, why we're doing that?

58
00:03:20,100 --> 00:03:25,840
Well, it's simple because the chart is looking for the label and the value.

59
00:03:26,520 --> 00:03:31,590
And then in that object, I'm just setting up these properties with these number of hours where I'm

60
00:03:31,590 --> 00:03:34,230
saying, yeah, get me the star count.

61
00:03:34,350 --> 00:03:38,340
Set it as a property and then set it equal to a repo.

62
00:03:39,210 --> 00:03:43,230
And also the same thing with a value, because I need that value for my chart.

63
00:03:43,740 --> 00:03:47,100
And once I have this now, I just need to massage this data.

64
00:03:47,280 --> 00:03:53,460
But where again, I would want to have an array instead of the object that I have over here.

65
00:03:53,840 --> 00:04:00,510
And I would want to do the same thing where I would want to display the one with the most stars.

66
00:04:00,510 --> 00:04:04,140
Of course, first, as well as I would only want to display five of them.

67
00:04:04,560 --> 00:04:05,490
So how we can do that?

68
00:04:05,550 --> 00:04:11,430
Well, since we're using Lette over there, I could just say stars and land the same thing.

69
00:04:11,430 --> 00:04:14,220
We go with object, object.

70
00:04:14,370 --> 00:04:18,450
Then I'm looking for the values and then I'll pass in the stars.

71
00:04:18,930 --> 00:04:20,140
So now this should be an.

72
00:04:20,160 --> 00:04:20,430
All right.

73
00:04:20,460 --> 00:04:20,910
Correct.

74
00:04:21,480 --> 00:04:28,380
Then I'll make sure that I only get the last five because those are gonna be the biggest buyers.

75
00:04:28,380 --> 00:04:34,830
Of course, as you see, we start with zero nine all the way up to a biggest star count.

76
00:04:36,030 --> 00:04:37,860
That's why we're gonna go with slice.

77
00:04:38,430 --> 00:04:39,600
Minus five.

78
00:04:39,690 --> 00:04:40,740
So last five.

79
00:04:41,190 --> 00:04:46,380
And then I also want to reverse them because I would want to display the one with the biggest stars

80
00:04:46,380 --> 00:04:46,710
first.

81
00:04:47,030 --> 00:04:49,950
And we just simply need to run our reverse method.

82
00:04:50,400 --> 00:04:57,120
And now, instead of passing the CHA data in column, I'm gonna pass in stars.

83
00:04:57,700 --> 00:04:59,280
Let's see whether everything works.

84
00:05:00,550 --> 00:05:01,450
Of course it does.

85
00:05:01,580 --> 00:05:07,780
Now I can see that jouster basic projects as the most stars, it's two, a six and then all the way

86
00:05:07,780 --> 00:05:12,040
up to 17, which is a react Hooke's budget calculator.

87
00:05:12,460 --> 00:05:14,050
Now, let me go one more time.

88
00:05:14,140 --> 00:05:15,170
What we're doing here.

89
00:05:15,730 --> 00:05:17,260
So I'm using reduce.

90
00:05:17,520 --> 00:05:23,200
I am returning object with two properties that are object itself and I right away to structure them.

91
00:05:24,040 --> 00:05:27,820
Then in a function body, of course, I have the total that I'm returning.

92
00:05:27,880 --> 00:05:29,410
So this is my giant object.

93
00:05:30,010 --> 00:05:35,020
And then each and every item, each my repoll that then from that repoll I get out.

94
00:05:35,020 --> 00:05:39,830
Star gazers count name and forks and the worry will work on Forks in a second.

95
00:05:40,440 --> 00:05:47,590
And then what I'm saying is in that property, in that object property, create a new property with

96
00:05:47,590 --> 00:05:48,390
whatever value.

97
00:05:48,440 --> 00:05:49,160
Have you all here?

98
00:05:49,570 --> 00:05:51,430
If I have zero, then create zero.

99
00:05:51,460 --> 00:05:54,190
If I have 206, create 206.

100
00:05:54,500 --> 00:05:55,570
And I know what you're thinking.

101
00:05:55,570 --> 00:05:58,570
Well, doesn't that mean that we're overriding and.

102
00:05:58,570 --> 00:05:59,560
Yes, you're right, we are.

103
00:06:00,010 --> 00:06:04,920
But in my case, what I was thinking is that we're only overriding for small values.

104
00:06:05,410 --> 00:06:09,620
It's highly unlikely that you're going to have a or people with the same stars.

105
00:06:09,640 --> 00:06:10,860
For example, 206.

106
00:06:11,290 --> 00:06:14,350
Now, there might be the case, but most likely it was going to happen.

107
00:06:14,680 --> 00:06:19,090
So that's why I was like, you know, it doesn't really matter if I'm overriding something from zero.

108
00:06:19,090 --> 00:06:25,180
I can live with that because the only thing that I care about are, of course, the biggest stars anyway,

109
00:06:25,560 --> 00:06:28,600
and that I'm setting this equal to a object.

110
00:06:28,850 --> 00:06:31,690
And in there I have the reprogramme as well as the value.

111
00:06:31,970 --> 00:06:33,640
I'm not eventually I'm just returning a total.

112
00:06:34,090 --> 00:06:39,520
And now, since we already have seen how it works with stars, you probably already figure out that

113
00:06:39,520 --> 00:06:41,090
the same is going to work for divorce.

114
00:06:41,440 --> 00:06:48,490
So we're gonna go with Fork's Xenome dynamically creating that property with whatever value you have

115
00:06:48,490 --> 00:06:49,170
fought for.

116
00:06:49,540 --> 00:06:57,760
And then again, the same thing label is equal to the name of my repoll and the value is equal to a

117
00:06:57,760 --> 00:06:58,140
fork's.

118
00:06:58,570 --> 00:07:02,320
So whatever fork's I have and same thing we're gonna copy and paste.

119
00:07:02,350 --> 00:07:05,410
However, in this case we just need to change these two around where.

120
00:07:05,800 --> 00:07:08,530
Cause this is Fork's and this is also Fork's.

121
00:07:09,940 --> 00:07:13,690
Now we can scroll down with donita char data anymore.

122
00:07:14,050 --> 00:07:19,140
This was just our dummy data and mine for the bar one in the Forks.

123
00:07:19,720 --> 00:07:20,710
So we say Faulkes.

124
00:07:21,930 --> 00:07:27,390
We share it and we can nicely display the most porta repoll as well.

125
00:07:28,110 --> 00:07:31,950
Hopefully you able to follow along and you have a nice looking chart.

126
00:07:32,350 --> 00:07:37,140
So now, of course, we can start dealing with the fact that this is just static data.

127
00:07:37,530 --> 00:07:44,820
So we need to make sure that we are fetching the user each and every time, whoever is using our application

128
00:07:45,210 --> 00:07:48,060
types something and submits our form.