From 072b0c76fd38d77886a5ea1849c860801a7ff081 Mon Sep 17 00:00:00 2001 From: Christian Denker Date: Thu, 5 Sep 2024 22:01:39 +0200 Subject: [PATCH] add lables for percentage results --- index.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 66 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5138417..0caa42e 100644 --- a/index.html +++ b/index.html @@ -136,8 +136,27 @@ - Value: 0 + + + + + + + + + + + + + + + + + + + +
@@ -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,7 +502,7 @@ } 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])); @@ -490,6 +510,44 @@ 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'; + + }