add page results
This commit is contained in:
Tatiana Nikolaeva
parent
33f2b5ef62
commit
6b8197ce10
6 changed files with 396 additions and 8 deletions
50
SurveyFrontend/package-lock.json
generated
50
SurveyFrontend/package-lock.json
generated
|
|
@ -9,9 +9,13 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@formkit/tempo": "^0.1.2",
|
"@formkit/tempo": "^0.1.2",
|
||||||
|
"chart.js": "^4.4.9",
|
||||||
|
"chartjs-plugin-annotation": "^3.1.0",
|
||||||
|
"chartjs-plugin-datalabels": "^2.2.0",
|
||||||
"mobx": "^6.13.7",
|
"mobx": "^6.13.7",
|
||||||
"mobx-react": "^9.2.0",
|
"mobx-react": "^9.2.0",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-router-dom": "^7.5.2",
|
"react-router-dom": "^7.5.2",
|
||||||
"react-textarea-autosize": "^8.5.9",
|
"react-textarea-autosize": "^8.5.9",
|
||||||
|
|
@ -972,6 +976,12 @@
|
||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@kurkle/color": {
|
||||||
|
"version": "0.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||||
|
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@nodelib/fs.scandir": {
|
"node_modules/@nodelib/fs.scandir": {
|
||||||
"version": "2.1.5",
|
"version": "2.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||||
|
|
@ -1989,6 +1999,36 @@
|
||||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/chart.js": {
|
||||||
|
"version": "4.4.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
|
||||||
|
"integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@kurkle/color": "^0.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"pnpm": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chartjs-plugin-annotation": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"chart.js": ">=4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chartjs-plugin-datalabels": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"chart.js": ">=3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
|
@ -3102,6 +3142,16 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-chartjs-2": {
|
||||||
|
"version": "5.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
|
||||||
|
"integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"chart.js": "^4.1.1",
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-dom": {
|
"node_modules/react-dom": {
|
||||||
"version": "19.0.0",
|
"version": "19.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,13 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@formkit/tempo": "^0.1.2",
|
"@formkit/tempo": "^0.1.2",
|
||||||
|
"chart.js": "^4.4.9",
|
||||||
|
"chartjs-plugin-annotation": "^3.1.0",
|
||||||
|
"chartjs-plugin-datalabels": "^2.2.0",
|
||||||
"mobx": "^6.13.7",
|
"mobx": "^6.13.7",
|
||||||
"mobx-react": "^9.2.0",
|
"mobx-react": "^9.2.0",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-router-dom": "^7.5.2",
|
"react-router-dom": "^7.5.2",
|
||||||
"react-textarea-autosize": "^8.5.9",
|
"react-textarea-autosize": "^8.5.9",
|
||||||
|
|
|
||||||
3
SurveyFrontend/src/assets/gmail_groups.svg
Normal file
3
SurveyFrontend/src/assets/gmail_groups.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="58" height="61" viewBox="0 0 58 61" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 50.8333V43.7802C0 42.3399 0.342361 41.0055 1.02708 39.777C1.71181 38.5486 2.65833 37.6166 3.86667 36.9812C4.43056 36.6847 4.97431 36.4093 5.49792 36.1552C6.06181 35.901 6.64583 35.668 7.25 35.4562V50.8333H0ZM9.66667 33.0416C7.65278 33.0416 5.94097 32.3003 4.53125 30.8177C3.12153 29.335 2.41667 27.5347 2.41667 25.4166C2.41667 23.2986 3.12153 21.4982 4.53125 20.0156C5.94097 18.5329 7.65278 17.7916 9.66667 17.7916C11.6806 17.7916 13.3924 18.5329 14.8021 20.0156C16.2118 21.4982 16.9167 23.2986 16.9167 25.4166C16.9167 27.5347 16.2118 29.335 14.8021 30.8177C13.3924 32.3003 11.6806 33.0416 9.66667 33.0416ZM9.66667 27.9583C10.3514 27.9583 10.9153 27.7253 11.3583 27.2593C11.8417 26.751 12.0833 26.1368 12.0833 25.4166C12.0833 24.6965 11.8417 24.1034 11.3583 23.6375C10.9153 23.1291 10.3514 22.875 9.66667 22.875C8.98195 22.875 8.39792 23.1291 7.91458 23.6375C7.47153 24.1034 7.25 24.6965 7.25 25.4166C7.25 26.1368 7.47153 26.751 7.91458 27.2593C8.39792 27.7253 8.98195 27.9583 9.66667 27.9583ZM9.66667 50.8333V43.7166C9.66667 42.2763 10.009 40.9632 10.6938 39.777C11.4188 38.5486 12.3653 37.6166 13.5333 36.9812C16.0306 35.668 18.5681 34.6937 21.1458 34.0583C23.7236 33.3805 26.3417 33.0416 29 33.0416C31.6583 33.0416 34.2764 33.3805 36.8542 34.0583C39.4319 34.6937 41.9694 35.668 44.4667 36.9812C45.6347 37.6166 46.5611 38.5486 47.2458 39.777C47.9708 40.9632 48.3333 42.2763 48.3333 43.7166V50.8333H9.66667ZM14.5 45.75H43.5V43.7166C43.5 43.2507 43.3792 42.827 43.1375 42.4458C42.9361 42.0645 42.6542 41.768 42.2917 41.5562C40.1167 40.4125 37.9215 39.5652 35.7063 39.0145C33.491 38.4215 31.2556 38.125 29 38.125C26.7444 38.125 24.509 38.4215 22.2938 39.0145C20.0785 39.5652 17.8833 40.4125 15.7083 41.5562C15.3458 41.768 15.0437 42.0645 14.8021 42.4458C14.6007 42.827 14.5 43.2507 14.5 43.7166V45.75ZM29 30.5C26.3417 30.5 24.066 29.5045 22.1729 27.5135C20.2799 25.5225 19.3333 23.1291 19.3333 20.3333C19.3333 17.5375 20.2799 15.1441 22.1729 13.1531C24.066 11.1621 26.3417 10.1666 29 10.1666C31.6583 10.1666 33.934 11.1621 35.8271 13.1531C37.7201 15.1441 38.6667 17.5375 38.6667 20.3333C38.6667 23.1291 37.7201 25.5225 35.8271 27.5135C33.934 29.5045 31.6583 30.5 29 30.5ZM29 25.4166C30.3292 25.4166 31.4569 24.9295 32.3833 23.9552C33.35 22.9385 33.8333 21.7312 33.8333 20.3333C33.8333 18.9354 33.35 17.7493 32.3833 16.775C31.4569 15.7583 30.3292 15.25 29 15.25C27.6708 15.25 26.5229 15.7583 25.5563 16.775C24.6299 17.7493 24.1667 18.9354 24.1667 20.3333C24.1667 21.7312 24.6299 22.9385 25.5563 23.9552C26.5229 24.9295 27.6708 25.4166 29 25.4166ZM48.3333 33.0416C46.3194 33.0416 44.6076 32.3003 43.1979 30.8177C41.7882 29.335 41.0833 27.5347 41.0833 25.4166C41.0833 23.2986 41.7882 21.4982 43.1979 20.0156C44.6076 18.5329 46.3194 17.7916 48.3333 17.7916C50.3472 17.7916 52.059 18.5329 53.4688 20.0156C54.8785 21.4982 55.5833 23.2986 55.5833 25.4166C55.5833 27.5347 54.8785 29.335 53.4688 30.8177C52.059 32.3003 50.3472 33.0416 48.3333 33.0416ZM48.3333 27.9583C49.0181 27.9583 49.5819 27.7253 50.025 27.2593C50.5083 26.751 50.75 26.1368 50.75 25.4166C50.75 24.6965 50.5083 24.1034 50.025 23.6375C49.5819 23.1291 49.0181 22.875 48.3333 22.875C47.6486 22.875 47.0646 23.1291 46.5813 23.6375C46.1382 24.1034 45.9167 24.6965 45.9167 25.4166C45.9167 26.1368 46.1382 26.751 46.5813 27.2593C47.0646 27.7253 47.6486 27.9583 48.3333 27.9583ZM50.75 50.8333V35.4562C51.3542 35.668 51.9181 35.901 52.4417 36.1552C53.0056 36.4093 53.5695 36.6847 54.1333 36.9812C55.3417 37.6166 56.2882 38.5486 56.9729 39.777C57.6576 41.0055 58 42.3399 58 43.7802V50.8333H50.75Z" fill="#FEF7FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
3
SurveyFrontend/src/assets/send.svg
Normal file
3
SurveyFrontend/src/assets/send.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M7.25 48.3333V9.66663L53.1667 29L7.25 48.3333ZM12.0833 41.0833L40.7208 29L12.0833 16.9166V25.375L26.5833 29L12.0833 32.625V41.0833ZM12.0833 41.0833V29V16.9166V25.375V32.625V41.0833Z" fill="#FEF7FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 312 B |
|
|
@ -1,5 +1,148 @@
|
||||||
/*Results.module.css*/
|
/* Results.module.css */
|
||||||
|
|
||||||
.results{
|
.results {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
}
|
margin: 19px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: stretch;
|
||||||
|
margin: 30px 0;
|
||||||
|
gap: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 15px;
|
||||||
|
min-height: 180px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.countAnswer {
|
||||||
|
width: 36%;
|
||||||
|
background-color: #65B953;
|
||||||
|
}
|
||||||
|
|
||||||
|
.completion_percentage {
|
||||||
|
width: 36%;
|
||||||
|
background-color: #EEDD59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
width: 24%;
|
||||||
|
background-color: #A763EB;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statItem h3 {
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statItem p {
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countAnswer p,
|
||||||
|
.completion_percentage p {
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgGroup,
|
||||||
|
.imgSend {
|
||||||
|
width: 58px;
|
||||||
|
height: 61px;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: auto;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.questionContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
padding: 25px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.questionContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 40px;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.textContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 11px;
|
||||||
|
width: 30%;
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.questionContainer h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000000;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.answerCount {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartContainer {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pieContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 450px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 450px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 150px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,72 @@
|
||||||
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
|
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
|
||||||
import styles from './Results.module.css'
|
import styles from './Results.module.css';
|
||||||
|
import {Bar, Pie} from 'react-chartjs-2';
|
||||||
|
import {Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title} from 'chart.js';
|
||||||
import {useOutletContext} from "react-router-dom";
|
import {useOutletContext} from "react-router-dom";
|
||||||
import {ISurvey} from "../../api/SurveyApi.ts";
|
import {ISurvey} from "../../api/SurveyApi.ts";
|
||||||
|
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||||
|
import annotationPlugin from 'chartjs-plugin-annotation';
|
||||||
|
import Group from '../../assets/gmail_groups.svg?react';
|
||||||
|
import Send from '../../assets/send.svg?react';
|
||||||
|
|
||||||
|
|
||||||
|
ChartJS.register(
|
||||||
|
ArcElement, Tooltip, Legend,
|
||||||
|
CategoryScale, LinearScale, BarElement, Title, ChartDataLabels, annotationPlugin
|
||||||
|
);
|
||||||
|
|
||||||
|
// Типы для данных
|
||||||
|
interface QuestionStats {
|
||||||
|
questionText: string;
|
||||||
|
totalAnswers: number;
|
||||||
|
options: {
|
||||||
|
text: string;
|
||||||
|
percentage: number;
|
||||||
|
}[];
|
||||||
|
isMultipleChoice?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export const Results = () => {
|
export const Results = () => {
|
||||||
|
|
||||||
const { survey, setSurvey } = useOutletContext<{
|
const { survey, setSurvey } = useOutletContext<{
|
||||||
survey: ISurvey;
|
survey: ISurvey;
|
||||||
setSurvey: (survey: ISurvey) => void;
|
setSurvey: (survey: ISurvey) => void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
return(
|
|
||||||
|
const surveyStats = {
|
||||||
|
totalParticipants: 100,
|
||||||
|
completionPercentage: 80,
|
||||||
|
status: 'Активен',
|
||||||
|
questions: [
|
||||||
|
{
|
||||||
|
questionText: "Вопрос 1",
|
||||||
|
totalAnswers: 80,
|
||||||
|
options: [
|
||||||
|
{ text: "Вариант 1", percentage: 46 },
|
||||||
|
{ text: "Вариант 2", percentage: 15 },
|
||||||
|
{ text: "Вариант 3", percentage: 39 }
|
||||||
|
],
|
||||||
|
isMultipleChoice: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
questionText: "Вопрос 2",
|
||||||
|
totalAnswers: 100,
|
||||||
|
options: [
|
||||||
|
{ text: "Вариант 1", percentage: 50 },
|
||||||
|
{ text: "Вариант 2", percentage: 20 },
|
||||||
|
{ text: "Вариант 3", percentage: 100 },
|
||||||
|
{ text: "Вариант 4", percentage: 80 }
|
||||||
|
],
|
||||||
|
isMultipleChoice: true
|
||||||
|
}
|
||||||
|
] as QuestionStats[]
|
||||||
|
};
|
||||||
|
|
||||||
|
// Цветовая палитра
|
||||||
|
const colorsForPie = ['#67C587', '#C9EAD4', '#EAF6ED'];
|
||||||
|
const colorsForBar = ['#8979FF'];
|
||||||
|
|
||||||
|
return (
|
||||||
<div className={styles.results}>
|
<div className={styles.results}>
|
||||||
<SurveyInfo
|
<SurveyInfo
|
||||||
titleSurvey={survey.title}
|
titleSurvey={survey.title}
|
||||||
|
|
@ -18,6 +74,135 @@ export const Results = () => {
|
||||||
setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
|
setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
|
||||||
setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
|
setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
|
||||||
/>
|
/>
|
||||||
|
<div className={styles.statsContainer}>
|
||||||
|
<div className={`${styles.statItem} ${styles.countAnswer}`}>
|
||||||
|
<h3>Количество ответов</h3>
|
||||||
|
<div className={styles.result}>
|
||||||
|
<p>{surveyStats.totalParticipants}</p>
|
||||||
|
<Group className={styles.imgGroup}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`${styles.statItem} ${styles.completion_percentage}`}>
|
||||||
|
<h3>Процент завершения</h3>
|
||||||
|
<div className={styles.result}>
|
||||||
|
<p>{surveyStats.completionPercentage}%</p>
|
||||||
|
<Send className={styles.imgSend}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`${styles.statItem} ${styles.status}`}>
|
||||||
|
<h3>Статус опроса</h3>
|
||||||
|
<p>{surveyStats.status}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{surveyStats.questions.map((question, index) => (
|
||||||
|
<div key={index} className={styles.questionContainer}>
|
||||||
|
<div className={styles.questionContent}>
|
||||||
|
<div className={styles.textContainer}>
|
||||||
|
<h3>{question.questionText}</h3>
|
||||||
|
<p className={styles.answerCount}>Ответов: {question.totalAnswers}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.chartContainer}>
|
||||||
|
{question.isMultipleChoice ? (
|
||||||
|
<div className={styles.barContainer}>
|
||||||
|
<Bar
|
||||||
|
data={{
|
||||||
|
labels: question.options.map(opt => opt.text),
|
||||||
|
datasets: [{
|
||||||
|
label: '% выбравших',
|
||||||
|
data: question.options.map(opt => opt.percentage),
|
||||||
|
backgroundColor: colorsForBar,
|
||||||
|
borderColor: colorsForBar,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderSkipped: false,
|
||||||
|
}]
|
||||||
|
}}
|
||||||
|
options={{
|
||||||
|
responsive: true,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
tooltip: { enabled: true },
|
||||||
|
datalabels: { display: false },
|
||||||
|
annotation: {
|
||||||
|
annotations: question.options.map((opt, i) => ({
|
||||||
|
type: 'label',
|
||||||
|
xValue: i,
|
||||||
|
yValue: opt.percentage + 5,
|
||||||
|
content: `${opt.percentage}%`,
|
||||||
|
font: { size: 16, weight: 400 },
|
||||||
|
color: '#000'
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
max: 100,
|
||||||
|
ticks: { callback: (val) => `${val}%` }
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: '#000000',
|
||||||
|
font: {
|
||||||
|
size: 16,
|
||||||
|
weight: 400
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: { display: false }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={styles.pieContainer}>
|
||||||
|
<Pie
|
||||||
|
data={{
|
||||||
|
labels: question.options.map(opt => opt.text),
|
||||||
|
datasets: [{
|
||||||
|
data: question.options.map(opt => opt.percentage),
|
||||||
|
backgroundColor: colorsForPie,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
}]
|
||||||
|
}}
|
||||||
|
options={{
|
||||||
|
responsive: true,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: 'right',
|
||||||
|
labels: {
|
||||||
|
color: '#000000',
|
||||||
|
font: {
|
||||||
|
size: 18,
|
||||||
|
weight: 500
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: (ctx) => `${ctx.label}: ${ctx.raw}%`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
datalabels: {
|
||||||
|
formatter: (value) => `${value}%`,
|
||||||
|
color: '#000',
|
||||||
|
font: { weight: 400, size: 16 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: { animateRotate: true }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue