sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor Invest page UI components, add responsive support for graph type selection

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-09-27 18:49:00 +07:00
parent a578bafac6
commit c0d7a4b886
2 changed files with 76 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/dashboard/page.tsx
View File

@ -1,4 +1,4 @@
import { Metadata } from "next"; "use client";
import Image from "next/image"; import Image from "next/image";
import { import {
Card, Card,
@ -10,13 +10,10 @@ import {
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Overview } from "@/components/ui/overview"; import { Overview } from "@/components/ui/overview";
import { RecentSales } from "@/components/recent-sales"; import { RecentSales } from "@/components/recent-sales";
import { useState } from "react";
export const metadata: Metadata = {
title: "Dashboard",
description: "Example dashboard app built using the components.",
};
export default function Dashboard() { export default function Dashboard() {
const [graphType, setGraphType] = useState("line");
return ( return (
<> <>
<div className="md:hidden"> <div className="md:hidden">
@ -163,7 +160,24 @@ export default function Dashboard() {
<CardTitle>Overview</CardTitle> <CardTitle>Overview</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pl-2"> <CardContent className="pl-2">
<Overview /> <Overview graphType={graphType} />
{/* tab to switch between line and bar graph */}
<Tabs defaultValue="line" className="space-y-4 ml-[50%]">
<TabsList>
<TabsTrigger
value="line"
onClick={() => setGraphType("line")}
>
Line
</TabsTrigger>
<TabsTrigger
value="bar"
onClick={() => setGraphType("bar")}
>
Bar
</TabsTrigger>
</TabsList>
</Tabs>
</CardContent> </CardContent>
</Card> </Card>
<Card className="col-span-3"> <Card className="col-span-3">

83
src/components/ui/overview.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"; import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts";
const data = [ const data = [
{ {
@ -53,31 +53,58 @@ const data = [
}, },
]; ];
export function Overview() { interface OverViewProps{
return ( graphType:string;
<ResponsiveContainer width="100%" height={350}> }
<BarChart data={data}>
<XAxis export function Overview(props: OverViewProps) {
dataKey="name" return (
stroke="#888888" <ResponsiveContainer width="100%" height={350}>
fontSize={12} {props.graphType === 'line' ? (
tickLine={false} <LineChart data={data}>
axisLine={false} <XAxis
/> dataKey="name"
<YAxis stroke="#888888"
stroke="#888888" fontSize={12}
fontSize={12} tickLine={false}
tickLine={false} axisLine={false}
axisLine={false} />
tickFormatter={(value) => `$${value}`} <YAxis
/> stroke="#888888"
<Bar fontSize={12}
dataKey="total" tickLine={false}
fill="currentColor" axisLine={false}
radius={[4, 4, 0, 0]} tickFormatter={(value) => `$${value}`}
className="fill-primary" />
/> <Line
</BarChart> dataKey="total"
</ResponsiveContainer> fill="currentColor"
); className="fill-primary"
/>
</LineChart>
) : (
<BarChart data={data}>
<XAxis
dataKey="name"
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
/>
<YAxis
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
tickFormatter={(value) => `$${value}`}
/>
<Bar
dataKey="total"
fill="currentColor"
className="fill-primary"
/>
</BarChart>
)}
</ResponsiveContainer>
);
} }