feat: add watch dynamic graph

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