adding toPNG for Scatterplot

package-lock.json

@@ -2928,7 +2928,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -2949,12 +2950,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2969,17 +2972,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3096,7 +3102,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3108,6 +3115,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3122,6 +3130,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3129,12 +3138,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3153,6 +3164,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3233,7 +3245,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3245,6 +3258,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3330,7 +3344,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3366,6 +3381,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3385,6 +3401,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -3428,12 +3445,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/charts/Chart.js

@@ -28,6 +28,19 @@ export default class {
   captureTeardown() {
   }
 
+  collectCSSRules() {
+    const rules = [];
+    for (let i = 0; i < document.styleSheets.length; i += 1) {
+      const sheet = document.styleSheets[i];
+      Object.keys(sheet.cssRules).forEach((key) => {
+        if (sheet.cssRules[key] instanceof CSSStyleRule) {
+          rules.push(sheet.cssRules[key].cssText);
+        }
+      });
+    }
+    return rules;
+  }
+
   get containerWidth() {
     return this.container.getBoundingClientRect().width || '500px';
   }
@@ -36,8 +49,16 @@ export default class {
     return this.container.getBoundingClientRect().height || this.containerWidth;
   }
 
-  toPNG() {
+  async toPNG() {
     this.captureSetup();
+    const svgElement = this.container.querySelector('svg');
+    svgElement.setAttribute('version', '1.1');
+    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    const cssRules = this.collectCSSRules();
+    const defs = `<defs><style type="text/css"><![CDATA[${cssRules.join('')}]]></style></defs>`;
+    svgElement.innerHTML += defs;
+
     html2canvas(this.container).then((canvas) => {
       const img = canvas.toDataURL('image/png');
       const a = document.createElement('a');

src/charts/impl/Scatterplot.js

@@ -82,6 +82,9 @@ export default class extends Chart {
     this.yAxisLabel = '';
     this.callback = () => {};
     this.colorToTooltipMap = {};
+
+    this.width = 0;
+    this.height = 0;
   }
 
   static get name() {
@@ -89,11 +92,14 @@ export default class extends Chart {
   }
 
   captureSetup() {
-
+    this.tmpImage = this.svg.insert('image', ':first-child')
+      .attr('width', this.width)
+      .attr('height', this.height)
+      .attr('xlink:href', this.canvas.node().toDataURL('image/png'));
   }
 
   captureTeardown() {
-
+    this.tmpImage.remove();
   }
 
   render({
@@ -126,6 +132,8 @@ export default class extends Chart {
 
     const width = this.containerWidth - margin.left - margin.right;
     const height = this.containerWidth - margin.top - margin.bottom;
+    this.width = width;
+    this.height = height;
 
     const tooltipOffset = width / 100;
     const yLabelSize = (margin.left / 5) > MAX_FONT_SIZE ? MAX_FONT_SIZE : (margin.left / 5);