1 00:00:00,150 --> 00:00:05,630 And once we're done setting up everything on the back end, now, let's switch over to the front. 2 00:00:06,360 --> 00:00:12,520 And the good news is that we can right away start working in the short container component. 3 00:00:12,540 --> 00:00:12,990 Why? 4 00:00:13,410 --> 00:00:16,530 Well, let's take a look at our context. 5 00:00:17,220 --> 00:00:24,150 So if you navigate to the source context and app context, and if you remember when we were getting 6 00:00:24,150 --> 00:00:29,610 the stats actually right away, got the monthly applications. 7 00:00:30,150 --> 00:00:35,910 Now, originally it was an empty array, but I can guarantee you that the data is there. 8 00:00:36,600 --> 00:00:39,640 So I'm not going to show you the reducer for this fiscal year. 9 00:00:39,660 --> 00:00:41,100 We're passing Mr. Producer. 10 00:00:41,430 --> 00:00:42,900 And then we set up the state. 11 00:00:43,260 --> 00:00:47,850 And if you remember, we invoked it in the stats page. 12 00:00:48,420 --> 00:00:50,190 So let me open up that one as well. 13 00:00:51,060 --> 00:00:57,200 And you'll notice that once the component mounts, we go to show stats. 14 00:00:57,810 --> 00:01:03,930 And just so it's definitely clear, let me navigate to my browser. 15 00:01:04,379 --> 00:01:11,400 And then if I take a look over here in the state, we should see some monthly applications as well. 16 00:01:11,790 --> 00:01:13,170 So we have that user. 17 00:01:13,530 --> 00:01:13,780 Yep. 18 00:01:13,980 --> 00:01:15,270 Various artists. 19 00:01:15,780 --> 00:01:18,580 Those are our six hours. 20 00:01:19,170 --> 00:01:25,440 And one last thing that I want to mention remember that in the stats page, we were checking for the 21 00:01:25,440 --> 00:01:25,830 length. 22 00:01:26,870 --> 00:01:33,980 And if we had some jobs in the monthly operation, then we display the charged container. 23 00:01:34,160 --> 00:01:41,480 That's why we can see the charged container text in the browser and once we're clear on that now, it's 24 00:01:41,480 --> 00:01:48,260 actually set up the logic or first start by creating two components bar chart area chart. 25 00:01:48,890 --> 00:01:53,840 Because if you take a look at the complete application, you'll notice that we'll be toggling between 26 00:01:53,840 --> 00:01:54,230 the two. 27 00:01:54,530 --> 00:01:58,250 And essentially, it's because I couldn't come up with the actual look. 28 00:01:58,520 --> 00:02:03,250 Sergeant decided that, you know, I'll set up both now where you were. 29 00:02:03,250 --> 00:02:06,950 User can actually decide which chart they prefer best. 30 00:02:07,280 --> 00:02:08,840 So I'm going to go here with bar chart. 31 00:02:09,050 --> 00:02:15,350 Now these ones, we're not exporting as far as the index, so we're simply set it up as a component. 32 00:02:15,860 --> 00:02:19,100 Let's go with heading two and I'll say bar chart. 33 00:02:20,240 --> 00:02:24,680 And we want to do the same thing with area chart, area chart. 34 00:02:25,250 --> 00:02:26,660 That's our component. 35 00:02:27,080 --> 00:02:31,850 And then it's going underscore another having to. 36 00:02:32,950 --> 00:02:35,270 Area and sharp. 37 00:02:35,740 --> 00:02:41,410 Let's save this and let's go over the set up in the charts container. 38 00:02:41,980 --> 00:02:47,530 So since it be toggling between those two charts, I'll grab you straight from React. 39 00:02:48,010 --> 00:02:50,620 And we want to get both of these components. 40 00:02:51,070 --> 00:02:55,750 So our Richard and Bar chart and yes, will set up way more logical over there. 41 00:02:56,260 --> 00:03:01,510 We also want to get use context because instead of. 42 00:03:02,630 --> 00:03:09,350 Placing this data in each of the components, I decided that I'm just going to pass it as a problem, 43 00:03:09,890 --> 00:03:10,560 because why not? 44 00:03:11,600 --> 00:03:15,470 In order to get that data, we do need to use use context. 45 00:03:15,860 --> 00:03:17,600 We also have a little bit of styling. 46 00:03:17,900 --> 00:03:20,660 That's what I will grab the wrapper from the wrappers. 47 00:03:20,720 --> 00:03:23,720 More specifically from the charts container. 48 00:03:24,230 --> 00:03:27,530 And then we also want to set up the federal state. 49 00:03:28,020 --> 00:03:30,590 Now, let's not worry about the target state right now. 50 00:03:31,130 --> 00:03:41,120 Simply what I want to do is just render both the bar chart and area chart in the wrapper and also get 51 00:03:41,120 --> 00:03:45,380 the monthly applications, and I'll give it an alias of data. 52 00:03:46,190 --> 00:03:52,460 So in the following videos one will set up, the chart will know that there is going to be a prop in 53 00:03:52,460 --> 00:03:58,040 both of them by the name of data, and that's data that we're getting back from the state. 54 00:03:58,430 --> 00:04:03,560 So let's start here by grabbing those imports so we can save our time on that. 55 00:04:04,220 --> 00:04:08,000 So I'm looking for my charts container in this case. 56 00:04:08,810 --> 00:04:10,190 And that's the search container. 57 00:04:10,190 --> 00:04:11,450 Sorry, I'm bad. 58 00:04:12,070 --> 00:04:15,460 Actually wanted a chart container for some reason I of find it. 59 00:04:16,470 --> 00:04:23,490 Let me grab the proper imports, and once I have them in place, let's actually look for our monthly 60 00:04:23,730 --> 00:04:27,900 applications that are coming from the state. 61 00:04:28,350 --> 00:04:31,500 Now I'll give an analysis of data because it's going to be faster. 62 00:04:32,040 --> 00:04:34,590 We use used context here. 63 00:04:34,590 --> 00:04:35,880 We want to use the wrapper. 64 00:04:37,020 --> 00:04:41,840 And like I said, for time being, let's just pass in both towers. 65 00:04:42,330 --> 00:04:43,350 A bar chart. 66 00:04:43,680 --> 00:04:48,440 And let's browsed the data server component, and I'm not going to console.log it. 67 00:04:48,510 --> 00:04:50,970 I mean, this should be pretty straightforward. 68 00:04:50,970 --> 00:04:55,950 So let's copy and paste and we want to go here with Area Chart as well. 69 00:04:56,350 --> 00:04:57,240 Save that one. 70 00:04:57,840 --> 00:05:04,890 And if everything is correct, we should see both components displayed, which is just awesome. 71 00:05:05,520 --> 00:05:07,470 Now let's add that toggle functionality. 72 00:05:07,770 --> 00:05:11,690 Well, first, we want to set up, so I'm going to show the value my case. 73 00:05:11,700 --> 00:05:15,210 I'm going to call this bar chart because that is going to be my default one. 74 00:05:15,210 --> 00:05:17,470 So set bar chart. 75 00:05:17,490 --> 00:05:18,480 That's the function. 76 00:05:18,690 --> 00:05:22,560 And by default, set it equal to true say here. 77 00:05:23,550 --> 00:05:27,810 And before we set up the button that will toggle this value. 78 00:05:28,290 --> 00:05:29,940 Why don't we set up the expression? 79 00:05:30,360 --> 00:05:32,610 Or I'll say f bar chart? 80 00:05:32,760 --> 00:05:35,580 If true, then I want to display the bar chart. 81 00:05:36,540 --> 00:05:39,210 And if not, then it's going to be an area chart. 82 00:05:39,570 --> 00:05:44,460 So first one, it's going to be the bar chart for when we went to the. 83 00:05:45,240 --> 00:05:48,780 And after that, we want to set up the area chart. 84 00:05:49,260 --> 00:05:56,040 So if it's true and all by bar chart not, then area chart, I don't think I need to go to the browser 85 00:05:56,580 --> 00:05:59,190 to showcase what we'll have as a result. 86 00:05:59,710 --> 00:06:01,470 Then let's go above it. 87 00:06:01,860 --> 00:06:05,160 First, let's set up a heading for, let's say, monthly. 88 00:06:06,200 --> 00:06:13,610 Applications and then I'll just go with a button that actually will toggle this type will be button 89 00:06:14,390 --> 00:06:16,550 and also set up the on click. 90 00:06:16,730 --> 00:06:24,950 Now we do want to pass in the arrow function and then we want to invoke set bar and that chart and let's 91 00:06:24,950 --> 00:06:26,570 pass in the opposite value. 92 00:06:27,050 --> 00:06:33,200 So if this is true, then passing the false, if it's false, then it's going to be true. 93 00:06:33,290 --> 00:06:34,010 That's the button. 94 00:06:34,340 --> 00:06:38,510 And we also want to set up text over here, where again, the same deal. 95 00:06:38,840 --> 00:06:42,530 I'm going to check four bar chart value, state value. 96 00:06:42,950 --> 00:06:47,570 And if it's true, then I'll actually display area chart. 97 00:06:48,050 --> 00:06:48,500 Why? 98 00:06:48,540 --> 00:06:49,970 Well, think about it. 99 00:06:50,630 --> 00:06:55,820 If I have already bar chart displayed, I mean, this should be opposite. 100 00:06:56,210 --> 00:06:56,540 All right. 101 00:06:56,990 --> 00:07:02,840 So now I'm saying, if you click here, then it's going to be error chart or for that, it's clear. 102 00:07:03,200 --> 00:07:07,340 So therefore we'll go opposite area and chart. 103 00:07:07,760 --> 00:07:12,830 And if it is false lateral display bar chart, let's save it. 104 00:07:13,100 --> 00:07:16,580 And now our functionality should be in place where we have the button. 105 00:07:16,970 --> 00:07:21,500 And as I'm clicking on a button, I'm actually displaying different component. 106 00:07:21,880 --> 00:07:28,400 Now what I think I'll add here a space now you don't have to, but that is actually my preference area 107 00:07:28,400 --> 00:07:29,960 chart and bar chart. 108 00:07:30,620 --> 00:07:36,620 And with this in place now, we can install the library we'll use for our chart.