@coinspot-official/react-stockcharts
Version:
Highly customizable stock charts with ReactJS and d3
170 lines (145 loc) • 7.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _saveSvgAsPng = require('save-svg-as-png');
var _saveSvgAsPng2 = _interopRequireDefault(_saveSvgAsPng);
var _fileSaver = require('file-saver');
var _fileSaver2 = _interopRequireDefault(_fileSaver);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// ==== save-svg-as-png hack ====
//
// saveAsPng.svgAsDataUri does not give us width/height in done parameter.
// therefore, we use saveAsPng.prepareSvg and copy some code from saveAsPng
// (svg encode).
// We will remove this code and use saveAsPng.svgAsDataUri when this PR will
// be accepted: https://github.com/exupero/saveSvgAsPng/pull/193
var svgDocType = '<?xml version="1.0" standalone="no"?>' + '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ' + '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp " ">]>';
function reEncode(data) {
data = encodeURIComponent(data);
data = data.replace(/%([0-9A-F]{2})/g, function (match, p1) {
var c = String.fromCharCode('0x' + p1);
return c === '%' ? '%25' : c;
});
return decodeURIComponent(data);
}
// ==== save-svg-as-png hack end ====
var SaveChartAsImage = {
save: function save(doc, container, _ref) {
var background = _ref.background,
cb = _ref.cb,
paddings = _ref.paddings,
canvg = _ref.canvg;
var _ref2 = paddings || {},
_ref2$left = _ref2.left,
paddingLeft = _ref2$left === undefined ? 0 : _ref2$left,
_ref2$top = _ref2.top,
paddingTop = _ref2$top === undefined ? 0 : _ref2$top,
_ref2$right = _ref2.right,
paddingRight = _ref2$right === undefined ? 0 : _ref2$right,
_ref2$bottom = _ref2.bottom,
paddingBottom = _ref2$bottom === undefined ? 0 : _ref2$bottom;
var svgElement = container.getElementsByTagName('svg')[0];
//see comment on save-svg-as-png hack.
//we need width/height of svg here, because image.width/height is incorrect in some cases
_saveSvgAsPng2.default.prepareSvg(svgElement, {}, function (svg, width, height) {
var image = new Image();
image.onload = function () {
var makeCanvas = function makeCanvas() {
var canvas = doc.createElement('canvas');
var context = canvas.getContext('2d');
// we should correctly scale canvas (for devices with Retina-like screen)
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
var pixelRatio = devicePixelRatio / backingStoreRatio;
var canvasWidth = (width + paddingLeft + paddingRight) * pixelRatio;
var canvasHeight = (height + paddingTop + paddingBottom) * pixelRatio;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
if (pixelRatio !== 1) {
//don't scale context, hope source canvases are scaled by ChartCanvas code
}
if (background != null) {
context.fillStyle = background;
context.fillRect(0, 0, canvasWidth, canvasHeight);
}
var canvasList = container.getElementsByTagName('canvas');
for (var i = 0; i < canvasList.length; i++) {
var each = canvasList[i];
if (each) {
var parent = each.parentNode.parentNode.getBoundingClientRect();
var rect = each.getBoundingClientRect();
context.drawImage(each, (rect.left - parent.left + paddingLeft) * pixelRatio, (rect.top - parent.top + paddingTop) * pixelRatio);
}
}
var imageWidth = image.width;
var imageHeight = image.height;
return [canvas, context, pixelRatio, imageWidth, imageHeight];
};
try {
var _makeCanvas = makeCanvas(),
_makeCanvas2 = _slicedToArray(_makeCanvas, 5),
canvas = _makeCanvas2[0],
context = _makeCanvas2[1],
pixelRatio = _makeCanvas2[2],
imageWidth = _makeCanvas2[3],
imageHeight = _makeCanvas2[4];
context.drawImage(image, paddingLeft * pixelRatio, paddingTop * pixelRatio, imageWidth * pixelRatio, imageHeight * pixelRatio);
//check for security error bug in ie11. it will throw an error
//synchronously, and ie11 fallback will be used (in catch block)
canvas.toDataURL();
//in ie11, security bug will happen here (asynchronously).
//so, we can't handle it here, we handle it in code above (canvas.toDataURL)
canvas.toBlob(cb);
} catch (e) {
if (canvg) {
var _makeCanvas3 = makeCanvas(),
_makeCanvas4 = _slicedToArray(_makeCanvas3, 5),
_canvas = _makeCanvas4[0],
_context = _makeCanvas4[1],
_pixelRatio = _makeCanvas4[2],
_imageWidth = _makeCanvas4[3],
_imageHeight = _makeCanvas4[4];
var canvasSvg = doc.createElement('canvas');
canvg(canvasSvg, svg, {
scaleWidth: _imageWidth * _pixelRatio,
scaleHeight: _imageHeight * _pixelRatio
});
_context.drawImage(canvasSvg, paddingLeft * _pixelRatio, paddingTop * _pixelRatio);
_canvas.toBlob(cb);
} else {
throw new Error('Send canvg parameter (https://github.com/canvg/canvg) to handle ie11 security bug on canvas saving');
}
}
};
var uri = 'data:image/svg+xml;base64,' + window.btoa(reEncode(svgDocType + svg));
image.src = uri;
});
},
saveWithWhiteBG: function saveWithWhiteBG(container, paddings, cb) {
return this.saveWithBG(container, 'white', paddings, cb);
},
saveWithDarkBG: function saveWithDarkBG(container, paddings, cb) {
return this.saveWithBG(container, '#303030', paddings, cb);
},
saveWithBG: function saveWithBG(container, background, paddings, cb) {
return this.save(document, container, { background: background, paddings: paddings, cb: cb });
},
saveChartAsImage: function saveChartAsImage(container, background, paddings, cb) {
return this.saveChartAsImageWithOptions(container, {
background: background, paddings: paddings, cb: cb
});
},
saveChartAsImageWithOptions: function saveChartAsImageWithOptions(container, options) {
var cb = function cb(blob) {
_fileSaver2.default.saveAs(blob, 'Chart.png');
if (cb) {
cb();
}
};
return this.save(document, container, options);
}
};
exports.default = SaveChartAsImage;
//# sourceMappingURL=SaveChartAsImage.js.map