Now that we have the transactions chart, let's create our category spending chart. And it's going to be in form of a pie actually. So let's copy and paste the chart and let's go ahead and rename this to spending pie. Let me just find where it is. There we go.
SpendingPy. And let's change this to SpendingPy as well. Now we have to go back inside of our DataCharts component. So inside of here we render the chart and now what we're going to do is we're going to add a new div here and add the spending pie like this. Let's give this a class name of col-span1, lg-col-span3, xl-col-span2 Like that.
And the data that we are going to pass will be data question mark categories. Like this. So right now this is not exactly going to work because we are using the variants from the chart. So let's go inside of the spending pie and let's modify everything we need one by one. Starting with the types.
So the type inside of here is going to be different. So the previous one had date, income and expenses. The new one will have just name and value of the category. Now let's go ahead and let's modify the default value of the chart type to be pi like this. And let's go ahead and let's add the icons we are going to need here.
So I'm going to remove this stuff. We are only going to need a file search. Everything else can be removed. So we're going to have a pie chart, a radar and a target. Those are the icons we are going to use.
So in the first select item, we are going to have pie and a pie chart and this will say pie chart icon. Then in the second one we're going to have a radar and this will be a radar chart. Actually I think it's a radar icon yes so just radar chart here And the last one will be radio. And this will be our target icon. And this will be a radial chart right here.
Now let's go ahead and let's just modify the title here. So this will say categories like this. There we go. And this for like for empty data inside can stay exactly the same. I don't think we have to change anything here.
And now let's go ahead and let's change this to be Pi. Let's change this to be Radar and let's change this to be Radial. Like this. And now instead of having a line variant we're gonna go ahead and we're going to have a Pi variant. So let's go ahead and let's create that.
So not in the UI but in the components create a Pi variant.tsx Let's import everything we need from ReCharts right here and let's also add our format percentage icon here. Then let's define a constant with our colors. So each of our categories are going to have a different color here. And remember, we only map four categories. Everything else is other.
Right. And we copy and paste the props from our spending pie. So it matches this structure right here. Let's go ahead and let's export const pie variant here and the structure, the data, which matches the props. And my apologies for my pronunciation of variant and variant.
I know I keep mixing it all the time. Let's go ahead and let's return the responsive container. We're going to give it a width of 100% and a height of 350. And now I'm going to add the pie chart inside and let's go ahead and let's add the legend like this. And now what I want to do is go inside of pie chart and render the pie it's not gonna be a self closing text, it's gonna be like this and we're gonna go ahead and give it some props.
So data will be data, CX will be 50%, CY will be 50%, so that's the positioning. Outer radius will be 90, inner radius will be 60. Padding angle will be 2 and fill it's going to be this color right here. Data key will be value and label line will be false. And inside of the pie we are going to iterate over data using data dot map we are going to skip over the entry and just focus on the index and we're going to render itself closing the cell component which will have a key which will be cell-index and fill will be colors, index, mod, colors, length.
So we get a random color like this. There we go. Let's go ahead and try this out now. So I'm going to go back to the spending pie and I'm going to import the pie variant from dot slash pie variant right here. Let me change this to components and remove the line variant because we don't need it here at all.
Components, pi variant, looks like I don't have that. Pi variant right here. Did I forget something? Expert const pi variant components. A typo here.
All right. Let's try it out. And there we go. So rent, utilities, clothing, other, perfect. But now I want this to improve the label and to add a tool tip.
So for that, let's go back inside of the legend component here. And we're gonna go ahead and give it some props first. So we're gonna give it a layout of horizontal, a vertical align of bottom, a line of right and icon type of circle. So there we go, you can see the changes happening now. And now we're gonna go ahead and manually modify the content inside.
So go ahead and destructure the payload here. We're gonna give it a type of any. And we're gonna go ahead and return an unordered list with a class name of flex flex call whoops flex flex call and space y 2 and then inside we're gonna go over payload dot math We're gonna get entry which is any and index which is a number. We are going to immediately return a list element with a key. Open backticks item dash index.
So that's going to be the first attribute. And then we're gonna have a class name for this list flex items center let me scroll up so you can see and it's gonna have space x of two inside of the list we're gonna have a span element which will very simply be a self-closing tag in fact and it's going to have a class name of padding2, my apologies, size2 and rounded full and then it's going to have a style background color entry.color. So whenever you're doing dynamic colors, do it inside of style. Don't do it inside of class name here because Tailwind has a just-in-time compiler. So stuff like this won't work.
And now let's go ahead. Actually, that's it for this span. Now we open up a div and we write a class name here, space X one, and we write another span in which we render entry dot value. And we give this class name a text small and text muted foreground. And then we have another span where we render the format percentage, which we've added an import for in the beginning.
Entry.payload.percent times a hundred like this and let's give it the class name of text small and I think this will now be an improved component right here. Let's refresh to take a look. There we go. So this now looks better like that. And it looks like this on mobile.
Now let's create a custom tool tip here. So we're gonna go ahead and copy the custom tool tip and we're gonna rename this to category tool tip. So it's gonna be very similar. We're gonna rename this to category tool tip Right here. The same logic is going to be here, but the values are gonna be a bit different.
So we're just gonna have the name from payload 0 payload dot name and then we're gonna have value payload 0 dot value in this first argument here, we're going to render the name and then inside of here we're just going to render the expenses, right? So you can remove this first div and just leave the expenses and you're just going to render the value times minus one like this and then go back inside of the pie variant and let's go ahead and let's add a tooltip component with content category tooltip From .slash category tooltip. Let's try it out now. So when I hover, there we go. You can see nice expenses, which happened here.
Perfect. Now we have to add more variants for our spending pie right here because these two are not compatible. So let's go ahead and let's create inside of components, radar variant, the TSX. And this one is going to be very simple. So add these imports from recharts and go ahead and give it the same data structure and then inside of here we export const radar variant with the structure, the data.
Inside of here, we are very simply going to return the usual responsive container here, like we do. And inside, we're going to render the radar chart component. Let's go ahead and let's give it a CX of 50% a CY of 50% an outer radius of 60% and a data of data. Inside we're going to render a polar grid, a polar angle axis, which is going to have a style of font size 12 pixels and a data key of name of the category. And then we're going to have a polar radius axis, which is just going to have the font styles.
And lastly, we're going to have a radar itself with the data key of value. Stroke is going to be our usual blue color. Same with fill. And we're going to have fill opacity 0.6 like this. So this is our radar chart, quite simple.
Let's go back inside of the spending pie and let's use the radar chart, sorry, radar variant from .slash radar variant right here. There we go. And let me just change this to use the components import. Great. And there is one more that we need here.
So first of all, let's check out the radar variant. So when I switch the radar, there we go. This is how that looks like. Last one we need is the radial chart. So for that, we can copy the pie variant.
So let's copy and paste that and let's call it radial variant. Let's go ahead and rename this to radial variant. The colors can stay the same. The data prop is exactly the same. But instead of having cell and pi and pi chart here, we're gonna have the following.
We're gonna have a radial bar and we're gonna have the radial bar chart. And now let's go ahead inside of here and let's use the radial bar chart. We're gonna go ahead and give it the usual CX and CY props except this one is gonna be 30% simply because it's somehow weirdly positioned here. Let's go ahead and let's give it a bar size of 10. Let's give it an inner radius of 90 and an outer radius of 40%.
And for the data, we're gonna go ahead and iterate over the items. So data.map, we get the item, the index, and this is how we're going to fill it because that's the only way you can do it because you don't have the individual cell components as you do inside of your usual pi variant right so we don't have pi here so we can remove this entire thing and inside of here it's the radial bar chart which is ending. So let's go ahead inside of the radial bar chart just above our legend here and let's add the radial bar which is a self-closing tag. And inside of here, we're gonna go ahead and style the label so it fits our font size, our white color, and the position will be inside start, which is a specific thing for this radial bar. And we're gonna give it two more props background and data key will be value so our value right here and I don't know if we have to modify the legend at all I think the legend can work exactly the same oh except yeah we are not exactly gonna work with, we're not gonna work with percentages here.
We're instead going to work with values. So this is what we're going to do. Let's go ahead and change this from, do not use format percentage, but instead format currency like this. So this will be format currency and this will use entry payload value. Like this, and this will stay entry dot value.
Let's see how this looks like. Let's go inside of the spending pie and add the radial variant. So let me just change this and let's remove the area variant and the bar variant. So we just have the compatible ones. Great.
Let's try them all out. So we have the pie, we have the radar and let's see the radial one. There we go, right? So this is why I didn't want to add percentages because I think we have percentages written out inside of these right here. Or actually no, these are the values, right?
So if you want to, you can use percentages, but I kind of feel like you can visually see them here. I don't know. I think it's just fun to see different variables here. So however you want to, you can just copy what you had from the chart. And let's see if the tool tip is working.
So the tool tip here is not working. So I think it's not supported at all. So go inside of the radial variant and remove the tool tip. I don't think we need it at all. And remove the tooltip from here.
Great, so that wraps up our charts. Now we have to just add the loading variants. So we have to go back inside of our spending pie and we have to create the spending pie loading. So let's go ahead and let's import the skeleton from UI skeleton and let's import loader2 from Lucid React, right? So I copied and pasted this from my original code to save some time as we are getting close to the 12 hour mark here.
So spending pie loading has a card which is exactly the same as our card right here, right? So I just copied and pasted from there so you can pause the screen and create the spending pie loading element make sure you add an import for skeleton and for loader too so I added loader too and here is my skeleton great so let's save this and now we also need to do that inside of our chart component. So it's very very similar, it's actually exactly the same. So you can copy this, go inside of the chart and paste it here. Again, make sure you've imported the skeleton and the loader to from Lucid React.
There we go. So again, I'm gonna pause the screen. So you pause the screen and you can see exactly what I've written here. As I said, I think it's exactly the same. Yes, there are no differences, I think.
Great. So now let's go ahead and let's go inside of our data charts right here which are rendering the spending pie and the chart and let's improve this loading right here so we're gonna go ahead and we're going to copy these two here but instead of loading a chart we're going to load the chart loading here and instead of loading the pie we're going to add the spending pie loading here like this So let's go ahead and change these two components spending by like this. And let's try this out now. When I go ahead and refresh this, there we go. We have this beautiful loading elements all throughout our page.
Perfect. We have changeable graphs on all sides here. Amazing. What we're gonna do next is we're gonna build the filters so that we can finally modify the data by different dates and accounts. Great, Great job!