281 lines
7.6 KiB
TypeScript
281 lines
7.6 KiB
TypeScript
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;
|
||
};
|
||
|
||
type GeneralProps = {
|
||
data: GeneralResponse | null;
|
||
};
|
||
|
||
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.utc(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,
|
||
}: 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.utc(Number(value) * 1000).format("DD/MM/YYYY"),
|
||
},
|
||
]}
|
||
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,
|
||
}: GeneralItemsProps) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(700));
|
||
|
||
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.utc(Number(value) * 1000).format("DD/MM/YYYY"),
|
||
},
|
||
]}
|
||
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 }) => {
|
||
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 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]}
|
||
/>
|
||
<GeneralItem
|
||
title="Получено заявок"
|
||
numberType="sum"
|
||
general={data.Result}
|
||
color={COLORS[1]}
|
||
/>
|
||
<GeneralItemTimeConv
|
||
title="Конверсия"
|
||
numberType="percent"
|
||
conversionValue={conversionValue}
|
||
general={data.Conversion}
|
||
color={COLORS[2]}
|
||
/>
|
||
<GeneralItemTimeConv
|
||
title="Среднее время прохождения квиза"
|
||
numberType="time"
|
||
calculateTime
|
||
general={data.AvTime}
|
||
color={COLORS[3]}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|