Improve clarity of Macroeconomic output graph

src/App.js

@@ -46,7 +46,7 @@ const App = () => {
                 <MacroEconomicInput />
                 <AdaptationMeasuresInput />
               </Grid>
-              <Grid item xs={12} md={selectedTab !== 0 && selectedTab !== 2 ? 8 : 10}>
+              <Grid item xs={12} md={selectedTab !== 0 ? 8 : 10}>
                 <MainView />
               </Grid>
               <Grid item xs={12} md={2}>

src/components/charts/MacroEconomicChart.js

@@ -1,4 +1,6 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+
 import { Box, Typography } from "@mui/material";
 import { Line } from "react-chartjs-2";
 import {
@@ -28,6 +30,7 @@ ChartJS.register(
 );
 
 const MacroEconomicChart = () => {
+  const { t } = useTranslation();
   const {
     credOutputData,
     selectedMacroCountry,
@@ -59,6 +62,12 @@ const MacroEconomicChart = () => {
     return acc;
   }, {});
 
+  // Build sorted year labels
+  const labels =
+    filteredData.length > 0
+      ? [...new Set(filteredData.map((row) => row.year))].sort((a, b) => a - b)
+      : [];
+
   const datasets = Object.keys(groupedData).map((key) => {
     let borderColor;
     let backgroundColor;
@@ -89,11 +98,15 @@ const MacroEconomicChart = () => {
       backgroundColor = "rgba(153, 102, 255, 0.2)";
     }
 
-    const label = key === "None" ? "Without adaptation" : `${key * 100}% Adaptation`;
+    const label =
+      key === "None"
+        ? t("macro_display_chart_no_adaptation")
+        : `${(parseFloat(key) * 100).toFixed(2)}% ${t("macro_display_chart_adaptation")}`;
 
     return {
       label,
-      data: groupedData[key].values,
+      // change proportions to percent values for display
+      data: groupedData[key].values.map((v) => v * 100),
       borderColor,
       backgroundColor,
       fill: true,
@@ -102,18 +115,41 @@ const MacroEconomicChart = () => {
   });
 
   const transformedData = {
-    labels: filteredData.length > 0 ? [...new Set(filteredData.map((row) => row.year))] : [],
+    labels,
     datasets,
   };
 
   const options = {
     scales: {
-      x: { type: "category" },
-      y: { beginAtZero: true },
+      x: {
+        type: "category",
+        title: {
+          display: true,
+          text: t("macro_display_chart_x_axis_label"),
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: t("macro_display_chart_y_axis_label"),
+        },
+        ticks: {
+          callback: (val) => `${Number(val).toFixed(2)}%`,
+        },
+      },
     },
     plugins: {
       legend: { display: true },
       title: { display: true, text: macroEconomicChartTitle },
+      tooltip: {
+        callbacks: {
+          label: (ctx) => {
+            const y = ctx.parsed.y;
+            return `${ctx.dataset.label}: ${y.toFixed(2)}%`;
+          },
+        },
+      },
     },
   };
 
@@ -135,7 +171,7 @@ const MacroEconomicChart = () => {
             <Line data={transformedData} options={options} />
           ) : (
             <Typography variant="h6" align="center" color="textSecondary">
-              No data available for the selected filters
+              {t("macro_display_chart_not_available")}
             </Typography>
           )}
         </div>

src/components/results/MacroEconomicResultsCard.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { Box, Typography } from "@mui/material";
+
+import useStore from "../../store";
+
+const MacroEconomicResultsCard = () => {
+  const { t } = useTranslation();
+  const { activeViewControl } = useStore();
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", height: "85vh" }}>
+      {/* Result Details section */}
+      <Box
+        sx={{
+          bgcolor: "#FFCCCC",
+          padding: 2,
+          borderRadius: "4px",
+        }}
+      >
+        <Typography
+          variant="h6"
+          sx={{
+            borderBottom: "1px solid #6F6F6F",
+            paddingBottom: 1,
+            color: "#6F6F6F",
+            textAlign: "center",
+          }}
+        >
+          {t("macroeceonomic_results_information_title")}
+        </Typography>
+
+        <Typography variant="body1" sx={{ marginTop: 2, flexGrow: 1, color: "#6F6F6F" }}>
+          {activeViewControl === "display_macro_chart"
+            ? t("macroeceonomic_results_information_text")
+                .split("/n")
+                .map((line, index) => <p key={index}>{line}</p>)
+            : ""}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default MacroEconomicResultsCard;

src/components/results/ResultsView.js

@@ -4,21 +4,23 @@ import { Box } from "@mui/material";
 
 import ResultsViewTitle from "../title/ResultsViewTitle";
 import EconomicResultsCard from "./EconomicResultsCard";
+import MacroEconomicResultsCard from "./MacroEconomicResultsCard";
 import OutputResultsCard from "./OutputResultsCard";
 import useStore from "../../store";
 
 const ResultsView = () => {
   const { selectedTab } = useStore();
 
-  if (selectedTab === 0 || selectedTab === 2 ){
-    return null
+  if (selectedTab === 0) {
+    return null;
   }
 
   return (
     <Box sx={{ width: "100%" }}>
       <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
         <ResultsViewTitle selectedTab={selectedTab} />
         {selectedTab === 1 && <EconomicResultsCard />}
+        {selectedTab === 2 && <MacroEconomicResultsCard />}
         {selectedTab === 3 && <OutputResultsCard />}
       </Box>
     </Box>

src/locales/en.json

@@ -70,8 +70,13 @@
   "macro_view_controls_display_macro_parameters": "Parameters",
   "macro_view_controls_display_macro_chart": "Display Chart",
   "macro_view_controls_display_macro_table": "Display Table",
+  "macro_display_chart_not_available": "No data available for the selected filters",
+  "macro_display_chart_y_axis_label": "Percent Change (%)",
+  "macro_display_chart_x_axis_label": "Year",
+  "macro_display_chart_adaptation": "adaptation",
+  "macro_display_chart_no_adaptation": "Without adaptation",
   "results_view_tab_1_title": "Display",
-  "results_view_tab_2_title": "Display",
+  "results_view_tab_2_title": "Details",
   "results_view_tab_3_title": "Export",
   "results_export_button_pdf": "Export to PDF",
   "results_export_button_excel": "Export to Excel",
@@ -637,6 +642,8 @@
   "general_main_view_chart_dev_subtitle": "This view is currently under development.",
   "adaptation_view_title": "Adaptation Parameters",
   "macroeconomic_view_title": "MacroEconomic Parameters",
+  "macroeceonomic_results_information_title": "Information",
+  "macroeceonomic_results_information_text": "This graph shows the effects of extreme events on the simulated economy compared to a future with no events. Each line shows the average impacts over 100 simulations experiencing large shocks from randomly-generated extreme events. By averaging over many simulations we smooth out some of the noise and see the size of the climate signal and expected economic impacts. /n Note that the actual future will not consist of small, year-on-year impacts like this chart, but will be more like one of the 100 simulations used to create the plot, with much larger shocks from happening in just a few specific years",
   "adaptation_input_no_measures": "No adaptation measures available for selected Hazard",
   "adaptation_input_no_hazard": "No hazard selected",
   "economic_non_economic_risk_display_chart_title": "Impact of ",