From a14b8e640998360f9ca97d10498d80ef4e1409af Mon Sep 17 00:00:00 2001
From: erdogant <erdogant@gmail.com>
Date: Sun, 12 Nov 2023 16:10:36 +0100
Subject: [PATCH] Add functionality to save the chart as svg by adding an
 optional save button to the HTML

---
 d3graph/d3graph.py         | 14 +++++++++++---
 d3graph/d3js/index.html.j2 | 21 +++++++++++++++++++++
 d3graph/examples.py        |  4 ++--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/d3graph/d3graph.py b/d3graph/d3graph.py
index b6f4cd6..8b8991e 100644
--- a/d3graph/d3graph.py
+++ b/d3graph/d3graph.py
@@ -76,8 +76,7 @@ def __init__(self,
                  support: str = 'text',
                  verbose: int = 20) -> None:
         """Initialize d3graph."""
-        if slider is None:
-            slider = [None, None]
+        if slider is None: slider = [None, None]
         # Cleaning
         self._clean()
         # Some library compatibility checks
@@ -111,7 +110,9 @@ def show(self,
              show_slider: bool = True,
              set_slider: bool = 0,
              click={'fill': None, 'stroke': 'black', 'size': 1.3, 'stroke-width': 3},
-             notebook: bool = False) -> None:
+             notebook: bool = False,
+             save_button: bool = True,
+             ) -> None:
         """Build and show the graph.
 
         Parameters
@@ -141,6 +142,9 @@ def show(self,
         notebook : bool
             True: Use IPython to show chart in notebooks.
             False: Do not use IPython.
+        save_button : bool, (default: True)
+            True: Save button is shown in the HTML to save the image in svg.
+            False: No save button is shown in the HTML.
 
         Returns
         -------
@@ -159,6 +163,7 @@ def show(self,
         self.config['showfig'] = showfig
         self.config['notebook'] = notebook
         self.config['click'] = click
+        self.config['save_button'] = save_button
         # self.config['filepath'] = self.set_path(filepath)
         if self.config.get('filepath', None)!='d3graph.html': self.config['filepath'] = self.set_path(filepath)
 
@@ -703,6 +708,7 @@ def write_html(self, json_data, overwrite: bool = True) -> None:
 
         # Hide slider
         show_slider = ['', ''] if self.config['show_slider'] else ['<!--', '-->']
+        show_save_button = ['', ''] if self.config['save_button'] else ['<!--', '-->']
         # Set width and height to screen resolution if None.
         width = 'window.screen.width' if self.config['figsize'][0] is None else self.config['figsize'][0]
         height = 'window.screen.height' if self.config['figsize'][1] is None else self.config['figsize'][1]
@@ -724,6 +730,8 @@ def write_html(self, json_data, overwrite: bool = True) -> None:
                    'CLICK_STROKEW': click_properties['stroke-width'],
                    'slider_comment_start': show_slider[0],
                    'slider_comment_stop': show_slider[1],
+                   'save_button_comment_start': show_save_button[0],
+                   'save_button_comment_stop': show_save_button[1],
                    'SET_SLIDER': self.config['set_slider'],
                    'SUPPORT': self.config['support'],
                    }
diff --git a/d3graph/d3js/index.html.j2 b/d3graph/d3js/index.html.j2
index bc6179a..e40bf87 100644
--- a/d3graph/d3js/index.html.j2
+++ b/d3graph/d3js/index.html.j2
@@ -13,6 +13,13 @@
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 
+<!-- Create save button -->
+{{ save_button_comment_start }}
+    <div style="max-width:{{ width }}px;">
+        <center><button id="saveButton">Save</button></center>
+    </div>
+{{ save_button_comment_stop }}
+
 
     <script>
         {% include "d3.v3.js" %}
@@ -30,9 +37,23 @@
                 collision: {{ collision }}
             })
         });
+
+        // Save image to svg
+        document.getElementById('saveButton').addEventListener('click', function () {
+            var svgData = document.querySelector('svg').outerHTML;
+            var blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
+            var url = URL.createObjectURL(blob);
+            var link = document.createElement('a');
+            link.href = url;
+            link.download = '{{ title }}.svg';
+            link.click();
+        });
+        
+        
     </script>
 
 
+
 <!-- SLIDER -->
 {{ slider_comment_start }}
 
diff --git a/d3graph/examples.py b/d3graph/examples.py
index f55b323..302519d 100644
--- a/d3graph/examples.py
+++ b/d3graph/examples.py
@@ -60,7 +60,7 @@
                                )
 
 # Show the interactive plot
-d3.show(show_slider=True, figsize=(1500, 800))
+d3.show(show_slider=True, figsize=(1500, 800), filepath=r'c:\temp\d3graph\sprinkler_d3graph.html')
 
 
 # %% issue large datasets
@@ -106,7 +106,7 @@
 # Set some node properties
 d3.set_node_properties(marker=['circle', 'circle', 'circle', 'rect', 'rect', 'rect', 'rect'])
 
-d3.show(filepath=r'c:\temp\\d3graph\circle.html', set_slider=5)
+d3.show(filepath=r'c:\temp\\d3graph\circle.html', set_slider=5, save_button=False)
 
 
 # %% opacity