Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,230 --> 00:00:03,800
So now to use the chart
2
00:00:03,800 --> 00:00:05,530
and pass in the data points
3
00:00:05,530 --> 00:00:07,230
I will add a new component
4
00:00:07,230 --> 00:00:09,800
in the expenses components folder
5
00:00:09,800 --> 00:00:12,990
and I'll name it, expenses chart
6
00:00:12,990 --> 00:00:14,180
JS.
7
00:00:14,180 --> 00:00:17,200
And here we don't even need a CSS file
8
00:00:17,200 --> 00:00:19,680
but I will import React from React
9
00:00:19,680 --> 00:00:22,590
to be in line with my other files
10
00:00:22,590 --> 00:00:26,033
and create the component function expenses chart.
11
00:00:26,980 --> 00:00:30,680
There I expect to get some props and we export this,
12
00:00:30,680 --> 00:00:32,593
so basically what we always do.
13
00:00:33,660 --> 00:00:38,390
Now in here the goal is to overall return the chart.
14
00:00:38,390 --> 00:00:40,420
So here we wanna return the chart
15
00:00:40,420 --> 00:00:42,380
and therefore you should make sure
16
00:00:42,380 --> 00:00:45,850
that you also add the import to this chart component
17
00:00:45,850 --> 00:00:47,923
in the chart folder like this.
18
00:00:49,590 --> 00:00:52,400
But now we need to define the data points
19
00:00:52,400 --> 00:00:54,150
which are passed into the chart
20
00:00:54,150 --> 00:00:57,723
because there we are referring to this data points prop.
21
00:00:58,820 --> 00:01:02,600
And to set up the data points here in expenses chart,
22
00:01:02,600 --> 00:01:05,000
I will actually create a new constant here
23
00:01:06,500 --> 00:01:09,920
and name it, chart data points.
24
00:01:09,920 --> 00:01:12,370
And this will be an array, and in this array
25
00:01:12,370 --> 00:01:14,640
I wanna have a bunch of objects
26
00:01:14,640 --> 00:01:17,960
because we expect every data point to be an object.
27
00:01:17,960 --> 00:01:19,910
In the chart JS file,
28
00:01:19,910 --> 00:01:22,110
when we map through data points,
29
00:01:22,110 --> 00:01:24,790
we then access values like label
30
00:01:24,790 --> 00:01:27,563
and value on the given data point.
31
00:01:28,600 --> 00:01:30,840
So therefore we wanna have objects
32
00:01:30,840 --> 00:01:33,833
and these objects should have a label and a value key.
33
00:01:34,750 --> 00:01:39,060
Now the value is simply zero initially for every data point
34
00:01:39,060 --> 00:01:42,003
and the label is something like Jan for January.
35
00:01:42,950 --> 00:01:44,790
But then I'm going to duplicate this
36
00:01:44,790 --> 00:01:49,420
and set up the Feb data point, which also initially is zero.
37
00:01:49,420 --> 00:01:52,000
And I'll repeat this for the entire year
38
00:01:52,000 --> 00:01:54,800
and have a March, April,
39
00:01:54,800 --> 00:01:55,743
May,
40
00:01:56,630 --> 00:01:58,300
June,
41
00:01:58,300 --> 00:01:59,950
July
42
00:01:59,950 --> 00:02:01,590
and so on.
43
00:02:01,590 --> 00:02:05,330
Also have August and September and October
44
00:02:05,330 --> 00:02:07,990
and then have November and December.
45
00:02:07,990 --> 00:02:10,270
So that we have all these data points,
46
00:02:10,270 --> 00:02:14,713
which in their initial state all have a value of zero.
47
00:02:16,860 --> 00:02:18,120
Now, of course we're not done here.
48
00:02:18,120 --> 00:02:21,160
We don't wanna have zero for every data point.
49
00:02:21,160 --> 00:02:25,640
Instead, now we wanna have a look at our filtered expenses
50
00:02:25,640 --> 00:02:29,610
and make sure that we basically go through all the expenses
51
00:02:29,610 --> 00:02:33,640
for a selected year and that we then sum up the expenses
52
00:02:33,640 --> 00:02:35,210
for all the different months
53
00:02:35,210 --> 00:02:37,420
and we assign them here
54
00:02:37,420 --> 00:02:39,333
to our data points.
55
00:02:40,590 --> 00:02:44,590
So therefore I expect to get the filtered expenses
56
00:02:44,590 --> 00:02:47,800
as a prop on my expenses chart component
57
00:02:47,800 --> 00:02:50,080
because we will use expenses chart
58
00:02:50,080 --> 00:02:52,530
in the expenses JS file later.
59
00:02:52,530 --> 00:02:55,540
And there we have the filtered expenses.
60
00:02:55,540 --> 00:02:57,160
So here in expenses chart
61
00:02:57,160 --> 00:03:00,840
I just expect to get that list of expenses.
62
00:03:00,840 --> 00:03:02,740
And then we can add a for loop
63
00:03:04,210 --> 00:03:09,100
where we loop through all our expenses,
64
00:03:09,100 --> 00:03:11,593
which we get via props.
65
00:03:12,530 --> 00:03:15,150
And then we wanna have a look at every expense,
66
00:03:15,150 --> 00:03:17,160
get the month of that expense
67
00:03:17,160 --> 00:03:20,620
and updates the value of the appropriate data point
68
00:03:20,620 --> 00:03:22,303
by the expense amount.
69
00:03:23,750 --> 00:03:27,350
So here we kinda get our expense month inside of that loop
70
00:03:27,350 --> 00:03:31,770
by having a look at expense.date get month.
71
00:03:31,770 --> 00:03:33,250
Date is a date object
72
00:03:33,250 --> 00:03:36,200
and there we have the build in get month method
73
00:03:36,200 --> 00:03:38,150
which returns us that month.
74
00:03:38,150 --> 00:03:40,330
Starting at zero though,
75
00:03:40,330 --> 00:03:42,080
so January
76
00:03:42,080 --> 00:03:43,253
is zero.
77
00:03:44,570 --> 00:03:46,610
But we can then use this month later
78
00:03:46,610 --> 00:03:48,360
to pick the right data point,
79
00:03:48,360 --> 00:03:52,263
since January has the index zero in this array as well.
80
00:03:53,480 --> 00:03:56,220
So we can basically use the month as a index
81
00:03:56,220 --> 00:03:58,050
in that array later.
82
00:03:58,050 --> 00:04:00,160
And later is actually now
83
00:04:00,160 --> 00:04:02,640
I will reach out to my chart data points
84
00:04:02,640 --> 00:04:04,023
for the given month.
85
00:04:05,210 --> 00:04:07,250
Again, this starts at zero
86
00:04:07,250 --> 00:04:10,740
and ends at 11 which is exactly the case
87
00:04:10,740 --> 00:04:12,450
for the index of these data points.
88
00:04:12,450 --> 00:04:15,270
So we can use that as an index.
89
00:04:15,270 --> 00:04:19,170
And I wanna update the value of the selected data point
90
00:04:19,170 --> 00:04:20,980
by adding something to it
91
00:04:20,980 --> 00:04:25,020
with the plus equal shortcut operator.
92
00:04:25,020 --> 00:04:27,690
And I wanna add the expense amount
93
00:04:27,690 --> 00:04:30,930
so that we increase the value of a given month
94
00:04:30,930 --> 00:04:33,160
by that expense amount.
95
00:04:33,160 --> 00:04:35,800
And we go through all expenses to sum up
96
00:04:35,800 --> 00:04:38,110
all the expenses for the different months
97
00:04:38,110 --> 00:04:41,050
and assign the values to the appropriate months,
98
00:04:41,050 --> 00:04:43,323
to the appropriate data points here.
99
00:04:44,710 --> 00:04:46,430
So that after this for loop,
100
00:04:46,430 --> 00:04:47,970
we still have this array
101
00:04:47,970 --> 00:04:51,000
but now the values will not be zero anymore
102
00:04:51,000 --> 00:04:53,860
but instead they will have the summed up values
103
00:04:53,860 --> 00:04:56,423
for the given month expenses.
104
00:04:57,260 --> 00:05:00,830
And now we can pass these data points to the chart.
105
00:05:00,830 --> 00:05:03,360
There we set the data points prop,
106
00:05:03,360 --> 00:05:06,950
since that's the prop we're expecting their data points
107
00:05:08,290 --> 00:05:13,133
and we set this equal to our updated chart data points.
108
00:05:14,720 --> 00:05:16,523
And this should do the trick.
109
00:05:17,400 --> 00:05:18,950
Now we're still not done,
110
00:05:18,950 --> 00:05:21,650
we now also wanna go back to the chart
111
00:05:21,650 --> 00:05:23,410
and there you might remember
112
00:05:23,410 --> 00:05:28,410
that we also need to calculate the total max value.
113
00:05:28,720 --> 00:05:31,010
So we wanna have a look at all the months
114
00:05:31,010 --> 00:05:33,660
and find the biggest value
115
00:05:33,660 --> 00:05:35,170
across all months.
116
00:05:35,170 --> 00:05:37,170
Because that's the maximum value
117
00:05:37,170 --> 00:05:39,423
which should be represented in the chart.
118
00:05:41,010 --> 00:05:45,820
And to do this, we can add a new constant total maximum.
119
00:05:45,820 --> 00:05:47,310
The name is up to you.
120
00:05:47,310 --> 00:05:52,310
And here we can use math max to find the maximum value
121
00:05:52,890 --> 00:05:56,980
but actually max wants a number of arguments like this.
122
00:05:56,980 --> 00:06:00,660
So comma separated arguments, comma separated numbers
123
00:06:00,660 --> 00:06:03,710
for which are then returns to biggest number.
124
00:06:03,710 --> 00:06:05,850
Here we have an array though
125
00:06:05,850 --> 00:06:10,370
and also not an array of numbers, but an array of objects.
126
00:06:10,370 --> 00:06:11,660
And we're just interested
127
00:06:11,660 --> 00:06:14,660
in a specific property of that object.
128
00:06:14,660 --> 00:06:16,710
Nonetheless, we can work around that,
129
00:06:16,710 --> 00:06:20,470
we can get our value array if we wanna call it like this
130
00:06:20,470 --> 00:06:21,303
or our
131
00:06:22,400 --> 00:06:24,630
data point values.
132
00:06:24,630 --> 00:06:28,370
And here we can simply call props data points
133
00:06:30,180 --> 00:06:33,350
dot map to call the map method.
134
00:06:33,350 --> 00:06:37,800
But now we won't map the data points into JSX elements,
135
00:06:37,800 --> 00:06:42,400
but instead simply transformed them from objects to numbers.
136
00:06:42,400 --> 00:06:44,270
So that for every data point
137
00:06:44,270 --> 00:06:48,390
we in the end just return data point dot value.
138
00:06:48,390 --> 00:06:49,460
So that means that
139
00:06:49,460 --> 00:06:53,850
we transform a data point object to just the number.
140
00:06:53,850 --> 00:06:56,940
The number stored in data point value.
141
00:06:56,940 --> 00:06:59,750
And therefore map here on data points
142
00:06:59,750 --> 00:07:02,140
will return a brand new array
143
00:07:02,140 --> 00:07:04,030
which is just an array of numbers.
144
00:07:04,030 --> 00:07:06,200
An array of all these values,
145
00:07:06,200 --> 00:07:08,190
for all these data points we're getting.
146
00:07:08,190 --> 00:07:10,320
So in our case for the 12 months
147
00:07:10,320 --> 00:07:12,903
we'll have an array of 12 values.
148
00:07:14,350 --> 00:07:16,180
And now it's the data point values
149
00:07:16,180 --> 00:07:18,110
where we wanna find the maximum.
150
00:07:18,110 --> 00:07:20,740
But since max wants a list of arguments
151
00:07:20,740 --> 00:07:22,030
instead of an array.
152
00:07:22,030 --> 00:07:24,440
And since this still is an array,
153
00:07:24,440 --> 00:07:27,400
data point values still is an array.
154
00:07:27,400 --> 00:07:29,630
We can use the spread operator here
155
00:07:29,630 --> 00:07:32,560
to pull out all the array elements
156
00:07:32,560 --> 00:07:36,230
and add them as standalone arguments
157
00:07:36,230 --> 00:07:38,220
to this max method.
158
00:07:38,220 --> 00:07:41,590
So now this max method will receive 12 arguments
159
00:07:41,590 --> 00:07:43,630
which are these 12 values
160
00:07:43,630 --> 00:07:47,403
from our array pulled out by this spread operator.
161
00:07:48,650 --> 00:07:50,690
And now it's this total maximum
162
00:07:50,690 --> 00:07:53,993
which I pass in here as a max value.
163
00:07:55,160 --> 00:07:57,430
And with that that's all is updated.
164
00:07:57,430 --> 00:07:59,340
And now we just wanna make sure
165
00:07:59,340 --> 00:08:02,510
that we use our expenses chart component
166
00:08:02,510 --> 00:08:05,770
and I wanna do that in the expenses JS file.
167
00:08:05,770 --> 00:08:08,750
There we can import expenses
168
00:08:08,750 --> 00:08:10,650
chart from
169
00:08:10,650 --> 00:08:11,700
expenses.
170
00:08:11,700 --> 00:08:12,893
Chart like this.
171
00:08:14,680 --> 00:08:16,400
And we now simply add that here
172
00:08:16,400 --> 00:08:18,560
between the filter and the list.
173
00:08:18,560 --> 00:08:21,880
We render our expenses chart.
174
00:08:21,880 --> 00:08:24,240
And of course, very important now
175
00:08:24,240 --> 00:08:27,150
we need to pass in the expenses prop
176
00:08:27,150 --> 00:08:31,020
because that is expected in the expenses chart component.
177
00:08:31,020 --> 00:08:32,870
So here all
178
00:08:32,870 --> 00:08:34,470
set expenses equal
179
00:08:34,470 --> 00:08:35,809
to
180
00:08:35,809 --> 00:08:37,600
my filtered expenses.
181
00:08:37,600 --> 00:08:39,830
Because of course I only wanna chart
182
00:08:39,830 --> 00:08:42,383
the currently filtered expenses.
183
00:08:44,169 --> 00:08:47,290
And with all of that we should be done
184
00:08:47,290 --> 00:08:49,950
except that I'm getting an error here,
185
00:08:49,950 --> 00:08:54,110
cannot read property get month of undefined.
186
00:08:54,110 --> 00:08:56,050
And that's simply happening because
187
00:08:56,050 --> 00:08:58,840
here in the expenses chart component
188
00:08:58,840 --> 00:09:00,800
I'm using a for in loop.
189
00:09:00,800 --> 00:09:02,990
Of course it should be a for off loop
190
00:09:02,990 --> 00:09:07,990
since expenses, props expenses is an array, not an object.
191
00:09:08,000 --> 00:09:11,420
So for all these correct to loop for all the items.
192
00:09:11,420 --> 00:09:13,530
And now this is looking better.
193
00:09:13,530 --> 00:09:15,230
Now what we see though
194
00:09:15,230 --> 00:09:16,320
or what we don't see
195
00:09:16,320 --> 00:09:20,580
is somehow we don't have any fill values.
196
00:09:20,580 --> 00:09:22,440
No matter how I switch
197
00:09:22,440 --> 00:09:26,130
we never see any of the bars being filled.
198
00:09:26,130 --> 00:09:27,620
But the reason for that
199
00:09:27,620 --> 00:09:30,030
is that in the chart bar component
200
00:09:30,030 --> 00:09:33,370
I'm checking props max for being greater than zero.
201
00:09:33,370 --> 00:09:37,423
Well, I actually named the prop max value though.
202
00:09:38,370 --> 00:09:41,683
So we should also check props max value here.
203
00:09:43,170 --> 00:09:44,700
And now this looks better.
204
00:09:44,700 --> 00:09:46,070
Now we see
205
00:09:46,070 --> 00:09:47,450
that
206
00:09:47,450 --> 00:09:48,750
this looks good
207
00:09:48,750 --> 00:09:51,430
and now we got certain bars which are filled
208
00:09:51,430 --> 00:09:53,080
others which are not filled.
209
00:09:53,080 --> 00:09:56,300
Simply depending on what we're filtering for.
210
00:09:56,300 --> 00:09:59,800
And this is now the finished expenses tracker,
211
00:09:59,800 --> 00:10:02,640
of course feel free to play around with it,
212
00:10:02,640 --> 00:10:05,100
to tweak it, to add more features
213
00:10:05,100 --> 00:10:06,880
and experiment with it.
214
00:10:06,880 --> 00:10:10,530
But we're also going to have more projects in this course
215
00:10:10,530 --> 00:10:13,770
and we're also going to dive deeper into React.
216
00:10:13,770 --> 00:10:17,180
For example, we are also going to take a closer look
217
00:10:17,180 --> 00:10:19,310
at styling React components
218
00:10:19,310 --> 00:10:23,410
and how we can scope styles to components.
219
00:10:23,410 --> 00:10:26,020
Because actually right now I can tell you
220
00:10:26,020 --> 00:10:27,820
all the styles we set up,
221
00:10:27,820 --> 00:10:29,420
even though the CSS files
222
00:10:29,420 --> 00:10:32,020
have components specific file names,
223
00:10:32,020 --> 00:10:36,930
all CSS styles actually up to this point are global.
224
00:10:36,930 --> 00:10:41,110
If a class is defined here in the chart bar CSS file
225
00:10:41,110 --> 00:10:43,420
we could add the CSS class
226
00:10:43,420 --> 00:10:46,600
to any element in any component
227
00:10:46,600 --> 00:10:49,190
and the styles would be applied.
228
00:10:49,190 --> 00:10:51,920
Currently, these styles are not scoped
229
00:10:51,920 --> 00:10:53,800
and therefore that's one topic
230
00:10:53,800 --> 00:10:56,370
we're also going to take a closer look at
231
00:10:56,370 --> 00:10:57,850
through out the next modules
232
00:10:57,850 --> 00:10:59,650
but of course also plenty
233
00:10:59,650 --> 00:11:02,423
of other core React features.
17402
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.