🎉 integrated amcharts exporting functionality with new context and hooks, now able to export multiple amchart components

Author: kunkoala

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,21 @@ export default function LineChart({
     yAxisLabel,
   ]);
 
+  const {register} = useExportingRegistry();
+  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/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}

src/components/TopBar/PopUps/ExportDialog.tsx

@@ -1,16 +1,97 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import React, {useCallback} from 'react';
 import Box from '@mui/material/Box';
 import useTheme from '@mui/material/styles/useTheme';
 import {useTranslation} from 'react-i18next';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import {useExportingRegistry} from 'context/ExportContext';
+import type {Content, TDocumentDefinitions, ContentImage, Column} from 'pdfmake/interfaces';
+
+const toDataUrl = (img: unknown): string | undefined => {
+  if (!img) return undefined;
+  if (typeof img === 'string') return img;
+  if (typeof img === 'object' && img !== null && 'data' in (img as Record<string, unknown>)) {
+    const d = (img as Record<string, unknown>).data;
+    return typeof d === 'string' ? d : undefined;
+  }
+  return undefined;
+};
 
 export default function ExportDialog(): JSX.Element {
   const {t} = useTranslation();
   const theme = useTheme();
+  const {get} = useExportingRegistry();
+
+  const handleExport = useCallback(() => {
+    void (async () => {
+      const lineExp = get('lineChart');
+      const mapExp = get('map');
+
+      const pdfMake =
+        (await (lineExp as unknown as {getPDFMake?: () => Promise<unknown>})?.getPDFMake?.()) ||
+        (await (lineExp as unknown as {getPdfmake?: () => Promise<unknown>})?.getPdfmake?.()) ||
+        (await (mapExp as unknown as {getPDFMake?: () => Promise<unknown>})?.getPDFMake?.()) ||
+        (await (mapExp as unknown as {getPdfmake?: () => Promise<unknown>})?.getPdfmake?.());
+
+      const [lineImg, mapImg] = await Promise.all([lineExp?.export?.('png'), mapExp?.export?.('png')]);
+
+      const lineDataUrl = toDataUrl(lineImg);
+      const mapDataUrl = toDataUrl(mapImg);
+
+      const doc: TDocumentDefinitions = {
+        pageSize: 'A4',
+        pageOrientation: 'portrait',
+        pageMargins: [30, 30, 30, 30],
+        content: [],
+        styles: {header: {fontSize: 18, bold: true, margin: [0, 0, 0, 10]}},
+      };
+
+      (doc.content as Content[]).push({text: t('export.header'), style: 'header'});
+
+      if (lineDataUrl) {
+        (doc.content as ContentImage[]).push({
+          image: lineDataUrl,
+          width: 500,
+        });
+      }
+
+      if (mapDataUrl) {
+        (doc.content as ContentImage[]).push({
+          image: mapDataUrl,
+          fit: [300, 300],
+        });
+      }
+
+      //   (doc.content as ContentTable[]).push({
+      //     table: {
+      //       body: [
+      //         [{text: 'Line Chart Data'}, {text: 'Line Chart Data'}],
+      //         [{text: 'Line Chart Data'}, {text: 'Line Chart Data'}],
+      //       ],
+      //     },
+      //   });
+
+      const columns: Column[] = [
+        {
+          text: 'Line Chart Data',
+        },
+        {
+          text: 'Map Data',
+        },
+      ];
+
+      (doc.content as Content[]).push({
+        columns: columns,
+        columnGap: 10,
+      });
+
+      const pdfmake = pdfMake as {createPdf?: (doc: unknown) => {download: (name: string) => void}};
+      pdfmake?.createPdf?.(doc)?.download('ESID-export.pdf');
+    })();
+  }, [get, t]);
 
   return (
     <Box
@@ -23,7 +104,7 @@ export default function ExportDialog(): JSX.Element {
       <br />
       <Typography>{t('export.description')}</Typography>
       <br />
-      <Button variant='contained' color='primary'>
+      <Button variant='contained' color='primary' onClick={handleExport}>
         {t('export.button')}
       </Button>
     </Box>

src/components/shared/Exporting.tsx

@@ -0,0 +1,34 @@
+// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
+// SPDX-License-Identifier: Apache-2.0
+
+import {useLayoutEffect, useState} from 'react';
+import {Root} from '@amcharts/amcharts5/.internal/core/Root';
+import {Exporting} from '@amcharts/amcharts5/.internal/plugins/exporting/Exporting';
+import {IExportingSettings} from '@amcharts/amcharts5/.internal/plugins/exporting/Exporting';
+
+export default function useExporting(
+  root: Root | null,
+  settings: IExportingSettings,
+  initializer?: (exporting: Exporting) => void
+): Exporting | null {
+  const [exporting, setExporting] = useState<Exporting>();
+
+  useLayoutEffect(() => {
+    if (!root) {
+      return;
+    }
+
+    const newExporting = Exporting.new(root, settings);
+    setExporting(newExporting);
+
+    if (initializer) {
+      initializer(newExporting);
+    }
+
+    return () => {
+      newExporting.dispose();
+    };
+  }, [root, settings, initializer]);
+
+  return exporting || null;
+}

src/context/ExportContext.tsx

@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
+// SPDX-License-Identifier: Apache-2.0
+
+import React, {createContext, useCallback, useContext, useState} from 'react';
+import {Exporting} from '@amcharts/amcharts5/.internal/plugins/exporting/Exporting';
+
+type ExportRegistry = Record<string, Exporting>;
+
+interface ExportContextAPI {
+  register: (name: string, exporting: Exporting) => void;
+  unregister: (name: string) => void;
+  get: (name: string) => Exporting | null;
+}
+
+export const ExportContext = createContext<ExportContextAPI | null>(null);
+
+export default function ExportingRegistry({children}: {children: React.ReactNode}): JSX.Element {
+  const [exporting, setExporting] = useState<ExportRegistry>({});
+
+  const register = useCallback((name: string, exporting: Exporting) => {
+    setExporting((prev) => ({...prev, [name]: exporting}));
+  }, []);
+
+  const unregister = useCallback((name: string) => {
+    setExporting((prev) => {
+      const {[name]: _, ...rest} = prev;
+      return rest;
+    });
+  }, []);
+
+  const get = useCallback((name: string) => exporting[name] ?? null, [exporting]);
+
+  return <ExportContext.Provider value={{register, unregister, get}}>{children}</ExportContext.Provider>;
+}
+
+export function useExportingRegistry(): ExportContextAPI {
+  const context = useContext(ExportContext);
+  if (!context) {
+    throw new Error('useExportingRegistry must be used within a ExportContext');
+  }
+  return context;
+}