Drawing our canvas in React

[00:00 - 00:15] Our next step is to create our repper and bounds for our chart. Now, we could do this in our timeline component, but we'll be using this chart component and we know that for every chart we're going to want to have that repper and bounds .

[00:16 - 00:31] So let's actually just pass this responsibility down to chart so we're not repeating our code everywhere we have a chart. So let's go ahead and create a new chart and close it.

[00:32 - 00:38] And then the only thing we want to pass down is our dimensions object. So dimensions is DMS.

[00:39 - 00:46] All right. So that should be it for our timeline for this step.

[00:47 - 00:50] And let's just double check. I think it's here we go.

[00:51 - 00:53] We need to close that chart tag. All right.

[00:54 - 01:05] So in chart we have this empty used dimensions context and this should hint that we want to use context to pass our dimensions down. So within chart we're going to have all these different other components.

[01:06 - 01:16] So we might have a line component and access component. And these children components might want to have access to the dimensions that is passed down to our chart.

[01:17 - 01:27] It can be a little bit frustrating to have to pass down the dimensions to every one of these children. So what we can do instead is to create a context object.

[01:28 - 01:48] So in order to do that we want to create a chart context and then we're going to use this react create context function. And then for this used dimensions context this is the thing that the children can import in order to grab that dimensions.

[01:49 - 02:03] So just when I use context use this react hook and then pass in that chart context. And then the last thing we need to do is use that context within our render function to encapsulate part of our DOM.

[02:04 - 02:14] So we want to use chart context and there's a provider here. I'm going to wrap our SVG with this provider.

[02:15 - 02:24] And then our provider needs to know what it needs to provide. And the only thing we want to pass down at least for now is the dimensions object.

[02:25 - 02:30] So we'll just pass that down like this. And we'll see how to use that coming up.

[02:31 - 02:37] But for now let's just assume this works. And then the last thing I'm going to do is to create our bounds.

[02:38 - 02:46] So we can just throw a new g element in here. And we'll need to transform it.

[02:47 - 02:52] So it's respecting our left and top margins. So transform.

[02:53 - 03:00] And we want to use translate. We're going to throw an x value in here and the y value in here.

[03:01 - 03:11] So the x value is going to be our dimensions margin left and our y value is going to be that top margin. So we're just scooting it by the left and top margin.

[03:12 - 03:22] And the last thing here is to set the width and height of our SVG. So width equals width and height equals height.

[03:23 - 03:25] Yep. And this isn't just width.

[03:26 - 03:41] We need to specify dimensions.width and dimensions.height. And let's see if we can just double check that this is doing what we think it's doing in our console.

[03:42 - 03:52] Just because you can't really see anything with that g element. So if we inspect it in here, we're not seeing anything in timelines.

[03:53 - 04:05] Let's try saving and maybe refreshing this. So in timeline, we're rendering a new chart element.

[04:06 - 04:23] And within chart, we should be having an SVG and a g element. Let's see if there's any errors in our console.

[04:24 - 04:30] Nope. No errors.

[04:31 - 04:40] And maybe if we close and reopen our DevTools, sometimes go and send bucks. Just takes a minute to update.

[04:41 - 04:48] And this is why we double check in the console. All right.

[04:49 - 05:03] So I'm still not seeing that SVG element. And let's maybe double check by adding a circle element here.

[05:04 - 05:24] And seeing if anything shows up for our timeline. And the last thing we want to check is within our app, are we importing the correct timeline which we are.

[05:25 - 05:33] There we go. So you can see that circle.

[05:34 - 05:44] And now we can see this SVG element with our bounds, which are moved over a little bit based on our left and top margin. And let's just get rid of that circle.

[05:45 - 05:54] So sometimes it just takes a minute to update, just try to be patient. And it's also really important to kind of double check every step.

[05:55 - 06:04] So you're not moving really far along and then anything could be wrong with the 30 lines of code that you just wrote. All right.

[06:05 - 06:11] So let's move on to our next step, which will be out creating our skills.