Export Function

locales/de-global.json5

@@ -134,4 +134,24 @@
   'loki-logo': 'LOKI-Logo',
   okay: 'Okay',
   yAxisLabel: 'Wert',
+  export: {
+    header: 'ESID',
+    description: 'Aktuelle Auswahl als PDF-Bericht exportieren.',
+    button: 'PDF exportieren',
+    info: {
+      'selected-district': 'Ausgewählter Landkreis',
+      'selected-scenario': 'Ausgewähltes Szenario',
+      'reference-date': 'Referenzdatum',
+      'selected-date': 'Ausgewähltes Datum',
+    },
+    images: {
+      'line-chart-label': 'Liniendiagramm',
+      'map-label': 'Karte',
+    },
+    table: {
+      compartment: 'Infektionszustand',
+      'reference-value': 'Wert Referenzdatum',
+      'selected-value': 'Wert Ausgewähltes Datum',
+    },
+  },
 }

locales/en-global.json5

@@ -149,4 +149,24 @@
   WIP: 'This functionality is still work in progress.',
   okay: 'Okay',
   yAxisLabel: 'Value',
+  export: {
+    header: 'ESID',
+    description: 'Export the current selection as a PDF report.',
+    button: 'Export PDF',
+    info: {
+      'selected-district': 'Selected District',
+      'selected-scenario': 'Selected Scenario',
+      'reference-date': 'Reference Date',
+      'selected-date': 'Selected Date',
+    },
+    images: {
+      'line-chart-label': 'Line chart',
+      'map-label': 'Map',
+    },
+    table: {
+      compartment: 'Infection state',
+      'reference-value': 'Value Reference Date',
+      'selected-value': 'Value Selected Date',
+    },
+  },
 }

package.json

@@ -46,6 +46,7 @@
     "@mui/system": "5.15.0",
     "@mui/x-date-pickers": "6.20.0",
     "@reduxjs/toolkit": "2.0.1",
+    "@types/pdfmake": "0.2.11",
     "country-flag-icons": "1.5.9",
     "dayjs": "1.11.10",
     "i18next": "23.7.10",
@@ -68,7 +69,6 @@
     "rooks": "7.14.1"
   },
   "devDependencies": {
-    "@types/geojson": "7946.0.13",
     "@babel/eslint-parser": "7.23.10",
     "@babel/preset-react": "7.23.3",
     "@nabla/vite-plugin-eslint": "2.0.5",
@@ -77,6 +77,7 @@
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/country-flag-icons": "1.2.2",
+    "@types/geojson": "7946.0.13",
     "@types/node-fetch": "2.6.9",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.17",

src/App.tsx

@@ -23,6 +23,7 @@ import {MUILocalization} from 'components/shared/MUILocalization';
 
 import AuthProvider from './components/AuthProvider';
 import BaseDataContext from 'context/BaseDataContext';
+import ExportingRegistry from 'context/ExportContext';
 /**
  * This is the root element of the React application. It divides the main screen area into the three main components.
  * The top bar, the sidebar and the main content area.
@@ -36,26 +37,28 @@ export default function App(): JSX.Element {
             <PersistGate loading={null} persistor={Persistor}>
               <I18nextProvider i18n={i18n}>
                 <MUILocalization>
-                  <BaseDataContext>
-                    <Initializer />
-                    <WelcomeDialogWrapper />
-                    <Box id='app' display='flex' flexDirection='column' sx={{height: '100%', width: '100%'}}>
-                      <TopBar />
-                      <Box
-                        id='app-content'
-                        sx={{
-                          display: 'flex',
-                          flexDirection: 'row',
-                          flexGrow: 1,
-                          alignItems: 'stretch',
-                          width: '100%',
-                        }}
-                      >
-                        <SidebarContainer />
-                        <MainContent />
+                  <ExportingRegistry>
+                    <BaseDataContext>
+                      <Initializer />
+                      <WelcomeDialogWrapper />
+                      <Box id='app' display='flex' flexDirection='column' sx={{height: '100%', width: '100%'}}>
+                        <TopBar />
+                        <Box
+                          id='app-content'
+                          sx={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            flexGrow: 1,
+                            alignItems: 'stretch',
+                            width: '100%',
+                          }}
+                        >
+                          <SidebarContainer />
+                          <MainContent />
+                        </Box>
                       </Box>
-                    </Box>
-                  </BaseDataContext>
+                    </BaseDataContext>
+                  </ExportingRegistry>
                 </MUILocalization>
               </I18nextProvider>
             </PersistGate>

src/components/LineChartComponents/LineChart.tsx

@@ -30,6 +30,8 @@ import useValueAxisRange from 'components/shared/LineChart/ValueAxisRange';
 import {LineChartData} from 'types/lineChart';
 import {LineSeries} from '@amcharts/amcharts5/xy';
 import {useSeriesRange} from 'components/shared/LineChart/SeriesRange';
+import {useExportingRegistry} from 'context/ExportContext';
+import useExporting from 'components/shared/Exporting';
 
 interface LineChartProps {
   /** Optional unique identifier for the chart. Defaults to 'chartdiv'. */
@@ -688,25 +690,25 @@ export default function LineChart({
       });
     }
 
-    // Let's import this lazily, since it contains a lot of code.
-    import('@amcharts/amcharts5/plugins/exporting')
-      .then((module) => {
-        // Update export menu
-        module.Exporting.new(root as Root, {
-          menu: module.ExportingMenu.new(root as Root, {}),
-          filePrefix: exportedFileName,
-          dataSource: data,
-          dateFields: ['date'],
-          dateFormat: `${
-            memoizedLocalization.overrides?.['dateFormat']
-              ? customT(memoizedLocalization.overrides['dateFormat'])
-              : defaultT('dateFormat')
-          }`,
-          dataFields: dataFields,
-          dataFieldsOrder: dataFieldsOrder,
-        });
-      })
-      .catch(() => console.warn("Couldn't load exporting functionality!"));
+    // // Let's import this lazily, since it contains a lot of code.
+    // import('@amcharts/amcharts5/plugins/exporting')
+    //   .then((module) => {
+    //     // Update export menu
+    //     const exporting = module.Exporting.new(root as Root, {
+    //       menu: module.ExportingMenu.new(root as Root, {}),
+    //       filePrefix: exportedFileName,
+    //       dataSource: data,
+    //       dateFields: ['date'],
+    //       dateFormat: `${
+    //         memoizedLocalization.overrides?.['dateFormat']
+    //           ? customT(memoizedLocalization.overrides['dateFormat'])
+    //           : defaultT('dateFormat')
+    //       }`,
+    //       dataFields: dataFields,
+    //       dataFieldsOrder: dataFieldsOrder,
+    //     });
+    //   })
+    //   .catch(() => console.warn("Couldn't load exporting functionality!"));
 
     setReferenceDayX();
     // Re-run this effect whenever the data itself changes (or any variable the effect uses)
@@ -724,6 +726,23 @@ export default function LineChart({
     yAxisLabel,
   ]);
 
+  const {register} = useExportingRegistry();
+
+  // https://www.amcharts.com/docs/v5/reference/exporting/ docs for export settings from amcharts
+  const exportSettings = useMemo(() => {
+    return {
+      filePrefix: exportedFileName,
+    };
+  }, [exportedFileName]);
+
+  const exporting = useExporting(root, exportSettings);
+
+  useEffect(() => {
+    if (exporting) {
+      register('lineChart', exporting);
+    }
+  }, [exporting, register]);
+
   return (
     <Box
       id={chartId}

src/components/Sidebar/MapComponents/HeatLegend.tsx

@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React, {useCallback, useLayoutEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useMemo} from 'react';
 import * as am5 from '@amcharts/amcharts5';
 import Box from '@mui/material/Box';
 import {HeatmapLegend} from 'types/heatmapLegend';
@@ -10,6 +10,9 @@ import {Localization} from 'types/localization';
 import useRoot from 'components/shared/Root';
 import useHeatLegend from 'components/shared/HeatMap/Legend';
 
+// export
+import {useExportingRegistry} from 'context/ExportContext';
+import useExporting from '@/components/shared/Exporting';
 interface HeatProps {
   /**
    * Object defining the legend for the heatmap.
@@ -76,6 +79,8 @@ export default function HeatLegend({
   const unique_id = useMemo(() => id + String(Date.now() + Math.random()), [id]);
   const theme = useTheme();
 
+  const {register} = useExportingRegistry();
+
   const root = useRoot(unique_id);
 
   const memoizedLocalization = useMemo(() => {
@@ -137,5 +142,19 @@ export default function HeatLegend({
     // This effect should only run when the legend object changes
   }, [heatLegend, legend, min, max, exposeLegend]);
 
+  const exportSettings = useMemo(() => {
+    return {
+      filePrefix: 'map',
+    };
+  }, []);
+
+  const exporting = useExporting(root, exportSettings);
+
+  useEffect(() => {
+    if (exporting) {
+      register('legend', exporting);
+    }
+  }, [exporting, register]);
+
   return <Box id={unique_id} sx={style} />;
 }

src/components/Sidebar/MapComponents/HeatMap.tsx

@@ -23,6 +23,8 @@ import {Localization} from 'types/localization';
 
 // Utils
 import {useConst} from 'util/hooks';
+import useExporting from 'components/shared/Exporting';
+import {useExportingRegistry} from 'context/ExportContext';
 
 interface MapProps {
   /** The data to be displayed on the map, in GeoJSON format. */
@@ -123,6 +125,7 @@ export default function HeatMap({
   const lastSelectedPolygon = useRef<am5map.MapPolygon | null>(null);
   const [longLoadTimeout, setLongLoadTimeout] = useState<number>();
 
+  const {register} = useExportingRegistry();
   const root = useRoot(mapId);
 
   // MapControlBar.tsx
@@ -353,6 +356,20 @@ export default function HeatMap({
     isDataFetching,
   ]);
 
+  const exportSettings = useMemo(() => {
+    return {
+      filePrefix: 'map',
+    };
+  }, []);
+
+  const exporting = useExporting(root, exportSettings);
+
+  useEffect(() => {
+    if (exporting) {
+      register('map', exporting);
+    }
+  }, [exporting, register]);
+
   return (
     <Box
       id={mapId}