Fixed issue with Year and styling

1. Fixed issue with Bar Chart not showing month and year correctly
2. Fixed global styling

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "bradlc.vscode-tailwindcss",
+    "csstools.postcss",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "editor.rulers": [80, 100],
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "eslint.validate": ["javascript", "javascriptreact"],
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "editor.inlineSuggest.enabled": true,
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}

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

@@ -18,7 +18,7 @@ export default function RunningBarChart({
   runMonthlyData,
   unit,
 }: {
-  runMonthlyData: MileageLog[];
+  runMonthlyData: MonthlyData[];
   unit: LengthUnit;
 }) {
   //20.43 is a precomputed value to fit the width when the unit is set to km.
@@ -32,7 +32,7 @@ export default function RunningBarChart({
   const [data, totalDays] = useMemo(() => {
     let totalDays = 0;
     const data = runMonthlyData.map((d) => {
-      const date = new Date(d.date);
+      const date = new Date(d.year, Number(d.date) - 1, 1);
       const utcDate = new Date(
         Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1)
       );

app/components/home/running/running-details.tsx

@@ -15,7 +15,7 @@ export default function RunningDetails({
   runMonthlyData,
   dailyData,
 }: {
-  runMonthlyData: MileageLog[];
+  runMonthlyData: MonthlyData[];
   dailyData: MileageLog[];
 }) {
   const [unitIndex, setUnitIndex] = useState<number>(0);

app/components/home/running/running.tsx

@@ -20,10 +20,11 @@ const Running = async () => {
     .order("year", { ascending: true })
     .order("month");
 
-  const runData: MileageLog[] =
+  const runData: MonthlyData[] =
     data?.map((run) => ({
       date: String(run.month),
       value: run.total_distance,
+      year: run.year,
     })) ?? [];
 
   //Fetch daily logs

app/global.d.ts

@@ -2,9 +2,10 @@ import { Database as DB } from "@/lib/database.types";
 
 declare global {
   type Database = DB;
-  type runMonthlyData = {
-    month: string;
-    distance: number;
+  type MonthlyData = {
+    date: string;
+    value: number;
+    year: number;
   };
 
   /**

app/globals.css

@@ -2,82 +2,69 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+html,
+body,
+main {
+  @apply bg-gray-1 text-gray-12;
+  font-weight: 300;
+}
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+* {
+  @apply selection:bg-[#2200ff] selection:text-white;
+  box-sizing: border-box;
+}
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+a {
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9;
+  color: inherit;
+  text-decoration: none;
+}
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+div#__next,
+div#__next > div,
+div#__next > div > main {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+/* For WebKit-based browsers (Chrome, Safari, and Opera) */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
 
-    --ring: 215 20.2% 65.1%;
+/* For IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
 
-    --radius: 0.5rem;
+@supports (-webkit-touch-callout: none) {
+  .min-h-screen {
+    height: -webkit-fill-available;
   }
+  .h-screen {
+    height: -webkit-fill-available;
+  }
+}
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
+.recharts-cartesian-grid-horizontal > line {
+  @apply stroke-gray-6;
+}
 
-    --radius: 0.5rem;
-  }
+.recharts-cartesian-grid-vertical > line {
+  @apply stroke-gray-6;
+  stroke-dasharray: 2 2;
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
+.recharts-tooltip-cursor {
+  @apply fill-gray-5;
+}
 
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
+.recharts-tooltip-wrapper:focus {
+  outline: none;
 }
 
+.recharts-cartesian-axis-tick-value {
+  @apply fill-gray-11;
+}

lib/database.types.ts

@@ -9,56 +9,95 @@ export type Json =
 export interface Database {
   public: {
     Tables: {
-      running: {
+      likes: {
         Row: {
-          date: string
-          distance: number
+          created_at: string
           id: number
-          month: number | null
-          source: string | null
-          year: number | null
+          tweet_id: string
+          user_id: string
         }
         Insert: {
-          date: string
-          distance: number
-          id: number
-          month?: number | null
-          source?: string | null
-          year?: number | null
+          created_at?: string
+          id?: number
+          tweet_id: string
+          user_id: string
         }
         Update: {
-          date?: string
-          distance?: number
+          created_at?: string
           id?: number
-          month?: number | null
-          source?: string | null
-          year?: number | null
+          tweet_id?: string
+          user_id?: string
         }
-        Relationships: []
+        Relationships: [
+          {
+            foreignKeyName: "likes_tweet_id_fkey"
+            columns: ["tweet_id"]
+            referencedRelation: "tweets"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "likes_user_id_fkey"
+            columns: ["user_id"]
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          }
+        ]
       }
-      running_monthly: {
+      profiles: {
         Row: {
-          id: number
-          month: number
-          monthyear: number
-          total_distance: number
-          year: number
+          avatar_url: string
+          id: string
+          name: string
+          username: string
         }
         Insert: {
-          id?: number
-          month: number
-          monthyear: number
-          total_distance: number
-          year: number
+          avatar_url: string
+          id: string
+          name: string
+          username: string
         }
         Update: {
-          id?: number
-          month?: number
-          monthyear?: number
-          total_distance?: number
-          year?: number
+          avatar_url?: string
+          id?: string
+          name?: string
+          username?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "profiles_id_fkey"
+            columns: ["id"]
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          }
+        ]
+      }
+      tweets: {
+        Row: {
+          created_at: string
+          id: string
+          title: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          id?: string
+          title: string
+          user_id: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          title?: string
+          user_id?: string
         }
-        Relationships: []
+        Relationships: [
+          {
+            foreignKeyName: "tweets_user_id_fkey"
+            columns: ["user_id"]
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          }
+        ]
       }
     }
     Views: {