Feature: Update UserGridActivity to Display Last 3 Months

[Codehagen]

Type of feature

💡 Feature

Current behavior

The UserGridActivity component currently displays static data for user activity throughout the year.

Suggested solution

Update the UserGridActivity component to dynamically display the last 3 months of user activity, ending on the current date (e.g., today is June 11, so display data from March 11 to June 11). The updated component should:

• Fetch Data for Last 3 Months: Ensure that the data fetching mechanism retrieves user activity data for the last 3 months.
• Adjust Data Display: Format the data to fit the ActivityCalendar component's requirements.
• Update the Calendar: Ensure the calendar visualization starts from 3 months ago and ends on the current date.

Additional context

"use client";

import ActivityCalendar from "react-activity-calendar";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@dingify/ui/components/card";

// Example data: array of objects with date and count
const calendarData = [
  { date: "2023-01-01", count: 2, level: 1 },
  { date: "2023-01-02", count: 5, level: 2 },
  { date: "2023-01-03", count: 1, level: 0 },
  { date: "2023-02-16", count: 1, level: 1 },
  { date: "2023-03-31", count: 3, level: 1 },
];

export function UserGridActivity() {
  return (
    <Card className="overflow-hidden">
      <CardHeader>
        <CardTitle>Activity Calendar</CardTitle>
        <CardDescription>
          A visualization of user activity throughout the year.
        </CardDescription>
      </CardHeader>
      <CardContent className="pb-4">
        <div style={{ height: "auto", width: "100%" }}>
          <ActivityCalendar
            data={calendarData}
            blockSize={15}
            blockMargin={5}
            fontSize={14}
            hideTotalCount={false}
            showWeekdayLabels
            hideMonthLabels={false}
            theme={{
              light: ["#ebedf0", "#c6e48b", "#7bc96f", "#82ca9d", "#239a3b"],
              dark: ["#282828", "#5c4e4e", "#946b6b", "#b74d4d", "#82ca9d"],
            }}
            labels={{
              months: [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec",
              ],
              weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
              totalCount: "{{count}} activities in {{year}}",
              legend: {
                less: "Less",
                more: "More",
              },
            }}
            colorScheme="light" // Use "dark" for dark mode
            eventHandlers={{
              onClick: (event) => (activity) => {
                alert(JSON.stringify(activity));
              },
            }}
          />
        </div>
      </CardContent>
    </Card>
  );
}

[Motormary]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!