Now that we have our data cards, it's time to create some charts here. But just before we do that, I want to do a slight modification on this label. Go inside of the data card component, find the format percentage and Remember, we have the options to add the prefix, but I forgot to use that. So I'm going to go ahead, add a comma, add prefix, true. And there we go.
Now it will indicate an increase, like this. Let's go ahead back inside of our app folder, dashboard page.psx, and below that add a data charts like this. We're going to create a new component called data charts inside of the components folder datacharts.dsx. Let's mark them as use client and let's go ahead and export const data charts here. Let's go ahead and let's fetch the summary again.
So we are going to extract the data and is loading from use get summary and now let's go ahead and let's prepare if is loading here with a very simple return div loading we're gonna later use skeletons For now let's go ahead and let's open up a div and this div will also be a grid. LG grid calls 6 and gap of 8. In the first one we're gonna write colspan 1 on LG colspan 3 on Excel colspan 4. And inside we're gonna have our chart component with data which is going to be data?days like this. There we go.
Now let's go ahead and set up the components and let's create our chart.dsx component. So let's go ahead and define the props for this. So it's going to have an optional data, which can have data, a sorry, date, which will be a string income, which will be a number and expenses, which will be a number. And it's going to be an array of those. Let's export const chart here.
And let's destructure the props inside. So we're going to have data and we're going to default it to an empty array. And let's return a div chart. Let's go back inside of data charts and let's import the chart from ./.chart or from components chart. Let's go back inside of app dashboard page and let's import data charts from components data charts and you can now safely refresh your localhost here and you should have a text here which says chart.
Now let's develop the chart component. So we're going to have to use the recharts library. So let's go ahead inside of our terminal and let's do bun add recharts. Like this. Alright, let's just wait a second for this to be added.
Let's run our app again, like this. And first of all, let's go ahead and let's go inside of the chart component here and let's add everything we need from our components card, right? So card header, card title and some other stuff here. Great. And now let's go ahead and let's create this.
So this is going to have a card with a class name of BorderNoneDropShadowMD Sorry SM. Then we're going to have a card header. Which will have a class name of FlexSpaceY2. On large it's going to have space y0 on lg it's going to be flex row on lg it's going to be items center and justify between will be on both. Inside of here we're going to have a card title which will be transactions.
Like this. So this can stay as it is now. And let's just give this card title a class name of text, extra large and line clamp one. Like this. I'm gonna add a to do, add select.
Great. Outside of the card header, we're gonna add the card content. Let me just refresh my localhost again. Let's see what's going on here. There we go.
So we have the transactions card here. Now inside of the card content here, we are first going to do the empty state. If the itadof length is 0, in that case, we're going to go ahead and we're going to show a div with a class name flex flex call gap y4 items center justify center and we're going to fix the height to 350 pixels. And inside we're going to add a file search icon from Lucid React. We're going to give it a class name of size 6 and text muted foreground.
And we're going to add a paragraph here, no data for this period. And this paragraph is going to have text muted foreground and text small, like this. And then we're going to have the else clause here. And we're going to have our area variant here. Let's go ahead and let's pass in the data as the prop data here so now we have to create the area variant option here So let's go ahead inside of components and create area variant dot psx and inside of here let's go ahead and let's import everything we need from the recharts library, which we have just added in our project.
So tooltip, x-axis, area chart, area responsive container and Cartesian grid. And we're also going to need the date FNS format. So let's copy and paste the props from our chart, right? So they need to be the same here. We're accepting the same data, but this time the data here is required.
And let's export const area variant here. The structure, the data, passing the props, and go ahead and return the following. Responsive container with a width of 100% and a height of 350 pixels. Add an area chart which we've added an import for and give it the data. As you can see there are no errors because this data has the proper types for this.
Add a cartesian grid here and give it a stroke dash array of 3 space 3. Then add depths here so this will be some SVG elements. Linear gradient. Give this linear gradient an ID of income. So it matches this, well, this value, right, income.
It's gonna have X1 of zero. So I'm not exactly sure what these values do. This is from the documentation of recharts right y1 of 0 x2 again of 0 and then it's going to have a y2 of 1 like this inside we're going to have a stop element, which will be a self-closing tag. Offset here is gonna be 2%. Stop color is gonna be 3D 8 2 F and 6.
Stop opacity will be 0.8. We're gonna copy and paste this. The lower one Stop Opacity is gonna be 0 and the offset here will be 98% Then we're going to copy and paste the linear gradient here and this one will be for expenses. And these values x1, y1, X2 and Y2 will stay the same. The offset will stay the same here.
But we are going to change to a different color. F4, 3, F5, E. And the opacity can stay the same. And then outside of Depths, we're going to add the X-axis component, which we already have imported. Give it an axis line of false, a tick line of false.
This is going to represent the data key date from our option here. So this will represent the dates. We're going to have the tick formatter to get the value and we're going to format it. So this format comes from date FNS, right? So we're going to go ahead and format the value in day and then the month.
Style is going to have font size of 12 pixels and tick margin is going to be 16. Let's see if we can already render this. So area variant from .slash area variant or from components area variant. Let me just move this to the top here. So let's see, can we already maybe see something?
We cannot but we can at least see the grid and we can see our date range here at the bottom. So let's continue in the area variant here. So now what I want to add after the x-axis is the area itself. So type will be monotone here. Data key will be income.
Stack ID will be income. Stroke width will be 2. Stroke will be the blue color. So let's go ahead and give it here. Like this.
Bill will be URL and then hashtag income. So just make sure you didn't misspell income anywhere here. Alright, and class name will be Drop Shadow SM, like this. Then copy and paste the area and paste it again. This time we are going to represent the expenses and use the red color from above.
There we go. So you can see how this looks now. And now we have this kind of a weird look here because the expenses are shown Negative like this if you like this, that's fine, but we can change that by going back inside of our app API the route summary and find the days There we go active days and in the expenses we're not just going to render transactions dot amount instead we're gonna do then let me just zoom out so you can see, then, and then we're going to wrap the whole thing in absolute. So we don't care if it's in negative, right? So just wrap this transactions.amount in absolute and save this.
And let's see the difference now. And I refresh here. I think it's going to look a bit more pleasant. There we go. Because now you can see the actual, you know, difference between the two.
So you choose how you like it. Let's go back inside of the area variant here and there's only one thing missing here and that is the tooltip component. So let's go ahead and let's create the custom tooltip which we are going to reuse. CustomTooltip.tsx here. Let's go ahead and let's import the format function.
Let's go ahead and let's import the format function. Let's go ahead and let's import the format currency. And let's go ahead and go inside of our terminal and let's do bonnex chatCNUI latest add separator. And then let's go ahead and run our app again. Let's go ahead and let's import the separator component and let's export const custom tool tip here.
Active and payload. And it's simpler to just give this a type of any. And let's go ahead and check. If it's not active, we are not going to display the tool tip at all. And now let's go ahead and let's extract the values from the payload here.
So date, income and expenses. So the reason I know exact values which are going to be here are because of the documentation of recharts, right? So the tooltip works with this payload prop. You're gonna see where we are going to render the tool tip later. And this is how you access the date and this is how you access the income because it's the first in the array and then the expenses.
And now let's go ahead and let's return a div with the class name, Rounded, SM, BG, White, Shadow, SM, Border, Overflow, Hidden. And let's go ahead and let's actually add the tooltip so we can see what we are doing. So just after the X axis I'm gonna add the tooltip component and we already have this imported right here but now we're gonna add our custom tooltip import right here at the bottom. So make sure you've added the export const custom tooltip in the components folder. And now what we are going to do is we are going to render that in the tooltip so content like this so the props will be transferred now here so right now you're not seeing anything right but the tooltip does exist You're gonna start seeing it the more we code here.
So let's go ahead and first add a div here with a format date and give it a format of months, day, oops, day, and then a year. Let's give this a class name. Text small padding of 2, px of 3, background muted and text muted foreground. And then let's add a separator component then let's open up a div with the class name p2 px3 space y1 then open up a div again with a class name flex-items-center-justify-between and gap-x4 and now inside of that add another div with a class name of size 1.5 BG blue 500 and a rounded pool. And this will actually be a self-closing tag.
And next to it, you're going to add a paragraph income. And this will have a class name of text small and text muted foreground, like this. And then outside of this div, you're going to add a paragraph, which will format the currency income. And give this a class name of text small, text right and font medium like this. Then copy and paste this exact div.
Let me just see exactly what we have to copy and paste, just a second. So I made a small mistake here. Inside of this div with flex item center, justify between and gap x4, add another div here and that div will encapsulate this income here like this and then we're ending this div here there we go so my mistake. Let's now indent all of this like that. All right, let's do this and this and this and this and this, I think.
And then this new div will have a class name of flex-item-center-and-gap-x2. And let's just see if this is now working or not. So if I refresh, yeah, make sure you refresh because we've shut down our server here. So let's see the result now. All right, so we are seeing something, but it looks like we have a small little bug here.
So let's go inside of the custom tool tip and I have a typo. So BG white, like this. There we go. Let's hit now. There we go.
Now this looks fine. And let's also add the expense if it exists. So what we're going to do is we are going to copy this entire thing, which represents the income here. So let's add it and this will be the expenses of that day. This will be BG rows and this will use the expenses times minus one.
So it shows them in a negative way. If you didn't change in the summary, if you use absolute, then you have to multiply it by minus one here. If you don't use absolute, then you don't have to do this. So when you take a look now, there we go. You can see your expenses and you can see your income in this beautiful tooltip.
Perfect. So now what I want to do is I want to go back inside of my chart component and I want to create two more variants here. So first I want to create a bar variant. So let's go inside of components here. Bar variant.csx Let's add the imports we need.
So similar to the one in ARIA variant. So we need these from recharts and we need format from date FNS. The props are exactly the same and we are also going to reuse our custom tooltip. So this is the basic setup. Now let's export const bar variant here.
Props and let's destructure the data. Let's go ahead and let's return our responsive container with a width of 100% and a height of 350. Let's do bar chart here with data data and now we add the Cartesian grid again with a stroke dash array of 3 and 3 and then we add an x-axis here and we can actually, I think, copy from area chart the exact props here, right? So we want the chart to look exactly the same. And then we also add the tooltip inside like this.
So a tooltip with our custom tooltip. And then we have a bar. So bar will have a data key which will be income and the fill is going to be our blue hex color here. And class name will be drop shadow SM. Then go ahead and copy and paste this bar and the other one will represent the expenses and we'll use our red color and that's it.
So a simpler chart here, just make sure your income and expenses are not misspelled from here. And you can try it out now. So I'm gonna add the bar variant here, Passing the data to be data and comment out the area variant here and change this to use components. And there we go. You can already see it right here.
This is how it looks like and we still have the reusable component tool. Great. And now I want to create the line variant. So let's go ahead and let's copy and paste the bar variant and let's rename it line variant here. Let me just find it.
Line variant. The props are exactly the same here. But we do need a line chart instead of bar chart and instead of bar we need a line and I think that's the only change here. So inside of here we are using the line chart for this. The x-axis stays the same And now lines are going to be a little bit different.
So this will be line, data key is the same. And we're gonna add dot pulse. And This is no longer fill, instead it is stroke. And we're gonna have stroke width to be 2. So let's go ahead and do the same changes here.
This is a stroke, this is a line. Dot is going to be false. And we are missing the stroke width there we go and this is a line chart so slight modification and let's export this as line chart as well don't forget that actually not line chart, my apologies, line variant or variant now let's go back inside of our chart and let's go ahead and copy and paste this and from line variant we are importing line variant there we go let's try that out so I'm gonna comment this out and I'm gonna add the the line variant with data data. Let's see how that looks like. And there we go.
This is our third line variant. And now we're gonna create a component which will enable us to switch between these three. Let's go and be and stay inside of this chart component here. And let's go ahead and let's import useState from react. And then inside of here, I'm gonna go ahead and define chartType and set the chartType from useState.
And by default is going to be area. Then let's add on type change here, type string and let's go ahead and say set chart type to be the type and I'm going to add a to do here, add paywall So later this is going to be a paywall. And now let's go ahead and let's import everything we need from our component library. So I'm going to do that just above the card here. So we need select, select trigger, select content, select value and select item from components UI select.
Now that we have that, let's go ahead and let's create our select. Right here where we've added a to-do next to the card title. So instead of here I'm going to add the select component. I'm going to give it a default value of chart type on value change is going to be on type change. And inside of it we're going to use a select trigger which will have a class name lg with auto let me just scroll up a bit height is going to be 9 rounded md and px of 3 And inside we're going to use the select value, which is a self-closing tag.
And give it a placeholder of chart type. Then we're going to add a select content here and inside of here we're going to add our select item this select item will have a value of area we're going to open up a div here with a class name flex and items center and each of our items is going to have a little icon so let's add area chart from Lucid React and let's go ahead and give it a class name size 4, margin right of 2 and shrink of 0 and let's go ahead and give it a paragraph area chart and let's give this a class name of line clamp one like this. There we go. So now you can see that we have a cool option of area chart right here. Great.
What I want to do now is I just want to kind of separate this chevron down from my main content here because we now have this little icon here. So we can do that by going directly inside of the select trigger component. So that is inside of our components folder UI, our select components. So not the react select, which is outside of the UI folder. Make sure you are inside of the UI folder and find the select trigger here and find the chevron down and simply add a margin left of two here and then that's going to look a bit nicer.
All right, let's see that. There we go. That looks better. Now, let's go ahead and let's add the rest of the items here. So I'm going to go ahead and copy and paste the select item.
This one is going to be for line and it's going to say line chart and it's going to use the line chart from Lucid React and the last one is going to be the bar so let's copy and paste the select item this will be bar option and this will be bar chart 3 from Lucid React and it's going to say bar chart like this Great! And now what we can do is we can modify this so exactly the same as it was but we're gonna add a fragment here and we're gonna add conditionals so if chart type is line we're going to render the line variant with the data let me see if I have too many spaces here, I think I do if our chart type is area we're going to render the area variant if our chart type is bar we're gonna render the bar variant So let's go ahead and check this out. Right now it's area chart. If I click on line it will become a line. If I click on bar it will become a bar.
Amazing, amazing job.