1
00:00:00,050 --> 00:00:04,180
In order to display the charts, we're going to use read charts, library.

2
00:00:04,220 --> 00:00:08,240
And if you want to start using it in your own projects, just go with NPM.

3
00:00:08,240 --> 00:00:15,110
I and Richards again, Please keep in mind that of course in this project you need to install in the

4
00:00:15,110 --> 00:00:15,860
client.

5
00:00:15,890 --> 00:00:20,490
Now if you want to take a look, what do we have as far as the docs?

6
00:00:20,510 --> 00:00:22,310
Just follow the link.

7
00:00:22,340 --> 00:00:23,690
They have a nice guide.

8
00:00:23,690 --> 00:00:24,920
They have nice API.

9
00:00:24,950 --> 00:00:27,680
But to tell you honestly I actually.

10
00:00:28,380 --> 00:00:30,530
Find this one the most useful one.

11
00:00:30,540 --> 00:00:35,820
Essentially, you will right away have the examples of a bunch of charts.

12
00:00:35,910 --> 00:00:40,200
This is what I used in order to set up the following charts.

13
00:00:40,350 --> 00:00:43,320
I guess let's just start working in the area chart.

14
00:00:43,440 --> 00:00:51,090
The main idea is that we import quite a few components from the charts library and then we just construct

15
00:00:51,090 --> 00:00:51,900
the chart.

16
00:00:51,930 --> 00:00:54,510
Now, in order to speed this up, I will.

17
00:00:55,300 --> 00:01:00,840
Grab those imports and then let's navigate to area chart over here.

18
00:01:01,910 --> 00:01:03,100
We want to copy and paste.

19
00:01:03,110 --> 00:01:06,890
Remember, we're still grabbing the data, correct?

20
00:01:06,920 --> 00:01:08,090
That's the prop.

21
00:01:08,090 --> 00:01:10,220
And in there we have that count.

22
00:01:10,220 --> 00:01:13,220
And I believe the second one is date.

23
00:01:13,250 --> 00:01:15,860
So let's grab the data over here.

24
00:01:16,130 --> 00:01:22,340
And as far as the actual chart, well, I want to set up, my one's responsive and therefore I'm going

25
00:01:22,340 --> 00:01:28,040
to go with responsive container again, that's the component which is provided by the library, the

26
00:01:28,070 --> 00:01:36,020
rich one, and I'll set my one equal to width 100% and then I'll hardcode the height and I'm going to

27
00:01:36,020 --> 00:01:38,060
go with 300 pixels.

28
00:01:38,090 --> 00:01:44,690
Then inside of the responsive container we want to set up area chart.

29
00:01:45,480 --> 00:01:46,470
Component.

30
00:01:46,500 --> 00:01:49,160
Then we need to pass in the data.

31
00:01:49,170 --> 00:01:58,380
And this is why we were so specific in the stats route, because the rich library is actually looking

32
00:01:58,380 --> 00:02:00,360
for a very specific syntax.

33
00:02:00,360 --> 00:02:03,480
So we go here with data equals to a data.

34
00:02:03,600 --> 00:02:05,940
Then I do want to add some margin.

35
00:02:05,940 --> 00:02:12,450
So technically this is a CSS thing that I'm doing right now and I'm going to set it equal to 50.

36
00:02:12,600 --> 00:02:15,720
And then I want to set up the closing tag as well.

37
00:02:15,840 --> 00:02:19,080
Now inside of it, let's go with the grid one.

38
00:02:19,170 --> 00:02:25,950
So we're looking for this component and we'll set up stroke dash array as three and three.

39
00:02:26,220 --> 00:02:28,800
So let's go with the component.

40
00:02:29,830 --> 00:02:31,720
Stroke dasharray.

41
00:02:31,880 --> 00:02:35,440
And we'll set it equal to three and three.

42
00:02:36,040 --> 00:02:37,960
This one, we self close.

43
00:02:38,410 --> 00:02:40,780
Then we have x axis.

44
00:02:40,780 --> 00:02:46,210
And essentially, in my case, I want to set my date on the x axis.

45
00:02:46,210 --> 00:02:49,750
That's why I'll go here with the component again.

46
00:02:49,780 --> 00:02:53,320
X axis component and then date a key prop.

47
00:02:53,410 --> 00:02:56,020
I'll set it equal to my date.

48
00:02:56,050 --> 00:02:59,200
So basically I pass here the data in there.

49
00:02:59,200 --> 00:03:05,800
There is a date and I just say, Hey, listen, for the x axis, a key is going to be date again.

50
00:03:05,800 --> 00:03:11,410
We self close it and then for the y axis actually don't want decimals.

51
00:03:11,650 --> 00:03:18,910
So remember in the y axis we display how many applications and I don't want like two point something,

52
00:03:18,910 --> 00:03:24,130
I actually just want round numbers and therefore I'm going to go with y axis.

53
00:03:24,130 --> 00:03:25,510
That's my component.

54
00:03:25,510 --> 00:03:30,430
Allow decimals and we'll set it equal to false.

55
00:03:31,560 --> 00:03:33,770
Let's self close this one as well.

56
00:03:33,780 --> 00:03:35,700
Then we have a tooltip.

57
00:03:36,310 --> 00:03:38,100
Again, we close this one.

58
00:03:38,100 --> 00:03:40,380
And then lastly, we have the area.

59
00:03:41,270 --> 00:03:43,760
That's the component as far as type.

60
00:03:43,760 --> 00:03:45,500
I'm going to go with monotone.

61
00:03:45,530 --> 00:03:47,510
Then data key.

62
00:03:47,720 --> 00:03:50,690
And in this case I'm going to go with Count.

63
00:03:51,830 --> 00:03:56,620
And at the very end, I also want to provide well, which colors are we going to use for the area?

64
00:03:56,630 --> 00:04:03,950
So I'm going to go here with stroke and I'll set it equal to hashtag to KB.

65
00:04:05,220 --> 00:04:06,510
One BC.

66
00:04:07,320 --> 00:04:09,900
And then also I'm going to go with Phil.

67
00:04:11,370 --> 00:04:19,260
And this one will be equal to hashtag b, e, f, and then a f d.

68
00:04:20,190 --> 00:04:20,790
Let's save it.

69
00:04:20,790 --> 00:04:25,550
Let's navigate to a browser and it looks like I have a big fat error.

70
00:04:25,560 --> 00:04:26,010
Why?

71
00:04:26,010 --> 00:04:33,540
Well, because I have component name and basically I also have component that's coming from the Richards.

72
00:04:33,690 --> 00:04:36,660
And of course the value is exactly the same.

73
00:04:36,660 --> 00:04:39,270
So in order to fix it, here's what we want to do.

74
00:04:39,420 --> 00:04:44,310
Basically, I'm going to go with area chart and I'm just going to add component over here.

75
00:04:44,460 --> 00:04:48,240
And I also want to export the area chart component.

76
00:04:48,270 --> 00:04:53,340
Now, we don't need to change the logic anywhere else since we're using a default export.

77
00:04:53,340 --> 00:04:56,600
So now let's navigate to a browser and check it out.

78
00:04:56,610 --> 00:05:00,870
Once I click on area chart, this is what I'm going to see on the screen.

79
00:05:00,870 --> 00:05:04,440
So again, we have the color values for the fill and stroke.

80
00:05:04,530 --> 00:05:12,390
And also notice how in here essentially I displayed the last month all the way back to the February

81
00:05:12,570 --> 00:05:18,000
and we can right away also set up the bar chart because again, the idea is going to be exactly the

82
00:05:18,000 --> 00:05:18,780
same.

83
00:05:18,930 --> 00:05:21,250
Of course, the values are going to be a little bit different.

84
00:05:21,250 --> 00:05:25,120
So for starters, let me navigate to a Readme here.

85
00:05:26,270 --> 00:05:27,370
Let's scroll down.

86
00:05:27,380 --> 00:05:29,390
We're looking for these imports here.

87
00:05:31,130 --> 00:05:34,780
Then we want to navigate to a bar chart component.

88
00:05:34,780 --> 00:05:41,800
And this is the case where essentially I want to select all of these instances here and let's just rewrite

89
00:05:41,800 --> 00:05:44,050
it as bar chart.

90
00:05:45,260 --> 00:05:46,280
Component.

91
00:05:46,310 --> 00:05:50,810
Now let's set up those imports from Rich art library.

92
00:05:51,350 --> 00:05:55,460
Remember, we're still grabbing the data, so that doesn't change.

93
00:05:55,730 --> 00:06:02,510
And as far as the return, we want to go again with responsive container, which is going to be equal

94
00:06:02,510 --> 00:06:03,710
to 100.

95
00:06:03,950 --> 00:06:05,880
So let's go with under here.

96
00:06:05,900 --> 00:06:06,620
Height.

97
00:06:06,650 --> 00:06:08,830
Yep, still the same.

98
00:06:08,840 --> 00:06:13,970
So I'm going to go here with 300 inside of the responsive container.

99
00:06:13,970 --> 00:06:15,770
We want to set up the bar chart.

100
00:06:15,770 --> 00:06:19,010
In this case, data is equal to data.

101
00:06:19,490 --> 00:06:26,180
Then same deal margin is equal to object, and we'll set it equal to top 50.

102
00:06:26,440 --> 00:06:27,920
Then let's close it.

103
00:06:27,920 --> 00:06:34,640
And then inside of it we're going to go with the grid, then stroke dash array again.

104
00:06:34,640 --> 00:06:36,560
We'll set it equal to three and three.

105
00:06:37,700 --> 00:06:41,240
Then let's self-close this one then.

106
00:06:42,010 --> 00:06:49,660
X axis again is going to be date and Y axis is going to have allowed decimals equals to false.

107
00:06:49,780 --> 00:06:51,370
So let's set it up.

108
00:06:51,700 --> 00:06:52,720
X axis.

109
00:06:53,510 --> 00:06:56,600
Data key is equal to date.

110
00:06:57,920 --> 00:07:00,830
Let's close this one on that y axis.

111
00:07:01,040 --> 00:07:06,260
It's going to be allowed decimals and we'll set it equal to false.

112
00:07:07,120 --> 00:07:09,070
Let's close that one as well.

113
00:07:09,070 --> 00:07:11,620
And then we want to add the tooltip.

114
00:07:12,340 --> 00:07:14,290
And lastly, let's add the bar.

115
00:07:14,410 --> 00:07:18,040
Basically for bars, we want to add the component data key.

116
00:07:18,070 --> 00:07:20,860
In my case, it's going to be equal to account.

117
00:07:20,890 --> 00:07:23,870
Then fill basically what's going to be the color.

118
00:07:23,890 --> 00:07:25,840
In my case, I'm going to go with hashtag.

119
00:07:26,610 --> 00:07:30,120
To KB and then one BC.

120
00:07:31,770 --> 00:07:34,410
And then lastly, we can also provide the bar size.

121
00:07:34,410 --> 00:07:37,710
And in my case, I'm going to go with 75.

122
00:07:38,940 --> 00:07:40,140
Let's save this one.

123
00:07:40,140 --> 00:07:41,910
And if everything is correct.

124
00:07:42,830 --> 00:07:45,650
We should see this result in the browser.

125
00:07:45,650 --> 00:07:47,180
So let me refresh.

126
00:07:47,270 --> 00:07:50,000
So that's going to be my bar chart.

127
00:07:50,000 --> 00:07:53,930
And if I click on area chart, this is going to be my result.

128
00:07:53,930 --> 00:08:00,650
And with this in place, we can set up the CSS, which is going to be optional for the charts container,

129
00:08:00,650 --> 00:08:05,060
and after that we'll complete the all jobs page functionality.