feat: add watch dynamic graph

app/api/utils.ts

@@ -119,12 +119,11 @@ const months = [
   "дек.",
 ];
 
-export function unixToDate(unix: number, type: string = "short") {
+export function unixToDate(
+  unix: number,
+  type: "full" | "dayMonth" | "dayMonthYear"
+) {
   const date = new Date(unix * 1000);
-  if (type === "short")
-    return (
-      date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear()
-    );
   if (type === "full")
     return (
       date.getDate() +
@@ -137,6 +136,12 @@ export function unixToDate(unix: number, type: string = "short") {
       ":" +
       date.getMinutes()
     );
+  if (type === "dayMonth")
+    return date.getDate() + " " + months[date.getMonth()];
+  if (type === "dayMonthYear")
+    return (
+      date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear()
+    );
 }
 
 export const getSeasonFromUnix = (unix: number) => {

app/components/Profile/Profile.PrivacyBanner.tsx

@@ -1,5 +1,3 @@
-import { unixToDate } from "#/api/utils";
-
 export const ProfilePrivacyBanner = (props: { is_privacy: boolean }) => {
   return (
     <>

app/components/Profile/Profile.WatchDynamic.tsx

@@ -0,0 +1,102 @@
+import { Card } from "flowbite-react";
+import ApexCharts, { ApexOptions } from "apexcharts";
+import { useEffect } from "react";
+import { unixToDate } from "#/api/utils";
+export const ProfileWatchDynamic = (props: { watchDynamic: Array<any> }) => {
+  const lastTenDays = props.watchDynamic.slice(
+    Math.max(props.watchDynamic.length - 10, 0)
+  );
+  const data = {
+    ids: lastTenDays.map((item) => item.id),
+    counts: lastTenDays.map((item) => item.count),
+    timestamps: lastTenDays.map((item) =>
+      unixToDate(item.timestamp, "dayMonth")
+    ),
+  };
+
+  const options: ApexOptions = {
+    chart: {
+      height: "100%",
+      type: "area",
+      fontFamily: "Inter, sans-serif",
+      dropShadow: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    tooltip: {
+      enabled: true,
+      x: {
+        show: false,
+      },
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        opacityFrom: 0.55,
+        opacityTo: 0,
+        shade: "#1C64F2",
+        gradientToColors: ["#1C64F2"],
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      width: 6,
+    },
+    grid: {
+      show: true,
+      strokeDashArray: 4,
+      padding: {
+        left: 2,
+        right: 2,
+        top: 0,
+      },
+    },
+    series: [
+      {
+        name: "Серий",
+        data: data.counts,
+        color: "#1C64F2",
+      },
+    ],
+    xaxis: {
+      categories: data.timestamps,
+      labels: {
+        show: false,
+      },
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    yaxis: {
+      show: false,
+    },
+  };
+
+  useEffect(() => {
+    if (
+      document.getElementById("area-chart") &&
+      typeof ApexCharts !== "undefined"
+    ) {
+      const chart = new ApexCharts(
+        document.getElementById("area-chart"),
+        options
+      );
+      chart.render();
+    }
+  }, []);
+
+  return (
+    <Card>
+      <h1 className="text-2xl font-bold">Динамика просмотра серий</h1>
+      <div id="area-chart"></div>
+    </Card>
+  );
+};

app/components/Profile/ProfileBannedBanner.tsx

@@ -15,7 +15,7 @@ export const ProfileBannedBanner = (props: {
               {props.is_perm_banned
                 ? "Пользователь был заблокирован администрацией навсегда"
                 : `Пользователь был заблокирован администрацией до
-              ${unixToDate(props.ban_expires)}`}
+              ${unixToDate(props.ban_expires, "full")}`}
             </h2>
             <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
               {props.ban_reason}

app/components/ReleaseInfo/ReleaseInfo.Info.tsx

@@ -133,7 +133,7 @@ export const ReleaseInfoInfo = (props: {
               </Table.Cell>
               <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 {props.aired_on_date != 0 ? (
-                  unixToDate(props.aired_on_date)
+                  unixToDate(props.aired_on_date, "full")
                 ) : props.year ? (
                   <>
                     {props.season && props.season != 0

app/pages/Profile copy.tsx

@@ -1,312 +0,0 @@
-"use client";
-import { useUserStore } from "#/store/auth";
-import { useEffect, useState } from "react";
-import { Spinner } from "../components/Spinner/Spinner";
-import { Avatar, Card, Button, Table } from "flowbite-react";
-import { Chip } from "../components/Chip/Chip";
-import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils";
-import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
-import { ENDPOINTS } from "#/api/config";
-
-export const ProfilePage = (props: any) => {
-  const authUser = useUserStore((state) => state);
-  const [user, setUser] = useState(null);
-  const [isMyProfile, setIsMyProfile] = useState(false);
-
-  useEffect(() => {
-    async function _getData() {
-      let url = `${ENDPOINTS.user.profile}/${props.id}`;
-      if (authUser.token) {
-        url += `?token=${authUser.token}`;
-      }
-      const data = await fetchDataViaGet(url);
-      setUser(data.profile);
-      setIsMyProfile(data.is_my_profile);
-    }
-    _getData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authUser]);
-
-  if (!user) {
-    return (
-      <main className="flex items-center justify-center min-h-screen">
-        <Spinner />
-      </main>
-    );
-  }
-
-  const hasSocials =
-    user.vk_page != "" ||
-    user.tg_page != "" ||
-    user.tt_page != "" ||
-    user.inst_page != "" ||
-    user.discord_page != "" ||
-    false;
-  const socials = [
-    {
-      name: "vk",
-      nickname: user.vk_page,
-      icon: "fa6-brands--vk",
-      urlPrefix: "https://vk.com",
-    },
-    {
-      name: "telegram",
-      nickname: user.tg_page,
-      icon: "fa6-brands--telegram",
-      urlPrefix: "https://t.me",
-    },
-    {
-      name: "discord",
-      nickname: user.discord_page,
-      icon: "fa6-brands--discord",
-    },
-    {
-      name: "tiktok",
-      nickname: user.tt_page,
-      icon: "fa6-brands--tiktok",
-      urlPrefix: "https://tiktok.com",
-    },
-    {
-      name: "instagram",
-      nickname: user.inst_page,
-      icon: "fa6-brands--instagram",
-      urlPrefix: "https://instagram.com",
-    },
-  ];
-
-  const hasChips = user.is_verified || user.is_blocked || isMyProfile;
-
-  return (
-    <main className="container flex flex-col gap-4 px-4 pt-4 pb-32 mx-auto overflow-hidden sm:pb-4">
-      {(user.is_banned || user.is_perm_banned) && (
-        <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md md:flex-row bg-red-50 dark:bg-red-700 dark:border-red-600">
-          <div className="mb-4 md:mb-0 md:me-4">
-            <h2 className="mb-1 text-base font-semibold text-gray-900 dark:text-white">
-              {user.is_perm_banned
-                ? "Пользователь был заблокирован администрацией навсегда"
-                : `Пользователь был заблокирован администрацией до
-              ${unixToDate(user.ban_expires)}`}
-            </h2>
-            <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
-              {user.ban_reason}
-            </p>
-          </div>
-        </div>
-      )}
-
-      <div className="flex flex-col gap-4">
-        <Card className="max-w-full">
-          {hasChips && (
-            <div className="flex gap-2 overflow-x-auto scrollbar-thin">
-              {isMyProfile && (
-                <Chip bg_color="bg-blue-500" name="Мой профиль" />
-              )}
-              {user.is_blocked && (
-                <Chip bg_color="bg-red-500" name="Заблокирован вами" />
-              )}
-              {user.is_verified && (
-                <Chip bg_color="bg-green-500" name="Подтверждён" />
-              )}
-            </div>
-          )}
-          <Avatar
-            img={user.avatar}
-            rounded={true}
-            bordered={true}
-            size="lg"
-            className="flex-col justify-start space-x-0 sm:flex-row sm:space-x-4"
-          >
-            <div className="mt-2 space-y-1 font-medium sm:mt-0 dark:text-white">
-              <div className="text-xl">{user.login}</div>
-              <p className="max-w-full text-sm text-gray-500 whitespace-pre-wrap dark:text-gray-400 sm:max-w-96">
-                {user.status}
-              </p>
-            </div>
-          </Avatar>
-          {hasSocials && (
-            <div className="flex gap-1 overflow-x-auto scrollbar-thin">
-              {socials
-                .filter((social: any) => {
-                  if (social.nickname == "") {
-                    return false;
-                  }
-                  return true;
-                })
-                .map((social: any) => {
-                  if (social.name == "discord" && social.nickname != "")
-                    return (
-                      <Button color="light" key={social.name} as="a">
-                        <div className="flex items-center justify-center gap-2">
-                          <span
-                            className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
-                          ></span>
-                          {social.nickname}
-                        </div>
-                      </Button>
-                    );
-                  return (
-                    <Button
-                      color="light"
-                      key={social.name}
-                      href={`${social.urlPrefix}/${social.nickname}`}
-                      className="[&:is(a)]:hover:bg-gray-100"
-                    >
-                      <div className="flex items-center justify-center gap-2">
-                        <span
-                          className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
-                        ></span>
-                        {social.nickname}
-                      </div>
-                    </Button>
-                  );
-                })}
-            </div>
-          )}
-        </Card>
-        <div className="flex flex-wrap gap-4">
-          <Card className="flex-1 max-w-full">
-            <h1>Активность</h1>
-            <Table>
-              <Table.Body className="divide-y">
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Регистрация
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {unixToDate(user.register_date)}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Был(а) в сети
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {unixToDate(user.last_activity_time)}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Комментарий
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.comment_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    друзей
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.friend_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    видео
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.video_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    коллекций
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.collection_count}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
-          <Card className="flex-1 max-w-full">
-            <h1>Статистика</h1>
-            <Table>
-              <Table.Body className="divide-y">
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--123 "></span>
-                    Просмотрено серий
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.watched_episode_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row className="hidden sm:table-row">
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
-                    Время просмотра
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
-                    {minutesToTime(user.watched_time) ||
-                      "Нет просмотренных серий."}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row className="table-row sm:hidden">
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
-                    {minutesToTime(user.watched_time) ||
-                      "Нет просмотренных серий."}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--play "></span>
-                    Смотрю
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.watching_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--note-multiple "></span>
-                    В Планах
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.plan_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--tick "></span>
-                    Просмотрено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.completed_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--question-mark "></span>
-                    Отложено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.hold_on_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--erase "></span>
-                    Брошено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.dropped_count}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
-        </div>
-      </div>
-      {user.history.length > 0 && (
-        <div className="px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800">
-          <ReleaseCourusel
-            sectionTitle="Недавно просмотренные"
-            content={user.history}
-          />
-        </div>
-      )}
-    </main>
-  );
-};

app/pages/Profile.tsx

@@ -10,6 +10,7 @@ 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";
+import { ProfileWatchDynamic } from "#/components/Profile/Profile.WatchDynamic";
 
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
@@ -135,19 +136,24 @@ export const ProfilePage = (props: any) => {
           </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 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 className="[grid-column:1] xl:[grid-column:2] xl:[grid-row:span_2]">
+              <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
+            </div>
+          </>
         )}
       </div>
     </>