1 00:00:01,040 --> 00:00:02,930 So we've got a table and a pretty good spot. 2 00:00:02,940 --> 00:00:07,250 Now we can search for different cities and we see them all pop up and on line. 3 00:00:07,290 --> 00:00:12,310 It's time to start getting work done on our temperature pressure and humidity charts. 4 00:00:12,310 --> 00:00:20,400 Now we're going to pull up our mock up like so and you'll notice that for each of those different columns 5 00:00:20,430 --> 00:00:22,740 We've got one individual chart. 6 00:00:23,160 --> 00:00:25,530 So don't worry we're not going to build the charts from scratch. 7 00:00:25,530 --> 00:00:32,540 Instead we're going to make use of a awesome little third party library called re-act spark lines. 8 00:00:32,540 --> 00:00:39,640 I'm going to hop over to the documentation page for Riak spark lines really quick and my browser can 9 00:00:39,670 --> 00:00:42,800 search for re-act spark line 10 00:00:47,190 --> 00:00:52,550 and it should come up as the first result here go. 11 00:00:52,920 --> 00:00:56,470 So you can see these are examples of animated spark lines. 12 00:00:56,670 --> 00:01:01,660 And this one looks a little bit more like what ours is probably end up looking like. 13 00:01:01,770 --> 00:01:07,200 So using spark lines is super super easy and we're using them specifically because they're so easy to 14 00:01:07,200 --> 00:01:08,940 get started with. 15 00:01:08,940 --> 00:01:11,020 Check out an example right here. 16 00:01:11,370 --> 00:01:13,920 We use the spark lines component. 17 00:01:14,040 --> 00:01:17,840 We pass it some data which is just an array of numbers. 18 00:01:18,570 --> 00:01:23,800 We provide a width and height for it and that's pretty much it. 19 00:01:23,820 --> 00:01:27,600 We don't actually have to specify the limit or the margin on here. 20 00:01:28,260 --> 00:01:35,030 We can change the color by defining a spark lines line and passing a color to it as well. 21 00:01:35,250 --> 00:01:41,240 So notice how this call structure right here we've got a parent element of Sparke lines. 22 00:01:41,310 --> 00:01:48,200 It has the data and then a child element of Sparke lines line which holds the actual color. 23 00:01:48,210 --> 00:01:54,570 So in other words we can figure the spark line bypassing some child component inside of it as a child 24 00:01:54,570 --> 00:01:55,770 . 25 00:01:55,770 --> 00:01:56,150 OK. 26 00:01:56,190 --> 00:02:00,840 So using Sparke blindsides you can probably tell is pretty darn straightforward really going to breeze 27 00:02:00,840 --> 00:02:02,570 through this particular part. 28 00:02:02,850 --> 00:02:07,620 The part of this application that start going to start to get a little bit more challenging is figuring 29 00:02:07,620 --> 00:02:11,400 out exactly how our data is going to come in here. 30 00:02:11,460 --> 00:02:16,200 So notice how the spark lines expects just an array of plane numbers. 31 00:02:16,380 --> 00:02:19,710 It doesn't really know what to do if we pass it an object or anything like that. 32 00:02:19,770 --> 00:02:25,200 So we need to somehow make sure that we pass it just a plain array of flat numbers. 33 00:02:25,200 --> 00:02:25,620 That's it. 34 00:02:25,620 --> 00:02:27,890 Nothing else. 35 00:02:28,560 --> 00:02:33,330 I'm going to pull up another diagram one that we've seen already but I've made a couple of changes too 36 00:02:33,340 --> 00:02:33,690 . 37 00:02:34,020 --> 00:02:36,140 So again this is our redux state. 38 00:02:36,240 --> 00:02:43,740 We've got our weather property which is an array that holds a bunch of city data objects. 39 00:02:43,740 --> 00:02:49,860 So we've got one for San Francisco Los Angeles and Dallas as we already discussed. 40 00:02:49,860 --> 00:02:55,270 Each one of these objects is going to produce individual row in the city. 41 00:02:55,890 --> 00:03:01,650 Let's zoom in on one now and look at San Francisco. 42 00:03:01,770 --> 00:03:09,600 So again we need to produce an array of numbers for the temperature the humidity and the pressure these 43 00:03:09,600 --> 00:03:17,190 properties are nested under list which is an array and then Main which is an object that contains the 44 00:03:17,190 --> 00:03:19,410 temperature humidity and pressure. 45 00:03:19,410 --> 00:03:26,850 So basically what our job is is we need to take all these different temperatures that's contained inside 46 00:03:26,850 --> 00:03:35,200 the list and get them all out as a simple flat array for temperature humidity and pressure the receptor 47 00:03:35,200 --> 00:03:36,960 arrays. 48 00:03:36,990 --> 00:03:42,720 So that's the challenge we have ahead of us in practice this is going to be not too bad by using the 49 00:03:42,720 --> 00:03:43,910 mouse function again. 50 00:03:44,250 --> 00:03:53,150 We can say for any given city city data dot list dot main dot temp. 51 00:03:53,250 --> 00:03:55,340 And that would be the 10. 52 00:03:56,220 --> 00:04:00,170 Well specifically what you're saying is city data dot list dot map. 53 00:04:00,480 --> 00:04:05,180 And then inside of the map we'll get access to the main and then temperature level 1. 54 00:04:05,190 --> 00:04:10,920 All that good stuff whatever let's just go ahead and give it a shot before I make it sound more complicated 55 00:04:10,920 --> 00:04:14,150 than it really is because it's really not going to be that bad. 56 00:04:15,000 --> 00:04:15,470 OK. 57 00:04:15,570 --> 00:04:19,740 So first we're going to assemble our data and console log it just to make sure we're doing that part 58 00:04:19,740 --> 00:04:21,990 right after we get that part right. 59 00:04:21,990 --> 00:04:26,160 We'll go ahead and install the spark lines package and put together our first chart. 60 00:04:26,810 --> 00:04:33,030 So I'm here inside of weather lists inside of render whether rember this function right here is for 61 00:04:33,030 --> 00:04:36,030 rendering a single city a single row. 62 00:04:37,110 --> 00:04:42,270 So the first thing we're going to do is pull off an array of temperatures. 63 00:04:42,540 --> 00:04:46,730 So just as I mentioned will take city data list. 64 00:04:46,770 --> 00:04:53,160 So this is a list of all the different forecasts for this particular city one for every three hours 65 00:04:53,160 --> 00:04:56,060 over the next five days and then we'll map over 66 00:04:58,760 --> 00:05:05,780 inside the map will pass a function and we're going to assume that the or we're just going to say that 67 00:05:05,780 --> 00:05:10,800 the argument is going to be called weather and then we'll say weather. 68 00:05:10,840 --> 00:05:13,080 Dot main temp. 69 00:05:13,850 --> 00:05:18,050 So again let's look at that one more time on the chart. 70 00:05:18,230 --> 00:05:20,510 Here we go. 71 00:05:20,810 --> 00:05:23,750 Zoom in. 72 00:05:23,750 --> 00:05:30,230 So regular weather is called with city data which is essentially this box right here. 73 00:05:30,500 --> 00:05:35,870 We take City Data List which is here's the list right here. 74 00:05:35,870 --> 00:05:40,710 We map over it and each one of these objects right here. 75 00:05:40,910 --> 00:05:48,000 One two three and four are passed into this function as the argument weather. 76 00:05:48,230 --> 00:05:57,680 So for each of those we say weather dot main dot 10 and that will return the temperature of in this 77 00:05:57,710 --> 00:06:00,970 you know mockup right here to 60 to 60 Kelvin. 78 00:06:00,980 --> 00:06:06,710 Again remember this all these measurements are in Kelvin which is just a different unit system for temperatures 79 00:06:06,710 --> 00:06:08,180 . 80 00:06:08,330 --> 00:06:09,080 So I think we got it. 81 00:06:09,080 --> 00:06:10,790 This is looking pretty good here. 82 00:06:10,880 --> 00:06:16,240 We map over the list we pull off the temperature and we assign it to temps. 83 00:06:16,610 --> 00:06:23,390 Let's go ahead and ponce a log this just to make sure we pulled off the appropriate data. 84 00:06:24,140 --> 00:06:33,770 So all accounts a log it will flip back over to the browser refresh and search for Tampa and we get 85 00:06:33,770 --> 00:06:34,300 an array. 86 00:06:34,400 --> 00:06:34,850 Awesome. 87 00:06:34,880 --> 00:06:36,040 Exactly what we wanted. 88 00:06:36,230 --> 00:06:38,910 So it's just a plain flat array of numbers. 89 00:06:39,260 --> 00:06:42,090 That's exactly what the spark lines library needs. 90 00:06:42,200 --> 00:06:45,850 So I think we're in a pretty good spot here. 91 00:06:45,890 --> 00:06:51,700 All you need to do now is go ahead and install the spark lines library. 92 00:06:52,460 --> 00:06:55,520 So we'll do this in the same way that we've installed all this other stuff. 93 00:06:55,520 --> 00:07:09,400 All we've got to do is it NPM install desk Tausch save re-act spark lines. 94 00:07:13,740 --> 00:07:14,580 OK. 95 00:07:14,660 --> 00:07:16,010 So that's install now. 96 00:07:16,250 --> 00:07:20,960 So inside of weather list we'll build our first chart at the top. 97 00:07:20,960 --> 00:07:28,850 We're going to import Sparke lines and spar and spark lines line. 98 00:07:28,850 --> 00:07:35,630 Remember this is the parent the actual you know chart element whereas this is a child element that we 99 00:07:35,630 --> 00:07:39,430 pass him that provides some additional configuration. 100 00:07:39,560 --> 00:07:44,350 If this seems confusing at all don't hesitate to go check out the documentation again. 101 00:07:44,360 --> 00:07:48,770 Again you can get here by just doing a Google search for re-act spark lines. 102 00:07:48,800 --> 00:07:54,350 We've also got a separate page set up for a couple more demos and a little bit more info about all the 103 00:07:54,350 --> 00:07:56,480 different configuration. 104 00:07:57,460 --> 00:07:59,910 OK so we've got our SPARC lines object. 105 00:08:00,380 --> 00:08:05,870 Let's add this as a new TV because it's going to be in a different column. 106 00:08:06,950 --> 00:08:15,890 So we'll say SPARC lines and I'm going to choose a height of 120 and a width of 180. 107 00:08:15,890 --> 00:08:17,540 These are pixel values. 108 00:08:17,540 --> 00:08:24,480 If you decide that you want your chart to be larger or smaller you can just change it right here. 109 00:08:24,500 --> 00:08:30,760 Then we'll pass in our data which is the array of temperatures temps. 110 00:08:30,770 --> 00:08:32,290 So here's our data. 111 00:08:32,310 --> 00:08:32,880 Temps 112 00:08:35,720 --> 00:08:42,970 will close the spark lines tag and then add our spark lines lines line. 113 00:08:43,010 --> 00:08:47,270 Remember the first L spark lines is lower case non-capital 114 00:08:49,910 --> 00:08:54,750 then the purpose of this one is to just specify our color which is just going to be red. 115 00:08:54,800 --> 00:08:57,070 You can specify a different color if you'd like. 116 00:08:57,080 --> 00:09:01,080 Again refer to the docs if you want to see all the different colors that are available. 117 00:09:01,520 --> 00:09:02,810 OK so I gotta save this. 118 00:09:02,810 --> 00:09:09,050 Let's test it out in the browser or refresh. 119 00:09:09,590 --> 00:09:14,760 It looks like I've got cannot find Modula here which means I made a typo somewhere. 120 00:09:15,030 --> 00:09:22,370 I flip over to my terminal and it looks like I messed up the import statement at the top. 121 00:09:22,370 --> 00:09:23,550 Didn't finish it off. 122 00:09:23,600 --> 00:09:25,040 I got distracted. 123 00:09:25,040 --> 00:09:25,340 All right. 124 00:09:25,370 --> 00:09:29,480 So from re-act spark lines. 125 00:09:29,480 --> 00:09:31,040 My mistake. 126 00:09:32,030 --> 00:09:35,080 Let's give it another shot. 127 00:09:35,420 --> 00:09:35,790 All right. 128 00:09:35,850 --> 00:09:40,180 That worked out so let's try Phoenix and. 129 00:09:40,230 --> 00:09:41,650 Awesome we've got a char. 130 00:09:41,700 --> 00:09:42,090 Try it. 131 00:09:42,100 --> 00:09:51,890 Tampa Boston San Francisco Seattle and we get a chart for each of them perfect just what we wanted. 132 00:09:52,400 --> 00:09:54,690 Let's go ahead and continue in the next section.