diff --git a/src/App.js b/src/App.js
index 8a9b5d0..6b68dc6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -46,7 +46,7 @@ const App = () => {
-
+
diff --git a/src/components/charts/MacroEconomicChart.js b/src/components/charts/MacroEconomicChart.js
index 8534f56..e7f88b3 100644
--- a/src/components/charts/MacroEconomicChart.js
+++ b/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 = () => {
) : (
- No data available for the selected filters
+ {t("macro_display_chart_not_available")}
)}
diff --git a/src/components/results/MacroEconomicResultsCard.js b/src/components/results/MacroEconomicResultsCard.js
new file mode 100644
index 0000000..d670a6e
--- /dev/null
+++ b/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 (
+
+ {/* Result Details section */}
+
+
+ {t("macroeceonomic_results_information_title")}
+
+
+
+ {activeViewControl === "display_macro_chart"
+ ? t("macroeceonomic_results_information_text")
+ .split("/n")
+ .map((line, index) => {line}
)
+ : ""}
+
+
+
+ );
+};
+
+export default MacroEconomicResultsCard;
diff --git a/src/components/results/ResultsView.js b/src/components/results/ResultsView.js
index 71151e5..9d989f9 100644
--- a/src/components/results/ResultsView.js
+++ b/src/components/results/ResultsView.js
@@ -4,14 +4,15 @@ 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 (
@@ -19,6 +20,7 @@ const ResultsView = () => {
{selectedTab === 1 && }
+ {selectedTab === 2 && }
{selectedTab === 3 && }
diff --git a/src/locales/en.json b/src/locales/en.json
index 37d371e..48cfb26 100644
--- a/src/locales/en.json
+++ b/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 ",