fix: Devices statistic

src/api/statistic.ts

@@ -0,0 +1,31 @@
+import { makeRequest } from "@frontend/kitui";
+
+import type { LoginRequest, LoginResponse } from "@frontend/kitui";
+import { parseAxiosError } from "../utils/parse-error";
+
+const apiUrl = process.env.REACT_APP_DOMAIN + "/statistic";
+
+export type DevicesResponse = {
+  device: Record<string, number>;
+  os: Record<string, number>;
+  browser: Record<string, number>;
+};
+
+export const getDevicesList = async (
+  quizId: string,
+): Promise<[any | null, string?]> => {
+  try {
+    const devicesResponse = await makeRequest<unknown, DevicesResponse>({
+      method: "POST",
+      url: `${apiUrl}/devices?quizID=${quizId}`,
+      useToken: false,
+      withCredentials: true,
+    });
+
+    return [devicesResponse];
+  } catch (nativeError) {
+    const [error] = parseAxiosError(nativeError);
+
+    return [null, `Не получить статистику о девайсах. ${error}`];
+  }
+};

src/pages/Analytics/Analytics.tsx

@@ -1,6 +1,4 @@
-import * as React from "react";
-import HeaderFull from "@ui_kit/Header/HeaderFull";
-import SectionWrapper from "@ui_kit/SectionWrapper";
+import { useState, useEffect } from "react";
 import {
   Box,
   Button,
@@ -11,16 +9,48 @@ import {
   useTheme,
 } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers";
-import moment from "moment";
-import CalendarIcon from "@icons/CalendarIcon";
 import { LineChart } from "@mui/x-charts";
+import moment from "moment";
+import { enqueueSnackbar } from "notistack";
+
+import HeaderFull from "@ui_kit/Header/HeaderFull";
+import SectionWrapper from "@ui_kit/SectionWrapper";
+
+import { Devices } from "./Devices";
+
+import { getDevicesList } from "@api/statistic";
+
+import CalendarIcon from "@icons/CalendarIcon";
+
+import type { DevicesResponse } from "@api/statistic";
+
+const DEVICES_MOCK: DevicesResponse = {
+  device: {
+    additionalProp1: 10,
+    additionalProp2: 20,
+    additionalProp3: 30,
+  },
+  os: {
+    additionalProp1: 20,
+    additionalProp2: 78,
+    additionalProp3: 2,
+  },
+  browser: {
+    additionalProp1: 55,
+    additionalProp2: 11,
+    additionalProp3: 3,
+  },
+};
 
 export default function Analytics() {
+  const [devices, setDevices] = useState<DevicesResponse>(DEVICES_MOCK);
+  const [isOpen, setOpen] = useState(false);
+  const [isOpenEnd, setOpenEnd] = useState(false);
+
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
-  const [isOpen, setOpen] = React.useState(false);
   const handleClose = () => {
     setOpen(false);
   };
@@ -34,7 +64,6 @@ export default function Analytics() {
     }
   };
 
-  const [isOpenEnd, setOpenEnd] = React.useState(false);
   const handleCloseEnd = () => {
     setOpenEnd(false);
   };
@@ -180,6 +209,7 @@ export default function Analytics() {
             />
           </Paper>
         </Box>
+        <Devices devices={devices} />
       </SectionWrapper>
     </>
   );

src/pages/Analytics/Devices.tsx

@@ -0,0 +1,58 @@
+import { Box, Paper, useMediaQuery, useTheme } from "@mui/material";
+import { PieChart } from "@mui/x-charts";
+
+import type { DevicesResponse } from "@api/statistic";
+
+type DevicesProps = {
+  devices: DevicesResponse;
+};
+
+type DeviceProps = {
+  title: string;
+  devices: Record<string, number>;
+};
+
+const Device = ({ title, devices }: DeviceProps) => {
+  return (
+    <Paper>
+      <Box sx={{ height: "235px" }}>
+        <PieChart
+          series={[
+            {
+              data: Object.entries(devices).map(([id, value]) => ({
+                id,
+                value,
+              })),
+              innerRadius: 50,
+            },
+          ]}
+        />
+      </Box>
+    </Paper>
+  );
+};
+
+export const Devices = ({ devices }: DevicesProps) => {
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+  return (
+    <Box
+      sx={{
+        display: "grid",
+        gridTemplateColumns: isTablet
+          ? isMobile
+            ? "1fr"
+            : "1fr 1fr"
+          : "1fr 1fr 1fr",
+        gap: "20px",
+        marginTop: "30px",
+      }}
+    >
+      <Device title="Устройства" devices={devices.device} />
+      <Device title="Операционные системы" devices={devices.os} />
+      <Device title="Браузеры" devices={devices.browser} />
+    </Box>
+  );
+};