Adjusting Svelte Chart to Fit Within Articles

[00:00 - 01:34] Hey everyone, so in this lesson we're basically going to take our completed scrolly telling chart, pat yourself on the back because we're done with the actual chart, and we're going to move it into an actual article. Now the reason for this is because it's nice to have this chart that has scrolly telling, but if you're ever actually going to work in a real-life application where you're building these types of charts, they're going to need to be contained within a broader article. So it's worth knowing, you know, what CSS properties need to apply to basically make this chart fix the top of the viewport and stay constrained within an article with proper width and height. So we're just going to do a little bit of polish to really make this production ready. And you're going to learn a little bit about, you know, broader HTML and CSS principles as we build in the article around the chart. So we'll do three things. You can look forward to three steps. First, adding surrounding text. Honestly, it's just going to be some lorem, ip some, some random prose. Second, we'll make the chart vertically responsive. So right now it's 400 pixels. We're going to look at the viewport height to size our charts vertical height. And then third, we'll style our chart. So it looks visually distinct. We'll add like a border and a box shadow and make it look pretty. So it sticks out compared to the rest of the article. So let's start by adding surrounding text, which is going to be very simple. What you're going to want to do is create a new component. And so right now I'm in access Y dot spell, you can close that, you can close any other file other than app dots felt. And within your components folder, let's go ahead and right click and create a new file and call it sample text dot felt. You can call it whatever you want, but this is literally going to be sample text.

[01:35 - 03:04] Here we're actually not even going to have a script tag, at least not to start. But if you want to add that to remind yourself, you definitely can. And let's just add some sample text. So open and close a P tag and write whatever you want. If you have, you know, an auto completion agent like I do, maybe you could type Lauren and hit enter and it will go ahead and give you sample text. A friend of mine Brody has also put together this really cool Dylan Ipsum project that basically creates Lauren Ipsum text. Involved Dylan lyrics. So feel free to use that as well to, you know, get some text and bring it in and paste that in your P tag, whatever you want. But I'm just going to do this simple loram Ipsum text. And I 'm going to do a couple of these paragraphs because this is just meant to kind of wrap around the article. So I'm doing three P tags, each of them having this loram Ipsum. And then let's go ahead and bring this into our application by importing sample text from components slash sample text. And let's go ahead and place it around our article. So our section in this case is going to represent our scrolly telling article or a scrolly telling chart. So sample text will go before that. Let's go ahead and open and close it. And because it's self- closing, you can just do this. And then we'll paste the exact same thing. The very bottom of our article on line 128. We'll hit save and see what happens.

[03:05 - 08:00] Now you notice that text is before. And once we get to the end, after the article, obviously the text doesn't look very good. In particular, there's no space between the text elements here, right? It's just a bunch of paragraphs one after one another. So we could in our sample text file, go ahead and add a property that targets P tags. And one little bit of advanced CSS that we could use is say, we want to target all paragraphs that are not the way that we do not is colon not, and then meets the condition last of type. So if there are a series of P tags one after another, as is exactly the case here, we want to target all of them that are not the last in that series. So here, P not last of type will have a margin bottom of one rem. Now what you'll notice is that this one has a margin bottom of one rem. This one does as well. This one does not. And the reason for that is because this is the last of type. Cool. So a little bit of fun CSS there. And let's go ahead and now move our title, which is currently in our sticky element, and put it also with the rest of the pros. So in app.s felt , we're going to find this H one, we're going to move it out. So I'm just going to copy it, delete, and move it above my sample text. I'll hit save. And now we see the title of the article at the very top of our article, the chart itself is a standalone. If we wanted a separate title for the chart, we could obviously do that still and say chart title. And that would be sticky throughout, you know, so that's an important consideration. But I'm going to let the chart speak for itself and not have any visual or any title element. So let's add some vertical margin to the article title. So it sticks out. This is obviously optional, but let's find our H one style, a rule set, and add a margin of 0.5 rem zero one rem zero. And we'll replace this old declaration. So basically, this is giving it a top margin of 0.5, a bottom margin of one, and a left and right margin of zero. So if you think that looks good, you can leave it if you don't, you can go back to what we had. But overall, we 're getting a pretty good feel for an actual article, right? So the user reads the top text once they're ready, they scroll. And then this now takes up the viewport and communicates whatever insights are in the scrolling time. The main issue right now is that the article is going to be too wide on large screens. This is quite ugly, right? And you don't want your user to have to read from left all the way to the right side of the screen. So how do we address this? We want to constrain our existing article in what we call a max width rule. And then give it a margin of auto so that it kind of squeezes that max width squeezes all the content to the middle. And right now, the way that we want to do that is by adding a wrapper to the entire application. So let me bring this to the right once again. What we're going to do is wrap all of our content in a main tag, where main is basically the representation of the main content of your web page. So this makes sense to be the largest content that we wrap around. The very bottom of our markup, we'll go ahead and hit enter and save. So now you'll notice that everything is wrapped in this main tag. Now let's go ahead and add these rules and I'll do it in my inspector so you can kind of see exactly what's happening. We'll first add a max width of 768 pixels. If you want to do a more even number, you can do 800. But for some reason, web developers like doing random numbers at end in 68. So I'm going to use 768. And then you'll notice that everything is pushed to the left side of the web page. So let's talk about how we can solve this using CSS, you know, centering elements horizontally. You might think text align center, but that does not center the overall content that just centers the content within. So basically we need to use margin properties. And as an illustration of how these margin properties work, you can basically think margin left, top, right, or bottom could take this property of zero, which means no margin, or any pixel value, which will basically push according to that value. So if I did margin left of 10 pixels or 100 pixels, see how everything gets pushed 100 pixels to the right, because there's 100 pixels of space from the left. Okay. And then the final property other than zero or a pixel value could be the keyword auto, which you'll basically see pushes as much as as humanly possible in the opposite direction. So if we have an auto margin of left, that means push this all the way to the right. And that's basically the simplest way to think of this syntax.

[08:01 - 09:48] So the cool thing here is if we gave this a margin left of auto, it would be pushed all the way to the right. If we gave it a margin right of auto instead, it would be pushed all the way to the left. And if we combine them, it will meet perfectly in the middle and basically center the article perfectly. So the shorthand for these two declarations, margin, right, and margin left, is just margin and then auto. Now this is going to apply auto both on the vertical and horizontal dimension. So you could do zero space auto, which says top and bottom have no margin, but left and right have auto margin. And basically, we're just targeting margin, right margin left, both being auto. And then finally, if you wanted some padding from the rest of the web page for small screens, you could add padding of eight pixels. But you'll notice that in the template, I believe I've already accounted for some padding on the body. You see that purple outline around the application. So you might not have to do that. But if you noticed on a small screen that this was, you know, too crowded, for example, you could definitely add a padding on the main tag of eight pixels or so and see how it gives it more breathing room. So those are the styles that we're going to add to our main tag. And let's actually do it instead of doing it in the inspector. So down in app.s felt, I'll say main has a max width of 768 pixels and a margin of zero auto. I'm going to hit save. And you'll notice that it is perfectly centered on wide screens. Great. So what do we want to do now? Well, I don't like how the chart comes into view. It kind of takes up the entire vertical space. But only the top part is actually, you know, making the chart visible.

[09:49 - 10:46] Like there's this entire bit of white space at the bottom that just serves no purpose right now. So I'd either like to make the chart take up the entire viewport or start the article right after the chart finishes, you know, at this 50% of the page down. Right. So the way that we're going to do that is similar to how we create responsiveness on the horizontal dimension with bind client width. You 'll recall that we use that in every project so far. We're going to go ahead and use a similar binding that binds to client height and add that to our height variable. Let's go ahead and see what happens. We'll hit save and by default, it looks like nothing changes. Right. So why is it that nothing is changing? The reason for that is because inner height, which we're declaring online 22, is instantiated with let, but recall that it's counterpart inner width, which is the responsive version, is prefixed with this dollar label. So yes, you guessed it.

[10:47 - 11:09] We'll prefix this with a dollar label and also y scale because y scale is also dependent on inner height. So it also needs to be created with a dollar colon. We'll go ahead and hit save and watch what happens. So what you'll notice, see if this is in fact working.

[11:10 - 12:11] Ah, so what you'll notice is that if I resize my screen, you'll notice this infinite resize. So I knew this would happen. I just didn't know how to trigger it. It looked like a screen resize is the trick, but yeah, you're basically in a race against time with your scrolling telling article and your chart is just going to infinitely scale downward on the vertical dimension. So I'm going to refresh and not resize my screen. So that doesn't happen. But let's actually describe what's happening behind the scenes because this is kind of a pitfall that a lot of people run into whenever they try to add a vertical responsiveness. Um, I don't know 100% if this is exactly what's happening, but my understanding and my guess would be essentially on resize. So this chart container element, right, you'll recall that we have chart container as a div. This is basically trying to occupy as much space as its children need within the div element.

[12:12 - 13:40] So whatever height that this SVG is assuming is going to define the height of the chart container, but recall that the chart container's height is what we're binding to the SVG height. So we basically have this infinite loop that kicks off where height and the chart container height are updating each other one after another , which leads to this infinite resize bug. So that might be not 100% accurate as to what's happening, but it definitely seems like it and makes sense to me. What you will know is that this does happen if you bind client height. So what we actually need to do is make sure that chart container has a fixed height, or at least it's constrained within our CSS rule set. So we're actually going to apply the CSS rules that we're going to target on the sticky elements, because that's the parent of chart container. And so what this will basically do is the chart container will be constrained by the height of sticky. And it will not have this infinite bug, this infinite loop bug. So within our sticky rule set, which in my code base is online 190, I'll add some new rules. So it's already sticky, it already assumes the top position of zero and has a z index of one. What else do we need to do? Let's go ahead and give it a height of 90 viewport units. Now , what does this mean? That basically 90% of whatever the screen is. And if the screen shrinks update the height to also be 90% of that new size. Let's go ahead and hit save and see what happens. I'm going to refresh.

[13:41 - 14:04] And it looks like by default, the SVG and the chart container are the same height. And it looks like sticky. So sticky is updating according to this 90 viewport height. And it's kind of hard to see on my screen, but it looks like this is updating. If I can find the sticky element, this looks like it is 90%.

[14:05 - 14:50] Of the viewport height. So if sticky is in fact, 90% of the viewport height, then what do we need to do now? We need to also make sure that chart container is reflecting the sticky height. Okay. So sticky is this bigger section right here , is 90% of the viewport height, but chart container is still fixed. So what we 're going to do is find our chart container element. If we have a rule set for it, which it doesn't look like we do, we'll create a new rule set for chart And we're going to say you have a height that's equal to 100% of the parent. And we'll also do a width of 100% as well. So we'll hit save. And notice how now this SVG actually resized. You'll see it has a height of 443. And watch what happens as I resize my window.

[14:51 - 15:15] The SVG height is updating as well. Now it's 309, which is 90% of the viewport height. Now it's 477, which is 90% of the viewport height. Now one little knit is that this sticky element is not centered within the screen. So let's actually go ahead and update its top property, which is basically how many pixels or V H units from the top is this getting stuck at.

[15:16 - 15:34] And what we want to do is make it five viewport units from the top. And the reason for that is because the viewport itself is 100 viewport units. And our height is 90 view port units. And if we want this to be centered, we need to take the difference between those and divide by two.

[15:35 - 16:36] So now, notice how our sticky, this blue box that you're seeing is 50%, basically, it's perfectly centered vertically on the screen. And the chart container within it assumes 100% of its height. So let's go ahead and see how this looks now. Now there's definitely this issue here where there needs to be some space. So let's add a margin bottom within our sticky element of one rem. So a bit of space. So there's some breathing room between the chart and the article. Okay, great. So now as you resize the window, you'll notice that the chart itself is updating accordingly. And it always assumes 90% of the viewport height, which is quite great. You know, it looks really cool. It kind of takes over the screen and you're immersed within the screen. And as you proceed, so to do these elements. And if you were to resize halfway down, the chart would update accordingly. So I think this is a really good step. And this is kind of a lesson in vertical responsiveness that we haven't went over yet. So hopefully that is fun as well.

[16:37 - 16:54] The last thing that we can do, which is optional, is add a max width and a max height to our chart. Now what do I mean by that? Right now on a very large screen, the chart does take over the entire viewport. You might like this, you might not. Sometimes it's nice to have it constrained.

[16:55 - 17:34] So if somebody is on a huge monitor, say they have a 2000 pixels tall monitor for some reason, this chart doesn't take up all 2000 pixels. Maybe you still want to see the surrounding text around the fixed element or whatever else. So the way that we're going to do this to add this max width and max height is with some CSS rules. And it's going to be quite simple. So let's go ahead and find our chart container and add a max width of 700 pixels. This is kind of arbitrary, but it's up to you. And a max height of 450 pixels. So if we do this, you're going to see it kind of works, but there's this issue where it's at the top of the screen.

[17:35 - 19:00] And maybe we want it to be centered, okay, because if it's at the top of the screen, then again, we have that problem, we just have all this white space. So we could play around with margin, auto, and other margin properties, but actually the safest and most robust way to fix this is to make our sticky element, which is the chart container's parent center, it's its children, which uses three properties, display of flex, align items of center, and justify content center. So again, you can definitely Google these, these flex properties. If you're curious about more of them, but on a high level, this is how a parent can center its children on both the horizontal and vertical dimensions. Now notice that the chart comes into view. And once it reaches halfway, it becomes fixed and it stands alone, but there's this perfect vertical spacing between the top and the bottom, and it's centered perfectly. So it's now constrained by max with an height. Maybe you like that. Maybe you don't. So feel free to remove those properties if you don't like this. But the final thing that we'll do in this lesson is style our chart. So it looks visually distinct. And you know, right now, like I said, it kind of has this full screen immersive view. But maybe you want it to look like a card, like kind of sticks out and it has like a glow and it looks pretty. So we're just going to add some simple CSS rules that achieve exactly that. First, let's add a background of white to see how it looks. This might be actually the identical color is the background already.

[19:01 - 19:46] So you could add a different color like white smoke to kind of see it's, you know, visual difference from the background. Then let's add a box shadow. And I'm going to add a big box shadow. So it's going to have one pixel one pixel, 30 pixels of blur. And then it's going to have this color that I've already found that's going to be this like pink or purple. And let's hit save. Now you notice that this box shadow basically has this plum background, and it's like sticking out behind, but it has a lot of blur. So notice if this were lower blur, like three pixels, you wouldn't see it at all. There were five, you wouldn't see it. But you can barely see it because of that 30 pixels. And what is that box shadow meant to represent? Well, we should probably make it represent a border.

[19:47 - 21:42] So let's go ahead and add a border of one pixel solid plum. Now you see it kind of looks like the glow associated with the border element. That's why we added it. And let's make it rounded as well, because I always think that looks pretty nice. And a border radius of, I don't know, five pixels , whatever you think looks good. Now you notice it has that rounded corner effect. So how does this look now? Well, it sticks out. But as we scroll, there's this issue where there's no breathing room between the actual elements within the chart, and it's outline. So you could try to add padding to your chart container, but you notice this should actually create some issues with this rendering. So like it spills out of the chart now. And that's because of how we're trying to set dimensions and set margins. So remember that we actually already have a margin object. And we just want to use that. So all the way back up in our script tag where we define margin, let's just update our margin to give a bit more breathing room on all sides. So we'll give five more pixels of top margin, five more pixels of right margin, 10 more pixels of bottom margin. So you can actually see it and 10 pixels of bottom of left margin or five pixels, whatever you think looks good, this is up to you. But now you notice that as you scroll, you see the axis elements, but they actually have breathing room, right, you can actually see them. And they look quite nice with it. So what have we done in this lesson? Well, we've taken our existing scrolling, telling chart and place it in a larger project. So now there's this entire article, which introduces this hypothetical classroom, where students who studied longer scored higher on their final exams. And after you read my captivating prose about those students, you were then given a visual overview of their data . And it was, the story was told in this nice little stick out card that kind of tells its own story and fits nicely within the article. And then there's some ending prose right below it.

[21:43 - 22:40] So that's what we accomplished in this step. I'm actually going to change this white smoke back to white because I think that grade does not look good. Sorry to interrupt my narrative here. But yeah, so that's what we've accomplished in this lesson. And we're basically done, y'all. In the next lesson, which is I think the final lesson of the entire course, we're going to be cleaning up our final code. Basically, we're going to take a lot of what we've added here and split it up. And the reason for that is because we have 214 lines of code in our in our app dot spelt. And it could be a lot cleaner. So we'll do a little bit of a refactor. So these characteristically distinct chunks of code, like the chart itself and like the steps handler, those are in their own components, just for reusability sake and separation of concerns. So I'll see you in the next lesson, where we finish up this entire course. And I am sad, but I'm happy to be wrapping up. And I'll see you there.