59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
};
|