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 ",