boost-canvas.src.js 28 KB

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