1

00:00:00,750  -->  00:00:06,450
Now that we've got a reusable chart component we can make separate charts for both our pressure and

2

00:00:06,450  -->  00:00:08,350
humidity as well.

3

00:00:08,370  -->  00:00:14,370
The first thing we need to do is pull our pressure and humidity data off of our weather object just

4

00:00:14,370  -->  00:00:17,550
the same way we do with our temps.

5

00:00:17,550  -->  00:00:23,560
Looking back at our API response I'm going to grab a single forecast here.

6

00:00:23,670  -->  00:00:25,600
So here's the main object.

7

00:00:26,220  -->  00:00:28,820
Here's the temperature which we've all already grabbed.

8

00:00:29,040  -->  00:00:35,150
So here is pressure and humidity.

9

00:00:36,630  -->  00:00:47,430
So will first do pressures city data lists dot map weather weather dot main dot pressure

10

00:00:50,280  -->  00:00:59,750
and then I'm just going to copy paste the same thing for humidity's and humid it you.

11

00:00:59,820  -->  00:01:01,000
There we go.

12

00:01:01,780  -->  00:01:02,120
OK.

13

00:01:02,130  -->  00:01:03,540
Pretty straightforward stuff.

14

00:01:03,580  -->  00:01:07,120
You know here's our array of data for pressures and humidity's.

15

00:01:07,170  -->  00:01:10,470
Now we just got to add in a chart for each of them.

16

00:01:10,790  -->  00:01:17,700
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

00:01:17,700  -->  00:01:19,120
them.

18

00:01:19,120  -->  00:01:26,490
So the first one will be our pressures data going in and I'm going to give that a color of green and

19

00:01:26,490  -->  00:01:33,860
then the third one will be our list of humidity's and that will have a color of black.

20

00:01:34,690  -->  00:01:35,220
OK.

21

00:01:35,250  -->  00:01:38,430
Let's go ahead and refresh our page

22

00:01:41,460  -->  00:01:43,390
and search for San Francisco

23

00:01:46,350  -->  00:01:47,850
and looks good.

24

00:01:47,850  -->  00:01:51,530
It looks like we've got our temperature pressure and our humidity.

25

00:01:52,080  -->  00:01:53,890
And we can get many different ones.

26

00:01:53,900  -->  00:02:04,660
Here is Phoenix Denver Seattle Sacramento Salt Lake and so on.

27

00:02:05,950  -->  00:02:07,480
OK this is looking pretty good.

28

00:02:07,530  -->  00:02:10,360
I like where we're at.

29

00:02:10,410  -->  00:02:16,650
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

00:02:16,650  -->  00:02:17,820
doesn't provide humidity.

31

00:02:17,850  -->  00:02:21,000
So let's just do Sacramento again.

32

00:02:21,540  -->  00:02:21,990
There we go.

33

00:02:21,990  -->  00:02:23,170
Got our humidity.

34

00:02:23,340  -->  00:02:28,800
So I know I said earlier that you know the intent here is just to give the user like a quick glance

35

00:02:28,800  -->  00:02:34,650
and say OK in the next five days the weather is generally going up and it's going to be more humid or

36

00:02:34,650  -->  00:02:35,580
what have you.

37

00:02:35,580  -->  00:02:40,270
But it would still be really nice to have a little bit more of a numeric value on here.

38

00:02:40,290  -->  00:02:45,090
You know something to say like OK I've got a pretty good idea of what the average temperature is going

39

00:02:45,090  -->  00:02:46,980
to be over the next five days.

40

00:02:47,430  -->  00:02:53,370
So let's see if we can add a little bit more indication here to give our users a little bit more idea

41

00:02:53,370  -->  00:02:55,610
of what the weather is going to be like.

42

00:02:55,710  -->  00:02:58,710
We're going to do that in two separate ways.

43

00:02:58,710  -->  00:03:04,260
First we're going to add a line on our chart here that's just going to be a single line that indicates

44

00:03:04,260  -->  00:03:11,340
the average second will add a number underneath each chart that shows the average for those five days

45

00:03:11,340  -->  00:03:12,200
.

46

00:03:12,270  -->  00:03:14,990
So we'll do the first one first.

47

00:03:15,030  -->  00:03:23,190
The chart where we're going to show the average lining here flipping back over to the docks adding this

48

00:03:23,250  -->  00:03:25,790
average line is really straightforward.

49

00:03:26,070  -->  00:03:29,460
So this is basically what we want right here a reference line.

50

00:03:29,490  -->  00:03:30,900
All right.

51

00:03:30,970  -->  00:03:36,960
All we need to do is add a spark lines reference line and they've got a type of mine here.

52

00:03:36,990  -->  00:03:42,570
I would really like to do one where the type is average so in the documentation which I've already looked

53

00:03:42,570  -->  00:03:49,670
up getting an average line would we just need to pass in a property here of the G sort for average.

54

00:03:49,800  -->  00:03:51,720
So this would be a pretty quick change.

55

00:03:51,900  -->  00:03:53,840
Let's give it a shot.

56

00:03:54,140  -->  00:04:00,930
Back inside of our project I'm going to flip over to Charcot JS and we'll pull off that additional property

57

00:04:00,930  -->  00:04:01,600
here.

58

00:04:01,650  -->  00:04:12,270
These spark lines reference line and then we pass it as an additional child spark lines reference line

59

00:04:13,470  -->  00:04:17,970
with a type of A D G for average.

60

00:04:19,140  -->  00:04:23,310
OK let's refresh and give this a shot.

61

00:04:24,180  -->  00:04:28,230
Sacramento and cool looks good.

62

00:04:28,230  -->  00:04:30,750
We've got our average line here now.

63

00:04:30,750  -->  00:04:37,320
So let's do step two where we show a numeric average underneath each chart on here.

64

00:04:40,360  -->  00:04:43,510
Get the average in here it's going be pretty straightforward.

65

00:04:43,510  -->  00:04:49,560
All we need to do is take the proper start data that we already have and calculate an average for it

66

00:04:49,580  -->  00:04:49,900
.

67

00:04:50,230  -->  00:04:54,400
If you remember back to math class calculating an average is really simple.

68

00:04:54,400  -->  00:05:00,230
All we need to do is sum up all the data in the array and then divide by the length of the array.

69

00:05:00,280  -->  00:05:03,210
And that will give us an average.

70

00:05:03,250  -->  00:05:10,390
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

00:05:10,390  -->  00:05:15,040
make a helper function in just a second here called average.

72

00:05:15,080  -->  00:05:19,520
So we'll say average with prop's data.

73

00:05:19,540  -->  00:05:23,800
So the purpose of average as you might imagine here is just to calculate an average and we're going

74

00:05:23,800  -->  00:05:27,200
to pass our array of numbers directly into that function.

75

00:05:27,610  -->  00:05:38,680
So let's make that helper will say function average get some data and then return and then calculate

76

00:05:38,680  -->  00:05:40,230
the average rate here.

77

00:05:40,270  -->  00:05:45,300
Now to help us calculate the average we're going to use the utility library load ash.

78

00:05:45,310  -->  00:05:49,250
Again I've already included low dash inside this boiler plate project.

79

00:05:49,300  -->  00:05:56,330
So all we have to do at the top is Mcor underscore from load ash.

80

00:05:56,860  -->  00:06:02,530
Remember we usually use the underscore to represent load dash as opposed to stuff like you know re-act

81

00:06:02,530  -->  00:06:04,410
from react and blah blah blah.

82

00:06:04,870  -->  00:06:09,490
If you want install load ask yourself or if you want to use like you know underscore what have you.

83

00:06:09,550  -->  00:06:10,160
Feel free.

84

00:06:10,180  -->  00:06:13,390
All you got to do is at the terminal just do

85

00:06:16,960  -->  00:06:21,480
you know NPM install dash dash save load store underscore what have you.

86

00:06:21,490  -->  00:06:25,460
That's all it is.

87

00:06:25,520  -->  00:06:29,680
OK so with load us calculating the average is very straightforward.

88

00:06:30,040  -->  00:06:32,990
We'll just use the helper function son.

89

00:06:33,190  -->  00:06:37,750
So we'll sum the data and then divide by data length.

90

00:06:38,180  -->  00:06:43,750
And because it might come back as an ugly decimal number we'll also round it with the helper function

91

00:06:43,870  -->  00:06:48,400
round.

92

00:06:48,400  -->  00:06:50,830
OK let's go ahead and give this a shot.

93

00:06:50,830  -->  00:06:57,490
Now we've defined our helper function average and we're passing it our array of data which is Propp

94

00:06:57,490  -->  00:06:59,530
start data.

95

00:06:59,980  -->  00:07:01,300
So I'll refresh the page

96

00:07:04,210  -->  00:07:07,930
and search for a city and cool.

97

00:07:07,990  -->  00:07:12,190
We've got our averages in here so our temperature is in Kelvin.

98

00:07:12,190  -->  00:07:18,880
Our pressures are in HPH which I think is like past and I can be hacked to pascals.

99

00:07:19,000  -->  00:07:25,180
It's something Pascals which is a pressure and our humidity which is a percentage.

100

00:07:25,180  -->  00:07:28,390
So I know that because I looked up the documentation.

101

00:07:28,390  -->  00:07:30,220
But our users don't really know that.

102

00:07:30,220  -->  00:07:35,130
They don't really have any idea what the units are here and to see the number like 280 they can be similar

103

00:07:35,230  -->  00:07:40,340
thinking like my gosh to 180 degrees Fahrenheit that's really really really hot.

104

00:07:40,660  -->  00:07:45,280
So I think that we still need to add a little bit more clarity here by adding in some units.

105

00:07:45,310  -->  00:07:53,080
Let's do that really quick led in the units on our header's of our table right here.

106

00:07:53,080  -->  00:08:01,240
So in weather list we had defined our headers inside of the table so our temperature is Kelvin.

107

00:08:01,240  -->  00:08:07,060
The pressure is you know I think Kelvin is capital K are supposed to be lower.

108

00:08:07,060  -->  00:08:09,010
OK we'll go with capital.

109

00:08:09,040  -->  00:08:16,540
The pressure is H P-A and the humidity is a percentage.

110

00:08:16,660  -->  00:08:19,170
So let's give this a shot.

111

00:08:20,230  -->  00:08:21,610
Sacramento.

112

00:08:22,090  -->  00:08:22,780
And all right.

113

00:08:22,780  -->  00:08:25,160
So we now got K HPN percent.

114

00:08:25,420  -->  00:08:30,190
But still you know at the numbers it's really not clear what's going on with the numbers.

115

00:08:30,190  -->  00:08:32,300
I think we can do a little bit better.

116

00:08:32,410  -->  00:08:36,620
Let's add an additional property to our chart that we'll pass in.

117

00:08:36,910  -->  00:08:39,370
That will specify the units.

118

00:08:40,180  -->  00:08:52,270
So we'll say units for the temperature will be k units for pressures will be P-A and the humidity will

119

00:08:52,270  -->  00:08:57,730
be percent and then we need to make sure that we consume those properties that we're passing to chart

120

00:08:58,180  -->  00:08:59,780
inside of the chart component.

121

00:09:00,040  -->  00:09:06,880
So flip back over to chart and next to the average that we're already calculating I'll add a space and

122

00:09:06,880  -->  00:09:10,360
then prop's units.

123

00:09:10,600  -->  00:09:11,800
So let's do another try here

124

00:09:11,800  -->  00:09:18,910
.

125

00:09:18,910  -->  00:09:19,330
All right.

126

00:09:19,330  -->  00:09:20,700
This is starting to look a lot better.

127

00:09:20,740  -->  00:09:26,710
So now it's much more clear that we've got terminated Kelvin HIPAA and 90 percent this is probably a

128

00:09:26,710  -->  00:09:32,260
really good time to mention that if you want to convert the units on here to Celsius or Fahrenheit to

129

00:09:32,260  -->  00:09:39,220
suit your locale you know whichever system you're used to or if you want to make the HCA a little bit

130

00:09:39,220  -->  00:09:41,540
more usable than this right here.

131

00:09:41,590  -->  00:09:47,020
You can certainly feel free to convert all the units are really a good place to do that would be would

132

00:09:47,020  -->  00:09:50,360
be to just do it right here inside right in the temp's.

133

00:09:50,950  -->  00:09:56,950
You could do this as just saying you know Konst temps well it won't be a constant anymore

134

00:10:00,340  -->  00:10:11,720
but we can just basically say map that array with temp then fat zero.

135

00:10:12,070  -->  00:10:20,500
And then your whatever your conversion might be which I think to go to like Celsius is what minus 273

136

00:10:20,680  -->  00:10:21,700
.

137

00:10:21,700  -->  00:10:24,330
So again totally optional if you want to do that conversion right here.

138

00:10:24,340  -->  00:10:25,650
Totally up to you.

139

00:10:25,720  -->  00:10:28,340
I'm going to leave mine as just being Kelvin for right now.

140

00:10:28,900  -->  00:10:29,320
Okay.

141

00:10:29,320  -->  00:10:30,730
So this looks pretty good.

142

00:10:30,730  -->  00:10:35,200
We've got our three charts in place and they all have units on here.

143

00:10:35,200  -->  00:10:37,400
Let's go ahead and continue in the next section