Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,180 --> 00:00:05,370
Now, to build the chart bar component
2
00:00:05,370 --> 00:00:09,070
we again wanna import react from react in there
3
00:00:09,070 --> 00:00:13,320
and then import the CSS file, of course.
4
00:00:13,320 --> 00:00:15,343
So, that we have two styles available.
5
00:00:16,630 --> 00:00:21,160
And then we can define our component function chart bar
6
00:00:21,160 --> 00:00:23,960
and set this equal to props
7
00:00:23,960 --> 00:00:27,000
and then simply return our JSX code here
8
00:00:27,000 --> 00:00:29,270
and we will definitely need props
9
00:00:29,270 --> 00:00:32,409
because we are already defining some props here
10
00:00:32,409 --> 00:00:34,023
in the chart component.
11
00:00:35,160 --> 00:00:38,420
Of course, we also wanna export chart bar
12
00:00:38,420 --> 00:00:39,543
as a default here.
13
00:00:40,640 --> 00:00:44,870
Now, for this JSX code in the chart bar which we return
14
00:00:44,870 --> 00:00:47,290
I want to have a div here with a class name
15
00:00:47,290 --> 00:00:49,280
of chart dash bar
16
00:00:49,280 --> 00:00:53,320
since that's one of the CSS styles defined in the CSS file
17
00:00:54,220 --> 00:00:58,090
and in there then another nested div
18
00:00:58,090 --> 00:01:02,830
with a class name of chart bar underscore, underscore inner.
19
00:01:02,830 --> 00:01:07,330
And this divs and CSS classes are simply required
20
00:01:07,330 --> 00:01:09,763
to make the provided styles work.
21
00:01:11,800 --> 00:01:14,720
Now, in there I will add yet another div
22
00:01:14,720 --> 00:01:15,760
with a class name
23
00:01:15,760 --> 00:01:19,870
of chart dash bar underscore, underscore fill
24
00:01:19,870 --> 00:01:24,870
and then next to that div so not nested but next to it
25
00:01:24,870 --> 00:01:27,120
I'll add another div with a class name
26
00:01:27,120 --> 00:01:30,493
of chart dash bar underscore, underscore label.
27
00:01:32,190 --> 00:01:36,610
And actually that should not be in the inner div
28
00:01:36,610 --> 00:01:38,900
but side by side to the inner div
29
00:01:38,900 --> 00:01:41,530
so, that this is the structure we have here.
30
00:01:41,530 --> 00:01:44,140
A bunch of divs which will then be responsible
31
00:01:44,140 --> 00:01:46,943
for rendering this chart correctly.
32
00:01:48,240 --> 00:01:51,410
However, like this we wouldn't see much.
33
00:01:51,410 --> 00:01:54,790
For one, I of course wanna output the label
34
00:01:54,790 --> 00:01:57,420
which we receive on the label prop.
35
00:01:57,420 --> 00:02:00,570
And that's why I added this div there
36
00:02:00,570 --> 00:02:03,440
we can dynamically output prop store label
37
00:02:03,440 --> 00:02:05,113
so that the label is visible.
38
00:02:06,620 --> 00:02:11,620
But we also will need to change this chart bar fill div here
39
00:02:11,660 --> 00:02:15,140
this div is required to basically remember
40
00:02:15,140 --> 00:02:19,090
by how much this chart bar will be filled.
41
00:02:19,090 --> 00:02:22,360
And this chart bar fill CSS class
42
00:02:22,360 --> 00:02:26,023
will for example define the background color for that.
43
00:02:27,100 --> 00:02:28,980
But one important piece of information
44
00:02:28,980 --> 00:02:30,890
is missing in the CSS class.
45
00:02:30,890 --> 00:02:35,513
And that will be the height of this filled chart bar.
46
00:02:36,430 --> 00:02:40,760
The overall chart bar has a predefined height
47
00:02:40,760 --> 00:02:43,910
100% of the parent container which is the chart
48
00:02:43,910 --> 00:02:45,893
which has a height of 10rem.
49
00:02:46,970 --> 00:02:50,140
But of course, by how much we fill that bar
50
00:02:50,140 --> 00:02:52,950
depends on the data we're receiving.
51
00:02:52,950 --> 00:02:55,410
So, it's depends on the value
52
00:02:55,410 --> 00:02:59,090
because we wanna basically fill our chart bar
53
00:02:59,090 --> 00:03:03,970
by putting the value in relation with the max value.
54
00:03:03,970 --> 00:03:08,970
So, that if the max value for the entire chart is 100
55
00:03:09,050 --> 00:03:12,430
and the value for a given chart bar is 50
56
00:03:12,430 --> 00:03:16,213
we fill that chart bar by 50%.
57
00:03:17,390 --> 00:03:20,550
And therefore in the chart bar component
58
00:03:20,550 --> 00:03:22,360
we now need to calculate
59
00:03:22,360 --> 00:03:25,730
by how much this specific chart bar instance
60
00:03:25,730 --> 00:03:27,083
should be filled.
61
00:03:28,310 --> 00:03:31,720
For this we can add a variable, which we could name
62
00:03:31,720 --> 00:03:35,550
bar fill height but the name is up to you.
63
00:03:35,550 --> 00:03:40,340
And initially I'll set this to 0% as a text
64
00:03:40,340 --> 00:03:44,810
because this will be assigned as a CSS style in a second.
65
00:03:44,810 --> 00:03:49,170
So, it's 0% like this but then I wanna check
66
00:03:49,170 --> 00:03:52,900
if we got a max value greater than zero
67
00:03:52,900 --> 00:03:54,660
so, at four given data points
68
00:03:54,660 --> 00:03:57,610
we do have a max value greater than zero.
69
00:03:57,610 --> 00:04:01,190
We could have zero later if we filter for a month
70
00:04:01,190 --> 00:04:03,140
that has no expenses.
71
00:04:03,140 --> 00:04:05,780
So, we wanna check if we do have a max value
72
00:04:05,780 --> 00:04:07,460
greater than zero.
73
00:04:07,460 --> 00:04:11,720
And if that's the case, I wanna set bar fill height
74
00:04:11,720 --> 00:04:16,720
equal to math round and then in nested brackets
75
00:04:17,790 --> 00:04:22,350
props value divided by props max value
76
00:04:23,230 --> 00:04:24,423
times 100.
77
00:04:25,630 --> 00:04:29,740
This will basically give us the percentage
78
00:04:29,740 --> 00:04:34,250
between zero and 100 by which this bar should be filled.
79
00:04:34,250 --> 00:04:37,230
And I'm rounding to the nearest integer here.
80
00:04:37,230 --> 00:04:39,690
And we also wanna convert this to a string
81
00:04:39,690 --> 00:04:41,630
with the percentage sign at the end
82
00:04:41,630 --> 00:04:45,053
so I will add plus percentage here, like this.
83
00:04:46,410 --> 00:04:49,070
And now we wanna set this as the height
84
00:04:49,070 --> 00:04:52,760
as the CSS style height for this div
85
00:04:52,760 --> 00:04:55,900
with the chart bar fill class name.
86
00:04:55,900 --> 00:04:58,150
And to achieve this we're going to do something
87
00:04:58,150 --> 00:05:00,910
which we haven't done thus far in this course.
88
00:05:00,910 --> 00:05:05,370
We're going to set the style of an element dynamically
89
00:05:05,370 --> 00:05:09,520
and that can be done by adding the style prop here
90
00:05:09,520 --> 00:05:13,960
which is of course a default HTML attribute as well
91
00:05:13,960 --> 00:05:17,570
but actually that style prop, that style attribute
92
00:05:17,570 --> 00:05:19,840
works a little bit differently
93
00:05:19,840 --> 00:05:21,963
when building a react application.
94
00:05:23,000 --> 00:05:25,760
The value is set here should be dynamic
95
00:05:25,760 --> 00:05:29,760
because it should be our derived fill height here
96
00:05:29,760 --> 00:05:34,030
and indeed you then don't generate a dynamic string
97
00:05:34,030 --> 00:05:39,030
where you set something like height 10% but instead style
98
00:05:39,770 --> 00:05:42,733
and that's the special thing once an object.
99
00:05:43,610 --> 00:05:47,900
So, here we don't have a special double curly brace syntax
100
00:05:47,900 --> 00:05:50,130
but instead we have to single a curly braces
101
00:05:50,130 --> 00:05:52,370
for outputting something dynamically
102
00:05:52,370 --> 00:05:56,180
but then the dynamic value is a JavaScript object
103
00:05:56,180 --> 00:05:59,250
which has also created with curly braces.
104
00:05:59,250 --> 00:06:02,450
That's why we overall have the double curly braces
105
00:06:02,450 --> 00:06:05,140
but it's no special style syntax.
106
00:06:05,140 --> 00:06:07,990
The only special thing here is that style
107
00:06:07,990 --> 00:06:12,110
wants a JavaScript object as a value.
108
00:06:12,110 --> 00:06:13,460
And then this object
109
00:06:13,460 --> 00:06:16,780
you should then use the CSS property names
110
00:06:16,780 --> 00:06:21,780
as key names as properties and the values as well values.
111
00:06:23,290 --> 00:06:27,880
So, for example, here we can then set background color
112
00:06:27,880 --> 00:06:31,930
to a given value or in our case
113
00:06:31,930 --> 00:06:36,827
we can set height to bar fill height.
114
00:06:38,470 --> 00:06:40,280
Now, as a side note, if you have something
115
00:06:40,280 --> 00:06:42,620
like background color with a dash
116
00:06:42,620 --> 00:06:45,700
you need the quotes around the property name
117
00:06:45,700 --> 00:06:48,680
because otherwise it would be an invalid property name
118
00:06:48,680 --> 00:06:52,210
or better you use the camel case version of that name
119
00:06:52,210 --> 00:06:55,290
background, color like this.
120
00:06:55,290 --> 00:06:57,210
We don't need the background color here
121
00:06:57,210 --> 00:06:58,870
but I want to show this to you.
122
00:06:58,870 --> 00:07:01,300
I will come back to this later as well in the course
123
00:07:01,300 --> 00:07:04,920
but that is how you would target such CSS property names
124
00:07:04,920 --> 00:07:06,770
which have a dash inside of them
125
00:07:06,770 --> 00:07:10,083
if you are setting the style prop on an element.
126
00:07:11,210 --> 00:07:13,830
But here we don't even need that, so I will get rid of it
127
00:07:13,830 --> 00:07:15,943
we only need to set the height.
128
00:07:17,250 --> 00:07:21,560
And with that, we also finished the chart bar component.
129
00:07:21,560 --> 00:07:23,990
Now, we just need to use the chart
130
00:07:23,990 --> 00:07:26,083
and pass in the data points.
10436
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.