The risk analysis dashboard currently displays environmental risk scores as decimal values (for example, 0.936 for Drought Risk and 0.075 for Flood Risk). This format is difficult for general users to interpret quickly. Converting these raw decimals into percentage formats (e.g., 93.6% and 7.5%) will significantly improve readability and user experience.
The application calculates climate intelligence and metrics using backend risk assessment logic, which outputs a normalized risk score between 0 and 1. While this format is standard for programmatic calculations, it is not user-friendly on a public-facing analytical dashboard where users expect to see statistical probabilities or hazard levels represented out of 100%.
Current UI Display: * Drought Risk: 0.936
Flood Risk: 0.075
Proposed UI Display: * Drought Risk: 93.6%
Flood risk : 75%
The risk values on the analysis cards should be dynamically transformed into percentages by multiplying the source decimal value by 100 and appending the % symbol. The UI layout must remain responsive, ensuring the newly added percentage symbols do not break or misalign the text wrapping inside the cards.
[ ] Locate the frontend component rendering the Climate Risk Analysis dashboard cards.
[ ] Create a utility function or update the inline data formatting logic to convert values (e.g., (score * 100).toFixed(1) + '%').
[ ] Apply the formatting change across all risk type cards (Flood, Heat, Wildfire, Cyclone, Drought).
[ ] Verify that responsiveness and styling remain intact on desktop, tablet, and mobile views.
[ ] Test with boundary values (e.g., 0 should become 0%, 1 should become 100%).
Please assign this issue to me under SSoC 2026. I want to work on it.
closes #210
The risk analysis dashboard currently displays environmental risk scores as decimal values (for example, 0.936 for Drought Risk and 0.075 for Flood Risk). This format is difficult for general users to interpret quickly. Converting these raw decimals into percentage formats (e.g., 93.6% and 7.5%) will significantly improve readability and user experience.
The application calculates climate intelligence and metrics using backend risk assessment logic, which outputs a normalized risk score between 0 and 1. While this format is standard for programmatic calculations, it is not user-friendly on a public-facing analytical dashboard where users expect to see statistical probabilities or hazard levels represented out of 100%.
Current UI Display: * Drought Risk: 0.936
Flood Risk: 0.075
Proposed UI Display: * Drought Risk: 93.6%
Flood risk : 75%
The risk values on the analysis cards should be dynamically transformed into percentages by multiplying the source decimal value by 100 and appending the % symbol. The UI layout must remain responsive, ensuring the newly added percentage symbols do not break or misalign the text wrapping inside the cards.
[ ] Locate the frontend component rendering the Climate Risk Analysis dashboard cards.
[ ] Create a utility function or update the inline data formatting logic to convert values (e.g., (score * 100).toFixed(1) + '%').
[ ] Apply the formatting change across all risk type cards (Flood, Heat, Wildfire, Cyclone, Drought).
[ ] Verify that responsiveness and styling remain intact on desktop, tablet, and mobile views.
[ ] Test with boundary values (e.g., 0 should become 0%, 1 should become 100%).
Please assign this issue to me under SSoC 2026. I want to work on it.
closes #210