1
00:00:00,240 --> 00:00:00,840
Beautiful job.

2
00:00:00,870 --> 00:00:05,280
Once we've got something displayed on the screen now, of course.

3
00:00:05,350 --> 00:00:12,680
And let's spend a little bit of time to understand how it can work with fusion charts, library.

4
00:00:13,080 --> 00:00:18,810
Now, I'm going to start, though, in repose because I would want to add a section.

5
00:00:18,810 --> 00:00:25,590
I would want to add my wrapper and all that because, yeah, it's nice to have the chart rendered.

6
00:00:26,180 --> 00:00:30,770
But I think it's gonna be a little bit better if we have the proper styling.

7
00:00:30,780 --> 00:00:32,490
So I'm going to go with section first.

8
00:00:32,910 --> 00:00:35,610
We're going to add a class name of global section.

9
00:00:36,000 --> 00:00:42,240
And then we then this section, we're going to go with our wrapper and manual.

10
00:00:42,390 --> 00:00:46,020
Also the class name of Section Center.

11
00:00:46,790 --> 00:00:47,910
Let's do that section.

12
00:00:48,390 --> 00:00:48,900
Center.

13
00:00:49,330 --> 00:00:56,760
And now let's move up our example chart sucker and just place it in that section again.

14
00:00:57,570 --> 00:01:00,060
Not the best look at the moment, but don't worry.

15
00:01:00,470 --> 00:01:01,500
We're going to get there.

16
00:01:01,980 --> 00:01:05,580
So let's first understand how we can work with this library.

17
00:01:06,360 --> 00:01:08,040
So first, of course, they're importing react.

18
00:01:08,290 --> 00:01:11,780
Yeah, that is what we do every time we set up the component.

19
00:01:12,420 --> 00:01:14,940
And then they're importing two things.

20
00:01:14,970 --> 00:01:17,030
One, from a reactor and charts.

21
00:01:17,100 --> 00:01:17,970
That is one library.

22
00:01:18,420 --> 00:01:21,570
And the second one is the fusion charts.

23
00:01:22,020 --> 00:01:23,580
So we get the component.

24
00:01:23,870 --> 00:01:25,900
And as you know, it is this is a default export.

25
00:01:25,900 --> 00:01:29,900
So technically, we can name wherever we would one pages, namely react.

26
00:01:30,030 --> 00:01:32,540
Have C, which stands for fusion charts.

27
00:01:32,640 --> 00:01:36,240
I would assume online the fusion charts library itself.

28
00:01:36,750 --> 00:01:37,860
And then two things.

29
00:01:38,040 --> 00:01:42,270
We have the chart that we're going to render as well as the team.

30
00:01:42,780 --> 00:01:47,490
Now, again, keep in mind that both of these are default exports.

31
00:01:47,790 --> 00:01:56,100
So even though this says column two D essentially in the chart is where will change that information.

32
00:01:56,370 --> 00:02:01,010
So if we keep on scrolling, notice this chart data and then chart config.

33
00:02:01,110 --> 00:02:03,420
So chart data is going to be in chart configures.

34
00:02:03,510 --> 00:02:05,670
That's going to be the data that is rendered.

35
00:02:06,150 --> 00:02:13,050
But if you take a look at the type of the chart, this is world change, that chart that again, this

36
00:02:13,050 --> 00:02:16,140
is just importing the chart from the fusion charts.

37
00:02:16,320 --> 00:02:17,520
And the same goes for time.

38
00:02:18,030 --> 00:02:24,360
So once they import all of these things, then they're adding the chart and a theme as a dependency

39
00:02:24,780 --> 00:02:26,700
to the core using charts.

40
00:02:27,090 --> 00:02:28,050
And the way they do that.

41
00:02:28,110 --> 00:02:31,350
So the component that they import, they have a method.

42
00:02:31,590 --> 00:02:35,730
So F.C. a road and then they place the fusion chart.

43
00:02:36,160 --> 00:02:41,430
That is, of course, the core library than the chart that they would want to display.

44
00:02:42,030 --> 00:02:43,100
And the fusion theme.

45
00:02:43,650 --> 00:02:45,630
So that's how they set up that component.

46
00:02:46,160 --> 00:02:51,720
And like I said, since these are defaults, you might as well change this around a bit.

47
00:02:51,930 --> 00:02:54,840
So we're not confused where this is gonna be chart.

48
00:02:55,110 --> 00:02:58,740
Instead of column today, because later we'll use different charts or mind as well.

49
00:02:59,100 --> 00:03:02,910
Just have a more general naming for our chart.

50
00:03:03,450 --> 00:03:06,570
So now, instead of column today, I just named a chart.

51
00:03:06,950 --> 00:03:10,890
But let me repeat the type of chart we change later.

52
00:03:11,190 --> 00:03:12,870
So it doesn't really matter at the moment.

53
00:03:13,320 --> 00:03:14,250
So we said, OK.

54
00:03:14,450 --> 00:03:14,900
Awesome.

55
00:03:15,420 --> 00:03:19,020
And then we have the data that is going to be rendered.

56
00:03:19,680 --> 00:03:25,530
And if you notice the way they want their data is as an object.

57
00:03:25,620 --> 00:03:27,690
And then in that object, they have two properties.

58
00:03:28,200 --> 00:03:31,810
They have a label and value label and value label.

59
00:03:32,610 --> 00:03:37,830
So if I take a look at our project, for example, we have languages.

60
00:03:38,130 --> 00:03:45,710
So all I would want to display what language is the user is usually setting up the with.

61
00:03:46,200 --> 00:03:53,250
For example, I can notice here that 53 percent is JavaScript then to assess as well as the Asian demo.

62
00:03:54,000 --> 00:03:56,760
So I know that this is set for the pie.

63
00:03:57,270 --> 00:03:57,730
Don't worry.

64
00:03:58,560 --> 00:03:59,940
We're going to do that the same way.

65
00:04:00,360 --> 00:04:05,010
But since I would want to have our own data, why don't we do this?

66
00:04:05,470 --> 00:04:10,030
When I change this around to here now and then 13.

67
00:04:10,410 --> 00:04:14,490
So whatever is going to be the label and whatever is going to be my value.

68
00:04:15,030 --> 00:04:17,730
Then we're going to have a success here.

69
00:04:18,390 --> 00:04:20,220
And then, of course, fawzia's this.

70
00:04:20,270 --> 00:04:22,250
We're going to do a little bit more so 23A.

71
00:04:22,940 --> 00:04:27,240
And let's do JavaScript as far as the value.

72
00:04:27,700 --> 00:04:29,550
We're going to go with 80.

73
00:04:30,030 --> 00:04:31,440
Now we're going to remove rest of them.

74
00:04:32,070 --> 00:04:34,110
There's definitely way too many there.

75
00:04:34,170 --> 00:04:37,290
As far as data, once we serve it, not ours.

76
00:04:37,560 --> 00:04:39,310
We have HD Amelle to assess.

77
00:04:39,560 --> 00:04:40,950
And of course, we have Jotham.

78
00:04:41,430 --> 00:04:47,610
Now, it is really hard to see right now because if you notice, the chart configures, we have the

79
00:04:47,610 --> 00:04:48,570
width and height.

80
00:04:49,020 --> 00:04:50,620
Now, eventually we'll make this responsive.

81
00:04:50,640 --> 00:04:51,130
Don't worry.

82
00:04:51,610 --> 00:04:54,690
But for the time being, I'm just gonna make this smaller.

83
00:04:54,720 --> 00:04:55,710
I'm going to say 400.

84
00:04:56,160 --> 00:04:58,920
So my charge right now is, of course, smaller.

85
00:04:59,440 --> 00:04:59,700
So.

86
00:04:59,970 --> 00:05:01,230
This is our data.

87
00:05:01,530 --> 00:05:07,050
Whatever it's going to be, and yes, later will make this dynamic where we pass in the chart component.

88
00:05:07,380 --> 00:05:13,950
So essentially, since I have access to the repos in the report component and since I render my example

89
00:05:13,950 --> 00:05:18,180
chart, of course I'll pass in my data as a prop.

90
00:05:18,570 --> 00:05:23,100
For the time being, we're just hard coding because we're still exploring the documentation.

91
00:05:23,460 --> 00:05:26,670
So this is our chart data, whatever data we would want to render.

92
00:05:27,180 --> 00:05:28,860
And then we have these chart contracts.

93
00:05:29,490 --> 00:05:31,580
And the first thing here is the type.

94
00:05:32,070 --> 00:05:36,510
So wherever type we're gonna use, whether that is going to be Donat, whether that is going to be bar,

95
00:05:36,510 --> 00:05:39,090
whether that is going to be, I don't know, columns or whatever.

96
00:05:39,360 --> 00:05:42,840
This is where you change that chart that you import a chart.

97
00:05:43,020 --> 00:05:46,320
But now you decide, well, which chart you would want to use.

98
00:05:46,890 --> 00:05:50,340
And then or here we have hardcoded values.

99
00:05:50,600 --> 00:05:51,870
We have width and height and all that.

100
00:05:51,890 --> 00:05:54,750
And like I said later, yes, we'll make this responsive.

101
00:05:55,260 --> 00:05:57,310
And then data format, which is gonna be just on.

102
00:05:58,140 --> 00:06:07,140
And then in this data source, this is where we do a specific configuration for our particular chart.

103
00:06:08,070 --> 00:06:14,940
As you can see, they have a caption here to have sub caption know x axis, name, y axis name and suffixes

104
00:06:15,390 --> 00:06:15,960
and all that.

105
00:06:16,080 --> 00:06:18,450
And of course, here they also have the theme.

106
00:06:18,990 --> 00:06:21,940
And down at the bottom, you can see chart data.

107
00:06:22,380 --> 00:06:25,740
And that is the property in the object.

108
00:06:26,160 --> 00:06:30,280
So within a data source, they have a chart as well as the data.

109
00:06:30,630 --> 00:06:33,900
And that is set equal to the chart data.

110
00:06:34,440 --> 00:06:41,850
So we can already put two and two together that if we would have this chart data in repose, which essentially

111
00:06:42,180 --> 00:06:48,300
is how our setup is gonna work, because the Repos is going to be, of course, where we get our data.

112
00:06:48,780 --> 00:06:50,280
We could pass the Senate.

113
00:06:51,060 --> 00:06:53,400
And just change our set up a little bit around.

114
00:06:53,850 --> 00:06:59,580
So let's try doing that, because as far as these properties, I'm going to show you where you can find

115
00:06:59,580 --> 00:06:59,820
them.

116
00:07:00,240 --> 00:07:05,520
So each and every time you'd want to render different type or in general, if you'd want to know your

117
00:07:05,520 --> 00:07:07,990
options, of course, you can find these properties.

118
00:07:08,040 --> 00:07:13,320
But then as we're setting up the charts, I'm just gonna go over the property that I'm adding and then

119
00:07:13,650 --> 00:07:15,090
I'm going to show you the value.

120
00:07:15,390 --> 00:07:20,160
So essentially what I'm trying to say, it's not like I'm gonna show each and every property for every

121
00:07:20,160 --> 00:07:25,770
chart, because while that is just too time consuming, since they have so many options available.

122
00:07:26,190 --> 00:07:33,270
Just remember that eventually I'll show you the place where you can get this info if you'd want to.

123
00:07:34,310 --> 00:07:40,460
And then, of course, as we're working with our charts, I'll show you some of the properties that

124
00:07:40,490 --> 00:07:43,760
we're going to add to our specific charts.

125
00:07:43,910 --> 00:07:48,560
Now, once I'm done yammering and yammering, what I would want to do is make this dynamic.

126
00:07:49,040 --> 00:07:52,410
So I would want to pass my data from the reports.

127
00:07:52,670 --> 00:07:53,840
So that's gonna be the first part.

128
00:07:54,380 --> 00:07:55,880
So in here, what I would want.

129
00:07:56,000 --> 00:07:59,480
Well, I could set up the prop or act.

130
00:07:59,570 --> 00:08:03,740
I would say, yeah, I'm gonna be looking here for the data prop.

131
00:08:04,070 --> 00:08:05,030
I'm gonna pass it in.

132
00:08:05,580 --> 00:08:09,780
And now let's remove this chart data show.

133
00:08:10,610 --> 00:08:12,420
And yes, it's still going to be coded.

134
00:08:12,590 --> 00:08:15,560
But in this case, it's coming from the Repos.

135
00:08:15,620 --> 00:08:16,730
So it's copying paste.

136
00:08:17,240 --> 00:08:17,720
Don't worry.

137
00:08:18,060 --> 00:08:20,360
We'll change this over to reposing, not time.

138
00:08:20,900 --> 00:08:23,950
And now, as far as the example chart, I'm just gonna go data.

139
00:08:24,720 --> 00:08:28,520
And of course, I'm gonna set it equal to chart data.

140
00:08:29,420 --> 00:08:31,070
Chart data.

141
00:08:31,510 --> 00:08:31,990
Show.

142
00:08:32,670 --> 00:08:36,950
And then where I have the example chart, take this whole thing.

143
00:08:36,950 --> 00:08:41,150
The chart configures and just place it in the chart component.

144
00:08:41,810 --> 00:08:48,140
So let me remove from my file and just paste in the chart on bond.

145
00:08:48,710 --> 00:08:52,930
And then in here I'm going to say, yeah, there's going to be a data prop.

146
00:08:53,360 --> 00:08:58,490
I'm just going to set it equal to my data that is in the data source.

147
00:08:59,090 --> 00:09:06,380
Now we're going to make this dynamic where once we save course notice, we're gonna have no errors and

148
00:09:06,380 --> 00:09:07,060
all that.

149
00:09:07,670 --> 00:09:15,200
But if I'll pass in different values, you'll notice that now, of course, we are getting them from

150
00:09:15,350 --> 00:09:16,940
the REPOLISH component.

151
00:09:17,510 --> 00:09:18,410
So let's say it.

152
00:09:18,980 --> 00:09:24,290
Now, of course, my success is going gonna be the biggest one because that has the biggest value.

153
00:09:24,890 --> 00:09:25,610
Now, don't worry.

154
00:09:25,790 --> 00:09:30,770
The arrest of the data doesn't really make sense, considering that we're working with Web development

155
00:09:31,250 --> 00:09:35,510
and they have example, 40 oils and 200000 and all that.

156
00:09:35,930 --> 00:09:37,340
That wasn't our main concern.

157
00:09:37,400 --> 00:09:43,220
Our main concern was to make sure that we have our chart and now data.

158
00:09:43,610 --> 00:09:46,760
We're passing dynamically from the report.

159
00:09:47,480 --> 00:09:54,440
And once we've got that, then, of course, slowly but surely we could start setting up rest of the

160
00:09:54,440 --> 00:09:55,250
charts as well.