1
00:00:00,020 --> 00:00:00,350
All right.

2
00:00:00,380 --> 00:00:04,730
And once we have the stats container in place, now let's work on the charts container.

3
00:00:04,850 --> 00:00:07,220
And essentially, I'm looking for these imports.

4
00:00:07,220 --> 00:00:14,420
So bar chart, area chart as well as use state and you'll see why we need that in a second as well as

5
00:00:14,420 --> 00:00:15,230
the wrapper.

6
00:00:15,230 --> 00:00:20,480
So this is something of course, we'll set up a little bit later if you're interested in working on

7
00:00:20,480 --> 00:00:21,140
the CSS.

8
00:00:21,140 --> 00:00:24,080
So let me look for my charts container.

9
00:00:24,970 --> 00:00:28,250
First, let's start by setting up those imports.

10
00:00:28,270 --> 00:00:32,530
Remember, we're passing in the data, so this is what I want to access.

11
00:00:32,530 --> 00:00:35,470
That's why I'll right away the structure it.

12
00:00:35,470 --> 00:00:42,520
And after that, let's set up a local state value which we'll use to toggle between the area chart and

13
00:00:42,520 --> 00:00:43,120
bar chart.

14
00:00:43,120 --> 00:00:49,000
So in my case, I'm going to call this bar chart, but of course naming is always up to you.

15
00:00:49,000 --> 00:00:56,110
So I'm going to go here with set bar chart and let's set it equal to use state.

16
00:00:56,110 --> 00:00:58,780
And in my case, I'm going to set it equal to true.

17
00:00:58,780 --> 00:01:01,810
So by default, I'll display the bar chart.

18
00:01:02,030 --> 00:01:06,100
Then when it comes to return, we're going to go with the wrapper.

19
00:01:06,310 --> 00:01:12,250
Inside of the wrapper we want to set up a heading for and let's say monthly applications.

20
00:01:12,280 --> 00:01:16,300
After that, let's set up the button which we're going to use to toggle the state.

21
00:01:16,330 --> 00:01:22,120
So in here, let's go with button element type will be equal to a button.

22
00:01:22,870 --> 00:01:27,370
And once the user clicks the button, I want to set it equal to the opposite value.

23
00:01:27,370 --> 00:01:32,640
So if by default this is true, then once the user clicks the button, it's going to be set to false.

24
00:01:32,650 --> 00:01:35,630
And of course it works the same other way around.

25
00:01:35,650 --> 00:01:38,080
So in here, let's go with on click.

26
00:01:39,190 --> 00:01:42,940
And then in the callback function we just want to go with set barchart.

27
00:01:42,940 --> 00:01:46,460
And like I said, we'll just set it equal to the opposite value.

28
00:01:46,480 --> 00:01:52,930
Now, as far as the text inside of the button, well, again, we'll use the ternary operator.

29
00:01:53,590 --> 00:01:59,530
And based on the value, either I'm going to display the area chart or the bar chart.

30
00:01:59,560 --> 00:02:05,410
So basically, if it's true, then I want to display area chart in the button.

31
00:02:05,410 --> 00:02:10,669
If not, if it's false, then I want to display the bar chart.

32
00:02:10,690 --> 00:02:17,980
And then right after the button, I want to set up another ternary operator and essentially display

33
00:02:17,980 --> 00:02:21,910
one of the components again based on the bar chart value.

34
00:02:21,940 --> 00:02:29,860
So in this case, if it's true, I'm going to display the bar chart and I'll grab this data prop and

35
00:02:29,860 --> 00:02:32,140
pass it down to a bar chart.

36
00:02:32,350 --> 00:02:34,320
So data is equal to data.

37
00:02:34,330 --> 00:02:39,250
And if it's false, then we want to display the area chart.

38
00:02:39,250 --> 00:02:42,340
And again, data is equal to data.

39
00:02:42,370 --> 00:02:47,750
Let's close our component and once I navigate to the browser, this is what we should see.

40
00:02:47,770 --> 00:02:48,940
So this is the button.

41
00:02:48,940 --> 00:02:51,530
And notice basically we get this opposite value.

42
00:02:51,550 --> 00:02:57,470
So if the bar chart is set to true, then of course I display the bar chart.

43
00:02:57,800 --> 00:03:02,840
But in the button I display that user can see the area chart correct.

44
00:03:02,870 --> 00:03:09,290
Now if I click, I'll display the area chart and then of course in the button I showcase the bar chart.

45
00:03:09,440 --> 00:03:13,160
And with this in place, we can start setting up our charts.