add lables for percentage results

index.html

@@ -136,8 +136,27 @@
             <circle id="root" cx="150" cy="150" r="10" class="root"></circle>
 
             <!-- Display value -->
-            <text id="valueDisplay" x="150" y="10" text-anchor="middle" font-size="6">Value: 0</text>
+            <text id="valueDisplay" x="150" y="10" text-anchor="middle" font-size="6" style="visibility: hidden;">Value: 0</text>
 
+            <!-- Display 1/3 value -->
+            <rect id="background1_3" x="80" y="112" width="20" height="10" fill="white" filter="url(#blur)" style="visibility: hidden;"></rect>
+            <text id="valueDisplay1_3" x="90" y="120" text-anchor="middle" font-size="9" font-weight="bold"></text>
+
+
+            <!-- Display 2/3 value -->
+            <rect id="background2_3" x="140" y="72" width="20" height="10" fill="white" filter="url(#blur)" style="visibility: hidden;"></rect>
+            <text id="valueDisplay2_3" x="150" y="80" text-anchor="middle" font-size="9" font-weight="bold"></text>
+
+
+            <!-- Display 3/3 value -->
+            <rect id="background3_3" x="200" y="112" width="20" height="10" fill="white" filter="url(#blur)" style="visibility: hidden;"></rect>
+            <text id="valueDisplay3_3" x="210" y="120" text-anchor="middle" font-size="9" font-weight="bold" fill="black"></text>
+
+            <defs>
+                <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
+                    <feGaussianBlur stdDeviation="1" />
+                </filter>
+              </defs>
         </svg>
     </div>
         <div class="labels">
@@ -224,6 +243,7 @@
                     console.log('Data successfully posted:', result);
                     hasSubmitted = true; // Mark as submitted
                     drawCircles();
+                    calculatePercentages(entity);
                 })
                 .catch(error => {
                     console.error('Failed to post data:', error);
@@ -272,8 +292,8 @@
             // 0 corresponds to the rightmost point (10)
             const normalizedAngle = (angle + Math.PI) / Math.PI;
 
-            // Scale the normalized angle to a value between 0 and 5
-            const value = normalizedAngle * 5;
+            // Scale the normalized angle to a value between 0 and 10
+            const value = normalizedAngle * 9;
 
             // Round to the nearest integer
             return Math.round(value);
@@ -444,7 +464,7 @@
                     const resultInSector = getResultForSector(sector);
                     console.log(`Resultes: ${resultInSector} in sector: ${sector}`);
                     if (resultInSector >= ((cascade / 2) * 10) ){
-                        svg.appendChild(smallCircle);
+                        svg.insertBefore(smallCircle, svg.firstChild);
                     }
                 }
 
@@ -458,10 +478,10 @@
             if (angle > 0) angle = 0;
             if (angle < -Math.PI) angle = -Math.PI;
 
-            // Map angle from [-Math.PI, 0] to [0, 5] in 6 steps
-            const sectorValue = (angle + Math.PI) / Math.PI * 5;
+            // Map angle from [-Math.PI, 0] to [0, 10] in 11 steps
+            const sectorValue = (angle + Math.PI) / Math.PI * 10;
 
-            // Round to the nearest integer to get one of the 6 steps
+            // Round to the nearest integer to get one of the 11 steps
             return Math.round(sectorValue);
         }
         function getResultForSector(sector){
@@ -482,14 +502,52 @@
         }
         function getHighestValue(aEntity) {
             // Define the keys we are interested in
-            const keys = ['0', '1', '2', '3', '4', '5'];
+            const keys = ['0', '1', '2', '3', '4', '5' , '6', '7', '8', '9', '10'];
 
             // Use Math.max to find the highest value among the specified keys
             const highestValue = Math.max(...keys.map(key => aEntity[key]));
 
             return highestValue;
 
         }
+        function calculatePercentages(data) {
+            // Extract the total number of results
+            const totalResults = data.numberOfResults.value;
+
+            // Define the ranges
+            const range1 = [0, 1, 2, 3];   // 0 to 3
+            const range2 = [4, 5, 6];      // 4 to 6
+            const range3 = [7, 8, 9, 10];  // 7 to 10
+
+            // Sum the values in each range
+            let sumRange1 = range1.reduce((sum, key) => sum + (data[key] || 0), 0);
+            let sumRange2 = range2.reduce((sum, key) => sum + (data[key] || 0), 0);
+            let sumRange3 = range3.reduce((sum, key) => sum + (data[key] || 0), 0);
+
+            // Calculate the percentage for each range and round it to the nearest integer
+            let percentageRange1 = Math.round((sumRange1 / totalResults) * 100);
+            let percentageRange2 = Math.round((sumRange2 / totalResults) * 100);
+            let percentageRange3 = Math.round((sumRange3 / totalResults) * 100);
+
+            // Return the results as an object
+            let result = {
+                range_0_3: percentageRange1 + '%',
+                range_4_6: percentageRange2 + '%',
+                range_7_10: percentageRange3 + '%'
+            };
+            const valueDisplay1_3 = document.getElementById('valueDisplay1_3');
+            const valueDisplay2_3 = document.getElementById('valueDisplay2_3');
+            const valueDisplay3_3 = document.getElementById('valueDisplay3_3');
+            valueDisplay1_3.textContent = result.range_0_3;
+            valueDisplay2_3.textContent = result.range_4_6;
+            valueDisplay3_3.textContent = result.range_7_10;
+
+            // show a background 
+            document.getElementById('background1_3').style.visibility = 'visible';
+            document.getElementById('background2_3').style.visibility = 'visible';
+            document.getElementById('background3_3').style.visibility = 'visible';
+
+        }
 
 </script>
 </body>