feat: add watch dynamic graph

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>
+  );
+};