boost-canvas.src.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  1. /**
  2. * @license Highcharts JS v8.1.2 (2020-06-16)
  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/Chart.js'], _modules['parts/Globals.js'], _modules['parts/Color.js'], _modules['parts/Utilities.js']], function (Chart, H, Color, 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 color = Color.parse;
  48. var addEvent = U.addEvent, extend = U.extend, fireEvent = U.fireEvent, isNumber = U.isNumber, merge = U.merge, pick = U.pick, wrap = U.wrap;
  49. var win = H.win, doc = win.document, noop = function () { }, Series = H.Series, seriesTypes = H.seriesTypes, CHUNK_SIZE = 50000, destroyLoadingDiv;
  50. /* eslint-disable no-invalid-this, valid-jsdoc */
  51. /**
  52. * Initialize the canvas boost.
  53. *
  54. * @function Highcharts.initCanvasBoost
  55. */
  56. H.initCanvasBoost = function () {
  57. if (H.seriesTypes.heatmap) {
  58. wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function () {
  59. var chart = this.chart, ctx = this.getContext(), inverted = this.chart.inverted, xAxis = this.xAxis, yAxis = this.yAxis;
  60. if (ctx) {
  61. // draw the columns
  62. this.points.forEach(function (point) {
  63. var plotY = point.plotY, shapeArgs, pointAttr;
  64. if (typeof plotY !== 'undefined' &&
  65. !isNaN(plotY) &&
  66. point.y !== null) {
  67. shapeArgs = point.shapeArgs;
  68. if (!chart.styledMode) {
  69. pointAttr = point.series.pointAttribs(point);
  70. }
  71. else {
  72. pointAttr = point.series.colorAttribs(point);
  73. }
  74. ctx.fillStyle = pointAttr.fill;
  75. if (inverted) {
  76. ctx.fillRect(yAxis.len - shapeArgs.y + xAxis.left, xAxis.len - shapeArgs.x + yAxis.top, -shapeArgs.height, -shapeArgs.width);
  77. }
  78. else {
  79. ctx.fillRect(shapeArgs.x + xAxis.left, shapeArgs.y + yAxis.top, shapeArgs.width, shapeArgs.height);
  80. }
  81. }
  82. });
  83. this.canvasToSVG();
  84. }
  85. else {
  86. this.chart.showLoading('Your browser doesn\'t support HTML5 canvas, <br>' +
  87. 'please use a modern browser');
  88. // Uncomment this to provide low-level (slow) support in oldIE.
  89. // It will cause script errors on charts with more than a few
  90. // thousand points.
  91. // arguments[0].call(this);
  92. }
  93. });
  94. }
  95. extend(Series.prototype, {
  96. /**
  97. * Create a hidden canvas to draw the graph on. The contents is later
  98. * copied over to an SVG image element.
  99. *
  100. * @private
  101. * @function Highcharts.Series#getContext
  102. */
  103. getContext: function () {
  104. 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) {
  105. proceed.call(this, y, x, a, b, c, d);
  106. };
  107. if (chart.isChartSeriesBoosting()) {
  108. target = chart;
  109. targetGroup = chart.seriesGroup;
  110. }
  111. ctx = target.ctx;
  112. if (!target.canvas) {
  113. target.canvas = doc.createElement('canvas');
  114. target.renderTarget = chart.renderer
  115. .image('', 0, 0, width, height)
  116. .addClass('highcharts-boost-canvas')
  117. .add(targetGroup);
  118. target.ctx = ctx = target.canvas.getContext('2d');
  119. if (chart.inverted) {
  120. ['moveTo', 'lineTo', 'rect', 'arc'].forEach(function (fn) {
  121. wrap(ctx, fn, swapXY);
  122. });
  123. }
  124. target.boostCopy = function () {
  125. target.renderTarget.attr({
  126. href: target.canvas.toDataURL('image/png')
  127. });
  128. };
  129. target.boostClear = function () {
  130. ctx.clearRect(0, 0, target.canvas.width, target.canvas.height);
  131. if (target === this) {
  132. target.renderTarget.attr({ href: '' });
  133. }
  134. };
  135. target.boostClipRect = chart.renderer.clipRect();
  136. target.renderTarget.clip(target.boostClipRect);
  137. }
  138. else if (!(target instanceof H.Chart)) {
  139. // ctx.clearRect(0, 0, width, height);
  140. }
  141. if (target.canvas.width !== width) {
  142. target.canvas.width = width;
  143. }
  144. if (target.canvas.height !== height) {
  145. target.canvas.height = height;
  146. }
  147. target.renderTarget.attr({
  148. x: 0,
  149. y: 0,
  150. width: width,
  151. height: height,
  152. style: 'pointer-events: none',
  153. href: ''
  154. });
  155. target.boostClipRect.attr(chart.getBoostClipRect(target));
  156. return ctx;
  157. },
  158. /**
  159. * Draw the canvas image inside an SVG image
  160. *
  161. * @private
  162. * @function Highcharts.Series#canvasToSVG
  163. */
  164. canvasToSVG: function () {
  165. if (!this.chart.isChartSeriesBoosting()) {
  166. if (this.boostCopy || this.chart.boostCopy) {
  167. (this.boostCopy || this.chart.boostCopy)();
  168. }
  169. }
  170. else {
  171. if (this.boostClear) {
  172. this.boostClear();
  173. }
  174. }
  175. },
  176. cvsLineTo: function (ctx, clientX, plotY) {
  177. ctx.lineTo(clientX, plotY);
  178. },
  179. renderCanvas: function () {
  180. var series = this, options = series.options, chart = series.chart, xAxis = this.xAxis, yAxis = this.yAxis, activeBoostSettings = chart.options.boost || {}, boostSettings = {
  181. timeRendering: activeBoostSettings.timeRendering || false,
  182. timeSeriesProcessing: activeBoostSettings.timeSeriesProcessing || false,
  183. timeSetup: activeBoostSettings.timeSetup || false
  184. }, 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 ?
  185. this.cvsMarkerSquare :
  186. 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 &&
  187. 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 ?
  188. series.data :
  189. (xData || rawData)), fillColor = (series.fillOpacity ?
  190. new Color(series.color).setOpacity(pick(options.fillOpacity, 0.75)).get() :
  191. series.color),
  192. //
  193. stroke = function () {
  194. if (doFill) {
  195. ctx.fillStyle = fillColor;
  196. ctx.fill();
  197. }
  198. else {
  199. ctx.strokeStyle = series.color;
  200. ctx.lineWidth = options.lineWidth;
  201. ctx.stroke();
  202. }
  203. },
  204. //
  205. drawPoint = function (clientX, plotY, yBottom, i) {
  206. if (c === 0) {
  207. ctx.beginPath();
  208. if (cvsLineTo) {
  209. ctx.lineJoin = 'round';
  210. }
  211. }
  212. if (chart.scroller &&
  213. series.options.className ===
  214. 'highcharts-navigator-series') {
  215. plotY += chart.scroller.top;
  216. if (yBottom) {
  217. yBottom += chart.scroller.top;
  218. }
  219. }
  220. else {
  221. plotY += chart.plotTop;
  222. }
  223. clientX += chart.plotLeft;
  224. if (wasNull) {
  225. ctx.moveTo(clientX, plotY);
  226. }
  227. else {
  228. if (cvsDrawPoint) {
  229. cvsDrawPoint(ctx, clientX, plotY, yBottom, lastPoint);
  230. }
  231. else if (cvsLineTo) {
  232. cvsLineTo(ctx, clientX, plotY);
  233. }
  234. else if (cvsMarker) {
  235. cvsMarker.call(series, ctx, clientX, plotY, r, i);
  236. }
  237. }
  238. // We need to stroke the line for every 1000 pixels. It will
  239. // crash the browser memory use if we stroke too
  240. // infrequently.
  241. c = c + 1;
  242. if (c === strokeBatch) {
  243. stroke();
  244. c = 0;
  245. }
  246. // Area charts need to keep track of the last point
  247. lastPoint = {
  248. clientX: clientX,
  249. plotY: plotY,
  250. yBottom: yBottom
  251. };
  252. },
  253. //
  254. compareX = options.findNearestPointBy === 'x',
  255. //
  256. xDataFull = (this.xData ||
  257. this.options.xData ||
  258. this.processedXData ||
  259. false),
  260. //
  261. addKDPoint = function (clientX, plotY, i) {
  262. // Shaves off about 60ms compared to repeated concatenation
  263. index = compareX ? clientX : clientX + ',' + plotY;
  264. // The k-d tree requires series points.
  265. // Reduce the amount of points, since the time to build the
  266. // tree increases exponentially.
  267. if (enableMouseTracking && !pointTaken[index]) {
  268. pointTaken[index] = true;
  269. if (chart.inverted) {
  270. clientX = xAxis.len - clientX;
  271. plotY = yAxis.len - plotY;
  272. }
  273. points.push({
  274. x: xDataFull ?
  275. xDataFull[cropStart + i] :
  276. false,
  277. clientX: clientX,
  278. plotX: clientX,
  279. plotY: plotY,
  280. i: cropStart + i
  281. });
  282. }
  283. };
  284. if (this.renderTarget) {
  285. this.renderTarget.attr({ 'href': '' });
  286. }
  287. // If we are zooming out from SVG mode, destroy the graphics
  288. if (this.points || this.graph) {
  289. this.destroyGraphics();
  290. }
  291. // The group
  292. series.plotGroup('group', 'series', series.visible ? 'visible' : 'hidden', options.zIndex, chart.seriesGroup);
  293. series.markerGroup = series.group;
  294. addEvent(series, 'destroy', function () {
  295. // Prevent destroy twice
  296. series.markerGroup = null;
  297. });
  298. points = this.points = [];
  299. ctx = this.getContext();
  300. series.buildKDTree = noop; // Do not start building while drawing
  301. if (this.boostClear) {
  302. this.boostClear();
  303. }
  304. // if (this.canvas) {
  305. // ctx.clearRect(
  306. // 0,
  307. // 0,
  308. // this.canvas.width,
  309. // this.canvas.height
  310. // );
  311. // }
  312. if (!this.visible) {
  313. return;
  314. }
  315. // Display a loading indicator
  316. if (rawData.length > 99999) {
  317. chart.options.loading = merge(loadingOptions, {
  318. labelStyle: {
  319. backgroundColor: color('#ffffff').setOpacity(0.75).get(),
  320. padding: '1em',
  321. borderRadius: '0.5em'
  322. },
  323. style: {
  324. backgroundColor: 'none',
  325. opacity: 1
  326. }
  327. });
  328. U.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. 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. }));