Merge pull request #235 from wearepal/bugfix

Add download functionality for chart snapshots as png
wearepal · Dec 20, 2023 · 714ce9e · 714ce9e
2 parents 9223d71 + 29a3c9e
commit 714ce9e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/app/javascript/projects/analysis_panel.tsx b/app/javascript/projects/analysis_panel.tsx
@@ -32,6 +32,35 @@ interface ChartSelectionProps {
     SetChartType: (type: ChartType) => void
 }
 
+function downloadChartAsPNG(ChartTypeSelected: ChartType | undefined) {
+    if(!ChartTypeSelected) return
+
+    const chart = document.getElementById(ChartTypeSelected) as HTMLCanvasElement
+    const svgContent = new XMLSerializer().serializeToString(chart)
+
+    const canvas = document.createElement("canvas")
+    const context = canvas.getContext("2d")
+
+    const svgImage = new Image()
+
+    svgImage.src = "data:image/svg+xml;base64," + btoa(svgContent)
+
+    svgImage.onload = () => {
+        canvas.width = svgImage.width
+        canvas.height = svgImage.height
+        context?.drawImage(svgImage, 0, 0)
+
+        const url = canvas.toDataURL("image/png")
+
+        const link = document.createElement("a")
+        link.href = url
+        link.download = `snapshot_${ChartTypeSelected}_${Date.now()}.png`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+    }
+}
+
 const ChartSelection = ({ SourceType, ChartTypeSelected, SetChartType }: ChartSelectionProps) => {
 
     const typeArray = ChartTypeArray.get(SourceType) || []
@@ -50,12 +79,8 @@ const ChartSelection = ({ SourceType, ChartTypeSelected, SetChartType }: ChartSe
                 ))}
             </div>
 
-            <div className="btn-group mr-2">
-                <button disabled title='Expand' type="button" className={`btn btn-outline-primary`}><i className="fas fa-expand"></i></button>
-            </div>
-
             <div className="btn-group mr-2 ">
-                <button disabled title='Download' type="button" className={`btn btn-outline-primary`}><i className="fas fa-download"></i></button>
+                <button title='Download' onClick={() => downloadChartAsPNG(ChartTypeSelected)} type="button" className={`btn btn-outline-primary`}><i className="fas fa-download"></i></button>
             </div>
         </div>
     );

diff --git a/app/javascript/projects/analysis_panel_tools/charts/bar.tsx b/app/javascript/projects/analysis_panel_tools/charts/bar.tsx
@@ -69,7 +69,7 @@ export const GenerateBarChart = ({ chartData }: BarChartProps) => {
 
     return (
         <div>
-            <svg width={w} height={h}>
+            <svg id="bar" width={w} height={h}>
                 <g
                 width={bounds_h}
                 height={bounds_w}

diff --git a/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx b/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx
@@ -62,7 +62,7 @@ export const GenerateHistogram = ({ chartData }: HistogramProps) => {
 
 
     return (
-        <svg width={width} height={height}>
+        <svg id="hist" width={width} height={height}>
             <g
                 width={boundsWidth}
                 height={boundsHeight}

diff --git a/app/javascript/projects/analysis_panel_tools/charts/pie.tsx b/app/javascript/projects/analysis_panel_tools/charts/pie.tsx
@@ -31,7 +31,7 @@ export const GeneratePieChart = ({ chartData }: PieChartProps) => {
 
     return (
         <div style={{ textAlign: 'center' }}>
-            <svg width={w} height={h}>
+            <svg id="pie" width={w} height={h}>
                 <g transform={`translate(${w / 2}, ${h / 2})`}>
                     {arcs.map((arc, i) => {
                         return <path key={i} d={arc.path as any} stroke="lightgrey" fill={`rgb(${arc.color[0]}, ${arc.color[1]}, ${arc.color[2]})`} />