All language subtitles for 007 Demo App_ Adding a Chart_en

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian Download
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
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.