1
00:00:00,210 --> 00:00:00,660
Beautiful.

2
00:00:00,900 --> 00:00:06,420
And let's start working in the bar chart, since that's the first component that we display.

3
00:00:07,020 --> 00:00:13,650
And like I mentioned in the previous video, the way the library works, we just get a bunch of components

4
00:00:13,860 --> 00:00:14,880
from the library.

5
00:00:15,150 --> 00:00:20,910
And yes, in general, you would need to reference the box which components are you looking for?

6
00:00:21,300 --> 00:00:28,230
So in our case, we go with responsive container when we have the bar chart, which essentially sets

7
00:00:28,230 --> 00:00:29,160
up the whole thing.

8
00:00:29,490 --> 00:00:38,070
And then more specifically, we have the x axis y axis, the grid, the tooltip, as well as the bars.

9
00:00:38,630 --> 00:00:44,250
So best represents all the bars we're going to have and then we pass in the properties.

10
00:00:44,940 --> 00:00:50,460
And let's just start setting everything up and then I'll kind of cover as we go along.

11
00:00:50,820 --> 00:00:56,490
And yes, this is going to be the case where I really don't see the point of typing these components.

12
00:00:56,540 --> 00:01:01,050
Let me just grab them from the read me and we'll go to your bar chart.

13
00:01:01,920 --> 00:01:04,349
Then let's set up those components.

14
00:01:05,580 --> 00:01:10,830
Now, as far as the data, we remember, it is coming in as a prop.

15
00:01:11,400 --> 00:01:13,290
So we want to access the data first.

16
00:01:13,680 --> 00:01:16,890
In this case, we're not going to have any kind of styled component.

17
00:01:17,490 --> 00:01:24,870
So essentially will rely on the components that are provided by labor, and 40 responsive containers

18
00:01:24,870 --> 00:01:29,880
will provide a prop off with which is going to be 100 percent.

19
00:01:30,270 --> 00:01:32,220
And then we need to provide the heart.

20
00:01:32,550 --> 00:01:35,790
So, my gosh, I'm going to go with a 300.

21
00:01:36,060 --> 00:01:40,320
Now, of course, if you want a bigger or smaller, that's up to you, I'm going to go with three.

22
00:01:41,130 --> 00:01:45,000
Then we might as well remove this heading to because we're not going to use that.

23
00:01:45,330 --> 00:01:51,270
We want to go with a bar chart and let's passed in the data as the data.

24
00:01:51,750 --> 00:01:56,950
Now, at the moment, we're not accessing it on the y axis as well as the bar.

25
00:01:57,420 --> 00:02:02,430
But for the time being, let's just pass it and that's what the library requires.

26
00:02:02,700 --> 00:02:08,160
And I also want to add a little bit of margin where we need to pass in the object.

27
00:02:08,520 --> 00:02:11,520
And we have top bottom left and right and all that.

28
00:02:11,880 --> 00:02:16,410
My gosh, I only want to set the top equal to a 50.

29
00:02:16,890 --> 00:02:20,670
So within the bar chart, let's start by setting up the grid.

30
00:02:21,180 --> 00:02:28,890
So we go here with this component and then we can actually style the strokes.

31
00:02:29,220 --> 00:02:32,370
So essentially regions over here in ours.

32
00:02:32,880 --> 00:02:34,110
So that's the grid.

33
00:02:34,440 --> 00:02:43,350
And as you can see, as I'm changing the values, those strokes in between those squares, there's also

34
00:02:43,350 --> 00:02:44,010
going to change.

35
00:02:44,010 --> 00:02:51,240
So I'm going to go with stroke bash on the right and I'm going to set it equal to three and three,

36
00:02:51,240 --> 00:02:54,780
which seems to be pretty basic set up over there.

37
00:02:55,350 --> 00:02:57,840
Then let's go with x axis.

38
00:02:58,230 --> 00:03:00,480
So that's the components for the x axis.

39
00:03:01,020 --> 00:03:01,980
And here's the key.

40
00:03:02,250 --> 00:03:04,290
We go with data key prop.

41
00:03:04,770 --> 00:03:08,910
Now we're specifically need to say, well, which one we're looking for.

42
00:03:09,690 --> 00:03:12,180
So we have to we have a date.

43
00:03:12,660 --> 00:03:14,700
And we also have the value.

44
00:03:15,150 --> 00:03:23,160
Now you can either go and take a look in the actual browser or you can just scroll back and read me

45
00:03:23,460 --> 00:03:28,290
and will notice that we have date and we have the cone and we just need to decide.

46
00:03:29,380 --> 00:03:30,640
Well, which one will years?

47
00:03:31,210 --> 00:03:37,030
So we need to pass in the data in the bar chart, which is going to be our parent.

48
00:03:37,360 --> 00:03:44,380
So there is the proper name and then there is the data that is coming in from the charts container.

49
00:03:44,680 --> 00:03:47,270
And as far as the data key, well, we have two options.

50
00:03:47,620 --> 00:03:49,900
We either have date or we have count.

51
00:03:50,380 --> 00:03:56,300
So in our case, we want to go with date like show and that should date for the x axis.

52
00:03:56,320 --> 00:03:56,800
We're done.

53
00:03:57,080 --> 00:03:58,840
And notice how this is a parent.

54
00:03:59,050 --> 00:04:04,090
Both of these ones are and these ones, we're just stacking one on top of each other.

55
00:04:04,390 --> 00:04:05,620
We want to add the tooltip.

56
00:04:06,040 --> 00:04:07,180
That's another component.

57
00:04:07,660 --> 00:04:10,250
And then we want to also set up the y axis.

58
00:04:10,290 --> 00:04:17,230
My apologies, actually, before the tooltip went, don't set up over here, the y axis and in here,

59
00:04:17,230 --> 00:04:24,880
we're not going to pass anything in, but I do want to set up allow decimals equal to false because

60
00:04:24,880 --> 00:04:32,050
it's all a bit annoying when we have months, for example, showcase that if this one is in a decimal

61
00:04:32,620 --> 00:04:37,540
kind of doesn't make sense to me where we're I'm sorry, not months the count of jobs.

62
00:04:37,930 --> 00:04:42,250
So this actually, in my opinion, should be a whole number.

63
00:04:42,370 --> 00:04:46,030
That's what got our best and most, and we'll set it equal to false.

64
00:04:46,140 --> 00:04:50,230
Let's also close it, and the last thing is going to be the actual bar component.

65
00:04:50,620 --> 00:04:55,990
Again, we'll set up a data key, which will be equal to a count in this case.

66
00:04:56,440 --> 00:05:01,570
Then for to fill, we can come up with some kind of colour rather dramatic.

67
00:05:01,630 --> 00:05:09,820
There's going to be hashtag and then to see B one b c, and we also can set up the bar size.

68
00:05:09,820 --> 00:05:11,860
So essentially how wide is going to be.

69
00:05:11,870 --> 00:05:14,890
And when I was testing, I kind of settled on seventy five.

70
00:05:16,040 --> 00:05:21,260
But there's always something that you can set up, however you like.

71
00:05:21,680 --> 00:05:26,840
Now let me navigate back to the browser and I can see that there's a little bit of an issue.

72
00:05:27,420 --> 00:05:33,080
And yep, I'm importing the bar chart, but I actually named my component over here.

73
00:05:33,410 --> 00:05:36,830
So why don't we rename this one say component?

74
00:05:37,160 --> 00:05:41,480
And let's not forget to actually export as well?

75
00:05:41,960 --> 00:05:42,640
But Mr.

76
00:05:42,800 --> 00:05:45,680
And I also want to do the same thing in the read me.

77
00:05:46,310 --> 00:05:48,320
So we don't have any confusion.

78
00:05:48,530 --> 00:05:50,860
I'll say over here component.

79
00:05:50,930 --> 00:05:52,190
Let me say this one.

80
00:05:52,790 --> 00:05:55,970
And once I navigate back to the browser, check it out.

81
00:05:56,210 --> 00:06:04,280
We have our nice bar chart, so we don't have the area yet, but this is our bar chart is going to look

82
00:06:04,280 --> 00:06:04,520
like.

83
00:06:04,820 --> 00:06:09,980
So in July, we applied to one job and in December we applied to five jobs.