Merge pull request #295 from IFRCGo/fix/missing-changes-bugs

Add legends in region risk watch

Author: frozenhelium

src/views/CountryRiskWatch/RiskBarChart/WildfireChart/i18n.json

@@ -4,6 +4,7 @@
         "average": "Average (2003 - {currentYear})",
         "year": "Year {currentYear}",
         "minMax": "Min-max (2003 - {currentYear})",
-        "minMaxValue": "{min} - {max}"
+        "minMaxValue": "{min} - {max}",
+        "monthlySeverityRating": "Monthly Severity Rating"
     }
 }

src/views/CountryRiskWatch/RiskBarChart/WildfireChart/index.tsx

@@ -39,8 +39,8 @@ type GetCountryRisk = paths['/api/v1/country-seasonal/']['get'];
 type CountryRiskResponse = GetCountryRisk['responses']['200']['content']['application/json'];
 type RiskData = CountryRiskResponse[number];
 
-const X_AXIS_HEIGHT = 24;
-const Y_AXIS_WIDTH = 32;
+const X_AXIS_HEIGHT = 32;
+const Y_AXIS_WIDTH = 48;
 const CHART_OFFSET = 0;
 
 const chartMargin = {
@@ -220,6 +220,16 @@ function WildfireChart(props: Props) {
             ref={chartContainerRef}
         >
             <svg className={styles.svg}>
+                {/* FIXME: Use a separate component for chart label */}
+                <text
+                    className={styles.yAxisLabel}
+                    textAnchor="middle"
+                    transform={`translate(${(chartMargin.left - CHART_OFFSET) / 3},
+                            ${(chartBounds.height - chartMargin.bottom - chartMargin.top) / 2})
+                            rotate(-90)`}
+                >
+                    {strings.monthlySeverityRating}
+                </text>
                 <ChartAxes
                     xAxisPoints={points.xAxis}
                     yAxisPoints={points.yAxis}

src/views/CountryRiskWatch/RiskBarChart/WildfireChart/styles.module.css

@@ -6,6 +6,11 @@
         width: 100%;
         height: 100%;
 
+        .y-axis-label {
+            font-size: var(--go-ui-font-size-sm);
+            fill: var(--go-ui-color-gray-80);
+        }
+
         .min-max-path {
             fill-opacity: 0.5;
             pointer-events: none;