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

backend/.idea/gradle.xml

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

backend/src/main/java/Application.java

@@ -14,6 +14,7 @@ public class Application {
     {
         Trait vExtrovertTrait = new Trait("Extrovert", "You're an extrovert");
         Trait vIntrovertTrait = new Trait("Introvert", "You're an introvert");
+        Trait vDogTrait = new Trait("Dog", "You're a dog");
 
         //------------------------------------
         // Define questionnaire
@@ -30,6 +31,7 @@ public class Application {
                                         new Answer("Don't dare to interrupt them", vIntrovertTrait, 0.5f),
                                         new Answer("Think it's more important to give them some of your time; work can wait", vIntrovertTrait, 0.2f),
                                         new Answer("Listen, but with only with half an ear ", vIntrovertTrait, 0.1f),
+                                        new Answer("Try to show interest despite being busy chasing your tail", vDogTrait, 0.8f),
                                         new Answer("Interrupt and explain that you are really busy at the moment", vExtrovertTrait, 0.5f)
                                 )
                         ),
@@ -42,7 +44,8 @@ public class Application {
                                         new Answer("Look at your watch every two minutes", vIntrovertTrait, 0.2f),
                                         new Answer("Bubble with inner anger, but keep quiet ", vIntrovertTrait, 0.5f),
                                         new Answer("Explain to other equally impatient people in the room that the doctor is always running late ", vExtrovertTrait, 0.3f),
-                                        new Answer("Complain in a loud voice, while tapping your foot impatiently", vExtrovertTrait, 0.7f)
+                                        new Answer("Complain in a loud voice, while tapping your foot impatiently", vExtrovertTrait, 0.7f),
+                                        new Answer("Befriend the teckel sitting next to you", vExtrovertTrait, 0.7f)
                                 )
                         ),
                         //------------------------------------
@@ -52,8 +55,36 @@ public class Application {
                                 "Blah blah blah ? Blah.",
                                 Arrays.asList(
                                         new Answer("Yes.", vIntrovertTrait, 0.2f),
+                                        new Answer("Woof", vDogTrait, 0.7f),
                                         new Answer("Sure", vExtrovertTrait, 0.3f),
                                         new Answer("Meh", vExtrovertTrait, 0.7f)
+
+                                )
+                        ),
+                        //------------------------------------
+                        // Fourth question
+                        //------------------------------------
+                        new Question(
+                                "Blah blah blah ? Blah.",
+                                Arrays.asList(
+                                        new Answer("Yes.", vIntrovertTrait, 0.2f),
+                                        new Answer("Woof", vDogTrait, 0.7f),
+                                        new Answer("Sure", vExtrovertTrait, 0.3f),
+                                        new Answer("Meh", vExtrovertTrait, 0.7f)
+
+                                )
+                        ),
+                        //------------------------------------
+                        // Fifth question
+                        //------------------------------------
+                        new Question(
+                                "Blah blah blah ? Blah.",
+                                Arrays.asList(
+                                        new Answer("Yes.", vIntrovertTrait, 0.2f),
+                                        new Answer("Woof", vDogTrait, 0.7f),
+                                        new Answer("Sure", vExtrovertTrait, 0.3f),
+                                        new Answer("Meh", vExtrovertTrait, 0.7f)
+
                                 )
                         )
                 )

frontend/package-lock.json

@@ -1781,6 +1781,75 @@
         }
       }
     },
+    "@nivo/colors": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.79.1.tgz",
+      "integrity": "sha512-45huBmz46OoQtfqzHrnqDJ9msebOBX84fTijyOBi8mn8iTDOK2xWgzT7cCYP3hKE58IclkibkzVyWCeJ+rUlqg==",
+      "requires": {
+        "d3-color": "^2.0.0",
+        "d3-scale": "^3.2.3",
+        "d3-scale-chromatic": "^2.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "@nivo/core": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.79.0.tgz",
+      "integrity": "sha512-e1iGodmGuXkF+QWAjhHVFc+lUnfBoUwaWqVcBXBfebzNc50tTJrTTMHyQczjgOIfTc8gEu23lAY4mVZCDKscig==",
+      "requires": {
+        "@nivo/recompose": "0.79.0",
+        "@react-spring/web": "9.3.1",
+        "d3-color": "^2.0.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-scale-chromatic": "^2.0.0",
+        "d3-shape": "^1.3.5",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "d3-format": {
+          "version": "1.4.5",
+          "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+          "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+        }
+      }
+    },
+    "@nivo/legends": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.79.1.tgz",
+      "integrity": "sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig=="
+    },
+    "@nivo/radar": {
+      "version": "0.79.1",
+      "resolved": "https://registry.npmjs.org/@nivo/radar/-/radar-0.79.1.tgz",
+      "integrity": "sha512-T91l/905PMjYNFT1ikOxNOVvDzTw4ysIOZcRj+xT7fLMpqd4TKlNUFoQ/t3XyrYFgIlVaSCSQxF/XKlPD8AhCw==",
+      "requires": {
+        "@nivo/colors": "0.79.1",
+        "@nivo/legends": "0.79.1",
+        "@nivo/tooltip": "0.79.0",
+        "@react-spring/web": "9.3.1",
+        "d3-scale": "^3.2.3",
+        "d3-shape": "^1.3.5"
+      }
+    },
+    "@nivo/recompose": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.79.0.tgz",
+      "integrity": "sha512-2GFnOHfA2jzTOA5mdKMwJ6myCRGoXQQbQvFFQ7B/+hnHfU/yrOVpiGt6TPAn3qReC4dyDYrzy1hr9UeQh677ig==",
+      "requires": {
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "@nivo/tooltip": {
+      "version": "0.79.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.79.0.tgz",
+      "integrity": "sha512-hsJsvhDVR9P/QqIEDIttaA6aslR3tU9So1s/k2jMdppL7J9ZH/IrVx9TbIP7jDKmnU5AMIP5uSstXj9JiKLhQA==",
+      "requires": {
+        "@react-spring/web": "9.3.1"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1827,6 +1896,55 @@
         }
       }
     },
+    "@react-spring/animated": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.2.tgz",
+      "integrity": "sha512-pBvKydRHbTzuyaeHtxGIOvnskZxGo/S5/YK1rtYm88b9NQZuZa95Rgd3O0muFL+99nvBMBL8cvQGD0UJmsqQsg==",
+      "requires": {
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.3.2.tgz",
+      "integrity": "sha512-kMRjkgdQ6LJ0lmb/wQlONpghaMT83UxglXHJC6m9kZS/GKVmN//TYMEK85xN1rC5Gg+BmjG61DtLCSkkLDTfNw==",
+      "requires": {
+        "@react-spring/animated": "~9.3.0",
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.3.2.tgz",
+      "integrity": "sha512-YtqNnAYp5bl6NdnDOD5TcYS40VJmB+Civ4LPtcWuRPKDAOa/XAf3nep48r0wPTmkK936mpX8aIm7h+luW59u5A=="
+    },
+    "@react-spring/shared": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.3.2.tgz",
+      "integrity": "sha512-ypGQQ8w7mWnrELLon4h6mBCBxdd8j1pgLzmHXLpTC/f4ya2wdP+0WIKBWXJymIf+5NiTsXgSJra5SnHP5FBY+A==",
+      "requires": {
+        "@react-spring/rafz": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.3.2.tgz",
+      "integrity": "sha512-u+IK9z9Re4hjNkBYKebZr7xVDYTai2RNBsI4UPL/k0B6lCNSwuqWIXfKZUDVlMOeZHtDqayJn4xz6HcSkTj3FQ=="
+    },
+    "@react-spring/web": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.3.1.tgz",
+      "integrity": "sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==",
+      "requires": {
+        "@react-spring/animated": "~9.3.0",
+        "@react-spring/core": "~9.3.0",
+        "@react-spring/shared": "~9.3.0",
+        "@react-spring/types": "~9.3.0"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@@ -4058,6 +4176,82 @@
         }
       }
     },
+    "d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "requires": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "requires": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
+      "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+      "requires": {
+        "d3-color": "1 - 2",
+        "d3-interpolate": "1 - 2"
+      }
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "requires": {
+        "d3-array": "2"
+      }
+    },
+    "d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "requires": {
+        "d3-time": "1 - 2"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5909,6 +6103,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -9306,6 +9505,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

frontend/package.json

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

frontend/src/component/question.js

@@ -5,6 +5,7 @@ import Questionnaire from './questionnaire';
 function Question(props){
     let current_question = props.questions[props.index];
     const [selectedAnswer, onSelectAnswer] = React.useState(current_question.answer);
+    const [validateButtonText, onValidateButtonText] = React.useState(props.index < props.questions.length -1 ? "Validate" : "Get Results")
     let question_answers = [];
 
     //-------------------------------
@@ -23,46 +24,55 @@ function Question(props){
     return (
     <div className="bordered">
         <h3> {current_question.name} </h3>
-        <div className="display_flex flex_vertical" onChange={(value) => onSelectAnswer(value.target.value)}>
+        <div className="display_flex flex_vertical" onChange={(value) => {
+            onSelectAnswer(value.target.value)
+            onValidateButtonText(props.index < props.questions.length -1 ? "Validate" : "Get Results")
+        }}>
         {question_answers}
         </div>
         <div
             className="interactible"
             onClick={() => {
-                //-------------------------------
-                // POST question answer
-                //-------------------------------
-                fetch(url+"/session/"+props.sessionId, {
-                    method:'PUT',
-                    body: JSON.stringify({
-                        question: current_question.id,
-                        answer: selectedAnswer
-                    }),
-                    headers: {"Content-type": "application/json; charset=UTF-8"}
-                }) 
-                .then(response => response.json())
-                .then(result => {
+                if(null == selectedAnswer)
+                {
+                    onValidateButtonText("Select an answer");
+                }else{
+                
+                    //-------------------------------
+                    // POST question answer
+                    //-------------------------------
+                    fetch(url+"/session/"+props.sessionId, {
+                        method:'PUT',
+                        body: JSON.stringify({
+                            question: current_question.id,
+                            answer: selectedAnswer
+                        }),
+                        headers: {"Content-type": "application/json; charset=UTF-8"}
+                    }) 
+                    .then(response => response.json())
+                    .then(result => {
+                        if(props.index === props.questions.length - 1)
+                        {
+                            //-------------------------------
+                            // Tell the (parent) questionnaire that the results should be available
+                            //-------------------------------
+                            props.questionnaireCompleted(true);
+                        }
+                    })
+                    .catch( e => console.error(e))
+
                     if(props.index === props.questions.length - 1)
                     {
-                        //-------------------------------
-                        // Tell the (parent) questionnaire that the results should be available
-                        //-------------------------------
-                        props.questionnaireCompleted(true);
+                        current_question.answer = selectedAnswer;
+                    }
+                    else
+                    {
+                        current_question.answer = selectedAnswer;
+                        props.moveToQuestion(props.index + 1);
                     }
-                })
-                .catch( e => console.error(e))
-
-                if(props.index === props.questions.length - 1)
-                {
-                    current_question.answer = selectedAnswer;
-                }
-                else
-                {
-                    current_question.answer = selectedAnswer;
-                    props.moveToQuestion(props.index + 1);
                 }
             }}>
-                {props.index < props.questions.length -1 ? "Validate" : "Get Results" }
+                {validateButtonText}
         </div>
     </div>
     );

frontend/src/component/questionnaire_result.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import url from '../server';
+import {ResponsiveRadar} from "@nivo/radar"
 
 function QuestionnaireResult(props){
     const [resultsFetched, onResultsFetched] = React.useState(null);
-    console.log(resultsFetched);
     let dominant_weight = 0;
     let dominant = null;
-    let scale_ends = ["Introvert","Extrovert"];
-    let display_dominant = 0;
+    let radar_traits = [];
+    let radar_data = [];
+    let scale_start = ""
+    let scale_end = ""
 
     if(null === resultsFetched)
     {
@@ -31,28 +33,58 @@ function QuestionnaireResult(props){
                 max = trait.weight;
                 dominant = trait;
             }
-            dominant_weight = dominant.weight/total;
+            radar_traits.push(trait.name); 
+            radar_data.push({trait:trait.name, you:trait.weight});
         })
-        display_dominant = dominant.name === "Introvert" ? dominant_weight : 1-dominant_weight
+        dominant_weight = (dominant.weight/total) * 100;
+
+        //normalize radar_data values
+        radar_data.forEach(trait => {
+            trait.you = ((trait.you/total) * 100).toFixed(1);
+        })
+
+        // two traits : display them on a scale
+        if(radar_data.length == 2)
+        {
+             
+            scale_start = dominant.name;
+            
+            scale_end = radar_data[0].trait == scale_start ? radar_data[1].trait : radar_data[0].trait;
+        }
     }
-    return(
+
+        return(
         <React.Fragment>
+        {null !== resultsFetched && radar_data.length > 2 &&
+        <div 
+            className="display_flex fill_width"
+            style={{height:400}}
+            >
+        <ResponsiveRadar
+            data={radar_data}
+            keys={["you"]}
+            margin={{ top: 70, right: 80, bottom: 40, left: 80 }}
+            indexBy="trait"
+            maxValue={100}
+            format=">-.2%"
+        />
+        </div>
+        }
+        { radar_data.length == 2 &&
         <div className="gradient bordered" 
         style={{
-            "--data-weight": display_dominant*100+"%",
-            "--data-grad-offset": display_dominant*100+1+"%",
+            "--data-weight": dominant_weight+"%",
+            "--data-grad-offset": dominant_weight+1+"%",
             }}>
             <div className="display_flex flex_horizontal space_between position_static fill_width">
-            <div>Introvert</div>
-            <div>Extrovert</div>
-            </div>
-            <div className="display_flex position_static fill_width center">
-            {resultsFetched ? (dominant_weight*100).toFixed(1)+"% "+dominant.name : "Results loading"}
+            <div>{scale_start}</div>
+            <div>{scale_end}</div>
             </div>
         </div>
+        }
         {null != dominant &&
         <div>
-            🎉{dominant.description}
+            Approximately {dominant_weight.toFixed(1)}% : 🎉{dominant.description} 
         </div>
         }
         </React.Fragment>