Browse Source

display result as a radar if there are more than 3 traits

master
DemiSel 2 years ago
parent
commit
20ecec052f

+ 1
- 0
backend/.idea/gradle.xml View File

@@ -1,5 +1,6 @@
1 1
 <?xml version="1.0" encoding="UTF-8"?>
2 2
 <project version="4">
3
+  <component name="GradleMigrationSettings" migrationVersion="1" />
3 4
   <component name="GradleSettings">
4 5
     <option name="linkedExternalProjectsSettings">
5 6
       <GradleProjectSettings>

+ 32
- 1
backend/src/main/java/Application.java View File

@@ -14,6 +14,7 @@ public class Application {
14 14
     {
15 15
         Trait vExtrovertTrait = new Trait("Extrovert", "You're an extrovert");
16 16
         Trait vIntrovertTrait = new Trait("Introvert", "You're an introvert");
17
+        Trait vDogTrait = new Trait("Dog", "You're a dog");
17 18
 
18 19
         //------------------------------------
19 20
         // Define questionnaire
@@ -30,6 +31,7 @@ public class Application {
30 31
                                         new Answer("Don't dare to interrupt them", vIntrovertTrait, 0.5f),
31 32
                                         new Answer("Think it's more important to give them some of your time; work can wait", vIntrovertTrait, 0.2f),
32 33
                                         new Answer("Listen, but with only with half an ear ", vIntrovertTrait, 0.1f),
34
+                                        new Answer("Try to show interest despite being busy chasing your tail", vDogTrait, 0.8f),
33 35
                                         new Answer("Interrupt and explain that you are really busy at the moment", vExtrovertTrait, 0.5f)
34 36
                                 )
35 37
                         ),
@@ -42,7 +44,8 @@ public class Application {
42 44
                                         new Answer("Look at your watch every two minutes", vIntrovertTrait, 0.2f),
43 45
                                         new Answer("Bubble with inner anger, but keep quiet ", vIntrovertTrait, 0.5f),
44 46
                                         new Answer("Explain to other equally impatient people in the room that the doctor is always running late ", vExtrovertTrait, 0.3f),
45
-                                        new Answer("Complain in a loud voice, while tapping your foot impatiently", vExtrovertTrait, 0.7f)
47
+                                        new Answer("Complain in a loud voice, while tapping your foot impatiently", vExtrovertTrait, 0.7f),
48
+                                        new Answer("Befriend the teckel sitting next to you", vExtrovertTrait, 0.7f)
46 49
                                 )
47 50
                         ),
48 51
                         //------------------------------------
@@ -52,8 +55,36 @@ public class Application {
52 55
                                 "Blah blah blah ? Blah.",
53 56
                                 Arrays.asList(
54 57
                                         new Answer("Yes.", vIntrovertTrait, 0.2f),
58
+                                        new Answer("Woof", vDogTrait, 0.7f),
55 59
                                         new Answer("Sure", vExtrovertTrait, 0.3f),
56 60
                                         new Answer("Meh", vExtrovertTrait, 0.7f)
61
+
62
+                                )
63
+                        ),
64
+                        //------------------------------------
65
+                        // Fourth question
66
+                        //------------------------------------
67
+                        new Question(
68
+                                "Blah blah blah ? Blah.",
69
+                                Arrays.asList(
70
+                                        new Answer("Yes.", vIntrovertTrait, 0.2f),
71
+                                        new Answer("Woof", vDogTrait, 0.7f),
72
+                                        new Answer("Sure", vExtrovertTrait, 0.3f),
73
+                                        new Answer("Meh", vExtrovertTrait, 0.7f)
74
+
75
+                                )
76
+                        ),
77
+                        //------------------------------------
78
+                        // Fifth question
79
+                        //------------------------------------
80
+                        new Question(
81
+                                "Blah blah blah ? Blah.",
82
+                                Arrays.asList(
83
+                                        new Answer("Yes.", vIntrovertTrait, 0.2f),
84
+                                        new Answer("Woof", vDogTrait, 0.7f),
85
+                                        new Answer("Sure", vExtrovertTrait, 0.3f),
86
+                                        new Answer("Meh", vExtrovertTrait, 0.7f)
87
+
57 88
                                 )
58 89
                         )
59 90
                 )

+ 204
- 0
frontend/package-lock.json View File

@@ -1781,6 +1781,75 @@
1781 1781
         }
1782 1782
       }
1783 1783
     },
1784
+    "@nivo/colors": {
1785
+      "version": "0.79.1",
1786
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.79.1.tgz",
1787
+      "integrity": "sha512-45huBmz46OoQtfqzHrnqDJ9msebOBX84fTijyOBi8mn8iTDOK2xWgzT7cCYP3hKE58IclkibkzVyWCeJ+rUlqg==",
1788
+      "requires": {
1789
+        "d3-color": "^2.0.0",
1790
+        "d3-scale": "^3.2.3",
1791
+        "d3-scale-chromatic": "^2.0.0",
1792
+        "lodash": "^4.17.21"
1793
+      }
1794
+    },
1795
+    "@nivo/core": {
1796
+      "version": "0.79.0",
1797
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.79.0.tgz",
1798
+      "integrity": "sha512-e1iGodmGuXkF+QWAjhHVFc+lUnfBoUwaWqVcBXBfebzNc50tTJrTTMHyQczjgOIfTc8gEu23lAY4mVZCDKscig==",
1799
+      "requires": {
1800
+        "@nivo/recompose": "0.79.0",
1801
+        "@react-spring/web": "9.3.1",
1802
+        "d3-color": "^2.0.0",
1803
+        "d3-format": "^1.4.4",
1804
+        "d3-interpolate": "^2.0.1",
1805
+        "d3-scale": "^3.2.3",
1806
+        "d3-scale-chromatic": "^2.0.0",
1807
+        "d3-shape": "^1.3.5",
1808
+        "d3-time-format": "^3.0.0",
1809
+        "lodash": "^4.17.21"
1810
+      },
1811
+      "dependencies": {
1812
+        "d3-format": {
1813
+          "version": "1.4.5",
1814
+          "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
1815
+          "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
1816
+        }
1817
+      }
1818
+    },
1819
+    "@nivo/legends": {
1820
+      "version": "0.79.1",
1821
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.79.1.tgz",
1822
+      "integrity": "sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig=="
1823
+    },
1824
+    "@nivo/radar": {
1825
+      "version": "0.79.1",
1826
+      "resolved": "https://registry.npmjs.org/@nivo/radar/-/radar-0.79.1.tgz",
1827
+      "integrity": "sha512-T91l/905PMjYNFT1ikOxNOVvDzTw4ysIOZcRj+xT7fLMpqd4TKlNUFoQ/t3XyrYFgIlVaSCSQxF/XKlPD8AhCw==",
1828
+      "requires": {
1829
+        "@nivo/colors": "0.79.1",
1830
+        "@nivo/legends": "0.79.1",
1831
+        "@nivo/tooltip": "0.79.0",
1832
+        "@react-spring/web": "9.3.1",
1833
+        "d3-scale": "^3.2.3",
1834
+        "d3-shape": "^1.3.5"
1835
+      }
1836
+    },
1837
+    "@nivo/recompose": {
1838
+      "version": "0.79.0",
1839
+      "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.79.0.tgz",
1840
+      "integrity": "sha512-2GFnOHfA2jzTOA5mdKMwJ6myCRGoXQQbQvFFQ7B/+hnHfU/yrOVpiGt6TPAn3qReC4dyDYrzy1hr9UeQh677ig==",
1841
+      "requires": {
1842
+        "react-lifecycles-compat": "^3.0.4"
1843
+      }
1844
+    },
1845
+    "@nivo/tooltip": {
1846
+      "version": "0.79.0",
1847
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.79.0.tgz",
1848
+      "integrity": "sha512-hsJsvhDVR9P/QqIEDIttaA6aslR3tU9So1s/k2jMdppL7J9ZH/IrVx9TbIP7jDKmnU5AMIP5uSstXj9JiKLhQA==",
1849
+      "requires": {
1850
+        "@react-spring/web": "9.3.1"
1851
+      }
1852
+    },
1784 1853
     "@nodelib/fs.scandir": {
1785 1854
       "version": "2.1.5",
1786 1855
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1827,6 +1896,55 @@
1827 1896
         }
1828 1897
       }
1829 1898
     },
1899
+    "@react-spring/animated": {
1900
+      "version": "9.3.2",
1901
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.2.tgz",
1902
+      "integrity": "sha512-pBvKydRHbTzuyaeHtxGIOvnskZxGo/S5/YK1rtYm88b9NQZuZa95Rgd3O0muFL+99nvBMBL8cvQGD0UJmsqQsg==",
1903
+      "requires": {
1904
+        "@react-spring/shared": "~9.3.0",
1905
+        "@react-spring/types": "~9.3.0"
1906
+      }
1907
+    },
1908
+    "@react-spring/core": {
1909
+      "version": "9.3.2",
1910
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.3.2.tgz",
1911
+      "integrity": "sha512-kMRjkgdQ6LJ0lmb/wQlONpghaMT83UxglXHJC6m9kZS/GKVmN//TYMEK85xN1rC5Gg+BmjG61DtLCSkkLDTfNw==",
1912
+      "requires": {
1913
+        "@react-spring/animated": "~9.3.0",
1914
+        "@react-spring/shared": "~9.3.0",
1915
+        "@react-spring/types": "~9.3.0"
1916
+      }
1917
+    },
1918
+    "@react-spring/rafz": {
1919
+      "version": "9.3.2",
1920
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.3.2.tgz",
1921
+      "integrity": "sha512-YtqNnAYp5bl6NdnDOD5TcYS40VJmB+Civ4LPtcWuRPKDAOa/XAf3nep48r0wPTmkK936mpX8aIm7h+luW59u5A=="
1922
+    },
1923
+    "@react-spring/shared": {
1924
+      "version": "9.3.2",
1925
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.3.2.tgz",
1926
+      "integrity": "sha512-ypGQQ8w7mWnrELLon4h6mBCBxdd8j1pgLzmHXLpTC/f4ya2wdP+0WIKBWXJymIf+5NiTsXgSJra5SnHP5FBY+A==",
1927
+      "requires": {
1928
+        "@react-spring/rafz": "~9.3.0",
1929
+        "@react-spring/types": "~9.3.0"
1930
+      }
1931
+    },
1932
+    "@react-spring/types": {
1933
+      "version": "9.3.2",
1934
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.3.2.tgz",
1935
+      "integrity": "sha512-u+IK9z9Re4hjNkBYKebZr7xVDYTai2RNBsI4UPL/k0B6lCNSwuqWIXfKZUDVlMOeZHtDqayJn4xz6HcSkTj3FQ=="
1936
+    },
1937
+    "@react-spring/web": {
1938
+      "version": "9.3.1",
1939
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.3.1.tgz",
1940
+      "integrity": "sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==",
1941
+      "requires": {
1942
+        "@react-spring/animated": "~9.3.0",
1943
+        "@react-spring/core": "~9.3.0",
1944
+        "@react-spring/shared": "~9.3.0",
1945
+        "@react-spring/types": "~9.3.0"
1946
+      }
1947
+    },
1830 1948
     "@rollup/plugin-babel": {
1831 1949
       "version": "5.3.0",
1832 1950
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -4058,6 +4176,82 @@
4058 4176
         }
4059 4177
       }
4060 4178
     },
4179
+    "d3-array": {
4180
+      "version": "2.12.1",
4181
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
4182
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
4183
+      "requires": {
4184
+        "internmap": "^1.0.0"
4185
+      }
4186
+    },
4187
+    "d3-color": {
4188
+      "version": "2.0.0",
4189
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
4190
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
4191
+    },
4192
+    "d3-format": {
4193
+      "version": "2.0.0",
4194
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
4195
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
4196
+    },
4197
+    "d3-interpolate": {
4198
+      "version": "2.0.1",
4199
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
4200
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
4201
+      "requires": {
4202
+        "d3-color": "1 - 2"
4203
+      }
4204
+    },
4205
+    "d3-path": {
4206
+      "version": "1.0.9",
4207
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
4208
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
4209
+    },
4210
+    "d3-scale": {
4211
+      "version": "3.3.0",
4212
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
4213
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
4214
+      "requires": {
4215
+        "d3-array": "^2.3.0",
4216
+        "d3-format": "1 - 2",
4217
+        "d3-interpolate": "1.2.0 - 2",
4218
+        "d3-time": "^2.1.1",
4219
+        "d3-time-format": "2 - 3"
4220
+      }
4221
+    },
4222
+    "d3-scale-chromatic": {
4223
+      "version": "2.0.0",
4224
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
4225
+      "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
4226
+      "requires": {
4227
+        "d3-color": "1 - 2",
4228
+        "d3-interpolate": "1 - 2"
4229
+      }
4230
+    },
4231
+    "d3-shape": {
4232
+      "version": "1.3.7",
4233
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
4234
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
4235
+      "requires": {
4236
+        "d3-path": "1"
4237
+      }
4238
+    },
4239
+    "d3-time": {
4240
+      "version": "2.1.1",
4241
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
4242
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
4243
+      "requires": {
4244
+        "d3-array": "2"
4245
+      }
4246
+    },
4247
+    "d3-time-format": {
4248
+      "version": "3.0.0",
4249
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
4250
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
4251
+      "requires": {
4252
+        "d3-time": "1 - 2"
4253
+      }
4254
+    },
4061 4255
     "damerau-levenshtein": {
4062 4256
       "version": "1.0.8",
4063 4257
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5909,6 +6103,11 @@
5909 6103
         "side-channel": "^1.0.4"
5910 6104
       }
5911 6105
     },
6106
+    "internmap": {
6107
+      "version": "1.0.1",
6108
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
6109
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
6110
+    },
5912 6111
     "ip": {
5913 6112
       "version": "1.1.5",
5914 6113
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -9306,6 +9505,11 @@
9306 9505
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
9307 9506
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
9308 9507
     },
9508
+    "react-lifecycles-compat": {
9509
+      "version": "3.0.4",
9510
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
9511
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
9512
+    },
9309 9513
     "react-refresh": {
9310 9514
       "version": "0.11.0",
9311 9515
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

+ 2
- 0
frontend/package.json View File

@@ -3,6 +3,8 @@
3 3
   "version": "0.1.0",
4 4
   "private": true,
5 5
   "dependencies": {
6
+    "@nivo/core": "^0.79.0",
7
+    "@nivo/radar": "^0.79.1",
6 8
     "@testing-library/jest-dom": "^5.16.1",
7 9
     "@testing-library/react": "^12.1.2",
8 10
     "@testing-library/user-event": "^13.5.0",

+ 40
- 30
frontend/src/component/question.js View File

@@ -5,6 +5,7 @@ import Questionnaire from './questionnaire';
5 5
 function Question(props){
6 6
     let current_question = props.questions[props.index];
7 7
     const [selectedAnswer, onSelectAnswer] = React.useState(current_question.answer);
8
+    const [validateButtonText, onValidateButtonText] = React.useState(props.index < props.questions.length -1 ? "Validate" : "Get Results")
8 9
     let question_answers = [];
9 10
 
10 11
     //-------------------------------
@@ -23,46 +24,55 @@ function Question(props){
23 24
     return (
24 25
     <div className="bordered">
25 26
         <h3> {current_question.name} </h3>
26
-        <div className="display_flex flex_vertical" onChange={(value) => onSelectAnswer(value.target.value)}>
27
+        <div className="display_flex flex_vertical" onChange={(value) => {
28
+            onSelectAnswer(value.target.value)
29
+            onValidateButtonText(props.index < props.questions.length -1 ? "Validate" : "Get Results")
30
+        }}>
27 31
         {question_answers}
28 32
         </div>
29 33
         <div
30 34
             className="interactible"
31 35
             onClick={() => {
32
-                //-------------------------------
33
-                // POST question answer
34
-                //-------------------------------
35
-                fetch(url+"/session/"+props.sessionId, {
36
-                    method:'PUT',
37
-                    body: JSON.stringify({
38
-                        question: current_question.id,
39
-                        answer: selectedAnswer
40
-                    }),
41
-                    headers: {"Content-type": "application/json; charset=UTF-8"}
42
-                }) 
43
-                .then(response => response.json())
44
-                .then(result => {
36
+                if(null == selectedAnswer)
37
+                {
38
+                    onValidateButtonText("Select an answer");
39
+                }else{
40
+                
41
+                    //-------------------------------
42
+                    // POST question answer
43
+                    //-------------------------------
44
+                    fetch(url+"/session/"+props.sessionId, {
45
+                        method:'PUT',
46
+                        body: JSON.stringify({
47
+                            question: current_question.id,
48
+                            answer: selectedAnswer
49
+                        }),
50
+                        headers: {"Content-type": "application/json; charset=UTF-8"}
51
+                    }) 
52
+                    .then(response => response.json())
53
+                    .then(result => {
54
+                        if(props.index === props.questions.length - 1)
55
+                        {
56
+                            //-------------------------------
57
+                            // Tell the (parent) questionnaire that the results should be available
58
+                            //-------------------------------
59
+                            props.questionnaireCompleted(true);
60
+                        }
61
+                    })
62
+                    .catch( e => console.error(e))
63
+
45 64
                     if(props.index === props.questions.length - 1)
46 65
                     {
47
-                        //-------------------------------
48
-                        // Tell the (parent) questionnaire that the results should be available
49
-                        //-------------------------------
50
-                        props.questionnaireCompleted(true);
66
+                        current_question.answer = selectedAnswer;
67
+                    }
68
+                    else
69
+                    {
70
+                        current_question.answer = selectedAnswer;
71
+                        props.moveToQuestion(props.index + 1);
51 72
                     }
52
-                })
53
-                .catch( e => console.error(e))
54
-
55
-                if(props.index === props.questions.length - 1)
56
-                {
57
-                    current_question.answer = selectedAnswer;
58
-                }
59
-                else
60
-                {
61
-                    current_question.answer = selectedAnswer;
62
-                    props.moveToQuestion(props.index + 1);
63 73
                 }
64 74
             }}>
65
-                {props.index < props.questions.length -1 ? "Validate" : "Get Results" }
75
+                {validateButtonText}
66 76
         </div>
67 77
     </div>
68 78
     );

+ 46
- 14
frontend/src/component/questionnaire_result.js View File

@@ -1,14 +1,16 @@
1 1
 import React from 'react';
2 2
 import { createPortal } from 'react-dom';
3 3
 import url from '../server';
4
+import {ResponsiveRadar} from "@nivo/radar"
4 5
 
5 6
 function QuestionnaireResult(props){
6 7
     const [resultsFetched, onResultsFetched] = React.useState(null);
7
-    console.log(resultsFetched);
8 8
     let dominant_weight = 0;
9 9
     let dominant = null;
10
-    let scale_ends = ["Introvert","Extrovert"];
11
-    let display_dominant = 0;
10
+    let radar_traits = [];
11
+    let radar_data = [];
12
+    let scale_start = ""
13
+    let scale_end = ""
12 14
 
13 15
     if(null === resultsFetched)
14 16
     {
@@ -31,28 +33,58 @@ function QuestionnaireResult(props){
31 33
                 max = trait.weight;
32 34
                 dominant = trait;
33 35
             }
34
-            dominant_weight = dominant.weight/total;
36
+            radar_traits.push(trait.name); 
37
+            radar_data.push({trait:trait.name, you:trait.weight});
35 38
         })
36
-        display_dominant = dominant.name === "Introvert" ? dominant_weight : 1-dominant_weight
39
+        dominant_weight = (dominant.weight/total) * 100;
40
+
41
+        //normalize radar_data values
42
+        radar_data.forEach(trait => {
43
+            trait.you = ((trait.you/total) * 100).toFixed(1);
44
+        })
45
+
46
+        // two traits : display them on a scale
47
+        if(radar_data.length == 2)
48
+        {
49
+             
50
+            scale_start = dominant.name;
51
+            
52
+            scale_end = radar_data[0].trait == scale_start ? radar_data[1].trait : radar_data[0].trait;
53
+        }
37 54
     }
38
-    return(
55
+
56
+        return(
39 57
         <React.Fragment>
58
+        {null !== resultsFetched && radar_data.length > 2 &&
59
+        <div 
60
+            className="display_flex fill_width"
61
+            style={{height:400}}
62
+            >
63
+        <ResponsiveRadar
64
+            data={radar_data}
65
+            keys={["you"]}
66
+            margin={{ top: 70, right: 80, bottom: 40, left: 80 }}
67
+            indexBy="trait"
68
+            maxValue={100}
69
+            format=">-.2%"
70
+        />
71
+        </div>
72
+        }
73
+        { radar_data.length == 2 &&
40 74
         <div className="gradient bordered" 
41 75
         style={{
42
-            "--data-weight": display_dominant*100+"%",
43
-            "--data-grad-offset": display_dominant*100+1+"%",
76
+            "--data-weight": dominant_weight+"%",
77
+            "--data-grad-offset": dominant_weight+1+"%",
44 78
             }}>
45 79
             <div className="display_flex flex_horizontal space_between position_static fill_width">
46
-            <div>Introvert</div>
47
-            <div>Extrovert</div>
48
-            </div>
49
-            <div className="display_flex position_static fill_width center">
50
-            {resultsFetched ? (dominant_weight*100).toFixed(1)+"% "+dominant.name : "Results loading"}
80
+            <div>{scale_start}</div>
81
+            <div>{scale_end}</div>
51 82
             </div>
52 83
         </div>
84
+        }
53 85
         {null != dominant &&
54 86
         <div>
55
-            🎉{dominant.description}
87
+            Approximately {dominant_weight.toFixed(1)}% : 🎉{dominant.description} 
56 88
         </div>
57 89
         }
58 90
         </React.Fragment>

Loading…
Cancel
Save