Commit 2f7daaf6 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

adding toPNG for Scatterplot

parent 7c7fe7eb
......@@ -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
}
}
},
......
......@@ -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');
......
......@@ -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);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment