boost-canvas.src.js 28 KB

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