Okay, I've decided this is a pretty appropriate next step in our learning. So we're going to build a little graph that compares Rocket League wins between myself and the creator of Laravel, Taylor Otwell. All right, so we should be able to apply a lot of what we've learned in the previous lessons to this one. But we do need to make sure that we pass the actual wins from the server to the client side. Let's get started. So if we switch to my project, here's the routes file. I've created an endpoint called wins, and then we're still just loading that default welcome view that comes with Laravel. And in this case, nothing here. Okay, so let's go back. And we want to pass data from the server to the client. So the

All right, next, Taylor will update his name. And then naturally, as you would expect, his wins are way less. So we'll do eight for him. Okay, so we're going to pass this through, and I'll just use compact here, jeffrey and Taylor, and those will be sent down to the view. Okay, the next step, we're going to go to welcome. And while we know we want to do a graph here, but we're starting to realize, especially in the last lesson that you can have so many different kinds of graphs, and we still need someplace to store the unique data for each of these, right? So maybe we could apply inheritance here, where we do have a top-level graph, but then whenever you need specialty graphs, for example, a wins graph, well, maybe that could be

So maybe we could apply inheritance here, where we do have a top-level graph, but then whenever you need specialty graphs, for example, a wins graph, well, maybe that could be its own component. And that way, any place in your application where you want to display this information, well, we've now made that as simple as we can. All right, so let's finish this up. And now here, we can have custom properties that are unique to this specific graph. That's what I mean by this. So for example, if we want to pass through the player as well as the opponent, well, that's only applicable for one type of graph we're making. So it wouldn't make sense to offer these properties for a generic graph component. Okay? All right, so we will do the player, and that will be Jeffrey. And then we will do the

for a generic graph component. Okay? All right, so we will do the player, and that will be Jeffrey. And then we will do the opponent, and that will be Taylor. And actually, why don't we do this real quick? We're going to wrap everything within a <div>, and then we'll give it a heading here. Rocket league wins comparison. And then I'm going to move this up. Okay, next step. If we go to my gulpfile.js, you can see that I have added this line. We want browserify support, and our entry point will be main.js. All right, resources/assets/js/main.js. So as we've done before, we will import Vue. And of course, if you're starting from scratch, you would want to do npm install vue and save that to your dependencies list.

And of course, if you're starting from scratch, you would want to do npm install view, and save that to your dependencies list. Anyways, we will create our root view instance. I'm going to bind it to the body, as I often do for demos. And then finally, I'm going to have a component here, and we're calling this wins-graph, right? That's how we are referencing it within our view. Okay, so I need to import that. import wins-graph from, and I'm going to put it in a components directory, and we'll call it wins-graph. So it looks like that's our next step. components/wins-graph.js. And I know I'm going to export something here. And don't forget, we talked about using inheritance and creating a generic graph component. But let's do it all here first,

track this canvas tag down. And finally, like we learned in the previous lesson, we're going to have a legend here. So that means, because we're referencing a data property, first step is to add that here, and I will initialize it to an empty string. So what next? Well, if we go back to the welcome view, we added two custom properties called player and opponent. So let's add that here. And I can say props will be player and opponent. Now, down here, we can say when our component is loaded and ready to go, here's where we can set up our data. So for example, our labels, this will be basically the horizontal axis label. I'm going to call that wins. And then our data sets will have two sets, one for me, one for Taylor. So the label, well, how do I fetch? I want this basically to be my name. Well, don't forget, we're passing it through. So once we make one little tweak,

two sets, one for me, one for Taylor. So the label, well, how do I fetch? I want this basically to be my name. Well, don't forget, we're passing it through. So once we make one little tweak, this will be converted to JSON. I'll show you how to do that in just a minute when we view it in the browser. But yeah, once we do, we can reference it like this. This, fetch the player that we are passing through right here. So basically fetch Jeffrey, and then give me the name. Next, we can set up all of those various colors. I'm just going to paste that in so you don't have to watch me write it. And then finally, the data itself will be this.player.wins. And then once again, just to make sure that we're on the same page, we're grabbing this value right here. Okay, so now I can basically duplicate this and substitute it with the opponent, which would be Taylor. So yeah, here we will just substitute player for

we're grabbing this value right here. Okay, so now I can basically duplicate this and substitute it with the opponent, which would be Taylor. So yeah, here we will just substitute player for opponent. And then once again, for the colors, I'm just going to pop in a different set here. All right, so let's look over this. We're going to keep refactoring, but we've set up our winsGraph component. It has two properties. We set up the data, and then we say when the component is ready to go, here's the data that I'm going to supply to the graph. So that means we can import the graph. And once again, npm install chart.js and save to your dependencies list if you haven't already. Anyways, import chart from chart.js. And then down in our ready method, I could say const chart equals a new Chart. We will then fetch the chart or the canvas. Did I call that chart or canvas? Let's go back up. I called it chart. Let's make that canvas. Anyways, find that

constant chart = new Chart(); We will then fetch the chart or the canvas. Did I call that chart or canvas? Let's go back up. I called it chart. Let's make that canvas. Anyways, find that one and get the 2D context. Finally, I'm going to create a bar graph and we're going to pass through the data. Then, and this should all be a review for you at this point, so if this is blurry, go back a couple lessons and get a quick recap. And then finally, like we learned in the previous video, we can set our legend by saying chart.generateLegend(). So now that html string will be assigned to our legend data property, and then we are spitting out that html right here. So if we go back to main.js, we fetch that, we set it up as a component, and then in our actual view, we use the component. Okay, so switch to the terminal, compile everything down, and it looks like it fails, so we must have a typo or something weird going on. I'm going to

we use the component. Okay, so switch to the terminal, compile everything down, and it looks like it fails, so we must have a typo or something weird going on. I'm going to scroll up and we can see in webpack unexpected token on line 11. Okay, let's go back there, line 11, and we are missing a comma. Okay, one more time, and there we go. Awesome. So only remaining step, at least for this part of the lesson, is import the script. So that compiled down to js/main.js. Okay, let's boot up a server and check this out in the browser. Now if I switch to Chrome, yeah, it fails, and I expected this. So notice htmlentities expected parameter one to be a string, but an array was given. Okay, so here's what's going on here. We are trying to pass an array here, so Jeffrey and Taylor, but we haven't written any logic that describes how we can convert that array to a string, because at the end of the day,

on here. We are trying to pass an array here, so Jeffrey and Taylor, but we haven't written any logic that describes how we can convert that array to a string, because at the end of the day, what we really want is the string, not the actual php array. So as we, I think we talked about this in the previous lesson, but yeah, one option is to encode it. So we could do this. This is a simple php function that will encode this as JSON, and if I come back to Chrome and give that a refresh, there we go. We can see that data, and I also have Vue DevTools installed, so if we take a look at that, yeah, here we go. So here's the opponent object, the player object, and our legend. But now another option is, I'll hit U a couple times to undo this, if I go back to my routes file, yeah, another option is, well, in real life you'll probably have a collection object. This may come from a database query or something like that, and Eloquent will return a collection.

another option is, well, in real life you'll probably have a Collection object. This may come from a database query or something like that, and Eloquent will return a Collection. Well, what's nice about collections is, they already know how to convert themselves to a string. So for example, if I go to Illuminate\Support\Collection, and we look for toString, this is how we are referencing it. So we're trying to echo out the collection as a string, so php will automatically call this method, and then that will convert it to JSON for you. And again, if we take a look at that, notice it's calling json_encode. Exact same thing there. So that means, even though in our welcome view, we're no longer calling json_encode, because we have a collection object there, it's going to do the exact same thing as before. Okay, but now in this case, I'm not seeing my legend. Let's go back to that wins graph.

Now for props, that will be different. Different charts will need different types of properties. Next data. Well, it's possible a different chart will have its own set of data, but they will all require a legend. So we could probably get that out of there. Next, well, the actual data part, yeah, that will need to be unique to the graph. So that can be on a subclass, so to speak. And then finally, this part where we new up the chart, and we pass through the data, and then generate the legend. Once again, we can extract that out of here. So let's try this. I'm going to create a new file in the same directory called graph. And let's do this. I'm going to import view, import our chart. And then I will say view::extend. And here is where I can add my templates. So yeah, basically, what we're going to do is create a master level charts. And then any specific types of charts we want to create.

extend. And here is where I can add my templates. So yeah, basically, what we're going to do is create a master level Charts. And then any specific types of charts we want to create can extend Charts, and then instantly get access to the templates and the rendering logic makes sense. So if not, stick with me. So we will begin by grabbing the template here, switching out and pasting it in here. What else? Let's go back. The properties need to stay like we talked about. But this set of data can go. And then later, yeah, if you want to stack on and add more, foo is bar, that's okay. It won't override the parent's data, it'll stack it on. Okay, I'm going to undo that a few steps. So we come back, and I'll paste that one in here. What else? Well, next, if we scroll down, yeah, we talked about this stuff right here. So why don't we get rid of that, come back, and we'll create a method for that maybe.

What else? Well, next, if we scroll down, yeah, we talked about this stuff right here. So why don't we get rid of that, come back, and we'll create a method for that maybe. What is this doing? It is rendering the graph. So maybe I can call it render and paste that in here, like so. Now, the only thing I see here is we don't have the data. So why don't we pass that through to the render method. And then if we come back to our windsGraph, yeah, if we scroll up, maybe we could do something like this, this.render, and then pass through all of the unique data for this type of graph. So now that data will be sent through here, and it'll then be passed to the barChart. All right, so let me take a look at this. We've created a constant, but really, we're just going to export that. export default view.extend. Okay, so quick recap, anything generic would go in here. So every graph or every chart is going to use the

but really, we're just going to export that. export default, view.extend. Okay, so quick recap, anything generic would go in here. So every graph or every chart is going to use the same template. Every chart will have a legend, so I store that data property here. And then every chart will need to render itself, and that logic for rendering is the same bit of code, so I store it here. But now when you have specific types of charts, like a RocketLeague winds graph, yeah, that can be its own component where you have anything unique to that sort of graph, like the labels and the dataSets and the properties. But now this isn't going to work yet, right? Because think about it, we've created this Graph parent component, but nowhere have we extended it from the child here. Okay, easy enough. Let's go to the top. We're no longer using charts within this file, so I can get rid of it and instead import our parent Graph component.

extended it from the child here. Okay, easy enough. Let's go to the top. We're no longer using charts within this file, so I can get rid of it and instead import our parent Graph component. And then I can say export default Graph.extend. And then come down here and close that out. All right, so does that make sense? We come back, we are extending our Graph component with the given data. So now this component will inherit everything from this one. Finally, if we go back to main.js, our entry point, we import the Graph and pass it through to the view. And then once again, the view loads the Graph. So everything is compiling down behind the scenes. That means if I give this a refresh, there we go. Everything's working, and we are passing data from the server to the client. So if we were to go back to the routes file, and we give Taylor 80 wins and put him in the lead, but then we just put myself back in the lead even further,

from the server to the client. So if we were to go back to the routes file, and we give Taylor 80 wins and put him in the lead, but then we just put myself back in the lead even further, yeah, now that will be reflected here. Okay, so I will push this source code to GitHub, and you can toy around with it, steal it, do whatever you want.