fix: add y-axis text label to historical chart under country risk watch

IFRCGo · Oct 11, 2023 · 148b6c9 · 148b6c9
1 parent acdc48e
commit 148b6c9
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/components/domain/HistoricalDataChart/i18n.json b/src/components/domain/HistoricalDataChart/i18n.json
@@ -5,6 +5,7 @@
         "hazardFilterPlaceholder": "All Hazards",
         "peopleAffectedLabel": "People Affected",
         "fundedLabel": "Funding (CHF)",
-        "fundingCoverageLabel": "Funding Coverage"
+        "fundingCoverageLabel": "Funding Coverage",
+        "peopleExposed": "People Exposed / Affected"
     }
 }
diff --git a/src/components/domain/HistoricalDataChart/index.tsx b/src/components/domain/HistoricalDataChart/index.tsx
@@ -64,7 +64,7 @@ const validDisastersForChart: Record<number, boolean> = {
 
 const X_AXIS_HEIGHT = 32;
 const Y_AXIS_WIDTH = 48;
-const CHART_OFFSET = 10;
+const CHART_OFFSET = 15;
 
 const chartMargin = {
     left: Y_AXIS_WIDTH + CHART_OFFSET,
@@ -339,6 +339,15 @@ function HistoricalDataChart(props: Props) {
                 className={styles.chartContainer}
             >
                 <svg className={styles.svg}>
+                    <text
+                        className={styles.yAxisLabel}
+                        textAnchor="middle"
+                        transform={`translate(${(chartMargin.left - CHART_OFFSET) / 2},
+                            ${(chartBounds.height - chartMargin.bottom - chartMargin.top) / 2})
+                            rotate(-90)`}
+                    >
+                        {strings.peopleExposed}
+                    </text>
                     <ChartAxes
                         xAxisPoints={xAxisPoints}
                         yAxisPoints={yAxisPoints}

diff --git a/src/components/domain/HistoricalDataChart/styles.module.css b/src/components/domain/HistoricalDataChart/styles.module.css
@@ -18,6 +18,10 @@
             height: 100%;
         }
 
+        .y-axis-label {
+            font-size: var(--go-ui-font-size-sm);
+            fill: var(--go-ui-color-gray-80);
+        }
         .point {
             position: absolute;
             transform: translate(-50%, -50%);

diff --git a/src/views/CountryRiskWatch/ReturnPeriodTable/index.tsx b/src/views/CountryRiskWatch/ReturnPeriodTable/index.tsx
@@ -80,7 +80,7 @@ function ReturnPeriodTable(props: Props) {
             ),
             createNumberColumn<TransformedReturnPeriodData, string | number>(
                 'numRiskOfDisplacement',
-                strings.returnPeriodTableReturnPeriodTitle,
+                strings.returnPeriodTableDisplacementTitle,
                 (item) => item.displacement,
                 {
                     headerInfoTitle: strings.returnPeriodTableDisplacementTitle,