1
00:00:00,240 --> 00:00:00,750
Nice work.

2
00:00:00,900 --> 00:00:05,010
And I think we're going to start by building out the pie chart.

3
00:00:05,640 --> 00:00:11,430
Now, for the time being, we're still going to use our dummy data, meaning the data that we have in

4
00:00:11,430 --> 00:00:13,020
the Repos, the hardcoded one.

5
00:00:13,440 --> 00:00:19,530
And then once we build out the chart, then we'll take a look at how we can iterate over our repos and

6
00:00:19,530 --> 00:00:23,790
get meaningful data displayed in our parcher.

7
00:00:24,280 --> 00:00:28,700
And the way it's gonna work is we're going to navigate the repos.

8
00:00:29,280 --> 00:00:34,880
And I'm just gonna comment about the example chart just in case you ever would want to look over.

9
00:00:35,160 --> 00:00:37,800
So there's just those for your reference, but.

10
00:00:38,740 --> 00:00:43,130
Notice where we have the charts folder in there.

11
00:00:43,240 --> 00:00:51,000
Look, for example, chart on one that we are working on, select everything and then navigate to buy

12
00:00:51,270 --> 00:00:52,490
3D dress.

13
00:00:53,020 --> 00:00:59,050
So select everything that you have currently in PI 3D and then copy and paste the example chart.

14
00:00:59,640 --> 00:01:04,180
So once you've got that, we'll leave everything at the top.

15
00:01:04,510 --> 00:01:10,870
So this is the same or of course, in order to change the chart, of course we would need to do that

16
00:01:11,230 --> 00:01:12,550
in the chart and fix.

17
00:01:13,080 --> 00:01:14,830
And as a quick side note.

18
00:01:15,340 --> 00:01:22,810
I don't think I mentioned in big enough detail that the reason why we're able to delete the array has

19
00:01:22,810 --> 00:01:24,190
a value for our data property.

20
00:01:24,670 --> 00:01:26,560
Because this is what we're passing in.

21
00:01:27,130 --> 00:01:32,010
So from the repos we pass in data prop and.

22
00:01:32,770 --> 00:01:38,200
In the example chart or at the moment in 3D as well when we pass in that data.

23
00:01:38,230 --> 00:01:44,290
We the structured and since we can use ESX shorthand where we just assign a value to this data.

24
00:01:44,590 --> 00:01:46,990
This is why I was able to just delete the value.

25
00:01:47,350 --> 00:01:54,070
So again, it would mean exactly the same if I would just type data is equal to a data prop that I'm

26
00:01:54,070 --> 00:01:54,400
passing.

27
00:01:54,700 --> 00:01:55,660
Hopefully this makes sense.

28
00:01:56,500 --> 00:01:57,970
So let me delete it again.

29
00:01:58,420 --> 00:02:04,090
And now it's finally set up our configuration and I'm going to start by changing of the value here.

30
00:02:04,480 --> 00:02:10,000
So I'm going to say by three D that as far as the width for the time being.

31
00:02:10,030 --> 00:02:12,180
I'll leave it at 400.

32
00:02:12,760 --> 00:02:14,110
So that stays the same.

33
00:02:14,470 --> 00:02:16,150
Data format stays the same.

34
00:02:16,660 --> 00:02:21,100
And in here I'm just gonna delete everything and we'll start from scratch.

35
00:02:21,550 --> 00:02:23,860
So you would want to have a caption.

36
00:02:24,160 --> 00:02:25,870
We need to use a caption properly.

37
00:02:26,260 --> 00:02:27,880
And then just come up with a value.

38
00:02:28,240 --> 00:02:32,240
So in this case, I'm gonna go with language is like.

39
00:02:32,350 --> 00:02:34,900
So then we'll right away set up a theme.

40
00:02:35,700 --> 00:02:40,930
As far as the theme, we're gonna go with a fusion one line for time being.

41
00:02:40,930 --> 00:02:42,430
We'll just leave it at that.

42
00:02:42,820 --> 00:02:44,800
And then we'll add few more properties.

43
00:02:45,160 --> 00:02:46,120
So let me save it.

44
00:02:46,400 --> 00:02:47,000
Not the moment.

45
00:02:47,020 --> 00:02:50,470
Of course, we shouldn't see anything because we haven't saved the repos.

46
00:02:50,800 --> 00:02:56,720
So now what I would want to do is, like I said, leave this comment it out or you can just delete it,

47
00:02:56,740 --> 00:02:57,230
whatever.

48
00:02:57,790 --> 00:03:00,790
All I wanted to do is to leave it for your reference.

49
00:03:01,060 --> 00:03:03,570
And the one that we're looking for is this by 3D.

50
00:03:04,030 --> 00:03:09,590
Of course, we'll still pass this there because the moment we haven't iterated over the post.

51
00:03:10,060 --> 00:03:13,360
So in the wrapper, we're just going to go with Y 3D.

52
00:03:13,480 --> 00:03:19,900
Again, we still have a data property since we didn't change that in our setup waterpipe 3D.

53
00:03:20,470 --> 00:03:23,020
And then let's pass in chart data.

54
00:03:23,560 --> 00:03:24,400
Let's close it out.

55
00:03:24,900 --> 00:03:26,640
And we should have our PI one.

56
00:03:27,160 --> 00:03:27,760
Of course we do.

57
00:03:28,120 --> 00:03:33,130
So now as you can see, we have H here now we have Josh script and we have CSX.

58
00:03:33,310 --> 00:03:35,590
So this would be a default setup.

59
00:03:36,520 --> 00:03:37,480
The moment we get it.

60
00:03:37,900 --> 00:03:41,440
Of course, this just calculates what is the total value here.

61
00:03:41,560 --> 00:03:45,310
So it calculates thirteen plus hundred sixty and eighty.

62
00:03:45,670 --> 00:03:50,390
And this just gives you that, for example, CSX is 63 percent.

63
00:03:50,950 --> 00:03:53,830
Because of course, that is 160 from that total volume.

64
00:03:54,250 --> 00:03:58,900
Now, what's really cool is that we can click on them, notice how they move out.

65
00:03:59,470 --> 00:04:02,710
And so we can, like, look at our chart and the same works.

66
00:04:02,770 --> 00:04:03,920
If we click it over here.

67
00:04:04,600 --> 00:04:09,990
Now, what more configuration options we can do while in the PI 3D?

68
00:04:10,510 --> 00:04:16,390
For example, if I win one decimals, I can simply say decimals.

69
00:04:17,180 --> 00:04:20,860
And in here they have values from zero or one.

70
00:04:21,400 --> 00:04:25,450
So if the value is going to be one, then you will have decimals, which, by the way, of course is

71
00:04:25,450 --> 00:04:26,020
the default one.

72
00:04:26,410 --> 00:04:30,910
But if I'm gonna go with decimal zero, you'll notice how we don't have decimals anymore.

73
00:04:31,300 --> 00:04:32,950
So now we're still calculating.

74
00:04:32,950 --> 00:04:38,140
Of course, that is still true, but we're not showing the decimals.

75
00:04:38,650 --> 00:04:42,880
Now, what we can also change is the radius of the pie.

76
00:04:43,250 --> 00:04:43,930
How does that work?

77
00:04:44,010 --> 00:04:51,330
Well, we could write PI radius property and set it up some kind of percentage of power.

78
00:04:51,780 --> 00:04:54,520
So in my case, I'm going to go with thirty five percent.

79
00:04:54,970 --> 00:04:58,660
And you'll notice that right now the PI should be bigger.

80
00:04:59,170 --> 00:05:00,580
So the chart stays the same.

81
00:05:01,070 --> 00:05:01,750
That's still true.

82
00:05:01,780 --> 00:05:03,730
But the PI is bigger.

83
00:05:04,510 --> 00:05:08,050
If you want even more bigger you can add here forty five, for example.

84
00:05:08,590 --> 00:05:15,100
Just keep in mind, the bigger it gets and the more info you have, you might run into a situation where

85
00:05:15,460 --> 00:05:21,910
while there's not enough space again at this point, as you're looking at, you might well, I don't

86
00:05:21,910 --> 00:05:26,800
see how that could happen, but trust me, especially as you're changing the width of the chart.

87
00:05:27,220 --> 00:05:32,260
And if you have more information or here, you might run into a situation where, for example, JavaScript

88
00:05:32,650 --> 00:05:34,210
is going to be somewhere outside.

89
00:05:34,360 --> 00:05:37,570
So just keep that in mind when you're setting up that.

90
00:05:37,770 --> 00:05:38,130
Radius.

91
00:05:38,370 --> 00:05:42,250
Not one more thing that we could do is to provide our own callers.

92
00:05:42,780 --> 00:05:50,310
Just keep in mind one thing, that if you don't provide enough color options, if you have more selections

93
00:05:50,370 --> 00:05:53,780
than the colors, then the color will be reused.

94
00:05:54,450 --> 00:05:55,770
Now get back to our project.

95
00:05:55,770 --> 00:06:01,240
The property we're looking for is Pallot all hours online.

96
00:06:01,320 --> 00:06:03,120
We would need to provide a string.

97
00:06:03,120 --> 00:06:06,210
And then in that string we provide hex colors.

98
00:06:06,430 --> 00:06:09,930
We have Carmo separators, for example.

99
00:06:09,960 --> 00:06:20,940
I could go with color EF zero, the B online for F, but you'll notice since I have more options now,

100
00:06:21,000 --> 00:06:22,260
we're just using this color.

101
00:06:22,960 --> 00:06:29,760
Of course, if you are using your own colors, just make sure that you provide an item, maybe 10 options

102
00:06:29,760 --> 00:06:36,390
or whatever, because even though at the moment I'm just using three, I don't know how many languages

103
00:06:36,390 --> 00:06:37,800
the user is gonna be using.

104
00:06:38,340 --> 00:06:40,380
For example, maybe user goes with four.

105
00:06:40,770 --> 00:06:42,650
So then again, I'm repeating the color.

106
00:06:42,990 --> 00:06:45,000
So, yes, of course, you can provide your own colors.

107
00:06:45,360 --> 00:06:52,050
Just make sure that you have the extensive list of those colors so you don't run into a situation where

108
00:06:52,050 --> 00:06:54,300
the same color is repeated.

109
00:06:54,780 --> 00:06:58,120
But that should do it for setting up our pie.

110
00:06:58,920 --> 00:07:04,470
So now, of course, we could figure out how to set up a proper data in repose.

111
00:07:04,760 --> 00:07:12,600
So instead of passing these dummy data, charred data, we would pass in the actual data from our EBOs.