fix: GeneralItem and GeneralItemTimeConv merged

src/pages/Analytics/General.tsx

@@ -9,7 +9,6 @@ type GeneralItemsProps = {
   title: string;
   general: Record<string, number>;
   color: string;
-  numberType: "sum" | "percent" | "time";
   calculateTime?: boolean;
   conversionValue?: number;
   day: boolean;
@@ -32,90 +31,12 @@ 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));
+  const statiscticsResult = Boolean(calculateTime || conversionValue);
 
   const data = Object.entries(general).sort(
     ([nextValue], [currentValue]) => Number(nextValue) - Number(currentValue),
@@ -131,7 +52,9 @@ const GeneralItemTimeConv = ({
 
   const numberValue = calculateTime
     ? time.reduce((total, value) => total + value, 0) / days.length
-    : conversionValue;
+    : conversionValue
+      ? conversionValue
+      : Object.values(general).reduce((total, item) => total + item, 0);
 
   if (
     Object.keys(general).length === 0 ||
@@ -154,23 +77,28 @@ const GeneralItemTimeConv = ({
       <Typography sx={{ margin: "10px 20px 0", fontWeight: "bold" }}>
         {calculateTime
           ? `${getCalculatedTime(numberValue ?? 0)} с`
-          : `${numberValue?.toFixed(2) ?? 0}%`}
+          : `${conversionValue ? numberValue?.toFixed(2) : numberValue}%`}
       </Typography>
       <LineChart
         xAxis={[
           {
-            data: days,
+            data: statiscticsResult ? days : Object.keys(general),
             valueFormatter: (value) =>
-              moment.utc(Number(value)).format("DD/MM/YYYY HH"),
+              moment.unix(Number(value)).format("DD/MM/YYYY HH") +
+              statiscticsResult
+                ? ""
+                : "ч",
           },
         ]}
         series={[
           {
-            data: Object.values(time),
+            data: Object.values(statiscticsResult ? time : general),
             valueFormatter: (value) =>
               calculateTime
                 ? getCalculatedTime(value)
-                : String((value * 100).toFixed(2)) + "%",
+                : statiscticsResult
+                  ? String((value * 100).toFixed(2)) + "%"
+                  : String(value.toFixed(2)),
           },
         ]}
         // dataset={Object.entries(general).map(([, v]) => moment.unix(v).format("ss:mm:HH")).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})}
@@ -251,29 +179,25 @@ export const General: FC<GeneralProps> = ({ data, day }) => {
       >
         <GeneralItem
           title="Открыли квиз"
-          numberType="sum"
           general={generalResponse.Open}
           color="#61BB1A"
           day={day}
         />
         <GeneralItem
           title="Получено заявок"
-          numberType="sum"
           general={generalResponse.Result}
           color="#7E2AEA"
           day={day}
         />
-        <GeneralItemTimeConv
+        <GeneralItem
           title="Конверсия"
-          numberType="percent"
           conversionValue={conversionValue}
           general={generalResponse.Conversion}
           color="#FB5607"
           day={day}
         />
-        <GeneralItemTimeConv
+        <GeneralItem
           title="Среднее время прохождения квиза"
-          numberType="time"
           calculateTime
           general={generalResponse.AvTime}
           color="#0886FB"