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