updated download chart function to incorporate the button to simplify…

… use as a re-usable component

app/src/components/vis/graphs.tsx

@@ -1,5 +1,7 @@
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ReferenceLine, ResponsiveContainer } from 'recharts';
 import html2canvas from 'html2canvas';
+import { Button } from '@mui/material';
+import { Download } from '@mui/icons-material'
 
 interface Feature {
   properties: { [key: string]: any };
@@ -67,35 +69,28 @@ export const formatGraph = (feature: Feature, scenario_layer: ScenarioLayer) =>
     );
 };
 
-export const downloadChartAsPng = (elementId: string) => {
-  const chartElement = document.getElementById(elementId);
-  if (chartElement) {
-    html2canvas(chartElement, {
-      // allowTaint: true,
-    }).then(canvas => {
-      // const context = canvas.getContext('2d');
-      // if (context) {
-      //   // Get the current year
-      //   const currentYear = new Date().getFullYear();
-      //   // Add text overlay
-      //   context.font = '10px Arial';
-      //   context.fillStyle = 'black';
-      //   context.textAlign = 'center';
-      //   context.textBaseline='middle';
-      //   console.log(canvas.width, canvas.height);
-      //   context.fillText(
-      //     `https://transporthealthimpacts.org (${currentYear})`, 
-      //     canvas.width+30, 
-      //     canvas.height,
-      //     canvas.width - 10
-      //   );
-      // }
+interface DownloadChartAsPngProps {
+  elementId: string;
+}
+
+export const DownloadChartAsPng: React.FC<DownloadChartAsPngProps> = ({ elementId }) => {
+  const handleClick = () => {
+    const chartElement = document.getElementById(elementId);
+    if (chartElement) {
+      html2canvas(chartElement).then(canvas => {
+        const link = document.createElement('a');
+        link.download = 'chart.png';
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+      });
+    } else {
+      console.error(`Element with ID ${elementId} not found.`);
+    }
+  };
 
-      // Create a link and download the canvas as a PNG
-      const link = document.createElement('a');
-      link.download = 'chart.png';
-      link.href = canvas.toDataURL('image/png');
-      link.click();
-    });
-  }
+  return (
+    <Button onClick={handleClick} color="primary" startIcon={<Download />}>
+      Download
+    </Button>
+  );
 };

app/src/components/vis/map/popup_info.tsx

@@ -1,7 +1,7 @@
 import { formatGraph } from '../graphs';
 import { Dialog, Typography, DialogContent, DialogActions, Button } from '@mui/material';
 import { createRoot } from 'react-dom/client';
-import {downloadChartAsPng} from '../graphs';
+import { DownloadChartAsPng } from '../graphs';
 
 export default function formatPopup(feature: maplibregl.MapGeoJSONFeature, lngLat: maplibregl.LngLatLike, map: React.MutableRefObject<maplibregl.Map | null>, popup: maplibregl.Popup, layerId: string, scenario_layer: any) {
   const popup_type = scenario_layer.popup;
@@ -64,9 +64,7 @@ const GraphDialog = ({ feature, scenario_layer, open, onClose }: GraphDialogProp
         </div>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => downloadChartAsPng('chart-container')} color="primary">
-          Download
-        </Button>
+        <DownloadChartAsPng elementId="chart-container" />
         <Button onClick={onClose} color="primary">
           Close
         </Button>