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

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}`,
"& > span": { background: highlight ? "#D9C0F9" : "#9A9AAF1A" },
"&::before": {
content: `"${title}"`,
content: title ? `"${title}"` : `"Без имени"`,
position: "absolute",
zIndex: 1,
left: "20px",
@ -204,17 +204,23 @@ export const Answers: FC<AnswersProps> = ({ data }) => {
const theme = useTheme();
const answers = useMemo(
() =>
Object.values(data ?? {})
.map((value) =>
Object.entries(value).map(([title, percent]) => ({
title,
percent,
})),
)
.flat(),
data === null ?
[]
:
Object.keys(data ?? {})
.map((key) =>
Object.entries(data[key]).map(([title, percent]) => ({
title,
percent,
key,
})),
)
.flat(),
[data],
);
console.log(answers)
console.log(page)
if (!data) {
return (
<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>
<ButtonBase>
<DoubleCheckIcon />

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

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