utils.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. function createCanvas(w, h) {
  2. var canvas = document.createElement('canvas');
  3. canvas.width = w;
  4. canvas.height = h;
  5. return canvas;
  6. }
  7. function readImageData(url, callback) {
  8. var image = new Image();
  9. image.onload = function() {
  10. var h = image.height;
  11. var w = image.width;
  12. var canvas = createCanvas(w, h);
  13. var ctx = canvas.getContext('2d');
  14. ctx.drawImage(image, 0, 0, w, h);
  15. callback(ctx.getImageData(0, 0, w, h));
  16. };
  17. image.src = url;
  18. }
  19. /**
  20. * Injects a new canvas (and div wrapper) and creates the associated Chart instance
  21. * using the given config. Additional options allow tweaking elements generation.
  22. * @param {object} config - Chart config.
  23. * @param {object} options - Chart acquisition options.
  24. * @param {object} options.canvas - Canvas attributes.
  25. * @param {object} options.wrapper - Canvas wrapper attributes.
  26. * @param {boolean} options.persistent - If true, the chart will not be released after the spec.
  27. */
  28. function acquireChart(config, options) {
  29. var wrapper = document.createElement('div');
  30. var canvas = document.createElement('canvas');
  31. var chart, key;
  32. config = config || {};
  33. options = options || {};
  34. options.canvas = options.canvas || {height: 512, width: 512};
  35. options.wrapper = options.wrapper || {class: 'chartjs-wrapper'};
  36. for (key in options.canvas) {
  37. if (options.canvas.hasOwnProperty(key)) {
  38. canvas.setAttribute(key, options.canvas[key]);
  39. }
  40. }
  41. for (key in options.wrapper) {
  42. if (options.wrapper.hasOwnProperty(key)) {
  43. wrapper.setAttribute(key, options.wrapper[key]);
  44. }
  45. }
  46. // by default, remove chart animation and auto resize
  47. config.options = config.options || {};
  48. config.options.animation = config.options.animation === undefined ? false : config.options.animation;
  49. config.options.responsive = config.options.responsive === undefined ? false : config.options.responsive;
  50. config.options.defaultFontFamily = config.options.defaultFontFamily || 'Arial';
  51. wrapper.appendChild(canvas);
  52. window.document.body.appendChild(wrapper);
  53. try {
  54. chart = new Chart(canvas.getContext('2d'), config);
  55. } catch (e) {
  56. window.document.body.removeChild(wrapper);
  57. throw e;
  58. }
  59. chart.$test = {
  60. persistent: options.persistent,
  61. wrapper: wrapper
  62. };
  63. return chart;
  64. }
  65. function releaseChart(chart) {
  66. chart.destroy();
  67. var wrapper = (chart.$test || {}).wrapper;
  68. if (wrapper && wrapper.parentNode) {
  69. wrapper.parentNode.removeChild(wrapper);
  70. }
  71. }
  72. function injectCSS(css) {
  73. // https://stackoverflow.com/q/3922139
  74. var head = document.getElementsByTagName('head')[0];
  75. var style = document.createElement('style');
  76. style.setAttribute('type', 'text/css');
  77. if (style.styleSheet) { // IE
  78. style.styleSheet.cssText = css;
  79. } else {
  80. style.appendChild(document.createTextNode(css));
  81. }
  82. head.appendChild(style);
  83. }
  84. function waitForResize(chart, callback) {
  85. var override = chart.resize;
  86. chart.resize = function() {
  87. chart.resize = override;
  88. override.apply(this, arguments);
  89. callback();
  90. };
  91. }
  92. function _resolveElementPoint(el) {
  93. var point = {x: 0, y: 0};
  94. if (el) {
  95. if (typeof el.getCenterPoint === 'function') {
  96. point = el.getCenterPoint();
  97. } else if (el.x !== undefined && el.y !== undefined) {
  98. point = el;
  99. } else if (el._model && el._model.x !== undefined && el._model.y !== undefined) {
  100. point = el._model;
  101. }
  102. }
  103. return point;
  104. }
  105. function triggerMouseEvent(chart, type, el) {
  106. var node = chart.canvas;
  107. var rect = node.getBoundingClientRect();
  108. var point = _resolveElementPoint(el);
  109. var event = new MouseEvent(type, {
  110. clientX: rect.left + point.x,
  111. clientY: rect.top + point.y,
  112. cancelable: true,
  113. bubbles: true,
  114. view: window
  115. });
  116. node.dispatchEvent(event);
  117. }
  118. module.exports = {
  119. injectCSS: injectCSS,
  120. createCanvas: createCanvas,
  121. acquireChart: acquireChart,
  122. releaseChart: releaseChart,
  123. readImageData: readImageData,
  124. triggerMouseEvent: triggerMouseEvent,
  125. waitForResize: waitForResize
  126. };