From 6e8f03e7b663ee7269e1ada8ff53a52ca361d878 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 24 Aug 2024 04:52:58 +0500
Subject: [PATCH] feat: add user lists statistic with donut chart

---
 app/api/utils.ts                            |  21 +++-
 app/components/Profile/Profile.Activity.tsx |   2 +-
 app/components/Profile/Profile.Stats.tsx    | 101 +++++++++++++++++++
 app/components/Profile/Profile.User.tsx     |   2 +-
 app/pages/Profile.tsx                       |  76 +++++++++------
 next.config.js                              |   1 +
 package-lock.json                           | 103 ++++++++++++++++++++
 package.json                                |   1 +
 tailwind.config.js                          |   4 +-
 9 files changed, 276 insertions(+), 35 deletions(-)
 create mode 100644 app/components/Profile/Profile.Stats.tsx

diff --git a/app/api/utils.ts b/app/api/utils.ts
index 39d963a..e464009 100644
--- a/app/api/utils.ts
+++ b/app/api/utils.ts
@@ -172,18 +172,31 @@ export function sinceUnixDate(unixInSeconds: number) {
   );
 }
 
-export function minutesToTime(min: number) {
+export function minutesToTime(
+  min: number,
+  type?: "full" | "daysOnly" | "daysHours"
+) {
   const d = Math.floor(min / 1440); // 60*24
   const h = Math.floor((min - d * 1440) / 60);
   const m = Math.round(min % 60);
 
   var dDisplay =
-    d > 0 ? `${d} ${numberDeclension(d, "день", "дня", "дней")}, ` : "";
+    d > 0 ? `${d} ${numberDeclension(d, "день", "дня", "дней")}` : "";
   var hDisplay =
-    h > 0 ? `${h} ${numberDeclension(h, "час", "часа", "часов")}, ` : "";
+    h > 0 ? `${h} ${numberDeclension(h, "час", "часа", "часов")}` : "";
   var mDisplay =
     m > 0 ? `${m} ${numberDeclension(m, "минута", "минуты", "минут")}` : "";
-  return dDisplay + hDisplay + mDisplay;
+
+  if (type == "daysOnly") {
+    if (d > 0) return dDisplay;
+    return "? дней";
+  } else if (type == "daysHours") {
+    if (d > 0 && h > 0) return dDisplay + ", " + hDisplay;
+    if (h > 0) return hDisplay;
+    if (m > 0) return mDisplay;
+  } else {
+    return `${dDisplay}${h > 0 && ", " + hDisplay}${m > 0 && ", " + mDisplay}`;
+  }
 }
 
 const StatusList: Record<string, null | number> = {
diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx
index c1fb60b..e8da162 100644
--- a/app/components/Profile/Profile.Activity.tsx
+++ b/app/components/Profile/Profile.Activity.tsx
@@ -11,7 +11,7 @@ export function ProfileActivity(props: {
   friendsCount: number;
 }) {
   return (
-    <Card className="w-full md:w-[325px]">
+    <Card className="h-full">
       <h1 className="text-2xl font-bold">Активность</h1>
       <div className="flex items-center gap-4 text-lg">
         <div>
diff --git a/app/components/Profile/Profile.Stats.tsx b/app/components/Profile/Profile.Stats.tsx
new file mode 100644
index 0000000..b606e4a
--- /dev/null
+++ b/app/components/Profile/Profile.Stats.tsx
@@ -0,0 +1,101 @@
+import { Card } from "flowbite-react";
+import Link from "next/link";
+import ApexCharts from "apexcharts";
+import { useEffect } from "react";
+import { minutesToTime } from "#/api/utils";
+
+export const ProfileStats = (props: {
+  lists: Array<number>;
+  watched_count: number;
+  watched_time: number;
+}) => {
+  const getChartOptions = () => {
+    return {
+      series: props.lists,
+      colors: ["#66bb6c", "#b566bb", "#5c6cc0", "#ffca28", "#ef5450"],
+      chart: {
+        height: 240,
+        width: "100%",
+        type: "donut",
+      },
+      stroke: {
+        colors: ["transparent"],
+        lineCap: "",
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      labels: [`Смотрю`, `В планах`, `Просмотрено`, `Отложено`, `Брошено`],
+      legend: {
+        show: false,
+      },
+      responsive: [
+        {
+          breakpoint: 640,
+          options: {
+            chart: {
+              height: 200,
+              width: 200,
+              type: "donut",
+            },
+          },
+        },
+      ],
+    };
+  };
+  useEffect(() => {
+    if (
+      document.getElementById("donut-chart") &&
+      typeof ApexCharts !== "undefined"
+    ) {
+      const chart = new ApexCharts(
+        document.getElementById("donut-chart"),
+        getChartOptions()
+      );
+      chart.render();
+    }
+  }, []);
+
+  return (
+    <Card className="h-full font-light">
+      <h1 className="text-2xl font-bold">Статистика</h1>
+      <div className="flex items-center">
+        <div>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#66bb6c]"></span>{" "}
+            Смотрю <span className="font-bold">{props.lists[0]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#b566bb]"></span>{" "}
+            В планах <span className="font-bold">{props.lists[1]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#5c6cc0]"></span>{" "}
+            Просмотрено <span className="font-bold">{props.lists[2]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#ffca28]"></span>{" "}
+            Отложено <span className="font-bold">{props.lists[3]}</span>
+          </p>
+          <p className="align-center whitespace-nowrap">
+            <span className="inline-block rounded w-4 h-4 bg-[#ef5450]"></span>{" "}
+            Брошено <span className="font-bold">{props.lists[4]}</span>
+          </p>
+        </div>
+        <div id="donut-chart"></div>
+      </div>
+      <div>
+        <p>
+          Просмотрено серий:{" "}
+          <span className="font-bold">{props.watched_count}</span>
+        </p>
+        <p>
+          Время просмотра:{" "}
+          <span className="font-bold">
+            ~{minutesToTime(props.watched_time, "daysHours")}
+          </span>
+        </p>
+      </div>
+    </Card>
+  );
+};
diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx
index 27a30c8..ab9d2df 100644
--- a/app/components/Profile/Profile.User.tsx
+++ b/app/components/Profile/Profile.User.tsx
@@ -36,7 +36,7 @@ export const ProfileUser = (props: {
   const router = useRouter();
   console.log(props.chips);
   return (
-    <Card className="w-full sm:w-[512px]">
+    <Card className="h-full">
       {props.chips.hasChips && (
         <div className="flex gap-1 overflow-x-auto scrollbar-thin">
           {props.chips.isMyProfile && (
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index a14f52e..8da4749 100644
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@@ -9,6 +9,7 @@ import { ProfileUser } from "#/components/Profile/Profile.User";
 import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner";
 import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner";
 import { ProfileActivity } from "#/components/Profile/Profile.Activity";
+import { ProfileStats } from "#/components/Profile/Profile.Stats";
 
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
@@ -96,38 +97,57 @@ export const ProfilePage = (props: any) => {
         <ProfilePrivacyBanner is_privacy={isPrivacy} />
       </div>
       <div
-        className={`flex flex-wrap gap-2 ${
+        className={`grid grid-cols-[100%] xl:grid-cols-[630px,626px] 2xl:grid-cols-[777px,743px] gap-2 ${
           isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
         }`}
       >
-        <ProfileUser
-          isOnline={user.is_online}
-          avatar={user.avatar}
-          login={user.login}
-          status={user.status}
-          socials={{
-            isPrivate: user.is_social_hidden,
-            hasSocials: hasSocials,
-            socials: socials,
-          }}
-          chips={{
-            hasChips: hasChips,
-            isMyProfile: isMyProfile,
-            isVerified: user.is_verified,
-            isSponsor: user.is_sponsor,
-            isBlocked: user.is_blocked,
-            roles: user.roles,
-          }}
-          rating={user.rating_score}
-        />
-        {!user.is_stats_hidden && (
-          <ProfileActivity
-            profile_id={user.id}
-            commentCount={user.comment_count}
-            videoCount={user.video_count}
-            collectionCount={user.collection_count}
-            friendsCount={user.friend_count}
+        <div className="[grid-column:1] [grid-row:1]">
+          <ProfileUser
+            isOnline={user.is_online}
+            avatar={user.avatar}
+            login={user.login}
+            status={user.status}
+            socials={{
+              isPrivate: user.is_social_hidden,
+              hasSocials: hasSocials,
+              socials: socials,
+            }}
+            chips={{
+              hasChips: hasChips,
+              isMyProfile: isMyProfile,
+              isVerified: user.is_verified,
+              isSponsor: user.is_sponsor,
+              isBlocked: user.is_blocked,
+              roles: user.roles,
+            }}
+            rating={user.rating_score}
           />
+        </div>
+        {!user.is_counts_hidden && (
+          <div className="[grid-column:1] [grid-row:2]">
+            <ProfileActivity
+              profile_id={user.id}
+              commentCount={user.comment_count}
+              videoCount={user.video_count}
+              collectionCount={user.collection_count}
+              friendsCount={user.friend_count}
+            />
+          </div>
+        )}
+        {!user.is_stats_hidden && (
+          <div className="[grid-column:1] xl:[grid-column:2] xl:[grid-row:span_2]">
+            <ProfileStats
+              lists={[
+                user.watching_count,
+                user.plan_count,
+                user.completed_count,
+                user.hold_on_count,
+                user.dropped_count,
+              ]}
+              watched_count={user.watched_episode_count}
+              watched_time={user.watched_time}
+            />
+          </div>
         )}
       </div>
     </>
diff --git a/next.config.js b/next.config.js
index 8ddd554..553891b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,7 @@ const { withPlausibleProxy } = require("next-plausible");
 module.exports = withPlausibleProxy({
   customDomain: "https://analytics.wah.su",
 })({
+  reactStrictMode: false,
   images: {
     loader: 'custom',
     loaderFile: './imageLoader.ts',
diff --git a/package-lock.json b/package-lock.json
index 9e413f2..eb5911a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "new",
       "version": "0.1.0",
       "dependencies": {
+        "apexcharts": "^3.52.0",
         "deepmerge-ts": "^7.1.0",
         "flowbite": "^2.4.1",
         "flowbite-react": "^0.10.1",
@@ -1000,6 +1001,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1135,6 +1141,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.52.0.tgz",
+      "integrity": "sha512-7dg0ADKs8AA89iYMZMe2sFDG0XK5PfqllKV9N+i3hKHm3vEtdhwz8AlXGm+/b0nJ6jKiaXsqci5LfVxNhtB+dA==",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -5324,6 +5344,89 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/swiper": {
       "version": "11.1.4",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz",
diff --git a/package.json b/package.json
index 34588a1..8cd1111 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "apexcharts": "^3.52.0",
     "deepmerge-ts": "^7.1.0",
     "flowbite": "^2.4.1",
     "flowbite-react": "^0.10.1",
diff --git a/tailwind.config.js b/tailwind.config.js
index 2e4702a..6befeef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,9 @@ module.exports = {
   plugins: [
     addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
     require("tailwind-scrollbar"),
-    flowbite.plugin(),
+    flowbite.plugin()({
+      charts: true,
+    }),
   ],
   darkMode: "selector",
   theme: {