HeatmapSeries.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958
  1. /* *
  2. *
  3. * (c) 2010-2020 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import H from '../Core/Globals.js';
  12. import LegendSymbolMixin from '../Mixins/LegendSymbol.js';
  13. import SVGRenderer from '../Core/Renderer/SVG/SVGRenderer.js';
  14. import U from '../Core/Utilities.js';
  15. var clamp = U.clamp, extend = U.extend, fireEvent = U.fireEvent, isNumber = U.isNumber, merge = U.merge, pick = U.pick, seriesType = U.seriesType;
  16. /* *
  17. * @interface Highcharts.PointOptionsObject in parts/Point.ts
  18. */ /**
  19. * Heatmap series only. Point padding for a single point.
  20. * @name Highcharts.PointOptionsObject#pointPadding
  21. * @type {number|undefined}
  22. */ /**
  23. * Heatmap series only. The value of the point, resulting in a color controled
  24. * by options as set in the colorAxis configuration.
  25. * @name Highcharts.PointOptionsObject#value
  26. * @type {number|null|undefined}
  27. */
  28. ''; // detach doclets above
  29. import '../Core/Options.js';
  30. import '../Core/Series/Series.js';
  31. import '../Mixins/ColorMapSeries.js';
  32. var colorMapPointMixin = H.colorMapPointMixin, colorMapSeriesMixin = H.colorMapSeriesMixin, noop = H.noop, Series = H.Series, seriesTypes = H.seriesTypes, symbols = SVGRenderer.prototype.symbols;
  33. /**
  34. * @private
  35. * @class
  36. * @name Highcharts.seriesTypes.heatmap
  37. *
  38. * @augments Highcharts.Series
  39. */
  40. seriesType('heatmap', 'scatter',
  41. /**
  42. * A heatmap is a graphical representation of data where the individual
  43. * values contained in a matrix are represented as colors.
  44. *
  45. * @productdesc {highcharts}
  46. * Requires `modules/heatmap`.
  47. *
  48. * @sample highcharts/demo/heatmap/
  49. * Simple heatmap
  50. * @sample highcharts/demo/heatmap-canvas/
  51. * Heavy heatmap
  52. *
  53. * @extends plotOptions.scatter
  54. * @excluding animationLimit, connectEnds, connectNulls, cropThreshold,
  55. * dashStyle, findNearestPointBy, getExtremesFromAll, jitter,
  56. * linecap, lineWidth, pointInterval, pointIntervalUnit,
  57. * pointRange, pointStart, shadow, softThreshold, stacking,
  58. * step, threshold, cluster
  59. * @product highcharts highmaps
  60. * @optionparent plotOptions.heatmap
  61. */
  62. {
  63. /**
  64. * Animation is disabled by default on the heatmap series.
  65. */
  66. animation: false,
  67. /**
  68. * The border width for each heat map item.
  69. */
  70. borderWidth: 0,
  71. /**
  72. * Padding between the points in the heatmap.
  73. *
  74. * @type {number}
  75. * @default 0
  76. * @since 6.0
  77. * @apioption plotOptions.heatmap.pointPadding
  78. */
  79. /**
  80. * @default value
  81. * @apioption plotOptions.heatmap.colorKey
  82. */
  83. /**
  84. * The main color of the series. In heat maps this color is rarely used,
  85. * as we mostly use the color to denote the value of each point. Unless
  86. * options are set in the [colorAxis](#colorAxis), the default value
  87. * is pulled from the [options.colors](#colors) array.
  88. *
  89. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  90. * @since 4.0
  91. * @product highcharts
  92. * @apioption plotOptions.heatmap.color
  93. */
  94. /**
  95. * The column size - how many X axis units each column in the heatmap
  96. * should span.
  97. *
  98. * @sample {highcharts} maps/demo/heatmap/
  99. * One day
  100. * @sample {highmaps} maps/demo/heatmap/
  101. * One day
  102. *
  103. * @type {number}
  104. * @default 1
  105. * @since 4.0
  106. * @product highcharts highmaps
  107. * @apioption plotOptions.heatmap.colsize
  108. */
  109. /**
  110. * The row size - how many Y axis units each heatmap row should span.
  111. *
  112. * @sample {highcharts} maps/demo/heatmap/
  113. * 1 by default
  114. * @sample {highmaps} maps/demo/heatmap/
  115. * 1 by default
  116. *
  117. * @type {number}
  118. * @default 1
  119. * @since 4.0
  120. * @product highcharts highmaps
  121. * @apioption plotOptions.heatmap.rowsize
  122. */
  123. /**
  124. * The color applied to null points. In styled mode, a general CSS class
  125. * is applied instead.
  126. *
  127. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  128. */
  129. nullColor: '#f7f7f7',
  130. dataLabels: {
  131. formatter: function () {
  132. return this.point.value;
  133. },
  134. inside: true,
  135. verticalAlign: 'middle',
  136. crop: false,
  137. overflow: false,
  138. padding: 0 // #3837
  139. },
  140. /**
  141. * @excluding radius, enabledThreshold
  142. * @since 8.1
  143. */
  144. marker: {
  145. /**
  146. * A predefined shape or symbol for the marker. When undefined, the
  147. * symbol is pulled from options.symbols. Other possible values are
  148. * `'circle'`, `'square'`,`'diamond'`, `'triangle'`,
  149. * `'triangle-down'`, `'rect'`, and `'ellipse'`.
  150. *
  151. * Additionally, the URL to a graphic can be given on this form:
  152. * `'url(graphic.png)'`. Note that for the image to be applied to
  153. * exported charts, its URL needs to be accessible by the export
  154. * server.
  155. *
  156. * Custom callbacks for symbol path generation can also be added to
  157. * `Highcharts.SVGRenderer.prototype.symbols`. The callback is then
  158. * used by its method name, as shown in the demo.
  159. *
  160. * @sample {highcharts} highcharts/plotoptions/series-marker-symbol/
  161. * Predefined, graphic and custom markers
  162. * @sample {highstock} highcharts/plotoptions/series-marker-symbol/
  163. * Predefined, graphic and custom markers
  164. */
  165. symbol: 'rect',
  166. /** @ignore-option */
  167. radius: 0,
  168. lineColor: void 0,
  169. states: {
  170. /**
  171. * @excluding radius, radiusPlus
  172. */
  173. hover: {
  174. /**
  175. * Set the marker's fixed width on hover state.
  176. *
  177. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  178. * 70px fixed marker's width and height on hover
  179. *
  180. * @type {number|undefined}
  181. * @default undefined
  182. * @product highcharts highmaps
  183. * @apioption plotOptions.heatmap.marker.states.hover.width
  184. */
  185. /**
  186. * Set the marker's fixed height on hover state.
  187. *
  188. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  189. * 70px fixed marker's width and height on hover
  190. *
  191. * @type {number|undefined}
  192. * @default undefined
  193. * @product highcharts highmaps
  194. * @apioption plotOptions.heatmap.marker.states.hover.height
  195. */
  196. /**
  197. * The number of pixels to increase the width of the
  198. * selected point.
  199. *
  200. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  201. * 20px greater width and height on hover
  202. *
  203. * @type {number|undefined}
  204. * @default undefined
  205. * @product highcharts highmaps
  206. * @apioption plotOptions.heatmap.marker.states.hover.widthPlus
  207. */
  208. /**
  209. * The number of pixels to increase the height of the
  210. * selected point.
  211. *
  212. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  213. * 20px greater width and height on hover
  214. *
  215. * @type {number|undefined}
  216. * @default undefined
  217. * @product highcharts highmaps
  218. * @apioption plotOptions.heatmap.marker.states.hover.heightPlus
  219. */
  220. /**
  221. * The additional line width for a hovered point.
  222. *
  223. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
  224. * 5 pixels wider lineWidth on hover
  225. * @sample {highmaps} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
  226. * 5 pixels wider lineWidth on hover
  227. */
  228. lineWidthPlus: 0
  229. },
  230. /**
  231. * @excluding radius
  232. */
  233. select: {
  234. /**
  235. * Set the marker's fixed width on select state.
  236. *
  237. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  238. * 70px fixed marker's width and height on hover
  239. *
  240. * @type {number|undefined}
  241. * @default undefined
  242. * @product highcharts highmaps
  243. * @apioption plotOptions.heatmap.marker.states.select.width
  244. */
  245. /**
  246. * Set the marker's fixed height on select state.
  247. *
  248. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  249. * 70px fixed marker's width and height on hover
  250. *
  251. * @type {number|undefined}
  252. * @default undefined
  253. * @product highcharts highmaps
  254. * @apioption plotOptions.heatmap.marker.states.select.height
  255. */
  256. /**
  257. * The number of pixels to increase the width of the
  258. * selected point.
  259. *
  260. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  261. * 20px greater width and height on hover
  262. *
  263. * @type {number|undefined}
  264. * @default undefined
  265. * @product highcharts highmaps
  266. * @apioption plotOptions.heatmap.marker.states.select.widthPlus
  267. */
  268. /**
  269. * The number of pixels to increase the height of the
  270. * selected point.
  271. *
  272. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  273. * 20px greater width and height on hover
  274. *
  275. * @type {number|undefined}
  276. * @default undefined
  277. * @product highcharts highmaps
  278. * @apioption plotOptions.heatmap.marker.states.select.heightPlus
  279. */
  280. }
  281. }
  282. },
  283. clip: true,
  284. /** @ignore-option */
  285. pointRange: null,
  286. tooltip: {
  287. pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
  288. },
  289. states: {
  290. hover: {
  291. /** @ignore-option */
  292. halo: false,
  293. /**
  294. * How much to brighten the point on interaction. Requires the
  295. * main color to be defined in hex or rgb(a) format.
  296. *
  297. * In styled mode, the hover brightening is by default replaced
  298. * with a fill-opacity set in the `.highcharts-point:hover`
  299. * rule.
  300. */
  301. brightness: 0.2
  302. }
  303. }
  304. }, merge(colorMapSeriesMixin, {
  305. pointArrayMap: ['y', 'value'],
  306. hasPointSpecificOptions: true,
  307. getExtremesFromAll: true,
  308. directTouch: true,
  309. /* eslint-disable valid-jsdoc */
  310. /**
  311. * Override the init method to add point ranges on both axes.
  312. *
  313. * @private
  314. * @function Highcharts.seriesTypes.heatmap#init
  315. * @return {void}
  316. */
  317. init: function () {
  318. var options;
  319. Series.prototype.init.apply(this, arguments);
  320. options = this.options;
  321. // #3758, prevent resetting in setData
  322. options.pointRange = pick(options.pointRange, options.colsize || 1);
  323. // general point range
  324. this.yAxis.axisPointRange = options.rowsize || 1;
  325. // Bind new symbol names
  326. extend(symbols, {
  327. ellipse: symbols.circle,
  328. rect: symbols.square
  329. });
  330. },
  331. getSymbol: Series.prototype.getSymbol,
  332. /**
  333. * @private
  334. * @function Highcharts.seriesTypes.heatmap#setClip
  335. * @return {void}
  336. */
  337. setClip: function (animation) {
  338. var series = this, chart = series.chart;
  339. Series.prototype.setClip.apply(series, arguments);
  340. if (series.options.clip !== false || animation) {
  341. series.markerGroup
  342. .clip((animation || series.clipBox) && series.sharedClipKey ?
  343. chart[series.sharedClipKey] :
  344. chart.clipRect);
  345. }
  346. },
  347. /**
  348. * @private
  349. * @function Highcharts.seriesTypes.heatmap#translate
  350. * @return {void}
  351. */
  352. translate: function () {
  353. var series = this, options = series.options, symbol = options.marker && options.marker.symbol || '', shape = symbols[symbol] ? symbol : 'rect', options = series.options, hasRegularShape = ['circle', 'square'].indexOf(shape) !== -1;
  354. series.generatePoints();
  355. series.points.forEach(function (point) {
  356. var pointAttr, sizeDiff, hasImage, cellAttr = point.getCellAttributes(), shapeArgs = {
  357. x: Math.min(cellAttr.x1, cellAttr.x2),
  358. y: Math.min(cellAttr.y1, cellAttr.y2),
  359. width: Math.max(Math.abs(cellAttr.x2 - cellAttr.x1), 0),
  360. height: Math.max(Math.abs(cellAttr.y2 - cellAttr.y1), 0)
  361. };
  362. hasImage = point.hasImage =
  363. (point.marker && point.marker.symbol || symbol || '')
  364. .indexOf('url') === 0;
  365. // If marker shape is regular (symetric), find shorter
  366. // cell's side.
  367. if (hasRegularShape) {
  368. sizeDiff = Math.abs(shapeArgs.width - shapeArgs.height);
  369. shapeArgs.x = Math.min(cellAttr.x1, cellAttr.x2) +
  370. (shapeArgs.width < shapeArgs.height ? 0 : sizeDiff / 2);
  371. shapeArgs.y = Math.min(cellAttr.y1, cellAttr.y2) +
  372. (shapeArgs.width < shapeArgs.height ? sizeDiff / 2 : 0);
  373. shapeArgs.width = shapeArgs.height =
  374. Math.min(shapeArgs.width, shapeArgs.height);
  375. }
  376. pointAttr = {
  377. plotX: (cellAttr.x1 + cellAttr.x2) / 2,
  378. plotY: (cellAttr.y1 + cellAttr.y2) / 2,
  379. clientX: (cellAttr.x1 + cellAttr.x2) / 2,
  380. shapeType: 'path',
  381. shapeArgs: merge(true, shapeArgs, {
  382. d: symbols[shape](shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height)
  383. })
  384. };
  385. if (hasImage) {
  386. point.marker = {
  387. width: shapeArgs.width,
  388. height: shapeArgs.height
  389. };
  390. }
  391. extend(point, pointAttr);
  392. });
  393. fireEvent(series, 'afterTranslate');
  394. },
  395. /**
  396. * @private
  397. * @function Highcharts.seriesTypes.heatmap#pointAttribs
  398. * @param {Highcharts.HeatmapPoint} point
  399. * @param {string} state
  400. * @return {Highcharts.SVGAttributes}
  401. */
  402. pointAttribs: function (point, state) {
  403. var series = this, attr = Series.prototype.pointAttribs
  404. .call(series, point, state), seriesOptions = series.options || {}, plotOptions = series.chart.options.plotOptions || {}, seriesPlotOptions = plotOptions.series || {}, heatmapPlotOptions = plotOptions.heatmap || {}, stateOptions, brightness,
  405. // Get old properties in order to keep backward compatibility
  406. borderColor = seriesOptions.borderColor ||
  407. heatmapPlotOptions.borderColor ||
  408. seriesPlotOptions.borderColor, borderWidth = seriesOptions.borderWidth ||
  409. heatmapPlotOptions.borderWidth ||
  410. seriesPlotOptions.borderWidth ||
  411. attr['stroke-width'];
  412. // Apply lineColor, or set it to default series color.
  413. attr.stroke = ((point && point.marker && point.marker.lineColor) ||
  414. (seriesOptions.marker && seriesOptions.marker.lineColor) ||
  415. borderColor ||
  416. this.color);
  417. // Apply old borderWidth property if exists.
  418. attr['stroke-width'] = borderWidth;
  419. if (state) {
  420. stateOptions =
  421. merge(seriesOptions.states[state], seriesOptions.marker &&
  422. seriesOptions.marker.states[state], point.options.states &&
  423. point.options.states[state] || {});
  424. brightness = stateOptions.brightness;
  425. attr.fill =
  426. stateOptions.color ||
  427. H.color(attr.fill).brighten(brightness || 0).get();
  428. attr.stroke = stateOptions.lineColor;
  429. }
  430. return attr;
  431. },
  432. /**
  433. * @private
  434. * @function Highcharts.seriesTypes.heatmap#markerAttribs
  435. * @param {Highcharts.HeatmapPoint} point
  436. * @return {Highcharts.SVGAttributes}
  437. */
  438. markerAttribs: function (point, state) {
  439. var pointMarkerOptions = point.marker || {}, seriesMarkerOptions = this.options.marker || {}, seriesStateOptions, pointStateOptions, shapeArgs = point.shapeArgs || {}, hasImage = point.hasImage, attribs = {};
  440. if (hasImage) {
  441. return {
  442. x: point.plotX,
  443. y: point.plotY
  444. };
  445. }
  446. // Setting width and height attributes on image does not affect
  447. // on its dimensions.
  448. if (state) {
  449. seriesStateOptions = seriesMarkerOptions.states[state] || {};
  450. pointStateOptions = pointMarkerOptions.states &&
  451. pointMarkerOptions.states[state] || {};
  452. [['width', 'x'], ['height', 'y']].forEach(function (dimension) {
  453. // Set new width and height basing on state options.
  454. attribs[dimension[0]] = (pointStateOptions[dimension[0]] ||
  455. seriesStateOptions[dimension[0]] ||
  456. shapeArgs[dimension[0]]) + (pointStateOptions[dimension[0] + 'Plus'] ||
  457. seriesStateOptions[dimension[0] + 'Plus'] || 0);
  458. // Align marker by a new size.
  459. attribs[dimension[1]] = shapeArgs[dimension[1]] +
  460. (shapeArgs[dimension[0]] - attribs[dimension[0]]) / 2;
  461. });
  462. }
  463. return state ? attribs : shapeArgs;
  464. },
  465. /**
  466. * @private
  467. * @function Highcharts.seriesTypes.heatmap#drawPoints
  468. * @return {void}
  469. */
  470. drawPoints: function () {
  471. var _this = this;
  472. // In styled mode, use CSS, otherwise the fill used in the style
  473. // sheet will take precedence over the fill attribute.
  474. var seriesMarkerOptions = this.options.marker || {};
  475. if (seriesMarkerOptions.enabled || this._hasPointMarkers) {
  476. Series.prototype.drawPoints.call(this);
  477. this.points.forEach(function (point) {
  478. point.graphic &&
  479. point.graphic[_this.chart.styledMode ? 'css' : 'animate'](_this.colorAttribs(point));
  480. });
  481. }
  482. },
  483. // Define hasData function for non-cartesian series.
  484. // Returns true if the series has points at all.
  485. hasData: function () {
  486. return !!this.processedXData.length; // != 0
  487. },
  488. // Override to also allow null points, used when building the k-d-tree
  489. // for tooltips in boost mode.
  490. getValidPoints: function (points, insideOnly) {
  491. return Series.prototype.getValidPoints.call(this, points, insideOnly, true);
  492. },
  493. /**
  494. * @ignore
  495. * @deprecated
  496. * @function Highcharts.seriesTypes.heatmap#getBox
  497. */
  498. getBox: noop,
  499. /**
  500. * @private
  501. * @borrows Highcharts.LegendSymbolMixin.drawRectangle as Highcharts.seriesTypes.heatmap#drawLegendSymbol
  502. */
  503. drawLegendSymbol: LegendSymbolMixin.drawRectangle,
  504. /**
  505. * @private
  506. * @borrows Highcharts.seriesTypes.column#alignDataLabel as Highcharts.seriesTypes.heatmap#alignDataLabel
  507. */
  508. alignDataLabel: seriesTypes.column.prototype.alignDataLabel,
  509. /**
  510. * @private
  511. * @function Highcharts.seriesTypes.heatmap#getExtremes
  512. * @return {void}
  513. */
  514. getExtremes: function () {
  515. // Get the extremes from the value data
  516. var _a = Series.prototype.getExtremes
  517. .call(this, this.valueData), dataMin = _a.dataMin, dataMax = _a.dataMax;
  518. if (isNumber(dataMin)) {
  519. this.valueMin = dataMin;
  520. }
  521. if (isNumber(dataMax)) {
  522. this.valueMax = dataMax;
  523. }
  524. // Get the extremes from the y data
  525. return Series.prototype.getExtremes.call(this);
  526. }
  527. /* eslint-enable valid-jsdoc */
  528. }), merge(colorMapPointMixin, {
  529. /**
  530. * Heatmap series only. Padding between the points in the heatmap.
  531. * @name Highcharts.Point#pointPadding
  532. * @type {number|undefined}
  533. */
  534. /**
  535. * Heatmap series only. The value of the point, resulting in a color
  536. * controled by options as set in the colorAxis configuration.
  537. * @name Highcharts.Point#value
  538. * @type {number|null|undefined}
  539. */
  540. /* eslint-disable valid-jsdoc */
  541. /**
  542. * @private
  543. * @function Highcharts.Point#applyOptions
  544. * @param {Highcharts.HeatmapPointOptions} options
  545. * @param {number} x
  546. * @return {Highcharts.SVGPathArray}
  547. */
  548. applyOptions: function (options, x) {
  549. var point = H.Point.prototype
  550. .applyOptions.call(this, options, x);
  551. point.formatPrefix =
  552. point.isNull || point.value === null ?
  553. 'null' : 'point';
  554. return point;
  555. },
  556. /**
  557. * Color points have a value option that determines whether or not it is
  558. * a null point
  559. * @private
  560. * @function Highcharts.HeatmapPoint.isValid
  561. * @return {boolean}
  562. */
  563. isValid: function () {
  564. // undefined is allowed
  565. return (this.value !== Infinity &&
  566. this.value !== -Infinity);
  567. },
  568. /**
  569. * @private
  570. * @function Highcharts.Point#haloPath
  571. * @param {number} size
  572. * @return {Highcharts.SVGPathArray}
  573. */
  574. haloPath: function (size) {
  575. if (!size) {
  576. return [];
  577. }
  578. var rect = this.shapeArgs;
  579. return [
  580. 'M',
  581. rect.x - size,
  582. rect.y - size,
  583. 'L',
  584. rect.x - size,
  585. rect.y + rect.height + size,
  586. rect.x + rect.width + size,
  587. rect.y + rect.height + size,
  588. rect.x + rect.width + size,
  589. rect.y - size,
  590. 'Z'
  591. ];
  592. },
  593. getCellAttributes: function () {
  594. var point = this, series = point.series, seriesOptions = series.options, xPad = (seriesOptions.colsize || 1) / 2, yPad = (seriesOptions.rowsize || 1) / 2, xAxis = series.xAxis, yAxis = series.yAxis, markerOptions = point.options.marker || series.options.marker, pointPlacement = series.pointPlacementToXValue(), // #7860
  595. pointPadding = pick(point.pointPadding, seriesOptions.pointPadding, 0), cellAttr = {
  596. x1: clamp(Math.round(xAxis.len -
  597. (xAxis.translate(point.x - xPad, false, true, false, true, -pointPlacement) || 0)), -xAxis.len, 2 * xAxis.len),
  598. x2: clamp(Math.round(xAxis.len -
  599. (xAxis.translate(point.x + xPad, false, true, false, true, -pointPlacement) || 0)), -xAxis.len, 2 * xAxis.len),
  600. y1: clamp(Math.round((yAxis.translate(point.y - yPad, false, true, false, true) || 0)), -yAxis.len, 2 * yAxis.len),
  601. y2: clamp(Math.round((yAxis.translate(point.y + yPad, false, true, false, true) || 0)), -yAxis.len, 2 * yAxis.len)
  602. };
  603. // Handle marker's fixed width, and height values including border
  604. // and pointPadding while calculating cell attributes.
  605. [['width', 'x'], ['height', 'y']].forEach(function (dimension) {
  606. var prop = dimension[0], direction = dimension[1];
  607. var start = direction + '1', end = direction + '2';
  608. var side = Math.abs(cellAttr[start] - cellAttr[end]), borderWidth = markerOptions &&
  609. markerOptions.lineWidth || 0, plotPos = Math.abs(cellAttr[start] + cellAttr[end]) / 2;
  610. if (markerOptions[prop] &&
  611. markerOptions[prop] < side) {
  612. cellAttr[start] = plotPos - (markerOptions[prop] / 2) -
  613. (borderWidth / 2);
  614. cellAttr[end] = plotPos + (markerOptions[prop] / 2) +
  615. (borderWidth / 2);
  616. }
  617. // Handle pointPadding
  618. if (pointPadding) {
  619. if (direction === 'y') {
  620. start = end;
  621. end = direction + '1';
  622. }
  623. cellAttr[start] += pointPadding;
  624. cellAttr[end] -= pointPadding;
  625. }
  626. });
  627. return cellAttr;
  628. }
  629. /* eslint-enable valid-jsdoc */
  630. }));
  631. /**
  632. * A `heatmap` series. If the [type](#series.heatmap.type) option is
  633. * not specified, it is inherited from [chart.type](#chart.type).
  634. *
  635. * @productdesc {highcharts}
  636. * Requires `modules/heatmap`.
  637. *
  638. * @extends series,plotOptions.heatmap
  639. * @excluding cropThreshold, dataParser, dataURL, pointRange, stack,
  640. * @product highcharts highmaps
  641. * @apioption series.heatmap
  642. */
  643. /**
  644. * An array of data points for the series. For the `heatmap` series
  645. * type, points can be given in the following ways:
  646. *
  647. * 1. An array of arrays with 3 or 2 values. In this case, the values
  648. * correspond to `x,y,value`. If the first value is a string, it is
  649. * applied as the name of the point, and the `x` value is inferred.
  650. * The `x` value can also be omitted, in which case the inner arrays
  651. * should be of length 2\. Then the `x` value is automatically calculated,
  652. * either starting at 0 and incremented by 1, or from `pointStart`
  653. * and `pointInterval` given in the series options.
  654. *
  655. * ```js
  656. * data: [
  657. * [0, 9, 7],
  658. * [1, 10, 4],
  659. * [2, 6, 3]
  660. * ]
  661. * ```
  662. *
  663. * 2. An array of objects with named values. The following snippet shows only a
  664. * few settings, see the complete options set below. If the total number of data
  665. * points exceeds the series' [turboThreshold](#series.heatmap.turboThreshold),
  666. * this option is not available.
  667. *
  668. * ```js
  669. * data: [{
  670. * x: 1,
  671. * y: 3,
  672. * value: 10,
  673. * name: "Point2",
  674. * color: "#00FF00"
  675. * }, {
  676. * x: 1,
  677. * y: 7,
  678. * value: 10,
  679. * name: "Point1",
  680. * color: "#FF00FF"
  681. * }]
  682. * ```
  683. *
  684. * @sample {highcharts} highcharts/chart/reflow-true/
  685. * Numerical values
  686. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  687. * Arrays of numeric x and y
  688. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  689. * Arrays of datetime x and y
  690. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  691. * Arrays of point.name and y
  692. * @sample {highcharts} highcharts/series/data-array-of-objects/
  693. * Config objects
  694. *
  695. * @type {Array<Array<number>|*>}
  696. * @extends series.line.data
  697. * @product highcharts highmaps
  698. * @apioption series.heatmap.data
  699. */
  700. /**
  701. * The color of the point. In heat maps the point color is rarely set
  702. * explicitly, as we use the color to denote the `value`. Options for
  703. * this are set in the [colorAxis](#colorAxis) configuration.
  704. *
  705. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  706. * @product highcharts highmaps
  707. * @apioption series.heatmap.data.color
  708. */
  709. /**
  710. * The value of the point, resulting in a color controled by options
  711. * as set in the [colorAxis](#colorAxis) configuration.
  712. *
  713. * @type {number}
  714. * @product highcharts highmaps
  715. * @apioption series.heatmap.data.value
  716. */
  717. /**
  718. * The x value of the point. For datetime axes,
  719. * the X value is the timestamp in milliseconds since 1970.
  720. *
  721. * @type {number}
  722. * @product highcharts highmaps
  723. * @apioption series.heatmap.data.x
  724. */
  725. /**
  726. * The y value of the point.
  727. *
  728. * @type {number}
  729. * @product highcharts highmaps
  730. * @apioption series.heatmap.data.y
  731. */
  732. /**
  733. * Point padding for a single point.
  734. *
  735. * @sample maps/plotoptions/tilemap-pointpadding
  736. * Point padding on tiles
  737. *
  738. * @type {number}
  739. * @product highcharts highmaps
  740. * @apioption series.heatmap.data.pointPadding
  741. */
  742. /**
  743. * @excluding radius, enabledThreshold
  744. * @product highcharts highmaps
  745. * @since 8.1
  746. * @apioption series.heatmap.data.marker
  747. */
  748. /**
  749. * @excluding radius, enabledThreshold
  750. * @product highcharts highmaps
  751. * @since 8.1
  752. * @apioption series.heatmap.marker
  753. */
  754. /**
  755. * @excluding radius, radiusPlus
  756. * @product highcharts highmaps
  757. * @apioption series.heatmap.marker.states.hover
  758. */
  759. /**
  760. * @excluding radius
  761. * @product highcharts highmaps
  762. * @apioption series.heatmap.marker.states.select
  763. */
  764. /**
  765. * @excluding radius, radiusPlus
  766. * @product highcharts highmaps
  767. * @apioption series.heatmap.data.marker.states.hover
  768. */
  769. /**
  770. * @excluding radius
  771. * @product highcharts highmaps
  772. * @apioption series.heatmap.data.marker.states.select
  773. */
  774. /**
  775. * Set the marker's fixed width on hover state.
  776. *
  777. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
  778. * 5 pixels wider lineWidth on hover
  779. *
  780. * @type {number|undefined}
  781. * @default 0
  782. * @product highcharts highmaps
  783. * @apioption series.heatmap.marker.states.hover.lineWidthPlus
  784. */
  785. /**
  786. * Set the marker's fixed width on hover state.
  787. *
  788. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  789. * 70px fixed marker's width and height on hover
  790. *
  791. * @type {number|undefined}
  792. * @default undefined
  793. * @product highcharts highmaps
  794. * @apioption series.heatmap.marker.states.hover.width
  795. */
  796. /**
  797. * Set the marker's fixed height on hover state.
  798. *
  799. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  800. * 70px fixed marker's width and height on hover
  801. *
  802. * @type {number|undefined}
  803. * @default undefined
  804. * @product highcharts highmaps
  805. * @apioption series.heatmap.marker.states.hover.height
  806. */
  807. /**
  808. * The number of pixels to increase the width of the
  809. * hovered point.
  810. *
  811. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  812. * One day
  813. *
  814. * @type {number|undefined}
  815. * @default undefined
  816. * @product highcharts highmaps
  817. * @apioption series.heatmap.marker.states.hover.widthPlus
  818. */
  819. /**
  820. * The number of pixels to increase the height of the
  821. * hovered point.
  822. *
  823. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  824. * One day
  825. *
  826. * @type {number|undefined}
  827. * @default undefined
  828. * @product highcharts highmaps
  829. * @apioption series.heatmap.marker.states.hover.heightPlus
  830. */
  831. /**
  832. * The number of pixels to increase the width of the
  833. * hovered point.
  834. *
  835. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  836. * One day
  837. *
  838. * @type {number|undefined}
  839. * @default undefined
  840. * @product highcharts highmaps
  841. * @apioption series.heatmap.marker.states.select.widthPlus
  842. */
  843. /**
  844. * The number of pixels to increase the height of the
  845. * hovered point.
  846. *
  847. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  848. * One day
  849. *
  850. * @type {number|undefined}
  851. * @default undefined
  852. * @product highcharts highmaps
  853. * @apioption series.heatmap.marker.states.select.heightPlus
  854. */
  855. /**
  856. * Set the marker's fixed width on hover state.
  857. *
  858. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-linewidthplus
  859. * 5 pixels wider lineWidth on hover
  860. *
  861. * @type {number|undefined}
  862. * @default 0
  863. * @product highcharts highmaps
  864. * @apioption series.heatmap.data.marker.states.hover.lineWidthPlus
  865. */
  866. /**
  867. * Set the marker's fixed width on hover state.
  868. *
  869. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  870. * 70px fixed marker's width and height on hover
  871. *
  872. * @type {number|undefined}
  873. * @default undefined
  874. * @product highcharts highmaps
  875. * @apioption series.heatmap.data.marker.states.hover.width
  876. */
  877. /**
  878. * Set the marker's fixed height on hover state.
  879. *
  880. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  881. * 70px fixed marker's width and height on hover
  882. *
  883. * @type {number|undefined}
  884. * @default undefined
  885. * @product highcharts highmaps
  886. * @apioption series.heatmap.data.marker.states.hover.height
  887. */
  888. /**
  889. * The number of pixels to increase the width of the
  890. * hovered point.
  891. *
  892. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  893. * One day
  894. *
  895. * @type {number|undefined}
  896. * @default undefined
  897. * @product highcharts highstock
  898. * @apioption series.heatmap.data.marker.states.hover.widthPlus
  899. */
  900. /**
  901. * The number of pixels to increase the height of the
  902. * hovered point.
  903. *
  904. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  905. * One day
  906. *
  907. * @type {number|undefined}
  908. * @default undefined
  909. * @product highcharts highstock
  910. * @apioption series.heatmap.data.marker.states.hover.heightPlus
  911. */
  912. /**
  913. * Set the marker's fixed width on select state.
  914. *
  915. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  916. * 70px fixed marker's width and height on hover
  917. *
  918. * @type {number|undefined}
  919. * @default undefined
  920. * @product highcharts highmaps
  921. * @apioption series.heatmap.data.marker.states.select.width
  922. */
  923. /**
  924. * Set the marker's fixed height on select state.
  925. *
  926. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-width
  927. * 70px fixed marker's width and height on hover
  928. *
  929. * @type {number|undefined}
  930. * @default undefined
  931. * @product highcharts highmaps
  932. * @apioption series.heatmap.data.marker.states.select.height
  933. */
  934. /**
  935. * The number of pixels to increase the width of the
  936. * hovered point.
  937. *
  938. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  939. * One day
  940. *
  941. * @type {number|undefined}
  942. * @default undefined
  943. * @product highcharts highstock
  944. * @apioption series.heatmap.data.marker.states.select.widthPlus
  945. */
  946. /**
  947. * The number of pixels to increase the height of the
  948. * hovered point.
  949. *
  950. * @sample {highcharts} maps/plotoptions/heatmap-marker-states-hover-widthplus
  951. * One day
  952. *
  953. * @type {number|undefined}
  954. * @default undefined
  955. * @product highcharts highstock
  956. * @apioption series.heatmap.data.marker.states.select.heightPlus
  957. */
  958. ''; // adds doclets above to transpiled file