In order to display the charts, we're going to use read charts, library.
And if you want to start using it in your own projects, just go with NPM.
I and Richards again, Please keep in mind that of course in this project you need to install in the
client.
Now if you want to take a look, what do we have as far as the docs?
Just follow the link.
They have a nice guide.
They have nice API.
But to tell you honestly I actually.
Find this one the most useful one.
Essentially, you will right away have the examples of a bunch of charts.
This is what I used in order to set up the following charts.
I guess let's just start working in the area chart.
The main idea is that we import quite a few components from the charts library and then we just construct
the chart.
Now, in order to speed this up, I will.
Grab those imports and then let's navigate to area chart over here.
We want to copy and paste.
Remember, we're still grabbing the data, correct?
That's the prop.
And in there we have that count.
And I believe the second one is date.
So let's grab the data over here.
And as far as the actual chart, well, I want to set up, my one's responsive and therefore I'm going
to go with responsive container again, that's the component which is provided by the library, the
rich one, and I'll set my one equal to width 100% and then I'll hardcode the height and I'm going to
go with 300 pixels.
Then inside of the responsive container we want to set up area chart.
Component.
Then we need to pass in the data.
And this is why we were so specific in the stats route, because the rich library is actually looking
for a very specific syntax.
So we go here with data equals to a data.
Then I do want to add some margin.
So technically this is a CSS thing that I'm doing right now and I'm going to set it equal to 50.
And then I want to set up the closing tag as well.
Now inside of it, let's go with the grid one.
So we're looking for this component and we'll set up stroke dash array as three and three.
So let's go with the component.
Stroke dasharray.
And we'll set it equal to three and three.
This one, we self close.
Then we have x axis.
And essentially, in my case, I want to set my date on the x axis.
That's why I'll go here with the component again.
X axis component and then date a key prop.
I'll set it equal to my date.
So basically I pass here the data in there.
There is a date and I just say, Hey, listen, for the x axis, a key is going to be date again.
We self close it and then for the y axis actually don't want decimals.
So remember in the y axis we display how many applications and I don't want like two point something,
I actually just want round numbers and therefore I'm going to go with y axis.
That's my component.
Allow decimals and we'll set it equal to false.
Let's self close this one as well.
Then we have a tooltip.
Again, we close this one.
And then lastly, we have the area.
That's the component as far as type.
I'm going to go with monotone.
Then data key.
And in this case I'm going to go with Count.
And at the very end, I also want to provide well, which colors are we going to use for the area?
So I'm going to go here with stroke and I'll set it equal to hashtag to KB.
One BC.
And then also I'm going to go with Phil.
And this one will be equal to hashtag b, e, f, and then a f d.
Let's save it.
Let's navigate to a browser and it looks like I have a big fat error.
Why?
Well, because I have component name and basically I also have component that's coming from the Richards.
And of course the value is exactly the same.
So in order to fix it, here's what we want to do.
Basically, I'm going to go with area chart and I'm just going to add component over here.
And I also want to export the area chart component.
Now, we don't need to change the logic anywhere else since we're using a default export.
So now let's navigate to a browser and check it out.
Once I click on area chart, this is what I'm going to see on the screen.
So again, we have the color values for the fill and stroke.
And also notice how in here essentially I displayed the last month all the way back to the February
and we can right away also set up the bar chart because again, the idea is going to be exactly the
same.
Of course, the values are going to be a little bit different.
So for starters, let me navigate to a Readme here.
Let's scroll down.
We're looking for these imports here.
Then we want to navigate to a bar chart component.
And this is the case where essentially I want to select all of these instances here and let's just rewrite
it as bar chart.
Component.
Now let's set up those imports from Rich art library.
Remember, we're still grabbing the data, so that doesn't change.
And as far as the return, we want to go again with responsive container, which is going to be equal
to 100.
So let's go with under here.
Height.
Yep, still the same.
So I'm going to go here with 300 inside of the responsive container.
We want to set up the bar chart.
In this case, data is equal to data.
Then same deal margin is equal to object, and we'll set it equal to top 50.
Then let's close it.
And then inside of it we're going to go with the grid, then stroke dash array again.
We'll set it equal to three and three.
Then let's self-close this one then.
X axis again is going to be date and Y axis is going to have allowed decimals equals to false.
So let's set it up.
X axis.
Data key is equal to date.
Let's close this one on that y axis.
It's going to be allowed decimals and we'll set it equal to false.
Let's close that one as well.
And then we want to add the tooltip.
And lastly, let's add the bar.
Basically for bars, we want to add the component data key.
In my case, it's going to be equal to account.
Then fill basically what's going to be the color.
In my case, I'm going to go with hashtag.
To KB and then one BC.
And then lastly, we can also provide the bar size.
And in my case, I'm going to go with 75.
Let's save this one.
And if everything is correct.
We should see this result in the browser.
So let me refresh.
So that's going to be my bar chart.
And if I click on area chart, this is going to be my result.
And with this in place, we can set up the CSS, which is going to be optional for the charts container,
and after that we'll complete the all jobs page functionality.