Now that we've got a reusable chart component we can make separate charts for both our pressure and 2
humidity as well. 3
The first thing we need to do is pull our pressure and humidity data off of our weather object just 4
the same way we do with our temps. 5
Looking back at our API response I'm going to grab a single forecast here. 6
So here's the main object. 7
Here's the temperature which we've all already grabbed. 8
So here is pressure and humidity. 9
So will first do pressures city data lists dot map weather weather dot main dot pressure 10
and then I'm just going to copy paste the same thing for humidity's and humid it you. 11
There we go. 12
OK. 13
Pretty straightforward stuff. 14
You know here's our array of data for pressures and humidity's. 15
Now we just got to add in a chart for each of them. 16
I'm going to condense down the TV to just the a single line like so am going a copy paste two more of 17
them. 18
So the first one will be our pressures data going in and I'm going to give that a color of green and 19
then the third one will be our list of humidity's and that will have a color of black. 20
OK. 21
Let's go ahead and refresh our page 22
and search for San Francisco 23
and looks good. 24
It looks like we've got our temperature pressure and our humidity. 25
And we can get many different ones. 26
Here is Phoenix Denver Seattle Sacramento Salt Lake and so on. 27
OK this is looking pretty good. 28
I like where we're at. 29
There's just one little thing I know that I said I don't like how many isn't shown up on I guess Seattle 30
doesn't provide humidity. 31
So let's just do Sacramento again. 32
There we go. 33
Got our humidity. 34
So I know I said earlier that you know the intent here is just to give the user like a quick glance 35
and say OK in the next five days the weather is generally going up and it's going to be more humid or 36
what have you. 37
But it would still be really nice to have a little bit more of a numeric value on here. 38
You know something to say like OK I've got a pretty good idea of what the average temperature is going 39
to be over the next five days. 40
So let's see if we can add a little bit more indication here to give our users a little bit more idea 41
of what the weather is going to be like. 42
We're going to do that in two separate ways. 43
First we're going to add a line on our chart here that's just going to be a single line that indicates 44
the average second will add a number underneath each chart that shows the average for those five days 45
. 46
So we'll do the first one first. 47
The chart where we're going to show the average lining here flipping back over to the docks adding this 48
average line is really straightforward. 49
So this is basically what we want right here a reference line. 50
All right. 51
All we need to do is add a spark lines reference line and they've got a type of mine here. 52
I would really like to do one where the type is average so in the documentation which I've already looked 53
up getting an average line would we just need to pass in a property here of the G sort for average. 54
So this would be a pretty quick change. 55
Let's give it a shot. 56
Back inside of our project I'm going to flip over to Charcot JS and we'll pull off that additional property 57
here. 58
These spark lines reference line and then we pass it as an additional child spark lines reference line 59
with a type of A D G for average. 60
OK let's refresh and give this a shot. 61
Sacramento and cool looks good. 62
We've got our average line here now. 63
So let's do step two where we show a numeric average underneath each chart on here. 64
Get the average in here it's going be pretty straightforward. 65
All we need to do is take the proper start data that we already have and calculate an average for it 66
. 67
If you remember back to math class calculating an average is really simple. 68
All we need to do is sum up all the data in the array and then divide by the length of the array. 69
And that will give us an average. 70
So let's first place our average in here so I can make a new div and then inside of it we're going to 71
make a helper function in just a second here called average. 72
So we'll say average with prop's data. 73
So the purpose of average as you might imagine here is just to calculate an average and we're going 74
to pass our array of numbers directly into that function. 75
So let's make that helper will say function average get some data and then return and then calculate 76
the average rate here. 77
Now to help us calculate the average we're going to use the utility library load ash. 78
Again I've already included low dash inside this boiler plate project. 79
So all we have to do at the top is Mcor underscore from load ash. 80
Remember we usually use the underscore to represent load dash as opposed to stuff like you know re-act 81
from react and blah blah blah. 82
If you want install load ask yourself or if you want to use like you know underscore what have you. 83
Feel free. 84
All you got to do is at the terminal just do 85
you know NPM install dash dash save load store underscore what have you. 86
That's all it is. 87
OK so with load us calculating the average is very straightforward. 88
We'll just use the helper function son. 89
So we'll sum the data and then divide by data length. 90
And because it might come back as an ugly decimal number we'll also round it with the helper function 91
round. 92
OK let's go ahead and give this a shot. 93
Now we've defined our helper function average and we're passing it our array of data which is Propp 94
start data. 95
So I'll refresh the page 96
and search for a city and cool. 97
We've got our averages in here so our temperature is in Kelvin. 98
Our pressures are in HPH which I think is like past and I can be hacked to pascals. 99
It's something Pascals which is a pressure and our humidity which is a percentage. 100
So I know that because I looked up the documentation. 101
But our users don't really know that. 102
They don't really have any idea what the units are here and to see the number like 280 they can be similar 103
thinking like my gosh to 180 degrees Fahrenheit that's really really really hot. 104
So I think that we still need to add a little bit more clarity here by adding in some units. 105
Let's do that really quick led in the units on our header's of our table right here. 106
So in weather list we had defined our headers inside of the table so our temperature is Kelvin. 107
The pressure is you know I think Kelvin is capital K are supposed to be lower. 108
OK we'll go with capital. 109
The pressure is H P-A and the humidity is a percentage. 110
So let's give this a shot. 111
Sacramento. 112
And all right. 113
So we now got K HPN percent. 114
But still you know at the numbers it's really not clear what's going on with the numbers. 115
I think we can do a little bit better. 116
Let's add an additional property to our chart that we'll pass in. 117
That will specify the units. 118
So we'll say units for the temperature will be k units for pressures will be P-A and the humidity will 119
be percent and then we need to make sure that we consume those properties that we're passing to chart 120
inside of the chart component. 121
So flip back over to chart and next to the average that we're already calculating I'll add a space and 122
then prop's units. 123
So let's do another try here 124
. 125
All right. 126
This is starting to look a lot better. 127
So now it's much more clear that we've got terminated Kelvin HIPAA and 90 percent this is probably a 128
really good time to mention that if you want to convert the units on here to Celsius or Fahrenheit to 129
suit your locale you know whichever system you're used to or if you want to make the HCA a little bit 130
more usable than this right here. 131
You can certainly feel free to convert all the units are really a good place to do that would be would 132
be to just do it right here inside right in the temp's. 133
You could do this as just saying you know Konst temps well it won't be a constant anymore 134
but we can just basically say map that array with temp then fat zero. 135
And then your whatever your conversion might be which I think to go to like Celsius is what minus 273 136
. 137
So again totally optional if you want to do that conversion right here. 138
Totally up to you. 139
I'm going to leave mine as just being Kelvin for right now. 140
Okay. 141
So this looks pretty good. 142
We've got our three charts in place and they all have units on here. 143
Let's go ahead and continue in the next section