Building a COVID-19 Dashboard with Vue.js and Chart.js - Diligent Dev

hey what's going on everybody it is rob a diligent dev and today we're gonna be talking about data visualization using view j s and charts j s now for this tutorial we're gonna be using a Kovan 19 data set it is super relevant as of the date today April 12th 2020 so without further ado let's go ahead and get right into it okay so the first thing we're going to do is set up our V project and to do that I've gone ahead and opened up a terminal and seeded into my desktop directory you can put this anywhere you'd like on your computer and we're gonna create our view project by running npx view creates almost say the name of our project which will be covin 19 visualization and then I'm gonna go ahead and pick the default and I'm gonna let this install you'll see a folder has appeared and I will be right back once this is finished okay so the view CLI has finished generating our project and now we're gonna do is install some dependencies that we'll be using inside of our code so I'm going to go up here and go to terminal new terminal and then I'm gonna type in NPM I view - chart J s charts J s Axios moments bootstrap and hit enter and it's going to take a second to run and as soon as it's finished I'll be right back so all our dependencies finally finished installing the first thing I do is go ahead and import the bootstrap styles into our project so I'm gonna go to source main J ass and right underneath this import statement I'm gonna write imports bootstrap dist CSS bootstrap CSS I'm going to go ahead and it's auto-saving so I don't need to save it and the next thing we're gonna do is go into app dot view and we're just gonna get rid of everything inside of this div tag gonna get rid of this hello world components and I'm gonna get rid of all of the styles in here okay so now that we have that all removed we're gonna go ahead and import Axios at the top of the script tags we're gonna say imports Axios from Axios and this is what we're gonna be using to make our calls to the API now we want to call over the API to fire when the page is loaded so we're gonna be using the view lifecycle method called created so underneath this components property here I'm going to say async created and what we're going to do is I'm going to say Const I'm going to do some object D structuring here data equals Axios dot gets and I'm gonna go grab the API call the URL and we're gonna paste that right in there and in front of Axios we need to put it in a weight and then what we're gonna do is go ahead and console log of the data I'm going to go ahead and save everything and I'm gonna fire up our development server and the way you do that is in the terminal you'll run npm run serve and now our development server is up so I'll go ahead and click this link and I'm gonna go ahead show you that our development server is up but we have nothing in the template tags nothing's being displayed we just strictly want to look at what is coming back from the API so you see we have an array here and inside of each one you'll see that we have a dates the states how many positive negative pending there's just there's a lot of stuff going on in here and what we're gonna do is pull a couple of these out so that we could display them in different charts so let me get rid of this and we're gonna do now is give her this console log statement and we're going to put a new property right above this called data and this is going to hold all of our variables so we're gonna have a bunch of arrays with a lot of different data in it the first one is going to be positive cases and we're just going to set that to an empty array we'll have our hospitalization cases we'll also make one up I got to wrap this in a return there we go we'll say in ARR in ICU set that to an empty array ARR on ventilators set that to an empty array and we'll say ARR recovered and the last one ARR deaths I'm gonna go ahead and format this so it all looks good and then what we're gonna do is start pushing data into these different arrays that we have set up so we're gonna say data dot for each we'll say D and now we have our for each all set up and ready to go now the dates that we get back from the API are in a very weird format so what we're gonna do is go ahead and import moments from moments and we're just gonna grab the date here so we're gonna say cons dates equals moments it's the date property and it's in a format of four-digit year two-digit month and two-digit day and we're just going to go ahead and format that for display purposes to month month and date the next thing we're gonna do is do some more object destructuring to pull all of the properties that we want out of the objects that we're looking at so we'll say Const positive hospitalized currently and it might actually help if what we do for this is we just copy and paste that we don't misspell anything so I'm gonna take the dev tools and pin them here and then we're gonna pin this here so basically what object D structuring does is it pulls out these properties without you having to set them equal to anything so we've got positive we're gonna do hospitalized currently we'll just go ahead and paste that in there the next one we have is in ICU so we're gonna grab the in ICU currently next one is on ventilators currently and then we'll grab recovered and we'll grab death as well okay so now we're just going to set this equal to D and we can finally start pushing stuff into our array so we'll say this dot ARR positive push and we'll push an object into it the first property will be the date and then the total which will be positive and we're just gonna go ahead and do this for all of the arrays this done ARR hospitalized push an object of dates total equals hospitalized currently let me shrink this down actually we'll get rid of it for now and actually what I'm gonna do is just copy this and we're just gonna change the properties off of it so we have hospitalize the next one is a our our NICU we have the dates and then in ICU currently and then we have ventilators so AR are on ventilators and we'll push the on ventilators currently we have ARR recovered recovered and then ARR deaths and we'll put death all right so to make sure that everything is coming through correctly I'll just put a debugger here we'll hit save and we got an air of an unexpected debugger so what we'll do is I'll actually just console.log one of the arrays and just make sure that everything's going in correctly ARR positive is not defined ah sorry this dots there we go alright so we've got our console.log being hit right now and it looks like it hit this anyways so we're just gonna go ahead and run it and it's running every single time and everything looks like it's being pushed in correctly so it looks like we're all good to go there so now that we have our data all coming back correctly we need to create our line chart component so I'm going to do is go ahead and close out of this I'm gonna make this full screen again we're gonna go back to our files I'm gonna go to components and I'm going to delete this HelloWorld component and then we're gonna create a new file and we're gonna call it line charts dot view now the way that view charts works is you don't have to define a template tag because the line chart that you have is being rendered through JavaScript and we don't have to create an exact template to render the charts out so we don't need a template tag but we do need a script tag and inside of our script tag at the top we're gonna say import line from view - chart j/s now inside of the export defaults we're going to give it a property called extends and we're going to extend the line chart that we just imported and then we're going to pass some props the first one is going to be a label and it's gonna have a type of string the next property is going to be our chart data so we'll say chart data this is going to have a type of array and then we'll have some options that we're going to pass to it and this will be type object get rid of this down here underneath this prop so we're going to make another view lifecycle hook and it's gonna be called mounted say mounted and this is where we're going to actually render our chart so in here at the top we're going to say const dates and the way that we pass properties into our chart j/s charts is they have to be one-dimensional arrays they can't meet arrays of objects they just have to be flat arrays so we're gonna say this chart data dot map and we're gonna take the date property out of it so say D dot date and then from the API they're sending in the dates in descending order but we want them in ascending order for our charts so we're going to reverse that then we're going to do the same thing for the total so we're gonna say Const totals equals this chart data map so dot map if I can type today there we go dee dee da totals or total and we're also going to reverse that then what we're gonna do is called this dot render charts and we're gonna pass some properties into this and I misspelled rendered there we go okay so the first thing is going to be our labels and that's what we're going to be displaying on our x-axis so say labels and we'll set that equal to the dates then we're gonna pass data set we're gonna say label equals or the property this dot label and I set the data equal to the totals and then outside this we're going to say this dot options and it actually has to be after that curly brace and we'll format that and everything is looking good so we're going to go ahead and save this we are going to go back to our app view file and up at the top here we're gonna say imports line chart from components slash line chart and then inside of our components we need to register it and not line kart line chart and then up the top here I'm going to give this some styling so it looks good we're gonna give this top-level div a class of container and we'll give it a margin top or actually I'll save that for down here we'll say div with the class of the row and we're also going to give this row at margin top five and inside of here is where we're going to display our line charts so before we display them so we do not display empty charts I'm going to say V if a rr+ dot length is greater than zero will display this row and we'll give it a another div inside of it with a class of column or Co l will give it an h2 and this h2 will be positive and then we're going to use our first line chart go ahead and close that and we need to pass in our props that we gave the component so the first one is chart data and we're going to set that equal to a rr+ and the next one is options and we have not set our options yet so for our options we are going to say chart options this is an object we're gonna say responsive and where I said that equal to true Andres that maintain aspect ratio and set that to false so for options we're gonna pass in chart options and then for label and we're gonna pass in positive I'm gonna go ahead and save this and then I'm gonna fire that up and you'll see right here we have our first chart with the positive cases for kovat so I for realized in the video was getting to 20 minutes I decided to speed things up here a little bit essentially what I did was just take that first chart we created I copy and paste it I gave the page a header and then I just assigned the different arrays and labels to each individual chart and I kind of explained what I did but I just didn't want you to be caught off guard when you watch the video okay so what I've done here is I've added an h1 tag at the top I've given it a new row inside of a column with a class of text centered and that's giving us this nice header up here now one other thing I could do is probably give this in margin top of five and you'll see now that the header has moved away from the top so I've copy and pasted all my different charts in here I've changed the header tags the label and the data that is being displayed in the charts but I've saved one so that we can go through it together so what you're going to want to do is grab this top one go ahead and copy it and then I'm gonna place it here at the bottom underneath the recover chart and this one is our last array that we have and it's they are our deaths so we're gonna replace it there we're also gonna replace it as the chart data we'll replace the label as deaths and then we'll go ahead and replace this h2 tag as well we're gonna go ahead and save it and then if we scroll down here at the bottom we see we have all the chart data looks like it's coming through very nicely and these charts are completely fine but they are very very boring so what we're gonna do is head over to our line chart component and we're gonna give it a new property called chart colors and this is going to have a type of object and then down here in the datasets we're gonna pass a couple properties to it before we do that we actually have 2d structure the properties that we're going to be passing so I'm gonna say Const border color points border color points background color and then background color and I'll go through what all of these are doing and we're going to set this equal to this dots chart colors now down here under in this data sets property underneath the totals we're going to import these so I'm just going to go ahead and copy these border color point border color points background color and background color now what each one of these is doing is this border color is what the line is going to be that's the color of the line the point border color is going to be a circle around each point the point background color will be the background color of the points and the background color will be the color that is displayed right here so what we need to do now is go back to I'm going to go ahead and save this we need to go back to our app dot view and we need to set some color properties for each one of these and I've gone ahead and set some color properties I'm just going to paste them in in the interest of time so I'm gonna pass in this positive chart colors and then I'm going to go up to positive I'm gonna put a new property on it called chart colors and set that equal to positive chart colors go ahead and format that so it looks all nice and save it and you'll see now we have some great colors so what I'm gonna do is I'm going to pause the video I'm gonna go ahead and paste in all of my colors that I have okay so I've gone ahead and pasted it in all of my different colors you'll see that now each line chart has a chart colors property and we have all these different colors down here at the bottom so I'm gonna go ahead and save this and you'll see now that each chart has some really nice colors and it just makes the charts look so much better now if you are struggling to find color combinations there's a great website called cooler Co and it's what I used to generate the colors for all of my charts you just launch their color generator and if you just hit the spacebar it goes ahead and gives you all sorts of different color options and you can lock different ones in and it's just a fantastic tool so that's gonna wrap it up for this tutorial if you have any questions comments or concerns go and leave them in the comments section below and until next time happy coding

Channel: Diligent Dev

Views: 31,016

Keywords: vuejs, vue.js, chartjs, chartsjs, chart.js, charts.js, covid-19

Id: cUSfL6MBmlY

Length: 25min 21sec (1521 seconds)

Published: Tue Apr 14 2020