frontPanel/src/pages/Analytics/General.tsx

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

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

type GeneralItemsProps = {
  title: string;
  general: Record<string, number>;
  color: string;
  numberType: "sum" | "percent";
};

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

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

const GeneralItem = ({
  title,
  general,
  color,
  numberType,
}: GeneralItemsProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

  const numberValue =
    numberType === "sum"
      ? Object.values(general).reduce((total, item) => total + item, 0)
      : Object.entries(general).reduce(
          (total, [key, value]) => total + (value / Number(key)) * 100,
          0,
        ) / Object.keys(general).length || Number(0);
  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 === "sum" ? numberValue : `${numberValue.toFixed()}%`}
      </Typography>
      <LineChart
        xAxis={[{ data: Object.keys(general) }]}
        series={[{ data: Object.values(general) }]}
        height={220}
        colors={[color]}
        sx={{
          transform: isMobile ? "scale(1.1)" : "scale(1.2)",
          "& .MuiChartsAxis-tickContainer": { display: "none" },
        }}
      />
    </Paper>
  );
};

export const General: FC<GeneralProps> = ({ data }) => {
  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>
    );
  }
  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 || { 0: 0 }}
          color={COLORS[0]}
        />
        <GeneralItem
          title="Получено заявок"
          numberType="sum"
          general={data.Result || { 0: 0 }}
          color={COLORS[1]}
        />
        <GeneralItem
          title="Конверсия"
          numberType="percent"
          general={data.Conversion || { 0: 0 }}
          color={COLORS[2]}
        />
        <GeneralItem
          title="Среднее время прохождения квиза"
          numberType="percent"
          general={data.AvTime || { 0: 0 }}
          color={COLORS[3]}
        />
      </Box>
    </Box>
  );
};