Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:05,150
So, this expense tracker has taken some shape
2
00:00:05,150 --> 00:00:07,850
and it's basically finished
3
00:00:07,850 --> 00:00:10,720
from the core functionality at least
4
00:00:10,720 --> 00:00:12,930
we got all the core features implemented.
5
00:00:12,930 --> 00:00:16,750
We can add expenses, we can filter our expenses.
6
00:00:16,750 --> 00:00:20,100
But if you remember the original state
7
00:00:20,100 --> 00:00:23,320
which I showed you a couple of hours ago
8
00:00:23,320 --> 00:00:26,940
then there is one crucial element and feature
9
00:00:26,940 --> 00:00:28,320
which is missing.
10
00:00:28,320 --> 00:00:30,840
The chart where we can actually see
11
00:00:30,840 --> 00:00:35,840
a graphical representation of our expenses per month.
12
00:00:35,970 --> 00:00:39,130
And that is therefore what we're now going to dive into
13
00:00:39,130 --> 00:00:44,130
to then conclude this module and this first course project.
14
00:00:44,170 --> 00:00:46,350
Now, for this chart
15
00:00:46,350 --> 00:00:50,310
I will start by adding a new components folder
16
00:00:50,310 --> 00:00:52,740
which I'll name Chart because it will hold
17
00:00:52,740 --> 00:00:56,490
all the components that are related to the chart
18
00:00:56,490 --> 00:01:01,490
and I will split up the chart into two main components.
19
00:01:01,640 --> 00:01:05,269
For one that's the chart itself, the chart component
20
00:01:05,269 --> 00:01:07,660
which we can add to our application
21
00:01:07,660 --> 00:01:11,170
but then inside of the chart we have all these bars
22
00:01:11,170 --> 00:01:14,370
and I will actually create a separate component for those.
23
00:01:14,370 --> 00:01:16,800
The chart bar component.
24
00:01:16,800 --> 00:01:18,980
So, we'll have these two components
25
00:01:18,980 --> 00:01:20,840
and we're also going to have some styles
26
00:01:20,840 --> 00:01:25,590
so, I'll already add a Chart.css and a ChartBar.css file
27
00:01:26,800 --> 00:01:29,610
and you find these two files attached.
28
00:01:29,610 --> 00:01:32,460
So, as always you can copy and paste the styles
29
00:01:32,460 --> 00:01:33,700
you find in there
30
00:01:33,700 --> 00:01:37,543
or simply use these attached CSS files right away.
31
00:01:39,200 --> 00:01:40,990
And then let's start
32
00:01:40,990 --> 00:01:45,460
with the Chart.js file with the chart itself.
33
00:01:45,460 --> 00:01:48,530
There I will import react from react
34
00:01:48,530 --> 00:01:49,990
even though that's technically
35
00:01:49,990 --> 00:01:53,710
not required in this set up but still and then I'll create
36
00:01:53,710 --> 00:01:57,330
my chart functional component here, like this.
37
00:01:57,330 --> 00:02:00,320
So, this component function, I should say
38
00:02:00,320 --> 00:02:03,210
and export this, like that.
39
00:02:03,210 --> 00:02:06,620
And now with that in the chart
40
00:02:06,620 --> 00:02:11,070
we of course wanna render all these chart bars.
41
00:02:11,070 --> 00:02:15,220
And the question is now how we wanna do that.
42
00:02:15,220 --> 00:02:19,080
How we wanna structure the JSX code in this component
43
00:02:19,080 --> 00:02:21,373
and how that all should work.
44
00:02:22,500 --> 00:02:25,310
Well, eventually we're going to import
45
00:02:25,310 --> 00:02:27,380
the chart bar component
46
00:02:27,380 --> 00:02:29,260
at the moment it's of course empty
47
00:02:29,260 --> 00:02:31,680
but we're soon going to add something there
48
00:02:31,680 --> 00:02:35,130
and hence I can already add this import
49
00:02:35,130 --> 00:02:38,300
and I then wanna in the end return some JSX code
50
00:02:38,300 --> 00:02:41,730
where we have all these chart bars.
51
00:02:41,730 --> 00:02:43,470
So, maybe we, first of all
52
00:02:43,470 --> 00:02:46,050
set up a div with a class name of chart
53
00:02:46,050 --> 00:02:48,290
to apply that styling.
54
00:02:48,290 --> 00:02:51,110
And for that we then also import
55
00:02:51,110 --> 00:02:55,440
oops! import Chart.css like this
56
00:02:55,440 --> 00:02:59,463
oops! not chart bar but Chart.css to applied styles.
57
00:03:00,370 --> 00:03:03,230
But instead of the diff we now wanna have the bars
58
00:03:03,230 --> 00:03:07,460
and we could simply render 12 individual chart bars
59
00:03:07,460 --> 00:03:09,713
for the 12 months which we have.
60
00:03:10,610 --> 00:03:15,000
But I will actually create a bit of a more flexible chart
61
00:03:15,000 --> 00:03:18,370
which is actually not necessarily restricted
62
00:03:18,370 --> 00:03:21,793
to months and to 12 data points.
63
00:03:22,640 --> 00:03:24,170
Instead, we could say
64
00:03:24,170 --> 00:03:28,060
that when the chart component is being used somewhere
65
00:03:28,060 --> 00:03:32,230
in our application, we wanna receive the data points
66
00:03:32,230 --> 00:03:36,190
that should be plotted as props.
67
00:03:36,190 --> 00:03:40,130
So, that the chart component is fairly configurable
68
00:03:40,130 --> 00:03:43,350
and the components that use the chart component
69
00:03:43,350 --> 00:03:46,070
can decide how many data points
70
00:03:46,070 --> 00:03:49,560
with which values should be rendered.
71
00:03:49,560 --> 00:03:52,740
And therefore, I actually will output
72
00:03:52,740 --> 00:03:56,010
the chart bars dynamically by going through
73
00:03:56,010 --> 00:03:58,010
an array of data points
74
00:03:58,010 --> 00:04:01,830
and mapping every data point to a chart bar.
75
00:04:01,830 --> 00:04:04,280
And that's of course, basically what we already learned
76
00:04:04,280 --> 00:04:08,780
in this module how we output lists of contents dynamically
77
00:04:08,780 --> 00:04:10,820
and that's all why I'm doing it here
78
00:04:10,820 --> 00:04:12,593
so that we again practice this.
79
00:04:13,590 --> 00:04:18,160
So, on props we could expect a data points prop
80
00:04:18,160 --> 00:04:21,430
of course, that name is up to you since it's your component
81
00:04:21,430 --> 00:04:24,020
but I expect the data points prop
82
00:04:24,020 --> 00:04:28,270
and I expect that to hold a value which is an array.
83
00:04:28,270 --> 00:04:30,340
Hence, we can call map on that
84
00:04:30,340 --> 00:04:33,330
and then we map every single data point
85
00:04:33,330 --> 00:04:36,860
into a chart bar component.
86
00:04:36,860 --> 00:04:39,860
So, that we create as many chart bar components
87
00:04:39,860 --> 00:04:42,240
as we have data points.
88
00:04:42,240 --> 00:04:44,940
And then of course we wanna pass some data
89
00:04:44,940 --> 00:04:48,730
into the chart bar to control how it will be rendered.
90
00:04:48,730 --> 00:04:51,680
So, which value will be rendered there.
91
00:04:51,680 --> 00:04:54,420
And for that we of course wanna extract some data
92
00:04:54,420 --> 00:04:56,460
from the incoming data points.
93
00:04:56,460 --> 00:04:57,530
Now, up to this point
94
00:04:57,530 --> 00:04:59,810
we're never using the chart component.
95
00:04:59,810 --> 00:05:02,400
So, we as the creator of this component
96
00:05:02,400 --> 00:05:04,770
can define which kind of data
97
00:05:04,770 --> 00:05:08,730
we expect to extract there in the future.
98
00:05:08,730 --> 00:05:10,800
And for example, we could say
99
00:05:10,800 --> 00:05:15,610
that the chart bar component should receive a value prop
100
00:05:15,610 --> 00:05:18,963
and there we wanna pass data point dot value.
101
00:05:19,870 --> 00:05:23,640
Of course, that will require that in the chart bar
102
00:05:23,640 --> 00:05:25,700
we then read this prop
103
00:05:25,700 --> 00:05:28,850
and that when we define the data points later
104
00:05:28,850 --> 00:05:31,890
that every data point has a value property.
105
00:05:31,890 --> 00:05:36,040
So, that data point is an object which has a value property.
106
00:05:36,040 --> 00:05:38,610
That's what we're basically defining now
107
00:05:38,610 --> 00:05:41,300
since that is how we wanna use that chart component
108
00:05:41,300 --> 00:05:43,803
and the chart bar component in there.
109
00:05:45,140 --> 00:05:46,960
Now, I also wanna make sure
110
00:05:46,960 --> 00:05:50,660
that every chart bar plots the value
111
00:05:50,660 --> 00:05:55,253
in relation to the maximum value in the entire chart.
112
00:05:56,350 --> 00:06:01,050
And therefore, I also wanna pass in a max value property
113
00:06:01,050 --> 00:06:04,980
and that is currently null, let's say
114
00:06:04,980 --> 00:06:08,180
that's not data which we extract from the data point
115
00:06:08,180 --> 00:06:10,340
because that is a unique value
116
00:06:10,340 --> 00:06:14,620
which is the same for all chart bars in a given chart.
117
00:06:14,620 --> 00:06:17,300
So, we will need to derive this max value
118
00:06:17,300 --> 00:06:18,520
and we'll do this in a second.
119
00:06:18,520 --> 00:06:20,520
For the moment, I'll set this to null
120
00:06:20,520 --> 00:06:22,633
but that's just a temporary value.
121
00:06:23,810 --> 00:06:26,850
We probably also wanna have a label though
122
00:06:26,850 --> 00:06:29,460
for example, in this case to have a label
123
00:06:29,460 --> 00:06:33,560
of January, February, March, April and so on.
124
00:06:33,560 --> 00:06:35,920
And therefore I'll add a label prop
125
00:06:35,920 --> 00:06:39,193
and pass in dataPoint.label, like that.
126
00:06:40,120 --> 00:06:42,240
And since we're mapping this
127
00:06:42,240 --> 00:06:46,420
since we're outputting a list here we also should add a key
128
00:06:46,420 --> 00:06:49,560
because you learned that this special key prop
129
00:06:49,560 --> 00:06:53,053
helps react render these list items efficiently.
130
00:06:53,920 --> 00:06:57,300
And therefore I do expect that every data point
131
00:06:57,300 --> 00:07:02,300
also has a unique ID or maybe we actually use the label
132
00:07:03,090 --> 00:07:05,930
so that we say that the label should be unique
133
00:07:05,930 --> 00:07:08,770
every chart bar has its own unique label
134
00:07:08,770 --> 00:07:11,310
and therefore we can also use the label
135
00:07:11,310 --> 00:07:15,203
as a unique identifier for this special key prop here.
136
00:07:16,370 --> 00:07:18,410
That looks good to me.
137
00:07:18,410 --> 00:07:20,440
Now, of course, we wanna continue working
138
00:07:20,440 --> 00:07:23,033
on the chart bar to bring that to life.
11021
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.