Merge pull request #510 from Yavuzlar/509-activity-calendar-bugs

Activity Calendar uptaded.

Author: mhmtbyzgl

frontend/public/locales/en/common.json

@@ -196,5 +196,15 @@
     "Nov",
     "Dec"
   ],
-  "admin_activity_calendar_total_count": "{{count}} activite on {{year}}"
+  "admin_activity_calendar_weekdays": [
+    "Mon",
+    "Tue",
+    "Wed",
+    "Thu",
+    "Fri",
+    "Sat",
+    "Sun"
+  ],
+  "admin_activity_calendar_total_count": "{{count}} activite on {{year}}",
+  "admin_activity_calendar_no_activity": "No activity"
 }

frontend/public/locales/tr/common.json

@@ -198,5 +198,15 @@
     "Kas",
     "Ara"
   ],
-  "admin_activity_calendar_total_count": "{{year}} yılında {{count}} aktivite"
-}
+  "admin_activity_calendar_weekdays": [
+    "Pzt",
+    "Sal",
+    "Çar",
+    "Per",
+    "Cum",
+    "Cmt",
+    "Paz"
+  ],
+  "admin_activity_calendar_total_count": "{{year}} yılında {{count}} aktivite",
+  "admin_activity_calendar_no_activity": "Aktivite yok"
+}

frontend/src/components/cards/Activity.js

@@ -10,7 +10,6 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import ActivityStatisticComponent from "../statistics/ActivityStatisticComponent";
-// import { data } from "../../data/activityDataExample";
 import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import Translations from "../Translations";
@@ -51,8 +50,6 @@ const Activity = () => {
     (_, i) => 2024 + i
   ).reverse();
 
-  // const years = [2024, 2023, 2022, 2021, 2020];
-
   return (
     <Box
       sx={{
@@ -126,7 +123,10 @@ const Activity = () => {
             }}
           >
             {Array.isArray(data) && data.length !== 0 ? (
-              <ActivityStatisticComponent activityData={data} />
+              <ActivityStatisticComponent
+                activityData={data}
+                selectedYear={year}
+              />
             ) : (
               <Typography>
                 <Translations text="admin_activity_calendar_no_data_error" />

frontend/src/components/statistics/ActivityStatisticComponent.js

@@ -1,66 +1,109 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-const ActivityStatisticComponent = ({ activityData }) => {
+const ActivityStatisticComponent = (props) => {
+  const { activityData, selectedYear } = props;
   const { t } = useTranslation();
 
-  const formattedData = activityData.map((item) => ({
-    date: new Date(item.date).toISOString().split("T")[0], // YYYY-MM-DD formatı
-    count: parseInt(item.count, 10),
-    level: item.level,
-  }));
+  const getLocalizedLabels = () => {
+    const weekdays = t("admin_activity_calendar_weekdays", {
+      returnObjects: true,
+      defaultValue: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    });
+
+    const months = t("admin_activity_calendar_months", {
+      returnObjects: true,
+      defaultValue: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+    });
+
+    return { weekdays, months };
+  };
+
+  const { weekdays, months } = getLocalizedLabels();
+
+  const generateYearData = (year, data) => {
+    const dates = new Map(
+      data.map((item) => [item.date, { count: item.count, level: item.level }])
+    );
+
+    const yearData = [];
+    const startDate = new Date(`${year}-01-01`);
+    const endDate = new Date(`${year}-12-31`);
+
+    let currentDate = new Date(startDate);
+
+    while (currentDate <= endDate) {
+      const formattedDate = currentDate.toISOString().split("T")[0];
+      yearData.push({
+        date: formattedDate,
+        count: dates.get(formattedDate)?.count || 0,
+        level: dates.get(formattedDate)?.level || 0,
+      });
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+
+    return yearData;
+  };
+
+  const formattedData = generateYearData(
+    selectedYear,
+    activityData.map((item) => ({
+      date: new Date(item.date).toISOString().split("T")[0],
+      count: parseInt(item.count, 10),
+      level: item.level,
+    }))
+  );
 
   return (
     <ActivityCalendar
       data={formattedData}
       blockRadius={4}
       blockSize={16}
+      showWeekdayLabels={true}
       theme={{
         dark: ["#DAF0FE", "#99D1F2", "#53B2F0", "#1E86E5", "#0A3B7A"],
         light: ["#0A3B7A", "#1561A5", "#1E86E5", "#53B2F0", "#99D1F2"],
       }}
       labels={{
         legend: {
           less: t("admin_activity_calendar_legend_less", {
-            defaultValue: "Az",
+            defaultValue: "Less",
           }),
           more: t("admin_activity_calendar_legend_more", {
-            defaultValue: "Çok",
+            defaultValue: "High",
           }),
         },
-        months: t("admin_activity_calendar_months", {
-          defaultValue: [
-            "Oca",
-            "Şub",
-            "Mar",
-            "Nis",
-            "May",
-            "Haz",
-            "Tem",
-            "Ağu",
-            "Eyl",
-            "Eki",
-            "Kas",
-            "Ara",
-          ],
-        }),
+        months,
+        weekdays,
         totalCount: t("admin_activity_calendar_total_count", {
           defaultValue: "{{count}} katkı {{year}} yılında",
         }),
-        showWeekdayLabels: false,
       }}
       renderBlock={(block, activity) => (
         <Tooltip
           title={
-            activity
+            activity && activity.count > 0
               ? t("admin_activity_calendar_logs_tooltip", {
                   count: activity.count,
                   date: activity.date,
                 })
               : t("admin_activity_calendar_no_activity", {
-                  defaultValue: "Etkinlik Yok",
+                  defaultValue: "No Activity",
                 })
           }
         >