не выводить время если нет, заглушки пустых полей, имя вопроса в аналитике
This commit is contained in:
parent
4b87ca20fa
commit
ada81a6360
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user