treemap.src.js 79 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * (c) 2014-2019 Highsoft AS
  5. * Authors: Jon Arild Nygard / Oystein Moseng
  6. *
  7. * License: www.highcharts.com/license
  8. */
  9. 'use strict';
  10. (function (factory) {
  11. if (typeof module === 'object' && module.exports) {
  12. factory['default'] = factory;
  13. module.exports = factory;
  14. } else if (typeof define === 'function' && define.amd) {
  15. define('highcharts/modules/treemap', ['highcharts'], function (Highcharts) {
  16. factory(Highcharts);
  17. factory.Highcharts = Highcharts;
  18. return factory;
  19. });
  20. } else {
  21. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  22. }
  23. }(function (Highcharts) {
  24. var _modules = Highcharts ? Highcharts._modules : {};
  25. function _registerModule(obj, path, args, fn) {
  26. if (!obj.hasOwnProperty(path)) {
  27. obj[path] = fn.apply(null, args);
  28. }
  29. }
  30. _registerModule(_modules, 'mixins/tree-series.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
  31. /* *
  32. *
  33. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  34. *
  35. * */
  36. var extend = U.extend, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, pick = U.pick;
  37. var isBoolean = function (x) {
  38. return typeof x === 'boolean';
  39. }, isFn = function (x) {
  40. return typeof x === 'function';
  41. }, merge = H.merge;
  42. /* eslint-disable valid-jsdoc */
  43. /**
  44. * @todo Combine buildTree and buildNode with setTreeValues
  45. * @todo Remove logic from Treemap and make it utilize this mixin.
  46. * @private
  47. */
  48. var setTreeValues = function setTreeValues(tree, options) {
  49. var before = options.before, idRoot = options.idRoot, mapIdToNode = options.mapIdToNode, nodeRoot = mapIdToNode[idRoot], levelIsConstant = (isBoolean(options.levelIsConstant) ?
  50. options.levelIsConstant :
  51. true), points = options.points, point = points[tree.i], optionsPoint = point && point.options || {}, childrenTotal = 0, children = [], value;
  52. extend(tree, {
  53. levelDynamic: tree.level - (levelIsConstant ? 0 : nodeRoot.level),
  54. name: pick(point && point.name, ''),
  55. visible: (idRoot === tree.id ||
  56. (isBoolean(options.visible) ? options.visible : false))
  57. });
  58. if (isFn(before)) {
  59. tree = before(tree, options);
  60. }
  61. // First give the children some values
  62. tree.children.forEach(function (child, i) {
  63. var newOptions = extend({}, options);
  64. extend(newOptions, {
  65. index: i,
  66. siblings: tree.children.length,
  67. visible: tree.visible
  68. });
  69. child = setTreeValues(child, newOptions);
  70. children.push(child);
  71. if (child.visible) {
  72. childrenTotal += child.val;
  73. }
  74. });
  75. tree.visible = childrenTotal > 0 || tree.visible;
  76. // Set the values
  77. value = pick(optionsPoint.value, childrenTotal);
  78. extend(tree, {
  79. children: children,
  80. childrenTotal: childrenTotal,
  81. isLeaf: tree.visible && !childrenTotal,
  82. val: value
  83. });
  84. return tree;
  85. };
  86. /**
  87. * @private
  88. */
  89. var getColor = function getColor(node, options) {
  90. var index = options.index, mapOptionsToLevel = options.mapOptionsToLevel, parentColor = options.parentColor, parentColorIndex = options.parentColorIndex, series = options.series, colors = options.colors, siblings = options.siblings, points = series.points, getColorByPoint, chartOptionsChart = series.chart.options.chart, point, level, colorByPoint, colorIndexByPoint, color, colorIndex;
  91. /**
  92. * @private
  93. */
  94. function variation(color) {
  95. var colorVariation = level && level.colorVariation;
  96. if (colorVariation) {
  97. if (colorVariation.key === 'brightness') {
  98. return H.color(color).brighten(colorVariation.to * (index / siblings)).get();
  99. }
  100. }
  101. return color;
  102. }
  103. if (node) {
  104. point = points[node.i];
  105. level = mapOptionsToLevel[node.level] || {};
  106. getColorByPoint = point && level.colorByPoint;
  107. if (getColorByPoint) {
  108. colorIndexByPoint = point.index % (colors ?
  109. colors.length :
  110. chartOptionsChart.colorCount);
  111. colorByPoint = colors && colors[colorIndexByPoint];
  112. }
  113. // Select either point color, level color or inherited color.
  114. if (!series.chart.styledMode) {
  115. color = pick(point && point.options.color, level && level.color, colorByPoint, parentColor && variation(parentColor), series.color);
  116. }
  117. colorIndex = pick(point && point.options.colorIndex, level && level.colorIndex, colorIndexByPoint, parentColorIndex, options.colorIndex);
  118. }
  119. return {
  120. color: color,
  121. colorIndex: colorIndex
  122. };
  123. };
  124. /**
  125. * Creates a map from level number to its given options.
  126. *
  127. * @private
  128. * @function getLevelOptions
  129. * @param {object} params
  130. * Object containing parameters.
  131. * - `defaults` Object containing default options. The default options
  132. * are merged with the userOptions to get the final options for a
  133. * specific level.
  134. * - `from` The lowest level number.
  135. * - `levels` User options from series.levels.
  136. * - `to` The highest level number.
  137. * @return {Highcharts.Dictionary<object>|null}
  138. * Returns a map from level number to its given options.
  139. */
  140. var getLevelOptions = function getLevelOptions(params) {
  141. var result = null, defaults, converted, i, from, to, levels;
  142. if (isObject(params)) {
  143. result = {};
  144. from = isNumber(params.from) ? params.from : 1;
  145. levels = params.levels;
  146. converted = {};
  147. defaults = isObject(params.defaults) ? params.defaults : {};
  148. if (isArray(levels)) {
  149. converted = levels.reduce(function (obj, item) {
  150. var level, levelIsConstant, options;
  151. if (isObject(item) && isNumber(item.level)) {
  152. options = merge({}, item);
  153. levelIsConstant = (isBoolean(options.levelIsConstant) ?
  154. options.levelIsConstant :
  155. defaults.levelIsConstant);
  156. // Delete redundant properties.
  157. delete options.levelIsConstant;
  158. delete options.level;
  159. // Calculate which level these options apply to.
  160. level = item.level + (levelIsConstant ? 0 : from - 1);
  161. if (isObject(obj[level])) {
  162. extend(obj[level], options);
  163. }
  164. else {
  165. obj[level] = options;
  166. }
  167. }
  168. return obj;
  169. }, {});
  170. }
  171. to = isNumber(params.to) ? params.to : 1;
  172. for (i = 0; i <= to; i++) {
  173. result[i] = merge({}, defaults, isObject(converted[i]) ? converted[i] : {});
  174. }
  175. }
  176. return result;
  177. };
  178. /**
  179. * Update the rootId property on the series. Also makes sure that it is
  180. * accessible to exporting.
  181. *
  182. * @private
  183. * @function updateRootId
  184. *
  185. * @param {object} series
  186. * The series to operate on.
  187. *
  188. * @return {string}
  189. * Returns the resulting rootId after update.
  190. */
  191. var updateRootId = function (series) {
  192. var rootId, options;
  193. if (isObject(series)) {
  194. // Get the series options.
  195. options = isObject(series.options) ? series.options : {};
  196. // Calculate the rootId.
  197. rootId = pick(series.rootNode, options.rootId, '');
  198. // Set rootId on series.userOptions to pick it up in exporting.
  199. if (isObject(series.userOptions)) {
  200. series.userOptions.rootId = rootId;
  201. }
  202. // Set rootId on series to pick it up on next update.
  203. series.rootNode = rootId;
  204. }
  205. return rootId;
  206. };
  207. var result = {
  208. getColor: getColor,
  209. getLevelOptions: getLevelOptions,
  210. setTreeValues: setTreeValues,
  211. updateRootId: updateRootId
  212. };
  213. return result;
  214. });
  215. _registerModule(_modules, 'mixins/draw-point.js', [], function () {
  216. /* *
  217. *
  218. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  219. *
  220. * */
  221. var isFn = function (x) {
  222. return typeof x === 'function';
  223. };
  224. /* eslint-disable no-invalid-this, valid-jsdoc */
  225. /**
  226. * Handles the drawing of a component.
  227. * Can be used for any type of component that reserves the graphic property, and
  228. * provides a shouldDraw on its context.
  229. *
  230. * @private
  231. * @function draw
  232. * @param {DrawPointParams} params
  233. * Parameters.
  234. *
  235. * @todo add type checking.
  236. * @todo export this function to enable usage
  237. */
  238. var draw = function draw(params) {
  239. var component = this, graphic = component.graphic, animatableAttribs = params.animatableAttribs, onComplete = params.onComplete, css = params.css, renderer = params.renderer;
  240. if (component.shouldDraw()) {
  241. if (!graphic) {
  242. component.graphic = graphic =
  243. renderer[params.shapeType](params.shapeArgs)
  244. .add(params.group);
  245. }
  246. graphic
  247. .css(css)
  248. .attr(params.attribs)
  249. .animate(animatableAttribs, params.isNew ? false : void 0, onComplete);
  250. }
  251. else if (graphic) {
  252. var destroy = function () {
  253. component.graphic = graphic = graphic.destroy();
  254. if (isFn(onComplete)) {
  255. onComplete();
  256. }
  257. };
  258. // animate only runs complete callback if something was animated.
  259. if (Object.keys(animatableAttribs).length) {
  260. graphic.animate(animatableAttribs, void 0, function () {
  261. destroy();
  262. });
  263. }
  264. else {
  265. destroy();
  266. }
  267. }
  268. };
  269. /**
  270. * An extended version of draw customized for points.
  271. * It calls additional methods that is expected when rendering a point.
  272. * @private
  273. * @param {Highcharts.Dictionary<any>} params Parameters
  274. */
  275. var drawPoint = function drawPoint(params) {
  276. var point = this, attribs = params.attribs = params.attribs || {};
  277. // Assigning class in dot notation does go well in IE8
  278. // eslint-disable-next-line dot-notation
  279. attribs['class'] = point.getClassName();
  280. // Call draw to render component
  281. draw.call(point, params);
  282. };
  283. return drawPoint;
  284. });
  285. _registerModule(_modules, 'modules/treemap.src.js', [_modules['parts/Globals.js'], _modules['mixins/tree-series.js'], _modules['mixins/draw-point.js'], _modules['parts/Utilities.js']], function (H, mixinTreeSeries, drawPoint, U) {
  286. /* *
  287. *
  288. * (c) 2014-2019 Highsoft AS
  289. *
  290. * Authors: Jon Arild Nygard / Oystein Moseng
  291. *
  292. * License: www.highcharts.com/license
  293. *
  294. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  295. *
  296. * */
  297. var correctFloat = U.correctFloat, defined = U.defined, extend = U.extend, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, objectEach = U.objectEach, pick = U.pick;
  298. /* eslint-disable no-invalid-this */
  299. var AXIS_MAX = 100;
  300. var seriesType = H.seriesType, seriesTypes = H.seriesTypes, addEvent = H.addEvent, merge = H.merge, error = H.error, noop = H.noop, fireEvent = H.fireEvent, getColor = mixinTreeSeries.getColor, getLevelOptions = mixinTreeSeries.getLevelOptions,
  301. // @todo Similar to eachObject, this function is likely redundant
  302. isBoolean = function (x) {
  303. return typeof x === 'boolean';
  304. }, Series = H.Series, stableSort = H.stableSort, color = H.Color,
  305. // @todo Similar to recursive, this function is likely redundant
  306. eachObject = function (list, func, context) {
  307. context = context || this;
  308. objectEach(list, function (val, key) {
  309. func.call(context, val, key, list);
  310. });
  311. },
  312. // @todo find correct name for this function.
  313. // @todo Similar to reduce, this function is likely redundant
  314. recursive = function (item, func, context) {
  315. var next;
  316. context = context || this;
  317. next = func.call(context, item);
  318. if (next !== false) {
  319. recursive(next, func, context);
  320. }
  321. }, updateRootId = mixinTreeSeries.updateRootId;
  322. /* eslint-enable no-invalid-this */
  323. /**
  324. * @private
  325. * @class
  326. * @name Highcharts.seriesTypes.treemap
  327. *
  328. * @augments Highcharts.Series
  329. */
  330. seriesType('treemap', 'scatter'
  331. /**
  332. * A treemap displays hierarchical data using nested rectangles. The data
  333. * can be laid out in varying ways depending on options.
  334. *
  335. * @sample highcharts/demo/treemap-large-dataset/
  336. * Treemap
  337. *
  338. * @extends plotOptions.scatter
  339. * @excluding dragDrop, marker, jitter
  340. * @product highcharts
  341. * @requires modules/treemap
  342. * @optionparent plotOptions.treemap
  343. */
  344. , {
  345. /**
  346. * When enabled the user can click on a point which is a parent and
  347. * zoom in on its children. Deprecated and replaced by
  348. * [allowTraversingTree](#plotOptions.treemap.allowTraversingTree).
  349. *
  350. * @sample {highcharts} highcharts/plotoptions/treemap-allowdrilltonode/
  351. * Enabled
  352. *
  353. * @deprecated
  354. * @type {boolean}
  355. * @default false
  356. * @since 4.1.0
  357. * @product highcharts
  358. * @apioption plotOptions.treemap.allowDrillToNode
  359. */
  360. /**
  361. * When enabled the user can click on a point which is a parent and
  362. * zoom in on its children.
  363. *
  364. * @sample {highcharts} highcharts/plotoptions/treemap-allowtraversingtree/
  365. * Enabled
  366. *
  367. * @since 7.0.3
  368. * @product highcharts
  369. */
  370. allowTraversingTree: false,
  371. animationLimit: 250,
  372. /**
  373. * When the series contains less points than the crop threshold, all
  374. * points are drawn, event if the points fall outside the visible plot
  375. * area at the current zoom. The advantage of drawing all points
  376. * (including markers and columns), is that animation is performed on
  377. * updates. On the other hand, when the series contains more points than
  378. * the crop threshold, the series data is cropped to only contain points
  379. * that fall within the plot area. The advantage of cropping away
  380. * invisible points is to increase performance on large series.
  381. *
  382. * @type {number}
  383. * @default 300
  384. * @since 4.1.0
  385. * @product highcharts
  386. * @apioption plotOptions.treemap.cropThreshold
  387. */
  388. /**
  389. * Fires on a request for change of root node for the tree, before the
  390. * update is made. An event object is passed to the function, containing
  391. * additional properties `newRootId`, `previousRootId`, `redraw` and
  392. * `trigger`.
  393. *
  394. * @type {function}
  395. * @default undefined
  396. * @sample {highcharts} highcharts/plotoptions/treemap-events-setrootnode/
  397. * Alert update information on setRootNode event.
  398. * @since 7.0.3
  399. * @product highcharts
  400. * @apioption plotOptions.treemap.events.setRootNode
  401. */
  402. /**
  403. * This option decides if the user can interact with the parent nodes
  404. * or just the leaf nodes. When this option is undefined, it will be
  405. * true by default. However when allowTraversingTree is true, then it
  406. * will be false by default.
  407. *
  408. * @sample {highcharts} highcharts/plotoptions/treemap-interactbyleaf-false/
  409. * False
  410. * @sample {highcharts} highcharts/plotoptions/treemap-interactbyleaf-true-and-allowtraversingtree/
  411. * InteractByLeaf and allowTraversingTree is true
  412. *
  413. * @type {boolean}
  414. * @since 4.1.2
  415. * @product highcharts
  416. * @apioption plotOptions.treemap.interactByLeaf
  417. */
  418. /**
  419. * The sort index of the point inside the treemap level.
  420. *
  421. * @sample {highcharts} highcharts/plotoptions/treemap-sortindex/
  422. * Sort by years
  423. *
  424. * @type {number}
  425. * @since 4.1.10
  426. * @product highcharts
  427. * @apioption plotOptions.treemap.sortIndex
  428. */
  429. /**
  430. * A series specific or series type specific color set to apply instead
  431. * of the global [colors](#colors) when
  432. * [colorByPoint](#plotOptions.treemap.colorByPoint) is true.
  433. *
  434. * @type {Array<Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject>}
  435. * @since 3.0
  436. * @product highcharts
  437. * @apioption plotOptions.treemap.colors
  438. */
  439. /**
  440. * Whether to display this series type or specific series item in the
  441. * legend.
  442. */
  443. showInLegend: false,
  444. /**
  445. * @ignore-option
  446. */
  447. marker: false,
  448. /**
  449. * When using automatic point colors pulled from the `options.colors`
  450. * collection, this option determines whether the chart should receive
  451. * one color per series or one color per point.
  452. *
  453. * @see [series colors](#plotOptions.treemap.colors)
  454. *
  455. * @since 2.0
  456. * @product highcharts
  457. * @apioption plotOptions.treemap.colorByPoint
  458. */
  459. colorByPoint: false,
  460. /**
  461. * @since 4.1.0
  462. */
  463. dataLabels: {
  464. defer: false,
  465. enabled: true,
  466. formatter: function () {
  467. var point = this && this.point ?
  468. this.point :
  469. {}, name = isString(point.name) ? point.name : '';
  470. return name;
  471. },
  472. inside: true,
  473. verticalAlign: 'middle'
  474. },
  475. tooltip: {
  476. headerFormat: '',
  477. pointFormat: '<b>{point.name}</b>: {point.value}<br/>'
  478. },
  479. /**
  480. * Whether to ignore hidden points when the layout algorithm runs.
  481. * If `false`, hidden points will leave open spaces.
  482. *
  483. * @since 5.0.8
  484. */
  485. ignoreHiddenPoint: true,
  486. /**
  487. * This option decides which algorithm is used for setting position
  488. * and dimensions of the points.
  489. *
  490. * @see [How to write your own algorithm](https://www.highcharts.com/docs/chart-and-series-types/treemap)
  491. *
  492. * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-sliceanddice/
  493. * SliceAndDice by default
  494. * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-stripes/
  495. * Stripes
  496. * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-squarified/
  497. * Squarified
  498. * @sample {highcharts} highcharts/plotoptions/treemap-layoutalgorithm-strip/
  499. * Strip
  500. *
  501. * @since 4.1.0
  502. * @validvalue ["sliceAndDice", "stripes", "squarified", "strip"]
  503. */
  504. layoutAlgorithm: 'sliceAndDice',
  505. /**
  506. * Defines which direction the layout algorithm will start drawing.
  507. *
  508. * @since 4.1.0
  509. * @validvalue ["vertical", "horizontal"]
  510. */
  511. layoutStartingDirection: 'vertical',
  512. /**
  513. * Enabling this option will make the treemap alternate the drawing
  514. * direction between vertical and horizontal. The next levels starting
  515. * direction will always be the opposite of the previous.
  516. *
  517. * @sample {highcharts} highcharts/plotoptions/treemap-alternatestartingdirection-true/
  518. * Enabled
  519. *
  520. * @since 4.1.0
  521. */
  522. alternateStartingDirection: false,
  523. /**
  524. * Used together with the levels and allowTraversingTree options. When
  525. * set to false the first level visible to be level one, which is
  526. * dynamic when traversing the tree. Otherwise the level will be the
  527. * same as the tree structure.
  528. *
  529. * @since 4.1.0
  530. */
  531. levelIsConstant: true,
  532. /**
  533. * Options for the button appearing when drilling down in a treemap.
  534. * Deprecated and replaced by
  535. * [traverseUpButton](#plotOptions.treemap.traverseUpButton).
  536. *
  537. * @deprecated
  538. */
  539. drillUpButton: {
  540. /**
  541. * The position of the button.
  542. *
  543. * @deprecated
  544. */
  545. position: {
  546. /**
  547. * Vertical alignment of the button.
  548. *
  549. * @deprecated
  550. * @type {Highcharts.VerticalAlignValue}
  551. * @default top
  552. * @product highcharts
  553. * @apioption plotOptions.treemap.drillUpButton.position.verticalAlign
  554. */
  555. /**
  556. * Horizontal alignment of the button.
  557. *
  558. * @deprecated
  559. * @type {Highcharts.AlignValue}
  560. */
  561. align: 'right',
  562. /**
  563. * Horizontal offset of the button.
  564. *
  565. * @deprecated
  566. */
  567. x: -10,
  568. /**
  569. * Vertical offset of the button.
  570. *
  571. * @deprecated
  572. */
  573. y: 10
  574. }
  575. },
  576. /**
  577. * Options for the button appearing when traversing down in a treemap.
  578. */
  579. traverseUpButton: {
  580. /**
  581. * The position of the button.
  582. */
  583. position: {
  584. /**
  585. * Vertical alignment of the button.
  586. *
  587. * @type {Highcharts.VerticalAlignValue}
  588. * @default top
  589. * @product highcharts
  590. * @apioption plotOptions.treemap.traverseUpButton.position.verticalAlign
  591. */
  592. /**
  593. * Horizontal alignment of the button.
  594. *
  595. * @type {Highcharts.AlignValue}
  596. */
  597. align: 'right',
  598. /**
  599. * Horizontal offset of the button.
  600. */
  601. x: -10,
  602. /**
  603. * Vertical offset of the button.
  604. */
  605. y: 10
  606. }
  607. },
  608. /**
  609. * Set options on specific levels. Takes precedence over series options,
  610. * but not point options.
  611. *
  612. * @sample {highcharts} highcharts/plotoptions/treemap-levels/
  613. * Styling dataLabels and borders
  614. * @sample {highcharts} highcharts/demo/treemap-with-levels/
  615. * Different layoutAlgorithm
  616. *
  617. * @type {Array<*>}
  618. * @since 4.1.0
  619. * @product highcharts
  620. * @apioption plotOptions.treemap.levels
  621. */
  622. /**
  623. * Can set a `borderColor` on all points which lies on the same level.
  624. *
  625. * @type {Highcharts.ColorString}
  626. * @since 4.1.0
  627. * @product highcharts
  628. * @apioption plotOptions.treemap.levels.borderColor
  629. */
  630. /**
  631. * Set the dash style of the border of all the point which lies on the
  632. * level. See
  633. * [plotOptions.scatter.dashStyle](#plotoptions.scatter.dashstyle)
  634. * for possible options.
  635. *
  636. * @type {Highcharts.DashStyleValue}
  637. * @since 4.1.0
  638. * @product highcharts
  639. * @apioption plotOptions.treemap.levels.borderDashStyle
  640. */
  641. /**
  642. * Can set the borderWidth on all points which lies on the same level.
  643. *
  644. * @type {number}
  645. * @since 4.1.0
  646. * @product highcharts
  647. * @apioption plotOptions.treemap.levels.borderWidth
  648. */
  649. /**
  650. * Can set a color on all points which lies on the same level.
  651. *
  652. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  653. * @since 4.1.0
  654. * @product highcharts
  655. * @apioption plotOptions.treemap.levels.color
  656. */
  657. /**
  658. * A configuration object to define how the color of a child varies from
  659. * the parent's color. The variation is distributed among the children
  660. * of node. For example when setting brightness, the brightness change
  661. * will range from the parent's original brightness on the first child,
  662. * to the amount set in the `to` setting on the last node. This allows a
  663. * gradient-like color scheme that sets children out from each other
  664. * while highlighting the grouping on treemaps and sectors on sunburst
  665. * charts.
  666. *
  667. * @sample highcharts/demo/sunburst/
  668. * Sunburst with color variation
  669. *
  670. * @since 6.0.0
  671. * @product highcharts
  672. * @apioption plotOptions.treemap.levels.colorVariation
  673. */
  674. /**
  675. * The key of a color variation. Currently supports `brightness` only.
  676. *
  677. * @type {string}
  678. * @since 6.0.0
  679. * @product highcharts
  680. * @validvalue ["brightness"]
  681. * @apioption plotOptions.treemap.levels.colorVariation.key
  682. */
  683. /**
  684. * The ending value of a color variation. The last sibling will receive
  685. * this value.
  686. *
  687. * @type {number}
  688. * @since 6.0.0
  689. * @product highcharts
  690. * @apioption plotOptions.treemap.levels.colorVariation.to
  691. */
  692. /**
  693. * Can set the options of dataLabels on each point which lies on the
  694. * level.
  695. * [plotOptions.treemap.dataLabels](#plotOptions.treemap.dataLabels) for
  696. * possible values.
  697. *
  698. * @extends plotOptions.treemap.dataLabels
  699. * @since 4.1.0
  700. * @product highcharts
  701. * @apioption plotOptions.treemap.levels.dataLabels
  702. */
  703. /**
  704. * Can set the layoutAlgorithm option on a specific level.
  705. *
  706. * @type {string}
  707. * @since 4.1.0
  708. * @product highcharts
  709. * @validvalue ["sliceAndDice", "stripes", "squarified", "strip"]
  710. * @apioption plotOptions.treemap.levels.layoutAlgorithm
  711. */
  712. /**
  713. * Can set the layoutStartingDirection option on a specific level.
  714. *
  715. * @type {string}
  716. * @since 4.1.0
  717. * @product highcharts
  718. * @validvalue ["vertical", "horizontal"]
  719. * @apioption plotOptions.treemap.levels.layoutStartingDirection
  720. */
  721. /**
  722. * Decides which level takes effect from the options set in the levels
  723. * object.
  724. *
  725. * @sample {highcharts} highcharts/plotoptions/treemap-levels/
  726. * Styling of both levels
  727. *
  728. * @type {number}
  729. * @since 4.1.0
  730. * @product highcharts
  731. * @apioption plotOptions.treemap.levels.level
  732. */
  733. // Presentational options
  734. /**
  735. * The color of the border surrounding each tree map item.
  736. *
  737. * @type {Highcharts.ColorString}
  738. */
  739. borderColor: '#e6e6e6',
  740. /**
  741. * The width of the border surrounding each tree map item.
  742. */
  743. borderWidth: 1,
  744. colorKey: 'colorValue',
  745. /**
  746. * The opacity of a point in treemap. When a point has children, the
  747. * visibility of the children is determined by the opacity.
  748. *
  749. * @since 4.2.4
  750. */
  751. opacity: 0.15,
  752. /**
  753. * A wrapper object for all the series options in specific states.
  754. *
  755. * @extends plotOptions.heatmap.states
  756. */
  757. states: {
  758. /**
  759. * Options for the hovered series
  760. *
  761. * @extends plotOptions.heatmap.states.hover
  762. * @excluding halo
  763. */
  764. hover: {
  765. /**
  766. * The border color for the hovered state.
  767. */
  768. borderColor: '#999999',
  769. /**
  770. * Brightness for the hovered point. Defaults to 0 if the
  771. * heatmap series is loaded first, otherwise 0.1.
  772. *
  773. * @type {number}
  774. * @default undefined
  775. */
  776. brightness: seriesTypes.heatmap ? 0 : 0.1,
  777. /**
  778. * @extends plotOptions.heatmap.states.hover.halo
  779. */
  780. halo: false,
  781. /**
  782. * The opacity of a point in treemap. When a point has children,
  783. * the visibility of the children is determined by the opacity.
  784. *
  785. * @since 4.2.4
  786. */
  787. opacity: 0.75,
  788. /**
  789. * The shadow option for hovered state.
  790. */
  791. shadow: false
  792. }
  793. }
  794. // Prototype members
  795. }, {
  796. pointArrayMap: ['value'],
  797. directTouch: true,
  798. optionalAxis: 'colorAxis',
  799. getSymbol: noop,
  800. parallelArrays: ['x', 'y', 'value', 'colorValue'],
  801. colorKey: 'colorValue',
  802. trackerGroups: ['group', 'dataLabelsGroup'],
  803. /* eslint-disable no-invalid-this, valid-jsdoc */
  804. /**
  805. * Creates an object map from parent id to childrens index.
  806. *
  807. * @private
  808. * @function Highcharts.Series#getListOfParents
  809. *
  810. * @param {Highcharts.SeriesTreemapDataOptions} [data]
  811. * List of points set in options.
  812. *
  813. * @param {Array<string>} [existingIds]
  814. * List of all point ids.
  815. *
  816. * @return {object}
  817. * Map from parent id to children index in data.
  818. */
  819. getListOfParents: function (data, existingIds) {
  820. var arr = isArray(data) ? data : [], ids = isArray(existingIds) ? existingIds : [], listOfParents = arr.reduce(function (prev, curr, i) {
  821. var parent = pick(curr.parent, '');
  822. if (typeof prev[parent] === 'undefined') {
  823. prev[parent] = [];
  824. }
  825. prev[parent].push(i);
  826. return prev;
  827. }, {
  828. '': [] // Root of tree
  829. });
  830. // If parent does not exist, hoist parent to root of tree.
  831. eachObject(listOfParents, function (children, parent, list) {
  832. if ((parent !== '') && (ids.indexOf(parent) === -1)) {
  833. children.forEach(function (child) {
  834. list[''].push(child);
  835. });
  836. delete list[parent];
  837. }
  838. });
  839. return listOfParents;
  840. },
  841. // Creates a tree structured object from the series points
  842. getTree: function () {
  843. var series = this, allIds = this.data.map(function (d) {
  844. return d.id;
  845. }), parentList = series.getListOfParents(this.data, allIds);
  846. series.nodeMap = [];
  847. return series.buildNode('', -1, 0, parentList, null);
  848. },
  849. // Define hasData function for non-cartesian series.
  850. // Returns true if the series has points at all.
  851. hasData: function () {
  852. return !!this.processedXData.length; // != 0
  853. },
  854. init: function (chart, options) {
  855. var series = this, colorMapSeriesMixin = H.colorMapSeriesMixin;
  856. // If color series logic is loaded, add some properties
  857. if (colorMapSeriesMixin) {
  858. this.colorAttribs = colorMapSeriesMixin.colorAttribs;
  859. }
  860. // Handle deprecated options.
  861. series.eventsToUnbind.push(addEvent(series, 'setOptions', function (event) {
  862. var options = event.userOptions;
  863. if (defined(options.allowDrillToNode) &&
  864. !defined(options.allowTraversingTree)) {
  865. options.allowTraversingTree = options.allowDrillToNode;
  866. delete options.allowDrillToNode;
  867. }
  868. if (defined(options.drillUpButton) &&
  869. !defined(options.traverseUpButton)) {
  870. options.traverseUpButton = options.drillUpButton;
  871. delete options.drillUpButton;
  872. }
  873. }));
  874. Series.prototype.init.call(series, chart, options);
  875. if (series.options.allowTraversingTree) {
  876. series.eventsToUnbind.push(addEvent(series, 'click', series.onClickDrillToNode));
  877. }
  878. },
  879. buildNode: function (id, i, level, list, parent) {
  880. var series = this, children = [], point = series.points[i], height = 0, node, child;
  881. // Actions
  882. ((list[id] || [])).forEach(function (i) {
  883. child = series.buildNode(series.points[i].id, i, (level + 1), list, id);
  884. height = Math.max(child.height + 1, height);
  885. children.push(child);
  886. });
  887. node = {
  888. id: id,
  889. i: i,
  890. children: children,
  891. height: height,
  892. level: level,
  893. parent: parent,
  894. visible: false // @todo move this to better location
  895. };
  896. series.nodeMap[node.id] = node;
  897. if (point) {
  898. point.node = node;
  899. }
  900. return node;
  901. },
  902. setTreeValues: function (tree) {
  903. var series = this, options = series.options, idRoot = series.rootNode, mapIdToNode = series.nodeMap, nodeRoot = mapIdToNode[idRoot], levelIsConstant = (isBoolean(options.levelIsConstant) ?
  904. options.levelIsConstant :
  905. true), childrenTotal = 0, children = [], val, point = series.points[tree.i];
  906. // First give the children some values
  907. tree.children.forEach(function (child) {
  908. child = series.setTreeValues(child);
  909. children.push(child);
  910. if (!child.ignore) {
  911. childrenTotal += child.val;
  912. }
  913. });
  914. // Sort the children
  915. stableSort(children, function (a, b) {
  916. return a.sortIndex - b.sortIndex;
  917. });
  918. // Set the values
  919. val = pick(point && point.options.value, childrenTotal);
  920. if (point) {
  921. point.value = val;
  922. }
  923. extend(tree, {
  924. children: children,
  925. childrenTotal: childrenTotal,
  926. // Ignore this node if point is not visible
  927. ignore: !(pick(point && point.visible, true) && (val > 0)),
  928. isLeaf: tree.visible && !childrenTotal,
  929. levelDynamic: (tree.level - (levelIsConstant ? 0 : nodeRoot.level)),
  930. name: pick(point && point.name, ''),
  931. sortIndex: pick(point && point.sortIndex, -val),
  932. val: val
  933. });
  934. return tree;
  935. },
  936. /**
  937. * Recursive function which calculates the area for all children of a
  938. * node.
  939. *
  940. * @private
  941. * @function Highcharts.Series#calculateChildrenAreas
  942. *
  943. * @param {object} node
  944. * The node which is parent to the children.
  945. *
  946. * @param {object} area
  947. * The rectangular area of the parent.
  948. */
  949. calculateChildrenAreas: function (parent, area) {
  950. var series = this, options = series.options, mapOptionsToLevel = series.mapOptionsToLevel, level = mapOptionsToLevel[parent.level + 1], algorithm = pick((series[(level && level.layoutAlgorithm)] &&
  951. level.layoutAlgorithm), options.layoutAlgorithm), alternate = options.alternateStartingDirection, childrenValues = [], children;
  952. // Collect all children which should be included
  953. children = parent.children.filter(function (n) {
  954. return !n.ignore;
  955. });
  956. if (level && level.layoutStartingDirection) {
  957. area.direction = level.layoutStartingDirection === 'vertical' ?
  958. 0 :
  959. 1;
  960. }
  961. childrenValues = series[algorithm](area, children);
  962. children.forEach(function (child, index) {
  963. var values = childrenValues[index];
  964. child.values = merge(values, {
  965. val: child.childrenTotal,
  966. direction: (alternate ? 1 - area.direction : area.direction)
  967. });
  968. child.pointValues = merge(values, {
  969. x: (values.x / series.axisRatio),
  970. // Flip y-values to avoid visual regression with csvCoord in
  971. // Axis.translate at setPointValues. #12488
  972. y: AXIS_MAX - values.y - values.height,
  973. width: (values.width / series.axisRatio)
  974. });
  975. // If node has children, then call method recursively
  976. if (child.children.length) {
  977. series.calculateChildrenAreas(child, child.values);
  978. }
  979. });
  980. },
  981. setPointValues: function () {
  982. var series = this;
  983. var points = series.points, xAxis = series.xAxis, yAxis = series.yAxis;
  984. var styledMode = series.chart.styledMode;
  985. // Get the crisp correction in classic mode. For this to work in
  986. // styled mode, we would need to first add the shape (without x,
  987. // y, width and height), then read the rendered stroke width
  988. // using point.graphic.strokeWidth(), then modify and apply the
  989. // shapeArgs. This applies also to column series, but the
  990. // downside is performance and code complexity.
  991. var getCrispCorrection = function (point) { return (styledMode ?
  992. 0 :
  993. ((series.pointAttribs(point)['stroke-width'] || 0) % 2) / 2); };
  994. points.forEach(function (point) {
  995. var _a = point.node, values = _a.pointValues, visible = _a.visible;
  996. // Points which is ignored, have no values.
  997. if (values && visible) {
  998. var height = values.height, width = values.width, x = values.x, y = values.y;
  999. var crispCorr = getCrispCorrection(point);
  1000. var x1 = Math.round(xAxis.toPixels(x, true)) - crispCorr;
  1001. var x2 = Math.round(xAxis.toPixels(x + width, true)) - crispCorr;
  1002. var y1 = Math.round(yAxis.toPixels(y, true)) - crispCorr;
  1003. var y2 = Math.round(yAxis.toPixels(y + height, true)) - crispCorr;
  1004. // Set point values
  1005. point.shapeArgs = {
  1006. x: Math.min(x1, x2),
  1007. y: Math.min(y1, y2),
  1008. width: Math.abs(x2 - x1),
  1009. height: Math.abs(y2 - y1)
  1010. };
  1011. point.plotX =
  1012. point.shapeArgs.x + (point.shapeArgs.width / 2);
  1013. point.plotY =
  1014. point.shapeArgs.y + (point.shapeArgs.height / 2);
  1015. }
  1016. else {
  1017. // Reset visibility
  1018. delete point.plotX;
  1019. delete point.plotY;
  1020. }
  1021. });
  1022. },
  1023. // Set the node's color recursively, from the parent down.
  1024. setColorRecursive: function (node, parentColor, colorIndex, index, siblings) {
  1025. var series = this, chart = series && series.chart, colors = chart && chart.options && chart.options.colors, colorInfo, point;
  1026. if (node) {
  1027. colorInfo = getColor(node, {
  1028. colors: colors,
  1029. index: index,
  1030. mapOptionsToLevel: series.mapOptionsToLevel,
  1031. parentColor: parentColor,
  1032. parentColorIndex: colorIndex,
  1033. series: series,
  1034. siblings: siblings
  1035. });
  1036. point = series.points[node.i];
  1037. if (point) {
  1038. point.color = colorInfo.color;
  1039. point.colorIndex = colorInfo.colorIndex;
  1040. }
  1041. // Do it all again with the children
  1042. (node.children || []).forEach(function (child, i) {
  1043. series.setColorRecursive(child, colorInfo.color, colorInfo.colorIndex, i, node.children.length);
  1044. });
  1045. }
  1046. },
  1047. algorithmGroup: function (h, w, d, p) {
  1048. this.height = h;
  1049. this.width = w;
  1050. this.plot = p;
  1051. this.direction = d;
  1052. this.startDirection = d;
  1053. this.total = 0;
  1054. this.nW = 0;
  1055. this.lW = 0;
  1056. this.nH = 0;
  1057. this.lH = 0;
  1058. this.elArr = [];
  1059. this.lP = {
  1060. total: 0,
  1061. lH: 0,
  1062. nH: 0,
  1063. lW: 0,
  1064. nW: 0,
  1065. nR: 0,
  1066. lR: 0,
  1067. aspectRatio: function (w, h) {
  1068. return Math.max((w / h), (h / w));
  1069. }
  1070. };
  1071. this.addElement = function (el) {
  1072. this.lP.total = this.elArr[this.elArr.length - 1];
  1073. this.total = this.total + el;
  1074. if (this.direction === 0) {
  1075. // Calculate last point old aspect ratio
  1076. this.lW = this.nW;
  1077. this.lP.lH = this.lP.total / this.lW;
  1078. this.lP.lR = this.lP.aspectRatio(this.lW, this.lP.lH);
  1079. // Calculate last point new aspect ratio
  1080. this.nW = this.total / this.height;
  1081. this.lP.nH = this.lP.total / this.nW;
  1082. this.lP.nR = this.lP.aspectRatio(this.nW, this.lP.nH);
  1083. }
  1084. else {
  1085. // Calculate last point old aspect ratio
  1086. this.lH = this.nH;
  1087. this.lP.lW = this.lP.total / this.lH;
  1088. this.lP.lR = this.lP.aspectRatio(this.lP.lW, this.lH);
  1089. // Calculate last point new aspect ratio
  1090. this.nH = this.total / this.width;
  1091. this.lP.nW = this.lP.total / this.nH;
  1092. this.lP.nR = this.lP.aspectRatio(this.lP.nW, this.nH);
  1093. }
  1094. this.elArr.push(el);
  1095. };
  1096. this.reset = function () {
  1097. this.nW = 0;
  1098. this.lW = 0;
  1099. this.elArr = [];
  1100. this.total = 0;
  1101. };
  1102. },
  1103. algorithmCalcPoints: function (directionChange, last, group, childrenArea) {
  1104. var pX, pY, pW, pH, gW = group.lW, gH = group.lH, plot = group.plot, keep, i = 0, end = group.elArr.length - 1;
  1105. if (last) {
  1106. gW = group.nW;
  1107. gH = group.nH;
  1108. }
  1109. else {
  1110. keep = group.elArr[group.elArr.length - 1];
  1111. }
  1112. group.elArr.forEach(function (p) {
  1113. if (last || (i < end)) {
  1114. if (group.direction === 0) {
  1115. pX = plot.x;
  1116. pY = plot.y;
  1117. pW = gW;
  1118. pH = p / pW;
  1119. }
  1120. else {
  1121. pX = plot.x;
  1122. pY = plot.y;
  1123. pH = gH;
  1124. pW = p / pH;
  1125. }
  1126. childrenArea.push({
  1127. x: pX,
  1128. y: pY,
  1129. width: pW,
  1130. height: correctFloat(pH)
  1131. });
  1132. if (group.direction === 0) {
  1133. plot.y = plot.y + pH;
  1134. }
  1135. else {
  1136. plot.x = plot.x + pW;
  1137. }
  1138. }
  1139. i = i + 1;
  1140. });
  1141. // Reset variables
  1142. group.reset();
  1143. if (group.direction === 0) {
  1144. group.width = group.width - gW;
  1145. }
  1146. else {
  1147. group.height = group.height - gH;
  1148. }
  1149. plot.y = plot.parent.y + (plot.parent.height - group.height);
  1150. plot.x = plot.parent.x + (plot.parent.width - group.width);
  1151. if (directionChange) {
  1152. group.direction = 1 - group.direction;
  1153. }
  1154. // If not last, then add uncalculated element
  1155. if (!last) {
  1156. group.addElement(keep);
  1157. }
  1158. },
  1159. algorithmLowAspectRatio: function (directionChange, parent, children) {
  1160. var childrenArea = [], series = this, pTot, plot = {
  1161. x: parent.x,
  1162. y: parent.y,
  1163. parent: parent
  1164. }, direction = parent.direction, i = 0, end = children.length - 1, group = new this.algorithmGroup(// eslint-disable-line new-cap
  1165. parent.height, parent.width, direction, plot);
  1166. // Loop through and calculate all areas
  1167. children.forEach(function (child) {
  1168. pTot =
  1169. (parent.width * parent.height) * (child.val / parent.val);
  1170. group.addElement(pTot);
  1171. if (group.lP.nR > group.lP.lR) {
  1172. series.algorithmCalcPoints(directionChange, false, group, childrenArea, plot // @todo no supported
  1173. );
  1174. }
  1175. // If last child, then calculate all remaining areas
  1176. if (i === end) {
  1177. series.algorithmCalcPoints(directionChange, true, group, childrenArea, plot // @todo not supported
  1178. );
  1179. }
  1180. i = i + 1;
  1181. });
  1182. return childrenArea;
  1183. },
  1184. algorithmFill: function (directionChange, parent, children) {
  1185. var childrenArea = [], pTot, direction = parent.direction, x = parent.x, y = parent.y, width = parent.width, height = parent.height, pX, pY, pW, pH;
  1186. children.forEach(function (child) {
  1187. pTot =
  1188. (parent.width * parent.height) * (child.val / parent.val);
  1189. pX = x;
  1190. pY = y;
  1191. if (direction === 0) {
  1192. pH = height;
  1193. pW = pTot / pH;
  1194. width = width - pW;
  1195. x = x + pW;
  1196. }
  1197. else {
  1198. pW = width;
  1199. pH = pTot / pW;
  1200. height = height - pH;
  1201. y = y + pH;
  1202. }
  1203. childrenArea.push({
  1204. x: pX,
  1205. y: pY,
  1206. width: pW,
  1207. height: pH
  1208. });
  1209. if (directionChange) {
  1210. direction = 1 - direction;
  1211. }
  1212. });
  1213. return childrenArea;
  1214. },
  1215. strip: function (parent, children) {
  1216. return this.algorithmLowAspectRatio(false, parent, children);
  1217. },
  1218. squarified: function (parent, children) {
  1219. return this.algorithmLowAspectRatio(true, parent, children);
  1220. },
  1221. sliceAndDice: function (parent, children) {
  1222. return this.algorithmFill(true, parent, children);
  1223. },
  1224. stripes: function (parent, children) {
  1225. return this.algorithmFill(false, parent, children);
  1226. },
  1227. translate: function () {
  1228. var series = this, options = series.options,
  1229. // NOTE: updateRootId modifies series.
  1230. rootId = updateRootId(series), rootNode, pointValues, seriesArea, tree, val;
  1231. // Call prototype function
  1232. Series.prototype.translate.call(series);
  1233. // @todo Only if series.isDirtyData is true
  1234. tree = series.tree = series.getTree();
  1235. rootNode = series.nodeMap[rootId];
  1236. series.renderTraverseUpButton(rootId);
  1237. series.mapOptionsToLevel = getLevelOptions({
  1238. from: rootNode.level + 1,
  1239. levels: options.levels,
  1240. to: tree.height,
  1241. defaults: {
  1242. levelIsConstant: series.options.levelIsConstant,
  1243. colorByPoint: options.colorByPoint
  1244. }
  1245. });
  1246. if (rootId !== '' &&
  1247. (!rootNode || !rootNode.children.length)) {
  1248. series.setRootNode('', false);
  1249. rootId = series.rootNode;
  1250. rootNode = series.nodeMap[rootId];
  1251. }
  1252. // Parents of the root node is by default visible
  1253. recursive(series.nodeMap[series.rootNode], function (node) {
  1254. var next = false, p = node.parent;
  1255. node.visible = true;
  1256. if (p || p === '') {
  1257. next = series.nodeMap[p];
  1258. }
  1259. return next;
  1260. });
  1261. // Children of the root node is by default visible
  1262. recursive(series.nodeMap[series.rootNode].children, function (children) {
  1263. var next = false;
  1264. children.forEach(function (child) {
  1265. child.visible = true;
  1266. if (child.children.length) {
  1267. next = (next || []).concat(child.children);
  1268. }
  1269. });
  1270. return next;
  1271. });
  1272. series.setTreeValues(tree);
  1273. // Calculate plotting values.
  1274. series.axisRatio = (series.xAxis.len / series.yAxis.len);
  1275. series.nodeMap[''].pointValues = pointValues = {
  1276. x: 0,
  1277. y: 0,
  1278. width: AXIS_MAX,
  1279. height: AXIS_MAX
  1280. };
  1281. series.nodeMap[''].values = seriesArea = merge(pointValues, {
  1282. width: (pointValues.width * series.axisRatio),
  1283. direction: (options.layoutStartingDirection === 'vertical' ? 0 : 1),
  1284. val: tree.val
  1285. });
  1286. series.calculateChildrenAreas(tree, seriesArea);
  1287. // Logic for point colors
  1288. if (!series.colorAxis &&
  1289. !options.colorByPoint) {
  1290. series.setColorRecursive(series.tree);
  1291. }
  1292. // Update axis extremes according to the root node.
  1293. if (options.allowTraversingTree) {
  1294. val = rootNode.pointValues;
  1295. series.xAxis.setExtremes(val.x, val.x + val.width, false);
  1296. series.yAxis.setExtremes(val.y, val.y + val.height, false);
  1297. series.xAxis.setScale();
  1298. series.yAxis.setScale();
  1299. }
  1300. // Assign values to points.
  1301. series.setPointValues();
  1302. },
  1303. /**
  1304. * Extend drawDataLabels with logic to handle custom options related to
  1305. * the treemap series:
  1306. *
  1307. * - Points which is not a leaf node, has dataLabels disabled by
  1308. * default.
  1309. *
  1310. * - Options set on series.levels is merged in.
  1311. *
  1312. * - Width of the dataLabel is set to match the width of the point
  1313. * shape.
  1314. *
  1315. * @private
  1316. * @function Highcharts.Series#drawDataLabels
  1317. */
  1318. drawDataLabels: function () {
  1319. var series = this, mapOptionsToLevel = series.mapOptionsToLevel, points = series.points.filter(function (n) {
  1320. return n.node.visible;
  1321. }), options, level;
  1322. points.forEach(function (point) {
  1323. level = mapOptionsToLevel[point.node.level];
  1324. // Set options to new object to avoid problems with scope
  1325. options = { style: {} };
  1326. // If not a leaf, then label should be disabled as default
  1327. if (!point.node.isLeaf) {
  1328. options.enabled = false;
  1329. }
  1330. // If options for level exists, include them as well
  1331. if (level && level.dataLabels) {
  1332. options = merge(options, level.dataLabels);
  1333. series._hasPointLabels = true;
  1334. }
  1335. // Set dataLabel width to the width of the point shape.
  1336. if (point.shapeArgs) {
  1337. options.style.width = point.shapeArgs.width;
  1338. if (point.dataLabel) {
  1339. point.dataLabel.css({
  1340. width: point.shapeArgs.width + 'px'
  1341. });
  1342. }
  1343. }
  1344. // Merge custom options with point options
  1345. point.dlOptions = merge(options, point.options.dataLabels);
  1346. });
  1347. Series.prototype.drawDataLabels.call(this);
  1348. },
  1349. // Over the alignment method by setting z index
  1350. alignDataLabel: function (point, dataLabel, labelOptions) {
  1351. var style = labelOptions.style;
  1352. // #8160: Prevent the label from exceeding the point's
  1353. // boundaries in treemaps by applying ellipsis overflow.
  1354. // The issue was happening when datalabel's text contained a
  1355. // long sequence of characters without a whitespace.
  1356. if (!defined(style.textOverflow) &&
  1357. dataLabel.text &&
  1358. dataLabel.getBBox().width > dataLabel.text.textWidth) {
  1359. dataLabel.css({
  1360. textOverflow: 'ellipsis',
  1361. // unit (px) is required when useHTML is true
  1362. width: style.width += 'px'
  1363. });
  1364. }
  1365. seriesTypes.column.prototype.alignDataLabel.apply(this, arguments);
  1366. if (point.dataLabel) {
  1367. // point.node.zIndex could be undefined (#6956)
  1368. point.dataLabel.attr({ zIndex: (point.node.zIndex || 0) + 1 });
  1369. }
  1370. },
  1371. // Get presentational attributes
  1372. pointAttribs: function (point, state) {
  1373. var series = this, mapOptionsToLevel = (isObject(series.mapOptionsToLevel) ?
  1374. series.mapOptionsToLevel :
  1375. {}), level = point && mapOptionsToLevel[point.node.level] || {}, options = this.options, attr, stateOptions = (state && options.states[state]) || {}, className = (point && point.getClassName()) || '', opacity;
  1376. // Set attributes by precedence. Point trumps level trumps series.
  1377. // Stroke width uses pick because it can be 0.
  1378. attr = {
  1379. 'stroke': (point && point.borderColor) ||
  1380. level.borderColor ||
  1381. stateOptions.borderColor ||
  1382. options.borderColor,
  1383. 'stroke-width': pick(point && point.borderWidth, level.borderWidth, stateOptions.borderWidth, options.borderWidth),
  1384. 'dashstyle': (point && point.borderDashStyle) ||
  1385. level.borderDashStyle ||
  1386. stateOptions.borderDashStyle ||
  1387. options.borderDashStyle,
  1388. 'fill': (point && point.color) || this.color
  1389. };
  1390. // Hide levels above the current view
  1391. if (className.indexOf('highcharts-above-level') !== -1) {
  1392. attr.fill = 'none';
  1393. attr['stroke-width'] = 0;
  1394. // Nodes with children that accept interaction
  1395. }
  1396. else if (className.indexOf('highcharts-internal-node-interactive') !== -1) {
  1397. opacity = pick(stateOptions.opacity, options.opacity);
  1398. attr.fill = color(attr.fill).setOpacity(opacity).get();
  1399. attr.cursor = 'pointer';
  1400. // Hide nodes that have children
  1401. }
  1402. else if (className.indexOf('highcharts-internal-node') !== -1) {
  1403. attr.fill = 'none';
  1404. }
  1405. else if (state) {
  1406. // Brighten and hoist the hover nodes
  1407. attr.fill = color(attr.fill)
  1408. .brighten(stateOptions.brightness)
  1409. .get();
  1410. }
  1411. return attr;
  1412. },
  1413. // Override drawPoints
  1414. drawPoints: function () {
  1415. var series = this, chart = series.chart, renderer = chart.renderer, points = series.points, styledMode = chart.styledMode, options = series.options, shadow = styledMode ? {} : options.shadow, borderRadius = options.borderRadius, withinAnimationLimit = chart.pointCount < options.animationLimit, allowTraversingTree = options.allowTraversingTree;
  1416. points.forEach(function (point) {
  1417. var levelDynamic = point.node.levelDynamic, animate = {}, attr = {}, css = {}, groupKey = 'level-group-' + levelDynamic, hasGraphic = !!point.graphic, shouldAnimate = withinAnimationLimit && hasGraphic, shapeArgs = point.shapeArgs;
  1418. // Don't bother with calculate styling if the point is not drawn
  1419. if (point.shouldDraw()) {
  1420. if (borderRadius) {
  1421. attr.r = borderRadius;
  1422. }
  1423. merge(true, // Extend object
  1424. // Which object to extend
  1425. shouldAnimate ? animate : attr,
  1426. // Add shapeArgs to animate/attr if graphic exists
  1427. hasGraphic ? shapeArgs : {},
  1428. // Add style attribs if !styleMode
  1429. styledMode ?
  1430. {} :
  1431. series.pointAttribs(point, (point.selected && 'select')));
  1432. // In styled mode apply point.color. Use CSS, otherwise the
  1433. // fill used in the style sheet will take precedence over
  1434. // the fill attribute.
  1435. if (series.colorAttribs && styledMode) {
  1436. // Heatmap is loaded
  1437. extend(css, series.colorAttribs(point));
  1438. }
  1439. if (!series[groupKey]) {
  1440. series[groupKey] = renderer.g(groupKey)
  1441. .attr({
  1442. // @todo Set the zIndex based upon the number of
  1443. // levels, instead of using 1000
  1444. zIndex: 1000 - levelDynamic
  1445. })
  1446. .add(series.group);
  1447. series[groupKey].survive = true;
  1448. }
  1449. }
  1450. // Draw the point
  1451. point.draw({
  1452. animatableAttribs: animate,
  1453. attribs: attr,
  1454. css: css,
  1455. group: series[groupKey],
  1456. renderer: renderer,
  1457. shadow: shadow,
  1458. shapeArgs: shapeArgs,
  1459. shapeType: 'rect'
  1460. });
  1461. // If setRootNode is allowed, set a point cursor on clickables &
  1462. // add drillId to point
  1463. if (allowTraversingTree && point.graphic) {
  1464. point.drillId = options.interactByLeaf ?
  1465. series.drillToByLeaf(point) :
  1466. series.drillToByGroup(point);
  1467. }
  1468. });
  1469. },
  1470. // Add drilling on the suitable points
  1471. onClickDrillToNode: function (event) {
  1472. var series = this, point = event.point, drillId = point && point.drillId;
  1473. // If a drill id is returned, add click event and cursor.
  1474. if (isString(drillId)) {
  1475. point.setState(''); // Remove hover
  1476. series.setRootNode(drillId, true, { trigger: 'click' });
  1477. }
  1478. },
  1479. /**
  1480. * Finds the drill id for a parent node. Returns false if point should
  1481. * not have a click event.
  1482. *
  1483. * @private
  1484. * @function Highcharts.Series#drillToByGroup
  1485. *
  1486. * @param {Highcharts.Point} point
  1487. *
  1488. * @return {boolean|string}
  1489. * Drill to id or false when point should not have a click
  1490. * event.
  1491. */
  1492. drillToByGroup: function (point) {
  1493. var series = this, drillId = false;
  1494. if ((point.node.level - series.nodeMap[series.rootNode].level) ===
  1495. 1 &&
  1496. !point.node.isLeaf) {
  1497. drillId = point.id;
  1498. }
  1499. return drillId;
  1500. },
  1501. /**
  1502. * Finds the drill id for a leaf node. Returns false if point should not
  1503. * have a click event
  1504. *
  1505. * @private
  1506. * @function Highcharts.Series#drillToByLeaf
  1507. *
  1508. * @param {Highcharts.Point} point
  1509. *
  1510. * @return {boolean|string}
  1511. * Drill to id or false when point should not have a click
  1512. * event.
  1513. */
  1514. drillToByLeaf: function (point) {
  1515. var series = this, drillId = false, nodeParent;
  1516. if ((point.node.parent !== series.rootNode) &&
  1517. point.node.isLeaf) {
  1518. nodeParent = point.node;
  1519. while (!drillId) {
  1520. nodeParent = series.nodeMap[nodeParent.parent];
  1521. if (nodeParent.parent === series.rootNode) {
  1522. drillId = nodeParent.id;
  1523. }
  1524. }
  1525. }
  1526. return drillId;
  1527. },
  1528. drillUp: function () {
  1529. var series = this, node = series.nodeMap[series.rootNode];
  1530. if (node && isString(node.parent)) {
  1531. series.setRootNode(node.parent, true, { trigger: 'traverseUpButton' });
  1532. }
  1533. },
  1534. // TODO remove this function at a suitable version.
  1535. drillToNode: function (id, redraw) {
  1536. error('WARNING: treemap.drillToNode has been renamed to treemap.' +
  1537. 'setRootNode, and will be removed in the next major version.');
  1538. this.setRootNode(id, redraw);
  1539. },
  1540. /**
  1541. * Sets a new root node for the series.
  1542. *
  1543. * @private
  1544. * @function Highcharts.Series#setRootNode
  1545. *
  1546. * @param {string} id The id of the new root node.
  1547. * @param {boolean} [redraw=true] Wether to redraw the chart or not.
  1548. * @param {object} [eventArguments] Arguments to be accessed in
  1549. * event handler.
  1550. * @param {string} [eventArguments.newRootId] Id of the new root.
  1551. * @param {string} [eventArguments.previousRootId] Id of the previous
  1552. * root.
  1553. * @param {boolean} [eventArguments.redraw] Wether to redraw the
  1554. * chart after.
  1555. * @param {object} [eventArguments.series] The series to update the root
  1556. * of.
  1557. * @param {string} [eventArguments.trigger] The action which
  1558. * triggered the event. Undefined if the setRootNode is called
  1559. * directly.
  1560. * @return {void}
  1561. *
  1562. * @fires Highcharts.Series#event:setRootNode
  1563. */
  1564. setRootNode: function (id, redraw, eventArguments) {
  1565. var series = this, eventArgs = extend({
  1566. newRootId: id,
  1567. previousRootId: series.rootNode,
  1568. redraw: pick(redraw, true),
  1569. series: series
  1570. }, eventArguments);
  1571. /**
  1572. * The default functionality of the setRootNode event.
  1573. *
  1574. * @private
  1575. * @param {object} args The event arguments.
  1576. * @param {string} args.newRootId Id of the new root.
  1577. * @param {string} args.previousRootId Id of the previous root.
  1578. * @param {boolean} args.redraw Wether to redraw the chart after.
  1579. * @param {object} args.series The series to update the root of.
  1580. * @param {string} [args.trigger=undefined] The action which
  1581. * triggered the event. Undefined if the setRootNode is called
  1582. * directly.
  1583. * @return {void}
  1584. */
  1585. var defaultFn = function (args) {
  1586. var series = args.series;
  1587. // Store previous and new root ids on the series.
  1588. series.idPreviousRoot = args.previousRootId;
  1589. series.rootNode = args.newRootId;
  1590. // Redraw the chart
  1591. series.isDirty = true; // Force redraw
  1592. if (args.redraw) {
  1593. series.chart.redraw();
  1594. }
  1595. };
  1596. // Fire setRootNode event.
  1597. fireEvent(series, 'setRootNode', eventArgs, defaultFn);
  1598. },
  1599. renderTraverseUpButton: function (rootId) {
  1600. var series = this, nodeMap = series.nodeMap, node = nodeMap[rootId], name = node.name, buttonOptions = series.options.traverseUpButton, backText = pick(buttonOptions.text, name, '< Back'), attr, states;
  1601. if (rootId === '') {
  1602. if (series.drillUpButton) {
  1603. series.drillUpButton =
  1604. series.drillUpButton.destroy();
  1605. }
  1606. }
  1607. else if (!this.drillUpButton) {
  1608. attr = buttonOptions.theme;
  1609. states = attr && attr.states;
  1610. this.drillUpButton = this.chart.renderer
  1611. .button(backText, null, null, function () {
  1612. series.drillUp();
  1613. }, attr, states && states.hover, states && states.select)
  1614. .addClass('highcharts-drillup-button')
  1615. .attr({
  1616. align: buttonOptions.position.align,
  1617. zIndex: 7
  1618. })
  1619. .add()
  1620. .align(buttonOptions.position, false, buttonOptions.relativeTo || 'plotBox');
  1621. }
  1622. else {
  1623. this.drillUpButton.placed = false;
  1624. this.drillUpButton.attr({
  1625. text: backText
  1626. })
  1627. .align();
  1628. }
  1629. },
  1630. buildKDTree: noop,
  1631. drawLegendSymbol: H.LegendSymbolMixin.drawRectangle,
  1632. getExtremes: function () {
  1633. // Get the extremes from the value data
  1634. Series.prototype.getExtremes.call(this, this.colorValueData);
  1635. this.valueMin = this.dataMin;
  1636. this.valueMax = this.dataMax;
  1637. // Get the extremes from the y data
  1638. Series.prototype.getExtremes.call(this);
  1639. },
  1640. getExtremesFromAll: true,
  1641. bindAxes: function () {
  1642. var treeAxis = {
  1643. endOnTick: false,
  1644. gridLineWidth: 0,
  1645. lineWidth: 0,
  1646. min: 0,
  1647. dataMin: 0,
  1648. minPadding: 0,
  1649. max: AXIS_MAX,
  1650. dataMax: AXIS_MAX,
  1651. maxPadding: 0,
  1652. startOnTick: false,
  1653. title: null,
  1654. tickPositions: []
  1655. };
  1656. Series.prototype.bindAxes.call(this);
  1657. extend(this.yAxis.options, treeAxis);
  1658. extend(this.xAxis.options, treeAxis);
  1659. },
  1660. /**
  1661. * Workaround for `inactive` state. Since `series.opacity` option is
  1662. * already reserved, don't use that state at all by disabling
  1663. * `inactiveOtherPoints` and not inheriting states by points.
  1664. *
  1665. * @private
  1666. */
  1667. setState: function (state) {
  1668. this.options.inactiveOtherPoints = true;
  1669. Series.prototype.setState.call(this, state, false);
  1670. this.options.inactiveOtherPoints = false;
  1671. },
  1672. utils: {
  1673. recursive: recursive
  1674. }
  1675. /* eslint-enable no-invalid-this, valid-jsdoc */
  1676. }, {
  1677. draw: drawPoint,
  1678. setVisible: seriesTypes.pie.prototype.pointClass.prototype.setVisible,
  1679. /* eslint-disable no-invalid-this, valid-jsdoc */
  1680. getClassName: function () {
  1681. var className = H.Point.prototype.getClassName.call(this), series = this.series, options = series.options;
  1682. // Above the current level
  1683. if (this.node.level <= series.nodeMap[series.rootNode].level) {
  1684. className += ' highcharts-above-level';
  1685. }
  1686. else if (!this.node.isLeaf &&
  1687. !pick(options.interactByLeaf, !options.allowTraversingTree)) {
  1688. className += ' highcharts-internal-node-interactive';
  1689. }
  1690. else if (!this.node.isLeaf) {
  1691. className += ' highcharts-internal-node';
  1692. }
  1693. return className;
  1694. },
  1695. /**
  1696. * A tree point is valid if it has han id too, assume it may be a parent
  1697. * item.
  1698. *
  1699. * @private
  1700. * @function Highcharts.Point#isValid
  1701. */
  1702. isValid: function () {
  1703. return this.id || isNumber(this.value);
  1704. },
  1705. setState: function (state) {
  1706. H.Point.prototype.setState.call(this, state);
  1707. // Graphic does not exist when point is not visible.
  1708. if (this.graphic) {
  1709. this.graphic.attr({
  1710. zIndex: state === 'hover' ? 1 : 0
  1711. });
  1712. }
  1713. },
  1714. shouldDraw: function () {
  1715. var point = this;
  1716. return isNumber(point.plotY) && point.y !== null;
  1717. }
  1718. /* eslint-enable no-invalid-this, valid-jsdoc */
  1719. });
  1720. /**
  1721. * A `treemap` series. If the [type](#series.treemap.type) option is
  1722. * not specified, it is inherited from [chart.type](#chart.type).
  1723. *
  1724. * @extends series,plotOptions.treemap
  1725. * @excluding dataParser, dataURL, stack
  1726. * @product highcharts
  1727. * @requires modules/treemap
  1728. * @apioption series.treemap
  1729. */
  1730. /**
  1731. * An array of data points for the series. For the `treemap` series
  1732. * type, points can be given in the following ways:
  1733. *
  1734. * 1. An array of numerical values. In this case, the numerical values will be
  1735. * interpreted as `value` options. Example:
  1736. * ```js
  1737. * data: [0, 5, 3, 5]
  1738. * ```
  1739. *
  1740. * 2. An array of objects with named values. The following snippet shows only a
  1741. * few settings, see the complete options set below. If the total number of
  1742. * data points exceeds the series'
  1743. * [turboThreshold](#series.treemap.turboThreshold),
  1744. * this option is not available.
  1745. * ```js
  1746. * data: [{
  1747. * value: 9,
  1748. * name: "Point2",
  1749. * color: "#00FF00"
  1750. * }, {
  1751. * value: 6,
  1752. * name: "Point1",
  1753. * color: "#FF00FF"
  1754. * }]
  1755. * ```
  1756. *
  1757. * @sample {highcharts} highcharts/chart/reflow-true/
  1758. * Numerical values
  1759. * @sample {highcharts} highcharts/series/data-array-of-objects/
  1760. * Config objects
  1761. *
  1762. * @type {Array<number|null|*>}
  1763. * @extends series.heatmap.data
  1764. * @excluding x, y
  1765. * @product highcharts
  1766. * @apioption series.treemap.data
  1767. */
  1768. /**
  1769. * The value of the point, resulting in a relative area of the point
  1770. * in the treemap.
  1771. *
  1772. * @type {number|null}
  1773. * @product highcharts
  1774. * @apioption series.treemap.data.value
  1775. */
  1776. /**
  1777. * Serves a purpose only if a `colorAxis` object is defined in the chart
  1778. * options. This value will decide which color the point gets from the
  1779. * scale of the colorAxis.
  1780. *
  1781. * @type {number}
  1782. * @since 4.1.0
  1783. * @product highcharts
  1784. * @apioption series.treemap.data.colorValue
  1785. */
  1786. /**
  1787. * Only for treemap. Use this option to build a tree structure. The
  1788. * value should be the id of the point which is the parent. If no points
  1789. * has a matching id, or this option is undefined, then the parent will
  1790. * be set to the root.
  1791. *
  1792. * @sample {highcharts} highcharts/point/parent/
  1793. * Point parent
  1794. * @sample {highcharts} highcharts/demo/treemap-with-levels/
  1795. * Example where parent id is not matching
  1796. *
  1797. * @type {string}
  1798. * @since 4.1.0
  1799. * @product highcharts
  1800. * @apioption series.treemap.data.parent
  1801. */
  1802. ''; // adds doclets above to transpiled file
  1803. });
  1804. _registerModule(_modules, 'masters/modules/treemap.src.js', [], function () {
  1805. });
  1806. }));