Added BarChart component

... and queried data from supabase

app/components/home/running-bar-chart.tsx

@@ -1,77 +1,53 @@
 "use client";
 
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import {
+ Bar,
+ BarChart,
+ CartesianGrid,
+ Tooltip as RechartTooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from "recharts";
 
-const data = [
- {
- name: "Jan",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Feb",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Mar",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Apr",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "May",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Jun",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Jul",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Aug",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Sep",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Oct",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Nov",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
- {
- name: "Dec",
- total: Math.floor(Math.random() * 5000) + 1000,
- },
-];
-
-export default function RunningBarChart() {
+export default function RunningBarChart({
+ runMonthData,
+}: {
+ runMonthData: runMonth[];
+}) {
  return (
- <ResponsiveContainer width="100%" height={350}>
- <BarChart data={data}>
+ <ResponsiveContainer className="mt-2" width="100%" height={350}>
+ <BarChart data={runMonthData}>
+ <CartesianGrid />
  <XAxis
- dataKey="name"
- stroke="#888888"
- fontSize={12}
- tickLine={false}
+ dataKey="month"
  axisLine={false}
+ padding={{ left: 0, right: 0 }}
+ tick={{ fontSize: 12, strokeWidth: 0 }}
+ tickLine={false}
+ tickSize={4}
  />
  <YAxis
- stroke="#888888"
- fontSize={12}
- tickLine={false}
+ orientation="right"
  axisLine={false}
- tickFormatter={(value: any) => `$${value}`}
+ padding={{ top: 0, bottom: 0 }}
+ tick={{ fontSize: 12, strokeWidth: 0 }}
+ tickCount={3}
+ tickLine={false}
+ tickSize={4}
+ />
+ <RechartTooltip />
+ <Bar
+ dataKey="distance"
+ shape={({ x, y, width, height }) => (
+ <path
+ className="fill-blue-9"
+ d={`M${x} ${y + height}V${2 + y}q0-2 2-2h${width - 4}q2 0 2 2v${
+ height - 2
+ }z`}
+ />
+ )}
  />
- <Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
  </BarChart>
  </ResponsiveContainer>
  );

app/components/home/running.tsx

@@ -1,16 +1,33 @@
 import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import RunningBarChart from "./running-bar-chart";
+import { Footprints } from "lucide-react";
+import ContentDisplay from "../layouts/content-display";
 
 export const dynamic = "force-dynamic";
 
 export default async function Running() {
  const supabase = createServerComponentClient<Database>({ cookies });
- const { data: runs } = await supabase.from("running").select();
+ const { data } = await supabase
+ .from("running_monthly")
+ .select("year, month,total_distance")
+ .order("year", { ascending: true })
+ .order("month");
+
+ const runData =
+ data?.map((run) => ({
+ month: String(run.month),
+ distance: run.total_distance,
+ })) ?? [];
 
  return (
- <div>
- <RunningBarChart />
- </div>
+ <ContentDisplay
+ className="col-span-2 w-full min-[560px]:col-span-4"
+ name="Running"
+ description="I run a lot"
+ symbol={<Footprints />}
+ >
+ <RunningBarChart runMonthData={runData} />
+ </ContentDisplay>
  );
 }

app/global.d.ts

@@ -2,4 +2,8 @@ import { Database as DB } from "@/lib/database.types";
 
 declare global {
  type Database = DB;
+ type runMonth = {
+ month: string;
+ distance: number;
+ };
 }

lib/database.types.ts

@@ -14,19 +14,49 @@ export interface Database {
  date: string | null
  distance: number | null
  id: number
+ month: number | null
  source: string | null
+ year: number | null
  }
  Insert: {
  date?: string | null
  distance?: number | null
  id: number
+ month?: number | null
  source?: string | null
+ year?: number | null
  }
  Update: {
  date?: string | null
  distance?: number | null
  id?: number
+ month?: number | null
  source?: string | null
+ year?: number | null
+ }
+ Relationships: []
+ }
+ running_monthly: {
+ Row: {
+ id: number
+ month: number
+ monthyear: number
+ total_distance: number
+ year: number
+ }
+ Insert: {
+ id?: number
+ month: number
+ monthyear: number
+ total_distance: number
+ year: number
+ }
+ Update: {
+ id?: number
+ month?: number
+ monthyear?: number
+ total_distance?: number
+ year?: number
  }
  Relationships: []
  }