feat: graph
This commit is contained in:
IlyaDoronin
parent
1663dc5b9f
commit
0377b70e02
@ -19,6 +19,7 @@
|
||||
"@types/react-dnd": "^3.0.2",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"axios": "^1.5.1",
|
||||
"cytoscape": "^3.26.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"emoji-mart": "^5.5.2",
|
||||
"file-saver": "^2.0.5",
|
||||
@ -28,6 +29,7 @@
|
||||
"notistack": "^3.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-cytoscapejs": "^2.0.0",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
@ -81,6 +83,7 @@
|
||||
"@emoji-mart/data": "^1.1.2",
|
||||
"@emoji-mart/react": "^1.1.1",
|
||||
"@types/react-beautiful-dnd": "^13.1.4",
|
||||
"@types/react-cytoscapejs": "^1.2.4",
|
||||
"craco-alias": "^3.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
63
src/assets/icons/QuestionsMapIcon.tsx
Normal file
63
src/assets/icons/QuestionsMapIcon.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function QuestionsMapIcon({ color = "#7E2AEA" }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="21"
|
||||
height="18"
|
||||
viewBox="0 0 21 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.90039 6.375H2.15039C1.73618 6.375 1.40039 6.71079 1.40039 7.125V10.875C1.40039 11.2892 1.73618 11.625 2.15039 11.625H5.90039C6.3146 11.625 6.65039 11.2892 6.65039 10.875V7.125C6.65039 6.71079 6.3146 6.375 5.90039 6.375Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.4004 0.75H14.9004C14.4862 0.75 14.1504 1.08579 14.1504 1.5V6C14.1504 6.41421 14.4862 6.75 14.9004 6.75H19.4004C19.8146 6.75 20.1504 6.41421 20.1504 6V1.5C20.1504 1.08579 19.8146 0.75 19.4004 0.75Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.4004 11.25H14.9004C14.4862 11.25 14.1504 11.5858 14.1504 12V16.5C14.1504 16.9142 14.4862 17.25 14.9004 17.25H19.4004C19.8146 17.25 20.1504 16.9142 20.1504 16.5V12C20.1504 11.5858 19.8146 11.25 19.4004 11.25Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.65039 9H10.4004"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1504 14.25H12.6504C12.3546 14.2513 12.0615 14.1939 11.7879 14.0813C11.5144 13.9686 11.2658 13.803 11.0567 13.5938C10.8475 13.3846 10.6818 13.1361 10.5692 12.8625C10.4565 12.589 10.3992 12.2958 10.4004 12V6.00002C10.3992 5.7042 10.4565 5.41106 10.5692 5.13752C10.6818 4.86397 10.8475 4.61544 11.0567 4.40626C11.2658 4.19708 11.5144 4.0314 11.7879 3.91876C12.0615 3.80613 12.3546 3.74878 12.6504 3.75002H14.1504"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
195
src/pages/QuestionsMap/graph.tsx
Normal file
195
src/pages/QuestionsMap/graph.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
import { Box } from "@mui/material";
|
||||
import Cytoscape from "react-cytoscapejs";
|
||||
|
||||
const POINTS = [
|
||||
{ data: { id: "point_1", label: "Вопрос 1" }, position: { x: 0, y: 0 } },
|
||||
{ data: { id: "point_2", label: "Вопрос 2" }, position: { x: 200, y: 100 } },
|
||||
{ data: { id: "point_3", label: "Вопрос 3" }, position: { x: 300, y: 100 } },
|
||||
{ data: { id: "point_4", label: "Вопрос 4" }, position: { x: 400, y: 100 } },
|
||||
{ data: { id: "point_5", label: "Вопрос 5" }, position: { x: 500, y: 100 } },
|
||||
{ data: { id: "point_6", label: "Вопрос 6" }, position: { x: 600, y: 100 } },
|
||||
{ data: { id: "point_7", label: "Вопрос 7" }, position: { x: 700, y: 100 } },
|
||||
{ data: { id: "point_8", label: "Вопрос 8" }, position: { x: 800, y: 100 } },
|
||||
{ data: { id: "point_9", label: "Вопрос 9" }, position: { x: 900, y: 100 } },
|
||||
{ data: { id: "point_10", label: "Вопрос 10" }, position: { x: 1000, y: 100 } },
|
||||
{ data: { id: "point_11", label: "Вопрос 11" }, position: { x: 1100, y: 100 } },
|
||||
{ data: { id: "point_12", label: "Вопрос 12" }, position: { x: 1200, y: 100 } },
|
||||
{ data: { id: "point_13", label: "Вопрос 13" }, position: { x: 300, y: 200 } },
|
||||
{ data: { id: "point_14", label: "Вопрос 14" }, position: { x: 400, y: 200 } },
|
||||
{ data: { id: "point_15", label: "Вопрос 15" }, position: { x: 500, y: 200 } },
|
||||
{ data: { id: "point_16", label: "Вопрос 16" }, position: { x: 600, y: 200 } },
|
||||
{ data: { id: "point_17", label: "Вопрос 17" }, position: { x: 700, y: 200 } },
|
||||
{ data: { id: "point_18", label: "Вопрос 18" }, position: { x: 800, y: 200 } },
|
||||
{ data: { id: "point_19", label: "Вопрос 19" }, position: { x: 900, y: 200 } },
|
||||
{ data: { id: "point_20", label: "Вопрос 20" }, position: { x: 1000, y: 200 } },
|
||||
{ data: { id: "point_21", label: "Вопрос 21" }, position: { x: 1100, y: 200 } },
|
||||
{ data: { id: "point_22", label: "Вопрос 22" }, position: { x: 1200, y: 200 } },
|
||||
{ data: { id: "point_23", label: "Вопрос 23" }, position: { x: 1300, y: 200 } },
|
||||
{ data: { id: "point_24", label: "Вопрос 24" }, position: { x: 1400, y: 200 } },
|
||||
{ data: { id: "point_25", label: "Вопрос 25" }, position: { x: 1500, y: 200 } },
|
||||
{ data: { id: "point_26", label: "Вопрос 26" }, position: { x: 1600, y: 200 } },
|
||||
{ data: { id: "point_27", label: "Вопрос 27" }, position: { x: 1700, y: 200 } },
|
||||
{ data: { id: "point_28", label: "Вопрос 28" }, position: { x: 1800, y: 200 } },
|
||||
{ data: { id: "point_29", label: "Вопрос 29" }, position: { x: 1900, y: 200 } },
|
||||
{ data: { id: "point_30", label: "Вопрос 30" }, position: { x: 2000, y: 200 } },
|
||||
{ data: { id: "point_31", label: "Вопрос 31" }, position: { x: 2100, y: 200 } },
|
||||
{ data: { id: "point_32", label: "Вопрос 32" }, position: { x: 2200, y: 200 } },
|
||||
{ data: { id: "point_33", label: "Вопрос 33" }, position: { x: 2300, y: 200 } },
|
||||
{ data: { id: "point_34", label: "Вопрос 34" }, position: { x: 2400, y: 200 } },
|
||||
{ data: { id: "point_35", label: "Вопрос 35" }, position: { x: 2500, y: 200 } },
|
||||
{ data: { id: "point_36", label: "Вопрос 36" }, position: { x: 2600, y: 200 } },
|
||||
{ data: { id: "point_37", label: "Вопрос 37" }, position: { x: 2700, y: 200 } },
|
||||
{ data: { id: "point_38", label: "Вопрос 38" }, position: { x: 2800, y: 200 } },
|
||||
{ data: { id: "point_39", label: "Вопрос 39" }, position: { x: 2900, y: 200 } },
|
||||
{ data: { id: "point_40", label: "Вопрос 40" }, position: { x: 3000, y: 200 } },
|
||||
{ data: { id: "point_41", label: "Вопрос 41" }, position: { x: 3100, y: 200 } },
|
||||
{ data: { id: "point_42", label: "Вопрос 42" }, position: { x: 3200, y: 200 } },
|
||||
{ data: { id: "point_43", label: "Вопрос 43" }, position: { x: 3300, y: 200 } },
|
||||
{ data: { id: "point_44", label: "Вопрос 44" }, position: { x: 3400, y: 200 } },
|
||||
{ data: { id: "point_45", label: "Вопрос 45" }, position: { x: 3500, y: 200 } },
|
||||
{ data: { id: "point_46", label: "Вопрос 46" }, position: { x: 3600, y: 200 } },
|
||||
{ data: { id: "point_47", label: "Вопрос 47" }, position: { x: 3700, y: 200 } },
|
||||
{ data: { id: "point_48", label: "Вопрос 48" }, position: { x: 3800, y: 200 } },
|
||||
{ data: { id: "point_49", label: "Вопрос 49" }, position: { x: 3900, y: 200 } },
|
||||
{ data: { id: "point_50", label: "Вопрос 50" }, position: { x: 4000, y: 200 } },
|
||||
{ data: { id: "point_51", label: "Вопрос 51" }, position: { x: 4100, y: 200 } },
|
||||
{ data: { id: "point_52", label: "Вопрос 52" }, position: { x: 4200, y: 200 } },
|
||||
{ data: { id: "point_53", label: "Вопрос 53" }, position: { x: 4300, y: 200 } },
|
||||
{ data: { id: "point_54", label: "Вопрос 54" }, position: { x: 4400, y: 200 } },
|
||||
{ data: { id: "point_55", label: "Вопрос 55" }, position: { x: 4500, y: 200 } },
|
||||
{ data: { id: "point_56", label: "Вопрос 56" }, position: { x: 4600, y: 200 } },
|
||||
{ data: { id: "point_57", label: "Вопрос 57" }, position: { x: 4700, y: 200 } },
|
||||
{ data: { id: "point_58", label: "Вопрос 58" }, position: { x: 4800, y: 200 } },
|
||||
{ data: { id: "point_59", label: "Вопрос 59" }, position: { x: 4900, y: 200 } },
|
||||
{ data: { id: "point_60", label: "Вопрос 60" }, position: { x: 5000, y: 200 } },
|
||||
{ data: { id: "point_61", label: "Вопрос 61" }, position: { x: 5100, y: 200 } },
|
||||
{ data: { id: "point_62", label: "Вопрос 62" }, position: { x: 5200, y: 200 } },
|
||||
{ data: { id: "point_63", label: "Вопрос 63" }, position: { x: 5300, y: 200 } },
|
||||
{ data: { id: "point_64", label: "Вопрос 64" }, position: { x: 5400, y: 200 } },
|
||||
{ data: { id: "point_65", label: "Вопрос 65" }, position: { x: 5500, y: 200 } },
|
||||
{ data: { id: "point_66", label: "Вопрос 66" }, position: { x: 5600, y: 200 } },
|
||||
{ data: { id: "point_67", label: "Вопрос 67" }, position: { x: 5700, y: 200 } },
|
||||
{ data: { id: "point_68", label: "Вопрос 68" }, position: { x: 5800, y: 200 } },
|
||||
{ data: { id: "point_69", label: "Вопрос 69" }, position: { x: 5900, y: 200 } },
|
||||
{ data: { id: "point_70", label: "Вопрос 70" }, position: { x: 6000, y: 200 } },
|
||||
{ data: { id: "point_71", label: "Вопрос 71" }, position: { x: 6100, y: 200 } },
|
||||
{ data: { id: "point_72", label: "Вопрос 72" }, position: { x: 6200, y: 200 } },
|
||||
{ data: { id: "point_73", label: "Вопрос 73" }, position: { x: 6300, y: 200 } },
|
||||
{ data: { id: "point_74", label: "Вопрос 74" }, position: { x: 6400, y: 200 } },
|
||||
{ data: { id: "point_75", label: "Вопрос 75" }, position: { x: 6500, y: 200 } },
|
||||
{ data: { id: "point_76", label: "Вопрос 76" }, position: { x: 6600, y: 200 } },
|
||||
{ data: { id: "point_77", label: "Вопрос 77" }, position: { x: 6700, y: 200 } },
|
||||
{ data: { id: "point_78", label: "Вопрос 78" }, position: { x: 6800, y: 200 } },
|
||||
{ data: { id: "point_79", label: "Вопрос 79" }, position: { x: 6900, y: 200 } },
|
||||
{ data: { id: "point_80", label: "Вопрос 80" }, position: { x: 7000, y: 200 } },
|
||||
{ data: { id: "point_81", label: "Вопрос 81" }, position: { x: 7100, y: 200 } },
|
||||
{ data: { id: "point_82", label: "Вопрос 82" }, position: { x: 7200, y: 200 } },
|
||||
{ data: { id: "point_83", label: "Вопрос 83" }, position: { x: 7300, y: 200 } },
|
||||
{ data: { id: "point_84", label: "Вопрос 84" }, position: { x: 7400, y: 200 } },
|
||||
{ data: { id: "point_85", label: "Вопрос 85" }, position: { x: 7500, y: 200 } },
|
||||
{ data: { id: "point_86", label: "Вопрос 86" }, position: { x: 7600, y: 200 } },
|
||||
{ data: { id: "point_87", label: "Вопрос 87" }, position: { x: 7700, y: 200 } },
|
||||
{ data: { id: "point_88", label: "Вопрос 88" }, position: { x: 7800, y: 200 } },
|
||||
{ data: { id: "point_89", label: "Вопрос 89" }, position: { x: 7900, y: 200 } },
|
||||
{ data: { id: "point_90", label: "Вопрос 90" }, position: { x: 8000, y: 200 } },
|
||||
{ data: { id: "point_91", label: "Вопрос 91" }, position: { x: 8100, y: 200 } },
|
||||
{ data: { id: "point_92", label: "Вопрос 92" }, position: { x: 8200, y: 200 } },
|
||||
{ data: { id: "point_93", label: "Вопрос 93" }, position: { x: 8300, y: 200 } },
|
||||
{ data: { id: "point_94", label: "Вопрос 94" }, position: { x: 8400, y: 200 } },
|
||||
{ data: { id: "point_95", label: "Вопрос 95" }, position: { x: 8500, y: 200 } },
|
||||
{ data: { id: "point_96", label: "Вопрос 96" }, position: { x: 8600, y: 200 } },
|
||||
{ data: { id: "point_97", label: "Вопрос 97" }, position: { x: 8700, y: 200 } },
|
||||
{ data: { id: "point_98", label: "Вопрос 98" }, position: { x: 8800, y: 200 } },
|
||||
{ data: { id: "point_99", label: "Вопрос 99" }, position: { x: 8900, y: 200 } },
|
||||
{ data: { id: "point_100", label: "Вопрос 100" }, position: { x: 9000, y: 200 } },
|
||||
{ data: { id: "point_101", label: "Вопрос 101" }, position: { x: 9100, y: 200 } },
|
||||
{ data: { id: "point_102", label: "Вопрос 102" }, position: { x: 9200, y: 200 } },
|
||||
{ data: { id: "point_103", label: "Вопрос 103" }, position: { x: 9300, y: 200 } },
|
||||
{ data: { id: "point_104", label: "Вопрос 104" }, position: { x: 9400, y: 200 } },
|
||||
{ data: { id: "point_105", label: "Вопрос 105" }, position: { x: 9500, y: 200 } },
|
||||
{ data: { id: "point_106", label: "Вопрос 106" }, position: { x: 9600, y: 200 } },
|
||||
{ data: { id: "point_107", label: "Вопрос 107" }, position: { x: 9700, y: 200 } },
|
||||
{ data: { id: "point_108", label: "Вопрос 108" }, position: { x: 9800, y: 200 } },
|
||||
{ data: { id: "point_109", label: "Вопрос 109" }, position: { x: 9900, y: 200 } },
|
||||
{ data: { id: "point_110", label: "Вопрос 110" }, position: { x: 10000, y: 200 } },
|
||||
{ data: { id: "point_111", label: "Вопрос 111" }, position: { x: 10100, y: 200 } },
|
||||
{ data: { id: "point_112", label: "Вопрос 112" }, position: { x: 10200, y: 200 } },
|
||||
{ data: { id: "point_113", label: "Вопрос 113" }, position: { x: 10300, y: 200 } },
|
||||
{ data: { id: "point_114", label: "Вопрос 114" }, position: { x: 10400, y: 200 } },
|
||||
{ data: { id: "point_115", label: "Вопрос 115" }, position: { x: 10500, y: 200 } },
|
||||
{ data: { id: "point_116", label: "Вопрос 116" }, position: { x: 10600, y: 200 } },
|
||||
{ data: { id: "point_117", label: "Вопрос 117" }, position: { x: 10700, y: 200 } },
|
||||
{ data: { id: "point_118", label: "Вопрос 118" }, position: { x: 10800, y: 200 } },
|
||||
{ data: { id: "point_119", label: "Вопрос 119" }, position: { x: 10900, y: 200 } },
|
||||
{ data: { id: "point_120", label: "Вопрос 120" }, position: { x: 11000, y: 200 } },
|
||||
{ data: { id: "point_121", label: "Вопрос 121" }, position: { x: 11100, y: 200 } },
|
||||
{ data: { id: "point_122", label: "Вопрос 122" }, position: { x: 11200, y: 200 } },
|
||||
{ data: { id: "point_123", label: "Вопрос 123" }, position: { x: 11300, y: 200 } },
|
||||
{ data: { id: "point_124", label: "Вопрос 124" }, position: { x: 11400, y: 200 } },
|
||||
{ data: { id: "point_125", label: "Вопрос 125" }, position: { x: 11500, y: 200 } },
|
||||
{ data: { id: "point_126", label: "Вопрос 126" }, position: { x: 11600, y: 200 } },
|
||||
{ data: { id: "point_127", label: "Вопрос 127" }, position: { x: 11700, y: 200 } },
|
||||
{ data: { id: "point_128", label: "Вопрос 128" }, position: { x: 11800, y: 200 } },
|
||||
{ data: { id: "point_129", label: "Вопрос 129" }, position: { x: 11900, y: 200 } },
|
||||
{ data: { id: "point_130", label: "Вопрос 130" }, position: { x: 12000, y: 200 } },
|
||||
{ data: { id: "point_131", label: "Вопрос 131" }, position: { x: 12100, y: 200 } },
|
||||
{ data: { id: "point_132", label: "Вопрос 132" }, position: { x: 12200, y: 200 } },
|
||||
{ data: { id: "point_133", label: "Вопрос 133" }, position: { x: 12300, y: 200 } },
|
||||
{ data: { id: "point_134", label: "Вопрос 134" }, position: { x: 12400, y: 200 } },
|
||||
{ data: { id: "point_135", label: "Вопрос 135" }, position: { x: 12500, y: 200 } },
|
||||
{ data: { id: "point_136", label: "Вопрос 136" }, position: { x: 12600, y: 200 } },
|
||||
{ data: { id: "point_137", label: "Вопрос 137" }, position: { x: 12700, y: 200 } },
|
||||
{ data: { id: "point_138", label: "Вопрос 138" }, position: { x: 12800, y: 200 } },
|
||||
{ data: { id: "point_139", label: "Вопрос 139" }, position: { x: 12900, y: 200 } },
|
||||
{ data: { id: "point_140", label: "Вопрос 140" }, position: { x: 13000, y: 200 } },
|
||||
{ data: { id: "point_141", label: "Вопрос 141" }, position: { x: 13100, y: 200 } },
|
||||
{ data: { id: "point_142", label: "Вопрос 142" }, position: { x: 13200, y: 200 } },
|
||||
{ data: { id: "point_143", label: "Вопрос 143" }, position: { x: 13300, y: 200 } },
|
||||
{ data: { id: "point_144", label: "Вопрос 144" }, position: { x: 13400, y: 200 } },
|
||||
{ data: { id: "point_145", label: "Вопрос 145" }, position: { x: 13500, y: 200 } },
|
||||
{ data: { id: "point_146", label: "Вопрос 146" }, position: { x: 13600, y: 200 } },
|
||||
{ data: { id: "point_147", label: "Вопрос 147" }, position: { x: 13700, y: 200 } },
|
||||
{ data: { id: "point_148", label: "Вопрос 148" }, position: { x: 13800, y: 200 } },
|
||||
{ data: { id: "point_149", label: "Вопрос 149" }, position: { x: 13900, y: 200 } },
|
||||
{ data: { id: "point_150", label: "Вопрос 150" }, position: { x: 14000, y: 200 } },
|
||||
{ data: { id: "point_151", label: "Вопрос 151" }, position: { x: 14100, y: 200 } },
|
||||
{ data: { id: "point_152", label: "Вопрос 152" }, position: { x: 14200, y: 200 } },
|
||||
{ data: { id: "point_153", label: "Вопрос 153" }, position: { x: 14300, y: 200 } },
|
||||
{ data: { id: "point_154", label: "Вопрос 154" }, position: { x: 14400, y: 200 } },
|
||||
{ data: { id: "point_155", label: "Вопрос 155" }, position: { x: 14500, y: 200 } },
|
||||
{ data: { id: "point_156", label: "Вопрос 156" }, position: { x: 14600, y: 200 } },
|
||||
{ data: { id: "point_157", label: "Вопрос 157" }, position: { x: 14700, y: 200 } },
|
||||
{ data: { id: "point_158", label: "Вопрос 158" }, position: { x: 14800, y: 200 } },
|
||||
{ data: { id: "point_159", label: "Вопрос 159" }, position: { x: 14900, y: 200 } },
|
||||
{ data: { id: "point_160", label: "Вопрос 160" }, position: { x: 15000, y: 200 } },
|
||||
|
||||
];
|
||||
|
||||
const BRIDGES = [
|
||||
{ data: { source: "point_1", target: "point_2" } },
|
||||
{ data: { source: "point_1", target: "point_3" } },
|
||||
];
|
||||
|
||||
export const Graph = () => {
|
||||
const elements = [...POINTS, ...BRIDGES];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
background: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||||
marginTop: "30px",
|
||||
}}
|
||||
>
|
||||
<Cytoscape
|
||||
elements={elements}
|
||||
style={{
|
||||
height: "480px",
|
||||
background: "#F2F3F7",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
51
src/pages/QuestionsMap/index.tsx
Normal file
51
src/pages/QuestionsMap/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { Box, Typography, Button, useTheme } from "@mui/material";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import { Graph } from "./graph";
|
||||
|
||||
import { quizStore } from "@root/quizes";
|
||||
|
||||
import ArrowLeft from "@icons/questionsPage/arrowLeft";
|
||||
|
||||
export const QuestionsMap = () => {
|
||||
const { listQuizes, updateQuizesList } = quizStore();
|
||||
const quizId = Number(useParams().quizId);
|
||||
const quize = listQuizes[quizId];
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ marginTop: "50px" }}>
|
||||
Карта вопросов
|
||||
</Typography>
|
||||
<Graph />
|
||||
<Box sx={{ display: "flex", gap: "8px", marginTop: "25px" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
height: "44px",
|
||||
marginLeft: "auto",
|
||||
}}
|
||||
onClick={() => updateQuizesList(quizId, { step: quize.step - 1 })}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
height: "44px",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
background: theme.palette.brightPurple.main,
|
||||
fontSize: "18px",
|
||||
}}
|
||||
onClick={() => updateQuizesList(quizId, { step: quize.step + 1 })}
|
||||
>
|
||||
Следующий шаг
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@ -1,133 +1,180 @@
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
Box,
|
||||
useTheme,
|
||||
Typography,
|
||||
Table,
|
||||
TableCell,
|
||||
TableBody,
|
||||
TableContainer,
|
||||
TableRow, IconButton, Link,
|
||||
Button,
|
||||
Modal,
|
||||
Box,
|
||||
useTheme,
|
||||
Typography,
|
||||
Table,
|
||||
TableCell,
|
||||
TableBody,
|
||||
TableContainer,
|
||||
TableRow,
|
||||
IconButton,
|
||||
Link,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import * as React from "react";
|
||||
import {useState} from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ModalSizeImage () {
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
export default function ModalSizeImage() {
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
function createData(
|
||||
name: string,
|
||||
size: string
|
||||
) {
|
||||
return { name, size };
|
||||
}
|
||||
function createData(name: string, size: string) {
|
||||
return { name, size };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Прямая ссылка/домен', "1792х1509 px"),
|
||||
createData('Модальное окно на сайте', "1380х1300 px"),
|
||||
createData('Во ВКонтакте', "1166х1200 px"),
|
||||
createData('Версия для планшета', "767х220 px"),
|
||||
createData('Мобильная версия', "400х220 px"),
|
||||
createData('Картинка для дизайна Centered', "900х490 px"),
|
||||
createData('Картинка для дизайна Expanded', "1920х1080 px"),
|
||||
];
|
||||
const rows = [
|
||||
createData("Прямая ссылка/домен", "1792х1509 px"),
|
||||
createData("Модальное окно на сайте", "1380х1300 px"),
|
||||
createData("Во ВКонтакте", "1166х1200 px"),
|
||||
createData("Версия для планшета", "767х220 px"),
|
||||
createData("Мобильная версия", "400х220 px"),
|
||||
createData("Картинка для дизайна Centered", "900х490 px"),
|
||||
createData("Картинка для дизайна Expanded", "1920х1080 px"),
|
||||
];
|
||||
|
||||
const rows2 = [
|
||||
createData('Вертикальный вариант', "180х240 px"),
|
||||
createData('Квадратные', "240х240 px"),
|
||||
createData('Варианты и картинка', "380х307 px"),
|
||||
createData('Консультант', "140х140 px"),
|
||||
createData('Логотип', "107х37 px"),
|
||||
createData('Результаты',"1100х600 px"),
|
||||
createData('Бонус', "200х60 px"),
|
||||
createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
|
||||
];
|
||||
const rows2 = [
|
||||
createData("Вертикальный вариант", "180х240 px"),
|
||||
createData("Квадратные", "240х240 px"),
|
||||
createData("Варианты и картинка", "380х307 px"),
|
||||
createData("Консультант", "140х140 px"),
|
||||
createData("Логотип", "107х37 px"),
|
||||
createData("", "1100х600 px"),
|
||||
createData("Бонус", "200х60 px"),
|
||||
createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
component='button'
|
||||
sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textAlign: 'left',
|
||||
color: theme.palette.orange.main,
|
||||
textDecorationColor: theme.palette.orange.main
|
||||
}}
|
||||
onClick={handleOpen}>Размер картинок</Link>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
component="button"
|
||||
sx={{
|
||||
mt: "20px",
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textAlign: "left",
|
||||
color: theme.palette.orange.main,
|
||||
textDecorationColor: theme.palette.orange.main,
|
||||
}}
|
||||
onClick={handleOpen}
|
||||
>
|
||||
Размер картинок
|
||||
</Link>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute" as "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: "540px",
|
||||
width: "100%",
|
||||
minHeight: "632px",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "baseline",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: "10px 9px 17px 20px",
|
||||
borderRadius: "12px 12px 0px 0px",
|
||||
}}
|
||||
>
|
||||
<Typography variant={"h5"}>Размеры картинок</Typography>
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ padding: "15px 20px 0px" }}>
|
||||
<Typography
|
||||
variant={"body2"}
|
||||
sx={{ color: theme.palette.grey2.main, fontWeight: 400 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute" as "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: "540px",
|
||||
width: "100%",
|
||||
minHeight: "632px",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "baseline",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: "10px 9px 17px 20px",
|
||||
borderRadius: "12px 12px 0px 0px"
|
||||
}}>
|
||||
<Typography variant={"h5"}>Размеры картинок</Typography>
|
||||
<IconButton onClick={handleClose}><CloseIcon/></IconButton>
|
||||
</Box>
|
||||
<Box sx={{padding: "15px 20px 0px"}}>
|
||||
<Typography variant={"body2"} sx={{color: theme.palette.grey2.main, fontWeight: 400}}>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography>
|
||||
</Box>
|
||||
<Box sx={{padding: "15px 40px 30px"}}>
|
||||
|
||||
{rows.map((row) => (
|
||||
<Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
|
||||
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.name}</Typography></Box>
|
||||
<Box sx={{borderBottom: "solid 1px #F2F3F7", width: "100%", margin: "0 7px"}}></Box>
|
||||
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"}>{row.size}</Typography></Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: "20px"
|
||||
}}
|
||||
>
|
||||
<Typography variant={"h5"}>Размеры изображений в квизе</Typography>
|
||||
</Box>
|
||||
<Box sx={{padding: "15px 40px 20px"}}>
|
||||
{rows2.map((row) => (
|
||||
<Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
|
||||
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.name}</Typography></Box>
|
||||
<Box sx={{borderBottom: "solid 1px #F2F3F7", width: "100%", margin: "0 7px"}}></Box>
|
||||
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"}>{row.size}</Typography></Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
Рекомендованный размер зависит от того, как вы будете чаще
|
||||
использовать квиз:
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ padding: "15px 40px 30px" }}>
|
||||
{rows.map((row) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
paddingBottom: "5px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "block ruby", height: "20px" }}>
|
||||
<Typography variant={"body2"} fontWeight={400}>
|
||||
{row.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: "solid 1px #F2F3F7",
|
||||
width: "100%",
|
||||
margin: "0 7px",
|
||||
}}
|
||||
></Box>
|
||||
<Box sx={{ display: "block ruby", height: "20px" }}>
|
||||
<Typography variant={"body2"}>{row.size}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
);
|
||||
}
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography variant={"h5"}>Размеры изображений в квизе</Typography>
|
||||
</Box>
|
||||
<Box sx={{ padding: "15px 40px 20px" }}>
|
||||
{rows2.map((row) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
paddingBottom: "5px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "block ruby", height: "20px" }}>
|
||||
<Typography variant={"body2"} fontWeight={400}>
|
||||
{row.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: "solid 1px #F2F3F7",
|
||||
width: "100%",
|
||||
margin: "0 7px",
|
||||
}}
|
||||
></Box>
|
||||
<Box sx={{ display: "block ruby", height: "20px" }}>
|
||||
<Typography variant={"body2"}>{row.size}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -28,6 +28,7 @@ const DESCRIPTIONS = [
|
||||
"Настройка стартовой страницы",
|
||||
"Задайте вопросы",
|
||||
"Настройте авторезультаты",
|
||||
"Оценка графа карты вопросов",
|
||||
"Настройте форму контактов",
|
||||
"Установите квиз",
|
||||
"Запустите рекламу",
|
||||
|
||||
@ -11,23 +11,25 @@ import {
|
||||
|
||||
import { quizStore } from "@root/quizes";
|
||||
|
||||
import MegaphoneIcon from "../assets/icons/MegaphoneIcon";
|
||||
import QuestionIcon from "../assets/icons/QuestionIcon";
|
||||
import ChartPieIcon from "../assets/icons/ChartPieIcon";
|
||||
import ContactBookIcon from "../assets/icons/ContactBookIcon";
|
||||
import FlowArrowIcon from "../assets/icons/FlowArrowIcon";
|
||||
import CollapseMenuIcon from "../assets/icons/CollapseMenuIcon";
|
||||
import TagIcon from "../assets/icons/TagIcon";
|
||||
import PencilCircleIcon from "../assets/icons/PencilCircleIcon";
|
||||
import PuzzlePieceIcon from "../assets/icons/PuzzlePieceIcon";
|
||||
import GearIcon from "../assets/icons/GearIcon";
|
||||
import LayoutIcon from "../assets/icons/LayoutIcon";
|
||||
import MegaphoneIcon from "@icons/MegaphoneIcon";
|
||||
import QuestionIcon from "@icons/QuestionIcon";
|
||||
import QuestionsMapIcon from "@icons/QuestionsMapIcon";
|
||||
import ChartPieIcon from "@icons/ChartPieIcon";
|
||||
import ContactBookIcon from "@icons/ContactBookIcon";
|
||||
import FlowArrowIcon from "@icons/FlowArrowIcon";
|
||||
import CollapseMenuIcon from "@icons/CollapseMenuIcon";
|
||||
import TagIcon from "@icons/TagIcon";
|
||||
import PencilCircleIcon from "@icons/PencilCircleIcon";
|
||||
import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
|
||||
import GearIcon from "@icons/GearIcon";
|
||||
import LayoutIcon from "@icons/LayoutIcon";
|
||||
import MenuItem from "./MenuItem";
|
||||
|
||||
const createQuizMenuItems = [
|
||||
[LayoutIcon, "Стартовая страница"],
|
||||
[QuestionIcon, "Вопросы"],
|
||||
[ChartPieIcon, "Результаты"],
|
||||
[QuestionsMapIcon, "Карта вопросов"],
|
||||
[ContactBookIcon, "Форма контактов"],
|
||||
[FlowArrowIcon, "Установка квиза"],
|
||||
[MegaphoneIcon, "Запуск рекламы"],
|
||||
@ -43,7 +45,7 @@ const quizSettingsMenuItems = [
|
||||
export default function Sidebar() {
|
||||
const theme = useTheme();
|
||||
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
|
||||
const [progress, setProgress] = useState<number>(1 / 6);
|
||||
const [progress, setProgress] = useState<number>(1 / 7);
|
||||
const quizId = Number(useParams().quizId);
|
||||
const { listQuizes, updateQuizesList } = quizStore();
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ interface Props {
|
||||
steps?: number;
|
||||
}
|
||||
|
||||
export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 7 }: Props) {
|
||||
export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 8 }: Props) {
|
||||
const theme = useTheme();
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
|
||||
import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
|
||||
import { Result } from "../pages/Result/Result";
|
||||
import { Setting } from "../pages/Result/Setting";
|
||||
import { QuestionsMap } from "../pages/QuestionsMap";
|
||||
|
||||
interface Props {
|
||||
activeStep: number;
|
||||
@ -34,10 +35,12 @@ export default function SwitchStepPages({
|
||||
if (!createResult) return <Result />;
|
||||
return <Setting />;
|
||||
case 4:
|
||||
return <ContactFormPage />;
|
||||
return <QuestionsMap />;
|
||||
case 5:
|
||||
return <InstallQuiz />;
|
||||
return <ContactFormPage />;
|
||||
case 6:
|
||||
return <InstallQuiz />;
|
||||
case 7:
|
||||
return <>Реклама</>;
|
||||
|
||||
default:
|
||||
|
||||
33
yarn.lock
33
yarn.lock
@ -2180,6 +2180,11 @@
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/cytoscape@*":
|
||||
version "3.19.13"
|
||||
resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.19.13.tgz#2e4c5df1e85d4ad77b7bf1375f0f01c8f26457b1"
|
||||
integrity sha512-FZY6Zyh8kGqEwZ6jizCJa5rbKriOWqJaEoGR8AG2LNQyo5sy1q7hFNo8ojbRpHNBluBmCJa+/w//OWaehxolgA==
|
||||
|
||||
"@types/eslint-scope@^3.7.3":
|
||||
version "3.7.4"
|
||||
resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz"
|
||||
@ -2346,6 +2351,14 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-cytoscapejs@^1.2.4":
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-cytoscapejs/-/react-cytoscapejs-1.2.4.tgz#9cdc1b2cdc5fe9d36417dd348f410e52c6745d07"
|
||||
integrity sha512-bMWmBCRAjPrQgondFLfqworU/DDpAr15aw3jdJUik7QMjHI5B+kTNPi2Q0mCzPQXHbB1+Bg7rJbYjbfPUZsISA==
|
||||
dependencies:
|
||||
"@types/cytoscape" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-dnd@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz"
|
||||
@ -3887,6 +3900,14 @@ csstype@^3.0.2, csstype@^3.1.1:
|
||||
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
|
||||
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
|
||||
|
||||
cytoscape@^3.26.0:
|
||||
version "3.26.0"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.26.0.tgz#b4c6961445fd51e1fd3cca83c3ffe924d9a8abc9"
|
||||
integrity sha512-IV+crL+KBcrCnVVUCZW+zRRRFUZQcrtdOPXki+o4CFUWLdAEYvuZLcBSJC9EBK++suamERKzeY7roq2hdovV3w==
|
||||
dependencies:
|
||||
heap "^0.2.6"
|
||||
lodash "^4.17.21"
|
||||
|
||||
damerau-levenshtein@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
|
||||
@ -5199,6 +5220,11 @@ he@^1.2.0:
|
||||
resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
|
||||
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
|
||||
|
||||
heap@^0.2.6:
|
||||
version "0.2.7"
|
||||
resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
|
||||
integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
|
||||
|
||||
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
|
||||
@ -7893,6 +7919,13 @@ react-beautiful-dnd@^13.1.1:
|
||||
redux "^4.0.4"
|
||||
use-memo-one "^1.1.1"
|
||||
|
||||
react-cytoscapejs@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz#fdc2547626df0678acfbb48e73a437ddc1687b01"
|
||||
integrity sha512-t3SSl1DQy7+JQjN+8QHi1anEJlM3i3aAeydHTsJwmjo/isyKK7Rs7oCvU6kZsB9NwZidzZQR21Vm2PcBLG/Tjg==
|
||||
dependencies:
|
||||
prop-types "^15.8.1"
|
||||
|
||||
react-dev-utils@^12.0.1:
|
||||
version "12.0.1"
|
||||
resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user