Revenue Trends Chart

1"use client";
2import {
3  Bar,
4  BarChart,
5  ResponsiveContainer,
6  Tooltip,
7  TooltipContentProps,
8  XAxis,
9  YAxis,
10} from "recharts";
11import { useTheme } from "next-themes";
12
13const apiData = [
14  { month: "Jan", profit: 14000, loss: 22000 },
15  { month: "Feb", profit: 23000, loss: 17000 },
16  { month: "Mar", profit: 19000, loss: 14000 },
17  { month: "Apr", profit: 18000, loss: 20000 },
18  { month: "May", profit: 26000, loss: 17000 },
19  { month: "Jun", profit: 20000, loss: 27000 },
20  { month: "Jul", profit: 19000, loss: 21000 },
21  { month: "Aug", profit: 17000, loss: 14000 },
22];
23
24const GAP = Math.max(
25  Math.max(...apiData.map((d) => d.profit + d.loss)) * 0.05,
26  5,
27);
28
29const data = apiData.map((item) => ({
30  ...item,
31  gap: GAP,
32}));
33
34const formatCurrency = (num: number) => {
35  return new Intl.NumberFormat("en-US", {
36    notation: "compact",
37    maximumFractionDigits: 1,
38    style: "currency",
39    currency: "USD",
40  }).format(num);
41};
42
43export const RevenueTrends = () => {
44  const { resolvedTheme } = useTheme();
45  const isDark = resolvedTheme === "dark";
46  return (
47    <div className="h-80 w-[340px] md:w-96 border border-neutral-200/70 dark:border-neutral-800 rounded-xl shadow-xs flex flex-col gap-4 p-4 bg-white dark:bg-neutral-950">
48      <div className="flex flex-col gap-1">
49        <span className="text-lg font-semibold text-primary">Total Income</span>
50        <p className="text-xs text-muted-foreground">
51          View your income in a certain period of time
52        </p>
53      </div>
54      <div className="p-4 bg-[#F6F6F6] dark:bg-neutral-900 flex-1 rounded-xl flex flex-col gap-3">
55        <div className="flex justify-between">
56          <span className="text-xs font-medium">Profit and Loss</span>
57          <div className="flex gap-3 text-xs font-medium">
58            <span className="flex gap-2 items-center">
59              <span className="w-2.5 h-2.5 rounded-[2.8px] bg-[#FF5A5A] block" />
60              Profit
61            </span>
62            <span className="flex gap-2 items-center">
63              <span className="w-2.5 h-2.5 rounded-[2.8px] bg-[#262626] dark:bg-[#E5E5E5] block" />
64              Loss
65            </span>
66          </div>
67        </div>
68        <div className="flex-1">
69          <ResponsiveContainer width="100%" height="100%">
70            <BarChart data={data}>
71              <XAxis
72                dataKey="month"
73                tick={{
74                  fontSize: 11,
75// … truncated