diff --git a/package-lock.json b/package-lock.json index 461b0fc..31baf1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "@tanstack/react-query": "^5.59.0", "@tanstack/react-query-devtools": "^5.59.0", "b2d-ventures": "file:", + "chart.js": "^4.4.6", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "1.0.0", @@ -43,6 +44,7 @@ "next": "^14.2.15", "next-themes": "^0.3.0", "react": "^18.3.1", + "react-chartjs-2": "^5.2.0", "react-countup": "^6.5.3", "react-dom": "^18", "react-hook-form": "^7.53.0", @@ -717,6 +719,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@next/env": { "version": "14.2.15", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz", @@ -3194,6 +3201,17 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chart.js": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz", + "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -7650,6 +7668,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-countup": { "version": "6.5.3", "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz", diff --git a/package.json b/package.json index eaf2743..0d07a28 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@tanstack/react-query": "^5.59.0", "@tanstack/react-query-devtools": "^5.59.0", "b2d-ventures": "file:", + "chart.js": "^4.4.6", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "1.0.0", @@ -44,6 +45,7 @@ "next": "^14.2.15", "next-themes": "^0.3.0", "react": "^18.3.1", + "react-chartjs-2": "^5.2.0", "react-countup": "^6.5.3", "react-dom": "^18", "react-hook-form": "^7.53.0", diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx index 1922125..5fc290c 100644 --- a/src/app/portfolio/[uid]/page.tsx +++ b/src/app/portfolio/[uid]/page.tsx @@ -1,6 +1,7 @@ import { Overview } from "@/components/ui/overview"; import { createSupabaseClient } from "@/lib/supabase/serverComponentClient"; import { getInvestorDeal } from "@/lib/data/query"; +import PieChart from "@/components/pieChart"; export default async function Portfolio({ params, @@ -8,6 +9,8 @@ export default async function Portfolio({ params: { uid: string }; }) { const supabase = createSupabaseClient(); + const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; + const dayOfWeekData = daysOfWeek.map((day) => ({ name: day, value: 0 })); const { data: deals, error } = await getInvestorDeal(supabase, params.uid); if (error) { console.error(error); @@ -23,6 +26,7 @@ export default async function Portfolio({ return date.toLocaleString("default", { month: "long", year: "numeric" }); }; + // only use deal that were made at most year ago const overAllGraphData = deals ? deals .filter((item) => new Date(item.created_time) >= yearAgo(1)) @@ -45,49 +49,57 @@ export default async function Portfolio({ ) : []; -const threeYearGraphData = deals - ? deals - .filter((item) => new Date(item.created_time) >= yearAgo(3)) - .reduce( - (acc, item) => { - const year = new Date(item.created_time).getFullYear(); - const existingYear = acc.find( - (entry: { name: string; }) => entry.name === year.toString() - ); + const threeYearGraphData = deals + ? deals + .filter((item) => new Date(item.created_time) >= yearAgo(3)) + .reduce( + (acc, item) => { + const year = new Date(item.created_time).getFullYear(); + const existingYear = acc.find( + (entry: { name: string }) => entry.name === year.toString() + ); - if (existingYear) { - existingYear.value += item.deal_amount; - } else { - acc.push({ name: year.toString(), value: item.deal_amount }) - } + if (existingYear) { + existingYear.value += item.deal_amount; + } else { + acc.push({ name: year.toString(), value: item.deal_amount }); + } - return acc; - }, - [] as { name: string; value: number }[] - ) - : []; + return acc; + }, + [] as { name: string; value: number }[] + ) + : []; + const getDayAbbreviation = (dateString: string | number | Date) => { + const date = new Date(dateString); + return date.toLocaleString("default", { weekday: "short" }); + }; - - - // const graphData = [ - // { name: "October", value: 500 }, - // { name: "October", value: 500 }, - // { name: "November", value: 500 }, - // { name: "December", value: 500 }, - // { name: "January", value: 500 }, - // { name: "Febuary", value: 500 }, - // { name: "March", value: 500 }, - // ]; + if (deals) { + deals + .filter((item) => new Date(item.created_time) >= yearAgo(1)) + .forEach((item) => { + const day = getDayAbbreviation(item.created_time); + const dayEntry = dayOfWeekData.find((entry) => entry.name === day); + if (dayEntry) { + dayEntry.value += item.deal_amount; + } + }); + } return (
+ {/* {JSON.stringify(params.uid)} */} {/* {JSON.stringify(deals)} */} - {/* {JSON.stringify(deals)} */} + {/* {JSON.stringify(dayOfWeekData)} */} + {/* {JSON.stringify(overAllGraphData)} */} {/* {JSON.stringify(threeYearGraphData)} */}
+
+ {/* */}
); } diff --git a/src/components/pieChart.tsx b/src/components/pieChart.tsx new file mode 100644 index 0000000..be988fb --- /dev/null +++ b/src/components/pieChart.tsx @@ -0,0 +1,33 @@ +import { Pie } from "react-chartjs-2"; +import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; + +ChartJS.register(ArcElement, Tooltip, Legend); + +interface PieChartProps { + labels: string[]; + data: string[]; + header:string +} + +const PieChart = (props: PieChartProps) => { + const chartData = { + labels: props.labels, + datasets: [ + { + label: props.header, + data: props.data, + backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"], + hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"], + borderWidth: 1, + }, + ], + }; + + return ( +
+ +
+ ); +}; + +export default PieChart; diff --git a/src/components/ui/overview.tsx b/src/components/ui/overview.tsx index 8c4cf9f..a912c7b 100644 --- a/src/components/ui/overview.tsx +++ b/src/components/ui/overview.tsx @@ -1,6 +1,15 @@ "use client"; -import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts"; +import { + Bar, + BarChart, + ResponsiveContainer, + XAxis, + YAxis, + LineChart, + Line, + Tooltip, +} from "recharts"; // const data = [ // { @@ -77,6 +86,14 @@ export function Overview(props: OverViewProps) { axisLine={false} tickFormatter={(value) => `$${value}`} /> + `$${value}`} + contentStyle={{ + backgroundColor: "#f5f5f5", + borderRadius: "5px", + color: "#000", + }} + /> `$${value}`} /> - + `$${value}`} + contentStyle={{ + backgroundColor: "#f5f5f5", + borderRadius: "5px", + color: "#000", + }} + /> + )}