Skip to content

Commit

Permalink
old commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ayothegod
Ayothegod committed Dec 4, 2024
1 parent 8ee0c32 commit cb4b312
Show file tree
Hide file tree
Showing 10 changed files with 273 additions and 4,938 deletions.
126 changes: 69 additions & 57 deletions client/src/components/pages/transaction/CategoryPieChart2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,108 @@
"use client"

import { TrendingUp } from "lucide-react"
import { LabelList, Pie, PieChart } from "recharts"
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { LabelList, Pie, PieChart } from "recharts";

import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
} from "@/components/ui/card";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
} from "@/components/ui/chart";
import { Skeleton } from "@/components/ui/skeleton";
const chartData = [
{ browser: "bills", transactions: 275, fill: "var(--color-bills)" },
{ browser: "safari", transactions: 200, fill: "var(--color-safari)" },
{ browser: "firefox", transactions: 187, fill: "var(--color-firefox)" },
{ browser: "edge", transactions: 173, fill: "var(--color-edge)" },
{ browser: "other", transactions: 90, fill: "var(--color-other)" },
]
{ categoryName: "funds", transactions: 1, fill: "hsl(var(--chart-4))" },
{ categoryName: "beg", transactions: 1, fill: "hsl(var(--chart-5))" },
{ categoryName: "null", transactions: 4, fill: "hsl(var(--chart-3))" },
];

const chartConfig = {
transactions: {
label: "transactions",
},
bills: {
label: "Bills",
beg: {
label: "beg",
color: "yellow",
},
safari: {
label: "Safari",
funds: {
label: "funds",
color: "green",
},
firefox: {
label: "Firefox",
null: {
label: "null",
color: "blue",
},
edge: {
label: "Edge",
color: "red",
},
other: {
label: "Other",
color: "purple",
},
} satisfies ChartConfig
} satisfies ChartConfig;

export function CategoryPieChart2() {
export function CategoryPieChart2({
data,
isLoading,
error,
}: {
data: any;
isLoading?: boolean;
error?: string;
}) {
return (
<Card className="flex flex-col">
<CardHeader className="items-center pb-0">
<CardTitle>Pie Chart - Label List</CardTitle>
<CardDescription>January - June 2024</CardDescription>
<CardTitle>Transaction Category</CardTitle>
</CardHeader>

<CardContent className="flex-1 pb-0">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
>
<PieChart>
<ChartTooltip
content={<ChartTooltipContent className="" nameKey="transactions" hideLabel />}
/>
<Pie data={chartData} dataKey="transactions">
<LabelList
dataKey="browser"
className="fill-background"
stroke="none"
fontSize={12}
formatter={(value: keyof typeof chartConfig) =>
chartConfig[value]?.label
{isLoading ? (
<div className="py-8 flex items-center justify-center">
<Skeleton className="h-48 w-48 rounded-full bg-neutral-200" />
</div>
): error ? (
<div className="py-20">
<p className="text-center text-xl">Error loading transactions Categories</p>
</div>
) :(
<CardContent className="flex-1 pb-0">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
>
<PieChart>
<ChartTooltip
content={
<ChartTooltipContent
className=""
nameKey="transactions"
hideLabel
/>
}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
<Pie data={chartData} dataKey="transactions">
<LabelList
dataKey="categoryName"
className="fill-background"
stroke="none"
fontSize={12}
formatter={(value: keyof typeof chartConfig) =>
chartConfig[value]?.label
}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
)}

<CardFooter className="flex-col gap-2 text-sm">
<div className="flex items-center gap-2 font-medium leading-none">
{/* <div className="flex items-center gap-2 font-medium leading-none">
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
</div>
<div className="leading-none text-muted-foreground">
Showing total visitors for the last 6 months
</div> */}
<div className="leading-none text-muted-foreground text-center">
Showing transaction category for the current month
</div>
</CardFooter>
</Card>
)
);
}
95 changes: 55 additions & 40 deletions client/src/components/pages/transaction/TypePieChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
import { TrendingDown, TrendingUp } from "lucide-react";
/* eslint-disable @typescript-eslint/no-explicit-any */
import { LabelList, Pie, PieChart } from "recharts";

import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart";
import { fetcher } from "@/lib/fetch";
import useSWR from "swr";
import { Skeleton } from "@/components/ui/skeleton";

export default function TypePieChart() {
const { data, isLoading: balanceLoading } = useSWR(
`${import.meta.env.VITE_SERVER_BASEURI}/transactions/charts`,
fetcher,
{ errorRetryCount: 1 }
);
export default function TypePieChart({
data,
isLoading,
error,
}: {
data: any;
isLoading?: boolean;
error?: string;
}) {
// console.log(data?.data);

const chartData = [
{
browser: "income",
amount: data?.data.income,
fill: "var(--color-income)",
fill: "hsl(var(--chart-2))",
},
{
browser: "expense",
amount: data?.data.expense,
fill: "var(--color-expense)",
fill: "hsl(var(--chart-1))",
},
];

Expand All @@ -43,46 +46,58 @@ export default function TypePieChart() {
},
income: {
label: "Income",
color: "#22c55e",
},
expense: {
label: "Expense",
color: "#dc2626",
},
} satisfies ChartConfig;

// if (error) {
// return <div>Error loading transactions type</div>;
// }

return (
<Card className="flex flex-col">
<CardHeader className="items-centr pb-0">
<div className="flex justify-between">
<h2>Transaction type</h2>
{/* <p>Select timeframe</p> */}
</div>
<CardHeader className="items-center pb-0">
<CardTitle>Transaction Type</CardTitle>
{/* <p>Select timeframe</p> */}
</CardHeader>

<CardContent className="flex-1 pb-0">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
>
<PieChart>
<ChartTooltip
content={<ChartTooltipContent nameKey="amount" hideLabel />}
/>
<Pie data={chartData} dataKey="amount">
<LabelList
dataKey="browser"
className="fill-background"
stroke="none"
fontSize={12}
formatter={(value: keyof typeof chartConfig) =>
chartConfig[value]?.label
{isLoading ? (
<div className="py-8 flex items-center justify-center">
<Skeleton className="h-48 w-48 rounded-full bg-neutral-200" />
</div>
) : error ? (
<div className="py-20">
<p className="text-center text-xl">Error loading transactions type</p>
</div>
) : (
<CardContent className="flex-1 pb-0">
<ChartContainer
config={chartConfig}
className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
>
<PieChart>
<ChartTooltip
content={
<ChartTooltipContent isMoney nameKey="amount" hideLabel />
}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
<Pie data={chartData} dataKey="amount">
<LabelList
dataKey="browser"
className="fill-background"
stroke="none"
fontSize={12}
formatter={(value: keyof typeof chartConfig) =>
chartConfig[value]?.label
}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
)}

<CardFooter className="flex-col gap-2 text-sm">
{/* <div className="flex items-center gap-2 font-medium leading-none">
Expand All @@ -94,7 +109,7 @@ export default function TypePieChart() {
<TrendingDown className="h-4 w-4 text-red-600" />
</div> */}
<div className="leading-none text-muted-foreground text-center">
Showing transaction chart for the current month
Showing transaction type for the current month
</div>
</CardFooter>
</Card>
Expand Down
Loading

0 comments on commit cb4b312

Please sign in to comment.