HeatmapSeries.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. /* *
  2. *
  3. * (c) 2010-2019 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 '../parts/Globals.js';
  12. /* *
  13. * @interface Highcharts.PointOptionsObject in parts/Point.ts
  14. */ /**
  15. * Heatmap series only. Point padding for a single point.
  16. * @name Highcharts.PointOptionsObject#pointPadding
  17. * @type {number|undefined}
  18. */ /**
  19. * Heatmap series only. The value of the point, resulting in a color controled
  20. * by options as set in the colorAxis configuration.
  21. * @name Highcharts.PointOptionsObject#value
  22. * @type {number|null|undefined}
  23. */
  24. import U from '../parts/Utilities.js';
  25. var clamp = U.clamp, extend = U.extend, pick = U.pick;
  26. import '../parts/Options.js';
  27. import '../parts/Point.js';
  28. import '../parts/Series.js';
  29. import '../parts/Legend.js';
  30. import './ColorMapSeriesMixin.js';
  31. var colorMapPointMixin = H.colorMapPointMixin, colorMapSeriesMixin = H.colorMapSeriesMixin, LegendSymbolMixin = H.LegendSymbolMixin, merge = H.merge, noop = H.noop, fireEvent = H.fireEvent, Series = H.Series, seriesType = H.seriesType, seriesTypes = H.seriesTypes;
  32. /**
  33. * @private
  34. * @class
  35. * @name Highcharts.seriesTypes.heatmap
  36. *
  37. * @augments Highcharts.Series
  38. */
  39. seriesType('heatmap', 'scatter',
  40. /**
  41. * A heatmap is a graphical representation of data where the individual
  42. * values contained in a matrix are represented as colors.
  43. *
  44. * @productdesc {highcharts}
  45. * Requires `modules/heatmap`.
  46. *
  47. * @sample highcharts/demo/heatmap/
  48. * Simple heatmap
  49. * @sample highcharts/demo/heatmap-canvas/
  50. * Heavy heatmap
  51. *
  52. * @extends plotOptions.scatter
  53. * @excluding animationLimit, connectEnds, connectNulls, dashStyle,
  54. * findNearestPointBy, getExtremesFromAll, jitter, linecap,
  55. * lineWidth, marker, pointInterval, pointIntervalUnit,
  56. * pointRange, pointStart, shadow, softThreshold, stacking,
  57. * step, threshold, cluster
  58. * @product highcharts highmaps
  59. * @optionparent plotOptions.heatmap
  60. */
  61. {
  62. /**
  63. * Animation is disabled by default on the heatmap series.
  64. */
  65. animation: false,
  66. /**
  67. * The border width for each heat map item.
  68. */
  69. borderWidth: 0,
  70. /**
  71. * Padding between the points in the heatmap.
  72. *
  73. * @type {number}
  74. * @default 0
  75. * @since 6.0
  76. * @apioption plotOptions.heatmap.pointPadding
  77. */
  78. /**
  79. * @default value
  80. * @apioption plotOptions.heatmap.colorKey
  81. */
  82. /**
  83. * The main color of the series. In heat maps this color is rarely used,
  84. * as we mostly use the color to denote the value of each point. Unless
  85. * options are set in the [colorAxis](#colorAxis), the default value
  86. * is pulled from the [options.colors](#colors) array.
  87. *
  88. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  89. * @since 4.0
  90. * @product highcharts
  91. * @apioption plotOptions.heatmap.color
  92. */
  93. /**
  94. * The column size - how many X axis units each column in the heatmap
  95. * should span.
  96. *
  97. * @sample {highcharts} maps/demo/heatmap/
  98. * One day
  99. * @sample {highmaps} maps/demo/heatmap/
  100. * One day
  101. *
  102. * @type {number}
  103. * @default 1
  104. * @since 4.0
  105. * @product highcharts highmaps
  106. * @apioption plotOptions.heatmap.colsize
  107. */
  108. /**
  109. * The row size - how many Y axis units each heatmap row should span.
  110. *
  111. * @sample {highcharts} maps/demo/heatmap/
  112. * 1 by default
  113. * @sample {highmaps} maps/demo/heatmap/
  114. * 1 by default
  115. *
  116. * @type {number}
  117. * @default 1
  118. * @since 4.0
  119. * @product highcharts highmaps
  120. * @apioption plotOptions.heatmap.rowsize
  121. */
  122. /**
  123. * The color applied to null points. In styled mode, a general CSS class
  124. * is applied instead.
  125. *
  126. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  127. */
  128. nullColor: '#f7f7f7',
  129. dataLabels: {
  130. formatter: function () {
  131. return this.point.value;
  132. },
  133. inside: true,
  134. verticalAlign: 'middle',
  135. crop: false,
  136. overflow: false,
  137. padding: 0 // #3837
  138. },
  139. /** @ignore-option */
  140. marker: null,
  141. /** @ignore-option */
  142. pointRange: null,
  143. tooltip: {
  144. pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
  145. },
  146. states: {
  147. hover: {
  148. /** @ignore-option */
  149. halo: false,
  150. /**
  151. * How much to brighten the point on interaction. Requires the
  152. * main color to be defined in hex or rgb(a) format.
  153. *
  154. * In styled mode, the hover brightening is by default replaced
  155. * with a fill-opacity set in the `.highcharts-point:hover`
  156. * rule.
  157. */
  158. brightness: 0.2
  159. }
  160. }
  161. }, merge(colorMapSeriesMixin, {
  162. pointArrayMap: ['y', 'value'],
  163. hasPointSpecificOptions: true,
  164. getExtremesFromAll: true,
  165. directTouch: true,
  166. /* eslint-disable valid-jsdoc */
  167. /**
  168. * Override the init method to add point ranges on both axes.
  169. *
  170. * @private
  171. * @function Highcharts.seriesTypes.heatmap#init
  172. * @return {void}
  173. */
  174. init: function () {
  175. var options;
  176. seriesTypes.scatter.prototype.init.apply(this, arguments);
  177. options = this.options;
  178. // #3758, prevent resetting in setData
  179. options.pointRange = pick(options.pointRange, options.colsize || 1);
  180. // general point range
  181. this.yAxis.axisPointRange = options.rowsize || 1;
  182. },
  183. /**
  184. * @private
  185. * @function Highcharts.seriesTypes.heatmap#translate
  186. * @return {void}
  187. */
  188. translate: function () {
  189. var series = this, options = series.options, xAxis = series.xAxis, yAxis = series.yAxis, seriesPointPadding = options.pointPadding || 0, pointPlacement = series.pointPlacementToXValue(); // #7860
  190. series.generatePoints();
  191. series.points.forEach(function (point) {
  192. var xPad = (options.colsize || 1) / 2, yPad = (options.rowsize || 1) / 2, x1 = clamp(Math.round(xAxis.len -
  193. xAxis.translate(point.x - xPad, 0, 1, 0, 1, -pointPlacement)), -xAxis.len, 2 * xAxis.len), x2 = clamp(Math.round(xAxis.len -
  194. xAxis.translate(point.x + xPad, 0, 1, 0, 1, -pointPlacement)), -xAxis.len, 2 * xAxis.len), y1 = clamp(Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1)), -yAxis.len, 2 * yAxis.len), y2 = clamp(Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1)), -yAxis.len, 2 * yAxis.len), pointPadding = pick(point.pointPadding, seriesPointPadding);
  195. // Set plotX and plotY for use in K-D-Tree and more
  196. point.plotX = point.clientX = (x1 + x2) / 2;
  197. point.plotY = (y1 + y2) / 2;
  198. point.shapeType = 'rect';
  199. point.shapeArgs = {
  200. x: Math.min(x1, x2) + pointPadding,
  201. y: Math.min(y1, y2) + pointPadding,
  202. width: Math.max(Math.abs(x2 - x1) - pointPadding * 2, 0),
  203. height: Math.max(Math.abs(y2 - y1) - pointPadding * 2, 0)
  204. };
  205. });
  206. fireEvent(series, 'afterTranslate');
  207. },
  208. /**
  209. * @private
  210. * @function Highcharts.seriesTypes.heatmap#drawPoints
  211. * @return {void}
  212. */
  213. drawPoints: function () {
  214. // In styled mode, use CSS, otherwise the fill used in the style
  215. // sheet will take precedence over the fill attribute.
  216. var func = this.chart.styledMode ? 'css' : 'animate';
  217. seriesTypes.column.prototype.drawPoints.call(this);
  218. this.points.forEach(function (point) {
  219. point.graphic[func](this.colorAttribs(point));
  220. }, this);
  221. },
  222. // Define hasData function for non-cartesian series.
  223. // Returns true if the series has points at all.
  224. hasData: function () {
  225. return !!this.processedXData.length; // != 0
  226. },
  227. // Override to also allow null points, used when building the k-d-tree
  228. // for tooltips in boost mode.
  229. getValidPoints: function (points, insideOnly) {
  230. return Series.prototype.getValidPoints.call(this, points, insideOnly, true);
  231. },
  232. /**
  233. * @ignore
  234. * @deprecated
  235. * @function Highcharts.seriesTypes.heatmap#animate
  236. */
  237. animate: noop,
  238. /**
  239. * @ignore
  240. * @deprecated
  241. * @function Highcharts.seriesTypes.heatmap#getBox
  242. */
  243. getBox: noop,
  244. /**
  245. * @private
  246. * @borrows Highcharts.LegendSymbolMixin.drawRectangle as Highcharts.seriesTypes.heatmap#drawLegendSymbol
  247. */
  248. drawLegendSymbol: LegendSymbolMixin.drawRectangle,
  249. /**
  250. * @private
  251. * @borrows Highcharts.seriesTypes.column#alignDataLabel as Highcharts.seriesTypes.heatmap#alignDataLabel
  252. */
  253. alignDataLabel: seriesTypes.column.prototype.alignDataLabel,
  254. /**
  255. * @private
  256. * @function Highcharts.seriesTypes.heatmap#getExtremes
  257. * @return {void}
  258. */
  259. getExtremes: function () {
  260. // Get the extremes from the value data
  261. Series.prototype.getExtremes.call(this, this.valueData);
  262. this.valueMin = this.dataMin;
  263. this.valueMax = this.dataMax;
  264. // Get the extremes from the y data
  265. Series.prototype.getExtremes.call(this);
  266. }
  267. /* eslint-enable valid-jsdoc */
  268. }), extend({
  269. /**
  270. * Heatmap series only. Padding between the points in the heatmap.
  271. * @name Highcharts.Point#pointPadding
  272. * @type {number|undefined}
  273. */
  274. /**
  275. * Heatmap series only. The value of the point, resulting in a color
  276. * controled by options as set in the colorAxis configuration.
  277. * @name Highcharts.Point#value
  278. * @type {number|null|undefined}
  279. */
  280. /* eslint-disable valid-jsdoc */
  281. /**
  282. * @private
  283. * @function Highcharts.Point#haloPath
  284. * @param {number} size
  285. * @return {Highcharts.SVGPathArray}
  286. */
  287. haloPath: function (size) {
  288. if (!size) {
  289. return [];
  290. }
  291. var rect = this.shapeArgs;
  292. return [
  293. 'M',
  294. rect.x - size,
  295. rect.y - size,
  296. 'L',
  297. rect.x - size,
  298. rect.y + rect.height + size,
  299. rect.x + rect.width + size,
  300. rect.y + rect.height + size,
  301. rect.x + rect.width + size,
  302. rect.y - size,
  303. 'Z'
  304. ];
  305. }
  306. /* eslint-enable valid-jsdoc */
  307. }, colorMapPointMixin));
  308. /**
  309. * A `heatmap` series. If the [type](#series.heatmap.type) option is
  310. * not specified, it is inherited from [chart.type](#chart.type).
  311. *
  312. * @productdesc {highcharts}
  313. * Requires `modules/heatmap`.
  314. *
  315. * @extends series,plotOptions.heatmap
  316. * @excluding dataParser, dataURL, marker, pointRange, stack
  317. * @product highcharts highmaps
  318. * @apioption series.heatmap
  319. */
  320. /**
  321. * An array of data points for the series. For the `heatmap` series
  322. * type, points can be given in the following ways:
  323. *
  324. * 1. An array of arrays with 3 or 2 values. In this case, the values
  325. * correspond to `x,y,value`. If the first value is a string, it is
  326. * applied as the name of the point, and the `x` value is inferred.
  327. * The `x` value can also be omitted, in which case the inner arrays
  328. * should be of length 2\. Then the `x` value is automatically calculated,
  329. * either starting at 0 and incremented by 1, or from `pointStart`
  330. * and `pointInterval` given in the series options.
  331. *
  332. * ```js
  333. * data: [
  334. * [0, 9, 7],
  335. * [1, 10, 4],
  336. * [2, 6, 3]
  337. * ]
  338. * ```
  339. *
  340. * 2. An array of objects with named values. The following snippet shows only a
  341. * few settings, see the complete options set below. If the total number of data
  342. * points exceeds the series' [turboThreshold](#series.heatmap.turboThreshold),
  343. * this option is not available.
  344. *
  345. * ```js
  346. * data: [{
  347. * x: 1,
  348. * y: 3,
  349. * value: 10,
  350. * name: "Point2",
  351. * color: "#00FF00"
  352. * }, {
  353. * x: 1,
  354. * y: 7,
  355. * value: 10,
  356. * name: "Point1",
  357. * color: "#FF00FF"
  358. * }]
  359. * ```
  360. *
  361. * @sample {highcharts} highcharts/chart/reflow-true/
  362. * Numerical values
  363. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  364. * Arrays of numeric x and y
  365. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  366. * Arrays of datetime x and y
  367. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  368. * Arrays of point.name and y
  369. * @sample {highcharts} highcharts/series/data-array-of-objects/
  370. * Config objects
  371. *
  372. * @type {Array<Array<number>|*>}
  373. * @extends series.line.data
  374. * @excluding marker
  375. * @product highcharts highmaps
  376. * @apioption series.heatmap.data
  377. */
  378. /**
  379. * The color of the point. In heat maps the point color is rarely set
  380. * explicitly, as we use the color to denote the `value`. Options for
  381. * this are set in the [colorAxis](#colorAxis) configuration.
  382. *
  383. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  384. * @product highcharts highmaps
  385. * @apioption series.heatmap.data.color
  386. */
  387. /**
  388. * The value of the point, resulting in a color controled by options
  389. * as set in the [colorAxis](#colorAxis) configuration.
  390. *
  391. * @type {number}
  392. * @product highcharts highmaps
  393. * @apioption series.heatmap.data.value
  394. */
  395. /**
  396. * The x value of the point. For datetime axes,
  397. * the X value is the timestamp in milliseconds since 1970.
  398. *
  399. * @type {number}
  400. * @product highcharts highmaps
  401. * @apioption series.heatmap.data.x
  402. */
  403. /**
  404. * The y value of the point.
  405. *
  406. * @type {number}
  407. * @product highcharts highmaps
  408. * @apioption series.heatmap.data.y
  409. */
  410. /**
  411. * Point padding for a single point.
  412. *
  413. * @sample maps/plotoptions/tilemap-pointpadding
  414. * Point padding on tiles
  415. *
  416. * @type {number}
  417. * @product highcharts highmaps
  418. * @apioption series.heatmap.data.pointPadding
  419. */
  420. ''; // adds doclets above to transpiled file