chore: add balance chart

Author: mjkeaton

src/components/BalanceChart.tsx

@@ -0,0 +1,49 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent } from "@/components/ui/chart"
+
+const config = {
+  bitcoin: {
+    label: "Bitcoin",
+    color: "#2563eb",
+  }
+} satisfies ChartConfig
+
+export function BalanceChart() {
+  const data = [
+    { month: "January", bitcoin: 186, },
+    { month: "February", bitcoin: 305, },
+    { month: "March", bitcoin: 237, },
+    { month: "April", bitcoin: 73 },
+    { month: "May", bitcoin: 209 },
+    { month: "June", bitcoin: 214 },
+    { month: "July", bitcoin: 21 },
+    { month: "August", bitcoin: 32 },
+    { month: "September", bitcoin: 0 },
+    { month: "October", bitcoin: 0 },
+    { month: "November", bitcoin: 0 },
+    { month: "December", bitcoin: 0 },
+  ]
+
+  return (
+    <ChartContainer config={config} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value: string) => value.slice(0, 3)}
+        />
+        <YAxis
+          dataKey="bitcoin"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+        />
+        <Bar dataKey="bitcoin" fill="var(--color-bitcoin)" radius={4} />
+        <ChartLegend content={<ChartLegendContent />} />
+      </BarChart>
+    </ChartContainer>
+  )
+}

src/index.css

@@ -126,3 +126,21 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer base {
+  :root {
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+ 
+  .dark {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}

src/layout.tsx

@@ -6,7 +6,7 @@ export default function Layout() {
   return (
     <SidebarProvider>
       <AppSidebar />
-      <main className="flex flex-col px-2 py-2">
+      <main className="flex-1 flex flex-col px-2 py-2">
         <div>
           <SidebarTrigger />
         </div>

src/pages/balances/BalancesPage.tsx

@@ -1,3 +1,4 @@
+import { BalanceChart } from "@/components/BalanceChart";
 import { Breadcrumbs } from "@/components/Breadcrumbs";
 import { PageTitle } from "@/components/PageTitle";
 
@@ -6,6 +7,10 @@ export default function BalancesPage() {
     <>
       <Breadcrumbs>Balances</Breadcrumbs>
       <PageTitle>Balances</PageTitle>
+
+      <div className="flex max-h-[500px] max-w-[320px] py-4">
+        <BalanceChart />
+      </div>
     </>
   )
 }