не выводить время если нет, заглушки пустых полей, имя вопроса в аналитике

This commit is contained in:
Nastya 2024-04-05 21:23:08 +03:00
parent 4b87ca20fa
commit ada81a6360
3 changed files with 34 additions and 21 deletions

@ -63,7 +63,7 @@ const Answer = ({ title, percent, highlight }: AnswerProps) => {
border: `1px solid ${highlight ? theme.palette.brightPurple.main : theme.palette.grey2.main}`, border: `1px solid ${highlight ? theme.palette.brightPurple.main : theme.palette.grey2.main}`,
"& > span": { background: highlight ? "#D9C0F9" : "#9A9AAF1A" }, "& > span": { background: highlight ? "#D9C0F9" : "#9A9AAF1A" },
"&::before": { "&::before": {
content: `"${title}"`, content: title ? `"${title}"` : `"Без имени"`,
position: "absolute", position: "absolute",
zIndex: 1, zIndex: 1,
left: "20px", left: "20px",
@ -204,17 +204,23 @@ export const Answers: FC<AnswersProps> = ({ data }) => {
const theme = useTheme(); const theme = useTheme();
const answers = useMemo( const answers = useMemo(
() => () =>
Object.values(data ?? {}) data === null ?
.map((value) => []
Object.entries(value).map(([title, percent]) => ({ :
title, Object.keys(data ?? {})
percent, .map((key) =>
})), Object.entries(data[key]).map(([title, percent]) => ({
) title,
.flat(), percent,
key,
})),
)
.flat(),
[data], [data],
); );
console.log(answers)
console.log(page)
if (!data) { if (!data) {
return ( return (
<Typography textAlign="center" m="10px 0"> <Typography textAlign="center" m="10px 0">
@ -268,7 +274,7 @@ export const Answers: FC<AnswersProps> = ({ data }) => {
}, },
}} }}
> >
Заголовок вопроса. Варианты ответов Заголовок вопроса. {answers.slice(ANSWERS_PER_PAGE * (page - 1), ANSWERS_PER_PAGE * page)[0]?.key}
</Typography> </Typography>
<ButtonBase> <ButtonBase>
<DoubleCheckIcon /> <DoubleCheckIcon />

@ -84,7 +84,7 @@ const Device = ({ title, devices }: DeviceProps) => {
}, },
}} }}
> >
{id} {id ? id : "Неопределено"}
</Typography> </Typography>
<Typography>{value.toFixed(1)} %</Typography> <Typography>{value.toFixed(1)} %</Typography>
</Box> </Box>

@ -9,7 +9,7 @@ type GeneralItemsProps = {
title: string; title: string;
general: Record<string, number>; general: Record<string, number>;
color: string; color: string;
numberType: "sum" | "percent"; numberType: "sum" | "percent" | "time";
}; };
type GeneralProps = { type GeneralProps = {
@ -44,10 +44,15 @@ const GeneralItem = ({
const numberValue = const numberValue =
numberType === "sum" numberType === "sum"
? Object.values(general).reduce((total, item) => total + item, 0) ? Object.values(general).reduce((total, item) => total + item, 0)
: Object.entries(general).reduce( : 0
(total, [key, value]) => total + (value / Number(key)) * 100, Object.entries(general).reduce(
0, (total, [key, value]) => total + (value / Number(key)) * 100,
) / Object.keys(general).length || Number(0); 0,
) / Object.keys(general).length || Number(0);
console.log("general" , general)
console.log(Object.keys(general).length === 0)
if (Object.keys(general).length === 0) return <Typography textAlign="center">{`${title} - нет данных`}</Typography>
return ( return (
<Paper <Paper
sx={{ sx={{
@ -61,6 +66,7 @@ const GeneralItem = ({
{numberType === "sum" ? numberValue : `${numberValue.toFixed()}%`} {numberType === "sum" ? numberValue : `${numberValue.toFixed()}%`}
</Typography> </Typography>
<LineChart <LineChart
xAxis={[ xAxis={[
{ {
data: Object.keys(general), data: Object.keys(general),
@ -69,6 +75,7 @@ const GeneralItem = ({
}, },
]} ]}
series={[{ data: Object.values(general) }]} series={[{ data: Object.values(general) }]}
// dataset={Object.entries(general).map(([, v]) => moment.unix(v).format("ss/mm/HH")).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})}
height={220} height={220}
colors={[color]} colors={[color]}
sx={{ sx={{
@ -119,25 +126,25 @@ export const General: FC<GeneralProps> = ({ data }) => {
<GeneralItem <GeneralItem
title="Открыли квиз" title="Открыли квиз"
numberType="sum" numberType="sum"
general={data.Open || { 0: 0 }} general={ Object.entries(data.Open).filter(([, v]) => v > 0).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}) || { 0: 0 }}
color={COLORS[0]} color={COLORS[0]}
/> />
<GeneralItem <GeneralItem
title="Получено заявок" title="Получено заявок"
numberType="sum" numberType="sum"
general={data.Result || { 0: 0 }} general={ Object.entries(data.Result).filter(([, v]) => v > 0).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}) || { 0: 0 }}
color={COLORS[1]} color={COLORS[1]}
/> />
<GeneralItem <GeneralItem
title="Конверсия" title="Конверсия"
numberType="percent" numberType="percent"
general={data.Conversion || { 0: 0 }} general={ Object.entries(data.Conversion).filter(([, v]) => v > 0).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}) || { 0: 0 }}
color={COLORS[2]} color={COLORS[2]}
/> />
<GeneralItem <GeneralItem
title="Среднее время прохождения квиза" title="Среднее время прохождения квиза"
numberType="percent" numberType="time"
general={data.AvTime || { 0: 0 }} general={Object.entries(data.AvTime).filter(([, v]) => v > 0).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}) || { 0: 0 }}
color={COLORS[3]} color={COLORS[3]}
/> />
</Box> </Box>