frontPanel/src/pages/Analytics/General.tsx

import { Box, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
import { LineChart } from "@mui/x-charts";
import moment from "moment";

import type { GeneralResponse } from "@api/statistic";
import { FC } from "react";

type GeneralItemsProps = {
  title: string;
  general: Record<string, number>;
  color: string;
  numberType: "sum" | "percent" | "time";
  calculateTime?: boolean;
  conversionValue?: number;
  day: boolean;
};

type GeneralProps = {
  data: GeneralResponse | null;
  day: boolean;
};

const COLORS: Record<number, string> = {
  0: "#61BB1A",
  1: "#7E2AEA",
  2: "#FB5607",
  3: "#0886FB",
};

const dateParser = (object: Record<string, number>): Record<string, number> => {
  const result = {} as Record<string, number>;
  for (var key in object) {
    result[moment.unix(Number(key) * 1000).format("DD/MM/YYYY")] = object[key];
    console.log(result);
  }
  return result;
};

const getCalculatedTime = (time: number) => {
  const hours = String(Math.floor(time / 3600)).padStart(2, "0");
  const minutes = String(Math.floor((time % 3600) / 60)).padStart(2, "0");
  const seconds = String(Math.floor((time % 3600) % 60)).padStart(2, "0");

  return `${hours}:${minutes}:${seconds}`;
};
const GeneralItem = ({
  title,
  general,
  color,
  numberType,
  calculateTime = false,
  conversionValue,
  day,
}: GeneralItemsProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

  const numberValue =
    numberType === "sum"
      ? Object.values(general).reduce((total, item) => total + item, 0)
      : title === "Конверсия"
        ? conversionValue
        : 0;

  if (
    Object.keys(general).length === 0 ||
    Object.values(general).every((x) => x === 0)
  ) {
    return (
      <Typography textAlign="center">{`${title} - нет данных`}</Typography>
    );
  }

  const getCalculatedTime = (time: number) => {
    const hours = String(Math.floor(time / 3600)).padStart(2, "0");
    const minutes = String(Math.floor((time % 3600) / 60)).padStart(2, "0");
    const seconds = String(Math.floor((time % 3600) % 60)).padStart(2, "0");

    return `${hours}:${minutes}:${seconds}`;
  };

  return (
    <Paper
      sx={{
        overflow: "hidden",
        borderRadius: "12px",
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
      }}
    >
      <Typography sx={{ margin: "20px 20px 0" }}>{title}</Typography>
      <Typography sx={{ margin: "10px 20px 0", fontWeight: "bold" }}>
        {numberType === "percent" ? `${numberValue.toFixed(2)}%` : numberValue}
      </Typography>
      <LineChart
        xAxis={[
          {
            data: Object.keys(general),
            valueFormatter: (value) =>
              moment.unix(Number(value)).format("DD/MM/YYYY HH") + "ч",
          },
        ]}
        series={[
          {
            data: Object.values(general),
            valueFormatter: (value) =>
              calculateTime
                ? getCalculatedTime(value)
                : String(value.toFixed(2)),
          },
        ]}
        // dataset={Object.entries(general).map(([, v]) => moment.unix(v).format("ss:mm:HH")).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})}
        height={220}
        colors={[color]}
        sx={{
          transform: isMobile ? "scale(1.1)" : "scale(1.2)",
          "& .MuiChartsAxis-tickContainer": { display: "none" },
        }}
      />
    </Paper>
  );
};
const GeneralItemTimeConv = ({
  title,
  general,
  color,
  numberType,
  calculateTime = false,
  conversionValue,
  day,
}: GeneralItemsProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

  console.log("day", day);

  const data = Object.entries(general).sort((a, b) => a[0] - b[0]);

  const days = [...data].map((e) => e[0]);

  let buffer = 0;

  const time = [...data].map((e) => {
    if (e[1] > 0) {
      buffer = e[1];
    }
    return buffer;
  });

  console.log("data", data);
  console.log(
    "time",
    time.reduce((a, b) => Number(a) + Number(b), 0),
  );
  console.log(
    "time",
    getCalculatedTime(time.reduce((a, b) => Number(a) + Number(b), 0)),
  );
  console.log("days", days.length);
  const numberValue = calculateTime
    ? time.reduce((a, b) => Number(a) + Number(b), 0) / days.length || 0
    : conversionValue;

  if (
    Object.keys(general).length === 0 ||
    Object.values(general).every((x) => x === 0)
  ) {
    return (
      <Typography textAlign="center">{`${title} - нет данных`}</Typography>
    );
  }

  return (
    <Paper
      sx={{
        overflow: "hidden",
        borderRadius: "12px",
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
      }}
    >
      <Typography sx={{ margin: "20px 20px 0" }}>{title}</Typography>
      <Typography sx={{ margin: "10px 20px 0", fontWeight: "bold" }}>
        {calculateTime
          ? `${getCalculatedTime(numberValue)} с`
          : `${numberValue.toFixed(2)}%`}
      </Typography>
      <LineChart
        xAxis={[
          {
            data: days,
            valueFormatter: (value) =>
              moment.unix(Number(value)).format("DD/MM/YYYY HH") + "ч",
          },
        ]}
        series={[
          {
            data: Object.values(time),
            valueFormatter: (value) => {
              console.log("log", value);
              return calculateTime
                ? getCalculatedTime(value)
                : String((value * 100).toFixed(2)) + "%";
            },
          },
        ]}
        // dataset={Object.entries(general).map(([, v]) => moment.unix(v).format("ss:mm:HH")).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})}
        height={220}
        colors={[color]}
        sx={{
          transform: isMobile ? "scale(1.1)" : "scale(1.2)",
          "& .MuiChartsAxis-tickContainer": { display: "none" },
        }}
      />
    </Paper>
  );
};

export const General: FC<GeneralProps> = ({ data, day }) => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

  if (!data) {
    return (
      <Typography textAlign="center" m="10px 0">
        нет данных о ключевых метриках
      </Typography>
    );
  }

  const DATA = {} as GeneralResponse;
  const currentDate = moment().unix();
  const futureCutter = ({
    fatherKey,
    values,
  }: {
    fatherKey: string;
    values: Record<string, number>;
  }) => {
    const buffer = {} as Record<string, number>;
    for (let key in values) {
      console.log(Number(key));
      console.log(currentDate);
      console.log(Number(key) - currentDate);
      console.log(Number(key) - currentDate < 0);
      console.log(moment.unix(key).format("HH"));
      if (Number(key) - currentDate < 0) buffer[key] = values[key];
    }
    DATA[fatherKey] = buffer;
  };

  for (let key in data) {
    futureCutter({ fatherKey: key, values: data[key] });
  }
  console.log(DATA);

  const conversionValue =
    (Object.values(DATA.Result).reduce((total, item) => total + item, 0) /
      Object.values(DATA.Open).reduce((total, item) => total + item, 0)) *
    100;

  console.log(conversionValue);
  // console.log(DATA.Result)
  return (
    <Box sx={{ marginTop: "45px" }}>
      <Typography
        component="h3"
        sx={{
          fontSize: "24px",
          fontWeight: "bold",
          color: theme.palette.text.primary,
        }}
      >
        Ключевые метрики
      </Typography>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: isTablet
            ? isMobile
              ? "1fr"
              : "1fr 1fr"
            : "1fr 1fr 1fr",
          gap: "20px",
          marginTop: "40px",
        }}
      >
        <GeneralItem
          title="Открыли квиз"
          numberType="sum"
          general={DATA.Open}
          color={COLORS[0]}
          day={day}
        />
        <GeneralItem
          title="Получено заявок"
          numberType="sum"
          general={DATA.Result}
          color={COLORS[1]}
          day={day}
        />
        <GeneralItemTimeConv
          title="Конверсия"
          numberType="percent"
          conversionValue={conversionValue}
          general={DATA.Conversion}
          color={COLORS[2]}
          day={day}
        />
        <GeneralItemTimeConv
          title="Среднее время прохождения квиза"
          numberType="time"
          calculateTime
          general={DATA.AvTime}
          color={COLORS[3]}
          day={day}
        />
      </Box>
    </Box>
  );
};