🎉 🔧 ✨ exports heatmap, improved styling and formatting

Author: kunkoala

locales/de-global.json5

@@ -139,19 +139,19 @@
     description: 'Aktuelle Auswahl als PDF-Bericht exportieren.',
     button: 'PDF exportieren',
     info: {
-      selectedDistrict: 'Ausgewählter Landkreis',
-      selectedScenario: 'Ausgewähltes Szenario',
-      referenceDate: 'Referenzdatum',
-      selectedDate: 'Ausgewähltes Datum',
+      'selected-district': 'Ausgewählter Landkreis',
+      'selected-scenario': 'Ausgewähltes Szenario',
+      'reference-date': 'Referenzdatum',
+      'selected-date': 'Ausgewähltes Datum',
     },
     images: {
-      lineChartLabel: 'Liniendiagramm',
-      mapLabel: 'Karte',
+      'line-chart-label': 'Liniendiagramm',
+      'map-label': 'Karte',
     },
     table: {
       compartment: 'Zustand',
-      referenceValue: 'Referenzwert',
-      selectedValue: 'Ausgewählter Wert',
+      'reference-value': 'Referenzwert',
+      'selected-value': 'Ausgewählter Wert',
     },
   },
 }

locales/en-global.json5

@@ -154,19 +154,19 @@
     description: 'Export the current selection as a PDF report.',
     button: 'Export PDF',
     info: {
-      selectedDistrict: 'Selected District',
-      selectedScenario: 'Selected Scenario',
-      referenceDate: 'Reference Date',
-      selectedDate: 'Selected Date',
+      'selected-district': 'Selected District',
+      'selected-scenario': 'Selected Scenario',
+      'reference-date': 'Reference Date',
+      'selected-date': 'Selected Date',
     },
     images: {
-      lineChartLabel: 'Line chart',
-      mapLabel: 'Map',
+      'line-chart-label': 'Line chart',
+      'map-label': 'Map',
     },
     table: {
       compartment: 'Compartment',
-      referenceValue: 'Reference Value',
-      selectedValue: 'Selected Value',
+      'reference-value': 'Reference Value',
+      'selected-value': 'Selected Value',
     },
   },
 }

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} />;
 }