boost-canvas.src.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * Boost module
  5. *
  6. * (c) 2010-2019 Highsoft AS
  7. * Author: Torstein Honsi
  8. *
  9. * License: www.highcharts.com/license
  10. */
  11. 'use strict';
  12. (function (factory) {
  13. if (typeof module === 'object' && module.exports) {
  14. factory['default'] = factory;
  15. module.exports = factory;
  16. } else if (typeof define === 'function' && define.amd) {
  17. define('highcharts/modules/boost-canvas', ['highcharts'], function (Highcharts) {
  18. factory(Highcharts);
  19. factory.Highcharts = Highcharts;
  20. return factory;
  21. });
  22. } else {
  23. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  24. }
  25. }(function (Highcharts) {
  26. var _modules = Highcharts ? Highcharts._modules : {};
  27. function _registerModule(obj, path, args, fn) {
  28. if (!obj.hasOwnProperty(path)) {
  29. obj[path] = fn.apply(null, args);
  30. }
  31. }
  32. _registerModule(_modules, 'modules/boost-canvas.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
  33. /* *
  34. *
  35. * License: www.highcharts.com/license
  36. * Author: Torstein Honsi, Christer Vasseng
  37. *
  38. * This module serves as a fallback for the Boost module in IE9 and IE10. Newer
  39. * browsers support WebGL which is faster.
  40. *
  41. * It is recommended to include this module in conditional comments targeting
  42. * IE9 and IE10.
  43. *
  44. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  45. *
  46. * */
  47. var extend = U.extend, isNumber = U.isNumber, wrap = U.wrap;
  48. var win = H.win, doc = win.document, noop = function () { }, Color = H.Color, Series = H.Series, seriesTypes = H.seriesTypes, addEvent = H.addEvent, fireEvent = H.fireEvent, merge = H.merge, pick = H.pick, CHUNK_SIZE = 50000, destroyLoadingDiv;
  49. /* eslint-disable no-invalid-this, valid-jsdoc */
  50. /**
  51. * Initialize the canvas boost.
  52. *
  53. * @function Highcharts.initCanvasBoost
  54. */
  55. H.initCanvasBoost = function () {
  56. if (H.seriesTypes.heatmap) {
  57. wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function () {
  58. var chart = this.chart, ctx = this.getContext(), inverted = this.chart.inverted, xAxis = this.xAxis, yAxis = this.yAxis;
  59. if (ctx) {
  60. // draw the columns
  61. this.points.forEach(function (point) {
  62. var plotY = point.plotY, shapeArgs, pointAttr;
  63. if (typeof plotY !== 'undefined' &&
  64. !isNaN(plotY) &&
  65. point.y !== null) {
  66. shapeArgs = point.shapeArgs;
  67. if (!chart.styledMode) {
  68. pointAttr = point.series.pointAttribs(point);
  69. }
  70. else {
  71. pointAttr = point.series.colorAttribs(point);
  72. }
  73. ctx.fillStyle = pointAttr.fill;
  74. if (inverted) {
  75. ctx.fillRect(yAxis.len - shapeArgs.y + xAxis.left, xAxis.len - shapeArgs.x + yAxis.top, -shapeArgs.height, -shapeArgs.width);
  76. }
  77. else {
  78. ctx.fillRect(shapeArgs.x + xAxis.left, shapeArgs.y + yAxis.top, shapeArgs.width, shapeArgs.height);
  79. }
  80. }
  81. });
  82. this.canvasToSVG();
  83. }
  84. else {
  85. this.chart.showLoading('Your browser doesn\'t support HTML5 canvas, <br>' +
  86. 'please use a modern browser');
  87. // Uncomment this to provide low-level (slow) support in oldIE.
  88. // It will cause script errors on charts with more than a few
  89. // thousand points.
  90. // arguments[0].call(this);
  91. }
  92. });
  93. }
  94. extend(Series.prototype, {
  95. /**
  96. * Create a hidden canvas to draw the graph on. The contents is later
  97. * copied over to an SVG image element.
  98. *
  99. * @private
  100. * @function Highcharts.Series#getContext
  101. */
  102. getContext: function () {
  103. var chart = this.chart, width = chart.chartWidth, height = chart.chartHeight, targetGroup = chart.seriesGroup || this.group, target = this, ctx, swapXY = function (proceed, x, y, a, b, c, d) {
  104. proceed.call(this, y, x, a, b, c, d);
  105. };
  106. if (chart.isChartSeriesBoosting()) {
  107. target = chart;
  108. targetGroup = chart.seriesGroup;
  109. }
  110. ctx = target.ctx;
  111. if (!target.canvas) {
  112. target.canvas = doc.createElement('canvas');
  113. target.renderTarget = chart.renderer
  114. .image('', 0, 0, width, height)
  115. .addClass('highcharts-boost-canvas')
  116. .add(targetGroup);
  117. target.ctx = ctx = target.canvas.getContext('2d');
  118. if (chart.inverted) {
  119. ['moveTo', 'lineTo', 'rect', 'arc'].forEach(function (fn) {
  120. wrap(ctx, fn, swapXY);
  121. });
  122. }
  123. target.boostCopy = function () {
  124. target.renderTarget.attr({
  125. href: target.canvas.toDataURL('image/png')
  126. });
  127. };
  128. target.boostClear = function () {
  129. ctx.clearRect(0, 0, target.canvas.width, target.canvas.height);
  130. if (target === this) {
  131. target.renderTarget.attr({ href: '' });
  132. }
  133. };
  134. target.boostClipRect = chart.renderer.clipRect();
  135. target.renderTarget.clip(target.boostClipRect);
  136. }
  137. else if (!(target instanceof H.Chart)) {
  138. // ctx.clearRect(0, 0, width, height);
  139. }
  140. if (target.canvas.width !== width) {
  141. target.canvas.width = width;
  142. }
  143. if (target.canvas.height !== height) {
  144. target.canvas.height = height;
  145. }
  146. target.renderTarget.attr({
  147. x: 0,
  148. y: 0,
  149. width: width,
  150. height: height,
  151. style: 'pointer-events: none',
  152. href: ''
  153. });
  154. target.boostClipRect.attr(chart.getBoostClipRect(target));
  155. return ctx;
  156. },
  157. /**
  158. * Draw the canvas image inside an SVG image
  159. *
  160. * @private
  161. * @function Highcharts.Series#canvasToSVG
  162. */
  163. canvasToSVG: function () {
  164. if (!this.chart.isChartSeriesBoosting()) {
  165. if (this.boostCopy || this.chart.boostCopy) {
  166. (this.boostCopy || this.chart.boostCopy)();
  167. }
  168. }
  169. else {
  170. if (this.boostClear) {
  171. this.boostClear();
  172. }
  173. }
  174. },
  175. cvsLineTo: function (ctx, clientX, plotY) {
  176. ctx.lineTo(clientX, plotY);
  177. },
  178. renderCanvas: function () {
  179. var series = this, options = series.options, chart = series.chart, xAxis = this.xAxis, yAxis = this.yAxis, activeBoostSettings = chart.options.boost || {}, boostSettings = {
  180. timeRendering: activeBoostSettings.timeRendering || false,
  181. timeSeriesProcessing: activeBoostSettings.timeSeriesProcessing || false,
  182. timeSetup: activeBoostSettings.timeSetup || false
  183. }, ctx, c = 0, xData = series.processedXData, yData = series.processedYData, rawData = options.data, xExtremes = xAxis.getExtremes(), xMin = xExtremes.min, xMax = xExtremes.max, yExtremes = yAxis.getExtremes(), yMin = yExtremes.min, yMax = yExtremes.max, pointTaken = {}, lastClientX, sampling = !!series.sampling, points, r = options.marker && options.marker.radius, cvsDrawPoint = this.cvsDrawPoint, cvsLineTo = options.lineWidth ? this.cvsLineTo : void 0, cvsMarker = (r && r <= 1 ?
  184. this.cvsMarkerSquare :
  185. this.cvsMarkerCircle), strokeBatch = this.cvsStrokeBatch || 1000, enableMouseTracking = options.enableMouseTracking !== false, lastPoint, threshold = options.threshold, yBottom = yAxis.getThreshold(threshold), hasThreshold = isNumber(threshold), translatedThreshold = yBottom, doFill = this.fill, isRange = (series.pointArrayMap &&
  186. series.pointArrayMap.join(',') === 'low,high'), isStacked = !!options.stacking, cropStart = series.cropStart || 0, loadingOptions = chart.options.loading, requireSorting = series.requireSorting, wasNull, connectNulls = options.connectNulls, useRaw = !xData, minVal, maxVal, minI, maxI, index, sdata = (isStacked ?
  187. series.data :
  188. (xData || rawData)), fillColor = (series.fillOpacity ?
  189. new Color(series.color).setOpacity(pick(options.fillOpacity, 0.75)).get() :
  190. series.color),
  191. //
  192. stroke = function () {
  193. if (doFill) {
  194. ctx.fillStyle = fillColor;
  195. ctx.fill();
  196. }
  197. else {
  198. ctx.strokeStyle = series.color;
  199. ctx.lineWidth = options.lineWidth;
  200. ctx.stroke();
  201. }
  202. },
  203. //
  204. drawPoint = function (clientX, plotY, yBottom, i) {
  205. if (c === 0) {
  206. ctx.beginPath();
  207. if (cvsLineTo) {
  208. ctx.lineJoin = 'round';
  209. }
  210. }
  211. if (chart.scroller &&
  212. series.options.className ===
  213. 'highcharts-navigator-series') {
  214. plotY += chart.scroller.top;
  215. if (yBottom) {
  216. yBottom += chart.scroller.top;
  217. }
  218. }
  219. else {
  220. plotY += chart.plotTop;
  221. }
  222. clientX += chart.plotLeft;
  223. if (wasNull) {
  224. ctx.moveTo(clientX, plotY);
  225. }
  226. else {
  227. if (cvsDrawPoint) {
  228. cvsDrawPoint(ctx, clientX, plotY, yBottom, lastPoint);
  229. }
  230. else if (cvsLineTo) {
  231. cvsLineTo(ctx, clientX, plotY);
  232. }
  233. else if (cvsMarker) {
  234. cvsMarker.call(series, ctx, clientX, plotY, r, i);
  235. }
  236. }
  237. // We need to stroke the line for every 1000 pixels. It will
  238. // crash the browser memory use if we stroke too
  239. // infrequently.
  240. c = c + 1;
  241. if (c === strokeBatch) {
  242. stroke();
  243. c = 0;
  244. }
  245. // Area charts need to keep track of the last point
  246. lastPoint = {
  247. clientX: clientX,
  248. plotY: plotY,
  249. yBottom: yBottom
  250. };
  251. },
  252. //
  253. compareX = options.findNearestPointBy === 'x',
  254. //
  255. xDataFull = (this.xData ||
  256. this.options.xData ||
  257. this.processedXData ||
  258. false),
  259. //
  260. addKDPoint = function (clientX, plotY, i) {
  261. // Shaves off about 60ms compared to repeated concatenation
  262. index = compareX ? clientX : clientX + ',' + plotY;
  263. // The k-d tree requires series points.
  264. // Reduce the amount of points, since the time to build the
  265. // tree increases exponentially.
  266. if (enableMouseTracking && !pointTaken[index]) {
  267. pointTaken[index] = true;
  268. if (chart.inverted) {
  269. clientX = xAxis.len - clientX;
  270. plotY = yAxis.len - plotY;
  271. }
  272. points.push({
  273. x: xDataFull ?
  274. xDataFull[cropStart + i] :
  275. false,
  276. clientX: clientX,
  277. plotX: clientX,
  278. plotY: plotY,
  279. i: cropStart + i
  280. });
  281. }
  282. };
  283. if (this.renderTarget) {
  284. this.renderTarget.attr({ 'href': '' });
  285. }
  286. // If we are zooming out from SVG mode, destroy the graphics
  287. if (this.points || this.graph) {
  288. this.destroyGraphics();
  289. }
  290. // The group
  291. series.plotGroup('group', 'series', series.visible ? 'visible' : 'hidden', options.zIndex, chart.seriesGroup);
  292. series.markerGroup = series.group;
  293. addEvent(series, 'destroy', function () {
  294. // Prevent destroy twice
  295. series.markerGroup = null;
  296. });
  297. points = this.points = [];
  298. ctx = this.getContext();
  299. series.buildKDTree = noop; // Do not start building while drawing
  300. if (this.boostClear) {
  301. this.boostClear();
  302. }
  303. // if (this.canvas) {
  304. // ctx.clearRect(
  305. // 0,
  306. // 0,
  307. // this.canvas.width,
  308. // this.canvas.height
  309. // );
  310. // }
  311. if (!this.visible) {
  312. return;
  313. }
  314. // Display a loading indicator
  315. if (rawData.length > 99999) {
  316. chart.options.loading = merge(loadingOptions, {
  317. labelStyle: {
  318. backgroundColor: H.color('#ffffff')
  319. .setOpacity(0.75).get(),
  320. padding: '1em',
  321. borderRadius: '0.5em'
  322. },
  323. style: {
  324. backgroundColor: 'none',
  325. opacity: 1
  326. }
  327. });
  328. H.clearTimeout(destroyLoadingDiv);
  329. chart.showLoading('Drawing...');
  330. chart.options.loading = loadingOptions; // reset
  331. }
  332. if (boostSettings.timeRendering) {
  333. console.time('canvas rendering'); // eslint-disable-line no-console
  334. }
  335. // Loop over the points
  336. H.eachAsync(sdata, function (d, i) {
  337. var x, y, clientX, plotY, isNull, low, isNextInside = false, isPrevInside = false, nx = false, px = false, chartDestroyed = typeof chart.index === 'undefined', isYInside = true;
  338. if (!chartDestroyed) {
  339. if (useRaw) {
  340. x = d[0];
  341. y = d[1];
  342. if (sdata[i + 1]) {
  343. nx = sdata[i + 1][0];
  344. }
  345. if (sdata[i - 1]) {
  346. px = sdata[i - 1][0];
  347. }
  348. }
  349. else {
  350. x = d;
  351. y = yData[i];
  352. if (sdata[i + 1]) {
  353. nx = sdata[i + 1];
  354. }
  355. if (sdata[i - 1]) {
  356. px = sdata[i - 1];
  357. }
  358. }
  359. if (nx && nx >= xMin && nx <= xMax) {
  360. isNextInside = true;
  361. }
  362. if (px && px >= xMin && px <= xMax) {
  363. isPrevInside = true;
  364. }
  365. // Resolve low and high for range series
  366. if (isRange) {
  367. if (useRaw) {
  368. y = d.slice(1, 3);
  369. }
  370. low = y[0];
  371. y = y[1];
  372. }
  373. else if (isStacked) {
  374. x = d.x;
  375. y = d.stackY;
  376. low = y - d.y;
  377. }
  378. isNull = y === null;
  379. // Optimize for scatter zooming
  380. if (!requireSorting) {
  381. isYInside = y >= yMin && y <= yMax;
  382. }
  383. if (!isNull &&
  384. ((x >= xMin && x <= xMax && isYInside) ||
  385. (isNextInside || isPrevInside))) {
  386. clientX = Math.round(xAxis.toPixels(x, true));
  387. if (sampling) {
  388. if (typeof minI === 'undefined' ||
  389. clientX === lastClientX) {
  390. if (!isRange) {
  391. low = y;
  392. }
  393. if (typeof maxI === 'undefined' || y > maxVal) {
  394. maxVal = y;
  395. maxI = i;
  396. }
  397. if (typeof minI === 'undefined' ||
  398. low < minVal) {
  399. minVal = low;
  400. minI = i;
  401. }
  402. }
  403. // Add points and reset
  404. if (clientX !== lastClientX) {
  405. // maxI also a number:
  406. if (typeof minI !== 'undefined') {
  407. plotY = yAxis.toPixels(maxVal, true);
  408. yBottom = yAxis.toPixels(minVal, true);
  409. drawPoint(clientX, hasThreshold ?
  410. Math.min(plotY, translatedThreshold) : plotY, hasThreshold ?
  411. Math.max(yBottom, translatedThreshold) : yBottom, i);
  412. addKDPoint(clientX, plotY, maxI);
  413. if (yBottom !== plotY) {
  414. addKDPoint(clientX, yBottom, minI);
  415. }
  416. }
  417. minI = maxI = void 0;
  418. lastClientX = clientX;
  419. }
  420. }
  421. else {
  422. plotY = Math.round(yAxis.toPixels(y, true));
  423. drawPoint(clientX, plotY, yBottom, i);
  424. addKDPoint(clientX, plotY, i);
  425. }
  426. }
  427. wasNull = isNull && !connectNulls;
  428. if (i % CHUNK_SIZE === 0) {
  429. if (series.boostCopy || series.chart.boostCopy) {
  430. (series.boostCopy || series.chart.boostCopy)();
  431. }
  432. }
  433. }
  434. return !chartDestroyed;
  435. }, function () {
  436. var loadingDiv = chart.loadingDiv, loadingShown = chart.loadingShown;
  437. stroke();
  438. // if (series.boostCopy || series.chart.boostCopy) {
  439. // (series.boostCopy || series.chart.boostCopy)();
  440. // }
  441. series.canvasToSVG();
  442. if (boostSettings.timeRendering) {
  443. console.timeEnd('canvas rendering'); // eslint-disable-line no-console
  444. }
  445. fireEvent(series, 'renderedCanvas');
  446. // Do not use chart.hideLoading, as it runs JS animation and
  447. // will be blocked by buildKDTree. CSS animation looks good, but
  448. // then it must be deleted in timeout. If we add the module to
  449. // core, change hideLoading so we can skip this block.
  450. if (loadingShown) {
  451. extend(loadingDiv.style, {
  452. transition: 'opacity 250ms',
  453. opacity: 0
  454. });
  455. chart.loadingShown = false;
  456. destroyLoadingDiv = setTimeout(function () {
  457. if (loadingDiv.parentNode) { // In exporting it is falsy
  458. loadingDiv.parentNode.removeChild(loadingDiv);
  459. }
  460. chart.loadingDiv = chart.loadingSpan = null;
  461. }, 250);
  462. }
  463. // Go back to prototype, ready to build
  464. delete series.buildKDTree;
  465. series.buildKDTree();
  466. // Don't do async on export, the exportChart, getSVGForExport and
  467. // getSVG methods are not chained for it.
  468. }, chart.renderer.forExport ? Number.MAX_VALUE : void 0);
  469. }
  470. });
  471. seriesTypes.scatter.prototype.cvsMarkerCircle = function (ctx, clientX, plotY, r) {
  472. ctx.moveTo(clientX, plotY);
  473. ctx.arc(clientX, plotY, r, 0, 2 * Math.PI, false);
  474. };
  475. // Rect is twice as fast as arc, should be used for small markers
  476. seriesTypes.scatter.prototype.cvsMarkerSquare = function (ctx, clientX, plotY, r) {
  477. ctx.rect(clientX - r, plotY - r, r * 2, r * 2);
  478. };
  479. seriesTypes.scatter.prototype.fill = true;
  480. if (seriesTypes.bubble) {
  481. seriesTypes.bubble.prototype.cvsMarkerCircle = function (ctx, clientX, plotY, r, i) {
  482. ctx.moveTo(clientX, plotY);
  483. ctx.arc(clientX, plotY, this.radii && this.radii[i], 0, 2 * Math.PI, false);
  484. };
  485. seriesTypes.bubble.prototype.cvsStrokeBatch = 1;
  486. }
  487. extend(seriesTypes.area.prototype, {
  488. cvsDrawPoint: function (ctx, clientX, plotY, yBottom, lastPoint) {
  489. if (lastPoint && clientX !== lastPoint.clientX) {
  490. ctx.moveTo(lastPoint.clientX, lastPoint.yBottom);
  491. ctx.lineTo(lastPoint.clientX, lastPoint.plotY);
  492. ctx.lineTo(clientX, plotY);
  493. ctx.lineTo(clientX, yBottom);
  494. }
  495. },
  496. fill: true,
  497. fillOpacity: true,
  498. sampling: true
  499. });
  500. extend(seriesTypes.column.prototype, {
  501. cvsDrawPoint: function (ctx, clientX, plotY, yBottom) {
  502. ctx.rect(clientX - 1, plotY, 1, yBottom - plotY);
  503. },
  504. fill: true,
  505. sampling: true
  506. });
  507. H.Chart.prototype.callbacks.push(function (chart) {
  508. /**
  509. * @private
  510. */
  511. function canvasToSVG() {
  512. if (chart.boostCopy) {
  513. chart.boostCopy();
  514. }
  515. }
  516. /**
  517. * @private
  518. */
  519. function clear() {
  520. if (chart.renderTarget) {
  521. chart.renderTarget.attr({ href: '' });
  522. }
  523. if (chart.canvas) {
  524. chart.canvas.getContext('2d').clearRect(0, 0, chart.canvas.width, chart.canvas.height);
  525. }
  526. }
  527. addEvent(chart, 'predraw', clear);
  528. addEvent(chart, 'render', canvasToSVG);
  529. });
  530. };
  531. });
  532. _registerModule(_modules, 'masters/modules/boost-canvas.src.js', [], function () {
  533. });
  534. }));