SunburstSeries.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
  1. /* *
  2. *
  3. * This module implements sunburst charts in Highcharts.
  4. *
  5. * (c) 2016-2021 Highsoft AS
  6. *
  7. * Authors: Jon Arild Nygard
  8. *
  9. * License: www.highcharts.com/license
  10. *
  11. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  12. *
  13. * */
  14. 'use strict';
  15. var __extends = (this && this.__extends) || (function () {
  16. var extendStatics = function (d, b) {
  17. extendStatics = Object.setPrototypeOf ||
  18. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  19. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  20. return extendStatics(d, b);
  21. };
  22. return function (d, b) {
  23. extendStatics(d, b);
  24. function __() { this.constructor = d; }
  25. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  26. };
  27. })();
  28. import CenteredSeriesMixin from '../../Mixins/CenteredSeries.js';
  29. var getCenter = CenteredSeriesMixin.getCenter, getStartAndEndRadians = CenteredSeriesMixin.getStartAndEndRadians;
  30. import H from '../../Core/Globals.js';
  31. var noop = H.noop;
  32. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  33. var Series = SeriesRegistry.series, _a = SeriesRegistry.seriesTypes, ColumnSeries = _a.column, TreemapSeries = _a.treemap;
  34. import SunburstPoint from './SunburstPoint.js';
  35. import SunburstUtilities from './SunburstUtilities.js';
  36. import TreeSeriesMixin from '../../Mixins/TreeSeries.js';
  37. var getColor = TreeSeriesMixin.getColor, getLevelOptions = TreeSeriesMixin.getLevelOptions, setTreeValues = TreeSeriesMixin.setTreeValues, updateRootId = TreeSeriesMixin.updateRootId;
  38. import U from '../../Core/Utilities.js';
  39. var error = U.error, extend = U.extend, isNumber = U.isNumber, isObject = U.isObject, isString = U.isString, merge = U.merge, splat = U.splat;
  40. /* *
  41. *
  42. * Constants
  43. *
  44. * */
  45. var rad2deg = 180 / Math.PI;
  46. /* *
  47. *
  48. * Functions
  49. *
  50. * */
  51. // eslint-disable-next-line require-jsdoc
  52. function isBoolean(x) {
  53. return typeof x === 'boolean';
  54. }
  55. /**
  56. * Find a set of coordinates given a start coordinates, an angle, and a
  57. * distance.
  58. *
  59. * @private
  60. * @function getEndPoint
  61. *
  62. * @param {number} x
  63. * Start coordinate x
  64. *
  65. * @param {number} y
  66. * Start coordinate y
  67. *
  68. * @param {number} angle
  69. * Angle in radians
  70. *
  71. * @param {number} distance
  72. * Distance from start to end coordinates
  73. *
  74. * @return {Highcharts.SVGAttributes}
  75. * Returns the end coordinates, x and y.
  76. */
  77. var getEndPoint = function getEndPoint(x, y, angle, distance) {
  78. return {
  79. x: x + (Math.cos(angle) * distance),
  80. y: y + (Math.sin(angle) * distance)
  81. };
  82. };
  83. // eslint-disable-next-line require-jsdoc
  84. function getDlOptions(params) {
  85. // Set options to new object to avoid problems with scope
  86. var point = params.point, shape = isObject(params.shapeArgs) ? params.shapeArgs : {}, optionsPoint = (isObject(params.optionsPoint) ?
  87. params.optionsPoint.dataLabels :
  88. {}),
  89. // The splat was used because levels dataLabels
  90. // options doesn't work as an array
  91. optionsLevel = splat(isObject(params.level) ?
  92. params.level.dataLabels :
  93. {})[0], options = merge({
  94. style: {}
  95. }, optionsLevel, optionsPoint), rotationRad, rotation, rotationMode = options.rotationMode;
  96. if (!isNumber(options.rotation)) {
  97. if (rotationMode === 'auto' || rotationMode === 'circular') {
  98. if (point.innerArcLength < 1 &&
  99. point.outerArcLength > shape.radius) {
  100. rotationRad = 0;
  101. // Triger setTextPath function to get textOutline etc.
  102. if (point.dataLabelPath && rotationMode === 'circular') {
  103. options.textPath = {
  104. enabled: true
  105. };
  106. }
  107. }
  108. else if (point.innerArcLength > 1 &&
  109. point.outerArcLength > 1.5 * shape.radius) {
  110. if (rotationMode === 'circular') {
  111. options.textPath = {
  112. enabled: true,
  113. attributes: {
  114. dy: 5
  115. }
  116. };
  117. }
  118. else {
  119. rotationMode = 'parallel';
  120. }
  121. }
  122. else {
  123. // Trigger the destroyTextPath function
  124. if (point.dataLabel &&
  125. point.dataLabel.textPathWrapper &&
  126. rotationMode === 'circular') {
  127. options.textPath = {
  128. enabled: false
  129. };
  130. }
  131. rotationMode = 'perpendicular';
  132. }
  133. }
  134. if (rotationMode !== 'auto' && rotationMode !== 'circular') {
  135. rotationRad = (shape.end -
  136. (shape.end - shape.start) / 2);
  137. }
  138. if (rotationMode === 'parallel') {
  139. options.style.width = Math.min(shape.radius * 2.5, (point.outerArcLength + point.innerArcLength) / 2);
  140. }
  141. else {
  142. options.style.width = shape.radius;
  143. }
  144. if (rotationMode === 'perpendicular' &&
  145. point.series.chart.renderer.fontMetrics(options.style.fontSize).h > point.outerArcLength) {
  146. options.style.width = 1;
  147. }
  148. // Apply padding (#8515)
  149. options.style.width = Math.max(options.style.width - 2 * (options.padding || 0), 1);
  150. rotation = (rotationRad * rad2deg) % 180;
  151. if (rotationMode === 'parallel') {
  152. rotation -= 90;
  153. }
  154. // Prevent text from rotating upside down
  155. if (rotation > 90) {
  156. rotation -= 180;
  157. }
  158. else if (rotation < -90) {
  159. rotation += 180;
  160. }
  161. options.rotation = rotation;
  162. }
  163. if (options.textPath) {
  164. if (point.shapeExisting.innerR === 0 &&
  165. options.textPath.enabled) {
  166. // Enable rotation to render text
  167. options.rotation = 0;
  168. // Center dataLabel - disable textPath
  169. options.textPath.enabled = false;
  170. // Setting width and padding
  171. options.style.width = Math.max((point.shapeExisting.r * 2) -
  172. 2 * (options.padding || 0), 1);
  173. }
  174. else if (point.dlOptions &&
  175. point.dlOptions.textPath &&
  176. !point.dlOptions.textPath.enabled &&
  177. (rotationMode === 'circular')) {
  178. // Bring dataLabel back if was a center dataLabel
  179. options.textPath.enabled = true;
  180. }
  181. if (options.textPath.enabled) {
  182. // Enable rotation to render text
  183. options.rotation = 0;
  184. // Setting width and padding
  185. options.style.width = Math.max((point.outerArcLength +
  186. point.innerArcLength) / 2 -
  187. 2 * (options.padding || 0), 1);
  188. }
  189. }
  190. // NOTE: alignDataLabel positions the data label differntly when rotation is
  191. // 0. Avoiding this by setting rotation to a small number.
  192. if (options.rotation === 0) {
  193. options.rotation = 0.001;
  194. }
  195. return options;
  196. }
  197. // eslint-disable-next-line require-jsdoc
  198. function getAnimation(shape, params) {
  199. var point = params.point, radians = params.radians, innerR = params.innerR, idRoot = params.idRoot, idPreviousRoot = params.idPreviousRoot, shapeExisting = params.shapeExisting, shapeRoot = params.shapeRoot, shapePreviousRoot = params.shapePreviousRoot, visible = params.visible, from = {}, to = {
  200. end: shape.end,
  201. start: shape.start,
  202. innerR: shape.innerR,
  203. r: shape.r,
  204. x: shape.x,
  205. y: shape.y
  206. };
  207. if (visible) {
  208. // Animate points in
  209. if (!point.graphic && shapePreviousRoot) {
  210. if (idRoot === point.id) {
  211. from = {
  212. start: radians.start,
  213. end: radians.end
  214. };
  215. }
  216. else {
  217. from = (shapePreviousRoot.end <= shape.start) ? {
  218. start: radians.end,
  219. end: radians.end
  220. } : {
  221. start: radians.start,
  222. end: radians.start
  223. };
  224. }
  225. // Animate from center and outwards.
  226. from.innerR = from.r = innerR;
  227. }
  228. }
  229. else {
  230. // Animate points out
  231. if (point.graphic) {
  232. if (idPreviousRoot === point.id) {
  233. to = {
  234. innerR: innerR,
  235. r: innerR
  236. };
  237. }
  238. else if (shapeRoot) {
  239. to = (shapeRoot.end <= shapeExisting.start) ?
  240. {
  241. innerR: innerR,
  242. r: innerR,
  243. start: radians.end,
  244. end: radians.end
  245. } : {
  246. innerR: innerR,
  247. r: innerR,
  248. start: radians.start,
  249. end: radians.start
  250. };
  251. }
  252. }
  253. }
  254. return {
  255. from: from,
  256. to: to
  257. };
  258. }
  259. // eslint-disable-next-line require-jsdoc
  260. function getDrillId(point, idRoot, mapIdToNode) {
  261. var drillId, node = point.node, nodeRoot;
  262. if (!node.isLeaf) {
  263. // When it is the root node, the drillId should be set to parent.
  264. if (idRoot === point.id) {
  265. nodeRoot = mapIdToNode[idRoot];
  266. drillId = nodeRoot.parent;
  267. }
  268. else {
  269. drillId = point.id;
  270. }
  271. }
  272. return drillId;
  273. }
  274. // eslint-disable-next-line require-jsdoc
  275. function cbSetTreeValuesBefore(node, options) {
  276. var mapIdToNode = options.mapIdToNode, nodeParent = mapIdToNode[node.parent], series = options.series, chart = series.chart, points = series.points, point = points[node.i], colors = (series.options.colors || chart && chart.options.colors), colorInfo = getColor(node, {
  277. colors: colors,
  278. colorIndex: series.colorIndex,
  279. index: options.index,
  280. mapOptionsToLevel: options.mapOptionsToLevel,
  281. parentColor: nodeParent && nodeParent.color,
  282. parentColorIndex: nodeParent && nodeParent.colorIndex,
  283. series: options.series,
  284. siblings: options.siblings
  285. });
  286. node.color = colorInfo.color;
  287. node.colorIndex = colorInfo.colorIndex;
  288. if (point) {
  289. point.color = node.color;
  290. point.colorIndex = node.colorIndex;
  291. // Set slicing on node, but avoid slicing the top node.
  292. node.sliced = (node.id !== options.idRoot) ? point.sliced : false;
  293. }
  294. return node;
  295. }
  296. /* *
  297. *
  298. * Class
  299. *
  300. * */
  301. var SunburstSeries = /** @class */ (function (_super) {
  302. __extends(SunburstSeries, _super);
  303. function SunburstSeries() {
  304. /* *
  305. *
  306. * Static Properties
  307. *
  308. * */
  309. var _this = _super !== null && _super.apply(this, arguments) || this;
  310. /* *
  311. *
  312. * Properties
  313. *
  314. * */
  315. _this.center = void 0;
  316. _this.data = void 0;
  317. _this.mapOptionsToLevel = void 0;
  318. _this.nodeMap = void 0;
  319. _this.options = void 0;
  320. _this.points = void 0;
  321. _this.shapeRoot = void 0;
  322. _this.startAndEndRadians = void 0;
  323. _this.tree = void 0;
  324. return _this;
  325. /* eslint-enable valid-jsdoc */
  326. }
  327. /* *
  328. *
  329. * Functions
  330. *
  331. * */
  332. /* eslint-disable valid-jsdoc */
  333. SunburstSeries.prototype.alignDataLabel = function (_point, _dataLabel, labelOptions) {
  334. if (labelOptions.textPath && labelOptions.textPath.enabled) {
  335. return;
  336. }
  337. return _super.prototype.alignDataLabel.apply(this, arguments);
  338. };
  339. /**
  340. * Animate the slices in. Similar to the animation of polar charts.
  341. * @private
  342. */
  343. SunburstSeries.prototype.animate = function (init) {
  344. var chart = this.chart, center = [
  345. chart.plotWidth / 2,
  346. chart.plotHeight / 2
  347. ], plotLeft = chart.plotLeft, plotTop = chart.plotTop, attribs, group = this.group;
  348. // Initialize the animation
  349. if (init) {
  350. // Scale down the group and place it in the center
  351. attribs = {
  352. translateX: center[0] + plotLeft,
  353. translateY: center[1] + plotTop,
  354. scaleX: 0.001,
  355. scaleY: 0.001,
  356. rotation: 10,
  357. opacity: 0.01
  358. };
  359. group.attr(attribs);
  360. // Run the animation
  361. }
  362. else {
  363. attribs = {
  364. translateX: plotLeft,
  365. translateY: plotTop,
  366. scaleX: 1,
  367. scaleY: 1,
  368. rotation: 0,
  369. opacity: 1
  370. };
  371. group.animate(attribs, this.options.animation);
  372. }
  373. };
  374. SunburstSeries.prototype.drawPoints = function () {
  375. var series = this, mapOptionsToLevel = series.mapOptionsToLevel, shapeRoot = series.shapeRoot, group = series.group, hasRendered = series.hasRendered, idRoot = series.rootNode, idPreviousRoot = series.idPreviousRoot, nodeMap = series.nodeMap, nodePreviousRoot = nodeMap[idPreviousRoot], shapePreviousRoot = nodePreviousRoot && nodePreviousRoot.shapeArgs, points = series.points, radians = series.startAndEndRadians, chart = series.chart, optionsChart = chart && chart.options && chart.options.chart || {}, animation = (isBoolean(optionsChart.animation) ?
  376. optionsChart.animation :
  377. true), positions = series.center, center = {
  378. x: positions[0],
  379. y: positions[1]
  380. }, innerR = positions[3] / 2, renderer = series.chart.renderer, animateLabels, animateLabelsCalled = false, addedHack = false, hackDataLabelAnimation = !!(animation &&
  381. hasRendered &&
  382. idRoot !== idPreviousRoot &&
  383. series.dataLabelsGroup);
  384. if (hackDataLabelAnimation) {
  385. series.dataLabelsGroup.attr({ opacity: 0 });
  386. animateLabels = function () {
  387. var s = series;
  388. animateLabelsCalled = true;
  389. if (s.dataLabelsGroup) {
  390. s.dataLabelsGroup.animate({
  391. opacity: 1,
  392. visibility: 'visible'
  393. });
  394. }
  395. };
  396. }
  397. points.forEach(function (point) {
  398. var node = point.node, level = mapOptionsToLevel[node.level], shapeExisting = point.shapeExisting || {}, shape = node.shapeArgs || {}, animationInfo, onComplete, visible = !!(node.visible && node.shapeArgs);
  399. if (hasRendered && animation) {
  400. animationInfo = getAnimation(shape, {
  401. center: center,
  402. point: point,
  403. radians: radians,
  404. innerR: innerR,
  405. idRoot: idRoot,
  406. idPreviousRoot: idPreviousRoot,
  407. shapeExisting: shapeExisting,
  408. shapeRoot: shapeRoot,
  409. shapePreviousRoot: shapePreviousRoot,
  410. visible: visible
  411. });
  412. }
  413. else {
  414. // When animation is disabled, attr is called from animation.
  415. animationInfo = {
  416. to: shape,
  417. from: {}
  418. };
  419. }
  420. extend(point, {
  421. shapeExisting: shape,
  422. tooltipPos: [shape.plotX, shape.plotY],
  423. drillId: getDrillId(point, idRoot, nodeMap),
  424. name: '' + (point.name || point.id || point.index),
  425. plotX: shape.plotX,
  426. plotY: shape.plotY,
  427. value: node.val,
  428. isNull: !visible // used for dataLabels & point.draw
  429. });
  430. point.dlOptions = getDlOptions({
  431. point: point,
  432. level: level,
  433. optionsPoint: point.options,
  434. shapeArgs: shape
  435. });
  436. if (!addedHack && visible) {
  437. addedHack = true;
  438. onComplete = animateLabels;
  439. }
  440. point.draw({
  441. animatableAttribs: animationInfo.to,
  442. attribs: extend(animationInfo.from, (!chart.styledMode && series.pointAttribs(point, (point.selected && 'select')))),
  443. onComplete: onComplete,
  444. group: group,
  445. renderer: renderer,
  446. shapeType: 'arc',
  447. shapeArgs: shape
  448. });
  449. });
  450. // Draw data labels after points
  451. // TODO draw labels one by one to avoid addtional looping
  452. if (hackDataLabelAnimation && addedHack) {
  453. series.hasRendered = false;
  454. series.options.dataLabels.defer = true;
  455. Series.prototype.drawDataLabels.call(series);
  456. series.hasRendered = true;
  457. // If animateLabels is called before labels were hidden, then call
  458. // it again.
  459. if (animateLabelsCalled) {
  460. animateLabels();
  461. }
  462. }
  463. else {
  464. Series.prototype.drawDataLabels.call(series);
  465. }
  466. };
  467. /**
  468. * The layout algorithm for the levels.
  469. * @private
  470. */
  471. SunburstSeries.prototype.layoutAlgorithm = function (parent, children, options) {
  472. var startAngle = parent.start, range = parent.end - startAngle, total = parent.val, x = parent.x, y = parent.y, radius = ((options &&
  473. isObject(options.levelSize) &&
  474. isNumber(options.levelSize.value)) ?
  475. options.levelSize.value :
  476. 0), innerRadius = parent.r, outerRadius = innerRadius + radius, slicedOffset = options && isNumber(options.slicedOffset) ?
  477. options.slicedOffset :
  478. 0;
  479. return (children || []).reduce(function (arr, child) {
  480. var percentage = (1 / total) * child.val, radians = percentage * range, radiansCenter = startAngle + (radians / 2), offsetPosition = getEndPoint(x, y, radiansCenter, slicedOffset), values = {
  481. x: child.sliced ? offsetPosition.x : x,
  482. y: child.sliced ? offsetPosition.y : y,
  483. innerR: innerRadius,
  484. r: outerRadius,
  485. radius: radius,
  486. start: startAngle,
  487. end: startAngle + radians
  488. };
  489. arr.push(values);
  490. startAngle = values.end;
  491. return arr;
  492. }, []);
  493. };
  494. /**
  495. * Set the shape arguments on the nodes. Recursive from root down.
  496. * @private
  497. */
  498. SunburstSeries.prototype.setShapeArgs = function (parent, parentValues, mapOptionsToLevel) {
  499. var childrenValues = [], level = parent.level + 1, options = mapOptionsToLevel[level],
  500. // Collect all children which should be included
  501. children = parent.children.filter(function (n) {
  502. return n.visible;
  503. }), twoPi = 6.28; // Two times Pi.
  504. childrenValues = this.layoutAlgorithm(parentValues, children, options);
  505. children.forEach(function (child, index) {
  506. var values = childrenValues[index], angle = values.start + ((values.end - values.start) / 2), radius = values.innerR + ((values.r - values.innerR) / 2), radians = (values.end - values.start), isCircle = (values.innerR === 0 && radians > twoPi), center = (isCircle ?
  507. { x: values.x, y: values.y } :
  508. getEndPoint(values.x, values.y, angle, radius)), val = (child.val ?
  509. (child.childrenTotal > child.val ?
  510. child.childrenTotal :
  511. child.val) :
  512. child.childrenTotal);
  513. // The inner arc length is a convenience for data label filters.
  514. if (this.points[child.i]) {
  515. this.points[child.i].innerArcLength = radians * values.innerR;
  516. this.points[child.i].outerArcLength = radians * values.r;
  517. }
  518. child.shapeArgs = merge(values, {
  519. plotX: center.x,
  520. plotY: center.y + 4 * Math.abs(Math.cos(angle))
  521. });
  522. child.values = merge(values, {
  523. val: val
  524. });
  525. // If node has children, then call method recursively
  526. if (child.children.length) {
  527. this.setShapeArgs(child, child.values, mapOptionsToLevel);
  528. }
  529. }, this);
  530. };
  531. SunburstSeries.prototype.translate = function () {
  532. var series = this, options = series.options, positions = series.center = getCenter.call(series), radians = series.startAndEndRadians = getStartAndEndRadians(options.startAngle, options.endAngle), innerRadius = positions[3] / 2, outerRadius = positions[2] / 2, diffRadius = outerRadius - innerRadius,
  533. // NOTE: updateRootId modifies series.
  534. rootId = updateRootId(series), mapIdToNode = series.nodeMap, mapOptionsToLevel, idTop, nodeRoot = mapIdToNode && mapIdToNode[rootId], nodeTop, tree, values, nodeIds = {};
  535. series.shapeRoot = nodeRoot && nodeRoot.shapeArgs;
  536. // Call prototype function
  537. Series.prototype.translate.call(series);
  538. // @todo Only if series.isDirtyData is true
  539. tree = series.tree = series.getTree();
  540. // Render traverseUpButton, after series.nodeMap i calculated.
  541. series.renderTraverseUpButton(rootId);
  542. mapIdToNode = series.nodeMap;
  543. nodeRoot = mapIdToNode[rootId];
  544. idTop = isString(nodeRoot.parent) ? nodeRoot.parent : '';
  545. nodeTop = mapIdToNode[idTop];
  546. var _a = SunburstUtilities.getLevelFromAndTo(nodeRoot), from = _a.from, to = _a.to;
  547. mapOptionsToLevel = getLevelOptions({
  548. from: from,
  549. levels: series.options.levels,
  550. to: to,
  551. defaults: {
  552. colorByPoint: options.colorByPoint,
  553. dataLabels: options.dataLabels,
  554. levelIsConstant: options.levelIsConstant,
  555. levelSize: options.levelSize,
  556. slicedOffset: options.slicedOffset
  557. }
  558. });
  559. // NOTE consider doing calculateLevelSizes in a callback to
  560. // getLevelOptions
  561. mapOptionsToLevel = SunburstUtilities.calculateLevelSizes(mapOptionsToLevel, {
  562. diffRadius: diffRadius,
  563. from: from,
  564. to: to
  565. });
  566. // TODO Try to combine setTreeValues & setColorRecursive to avoid
  567. // unnecessary looping.
  568. setTreeValues(tree, {
  569. before: cbSetTreeValuesBefore,
  570. idRoot: rootId,
  571. levelIsConstant: options.levelIsConstant,
  572. mapOptionsToLevel: mapOptionsToLevel,
  573. mapIdToNode: mapIdToNode,
  574. points: series.points,
  575. series: series
  576. });
  577. values = mapIdToNode[''].shapeArgs = {
  578. end: radians.end,
  579. r: innerRadius,
  580. start: radians.start,
  581. val: nodeRoot.val,
  582. x: positions[0],
  583. y: positions[1]
  584. };
  585. this.setShapeArgs(nodeTop, values, mapOptionsToLevel);
  586. // Set mapOptionsToLevel on series for use in drawPoints.
  587. series.mapOptionsToLevel = mapOptionsToLevel;
  588. // #10669 - verify if all nodes have unique ids
  589. series.data.forEach(function (child) {
  590. if (nodeIds[child.id]) {
  591. error(31, false, series.chart);
  592. }
  593. // map
  594. nodeIds[child.id] = true;
  595. });
  596. // reset object
  597. nodeIds = {};
  598. };
  599. /**
  600. * A Sunburst displays hierarchical data, where a level in the hierarchy is
  601. * represented by a circle. The center represents the root node of the tree.
  602. * The visualization bears a resemblance to both treemap and pie charts.
  603. *
  604. * @sample highcharts/demo/sunburst
  605. * Sunburst chart
  606. *
  607. * @extends plotOptions.pie
  608. * @excluding allAreas, clip, colorAxis, colorKey, compare, compareBase,
  609. * dataGrouping, depth, dragDrop, endAngle, gapSize, gapUnit,
  610. * ignoreHiddenPoint, innerSize, joinBy, legendType, linecap,
  611. * minSize, navigatorOptions, pointRange
  612. * @product highcharts
  613. * @requires modules/sunburst.js
  614. * @optionparent plotOptions.sunburst
  615. * @private
  616. */
  617. SunburstSeries.defaultOptions = merge(TreemapSeries.defaultOptions, {
  618. /**
  619. * Set options on specific levels. Takes precedence over series options,
  620. * but not point options.
  621. *
  622. * @sample highcharts/demo/sunburst
  623. * Sunburst chart
  624. *
  625. * @type {Array<*>}
  626. * @apioption plotOptions.sunburst.levels
  627. */
  628. /**
  629. * Can set a `borderColor` on all points which lies on the same level.
  630. *
  631. * @type {Highcharts.ColorString}
  632. * @apioption plotOptions.sunburst.levels.borderColor
  633. */
  634. /**
  635. * Can set a `borderWidth` on all points which lies on the same level.
  636. *
  637. * @type {number}
  638. * @apioption plotOptions.sunburst.levels.borderWidth
  639. */
  640. /**
  641. * Can set a `borderDashStyle` on all points which lies on the same
  642. * level.
  643. *
  644. * @type {Highcharts.DashStyleValue}
  645. * @apioption plotOptions.sunburst.levels.borderDashStyle
  646. */
  647. /**
  648. * Can set a `color` on all points which lies on the same level.
  649. *
  650. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  651. * @apioption plotOptions.sunburst.levels.color
  652. */
  653. /**
  654. * Can set a `colorVariation` on all points which lies on the same
  655. * level.
  656. *
  657. * @apioption plotOptions.sunburst.levels.colorVariation
  658. */
  659. /**
  660. * The key of a color variation. Currently supports `brightness` only.
  661. *
  662. * @type {string}
  663. * @apioption plotOptions.sunburst.levels.colorVariation.key
  664. */
  665. /**
  666. * The ending value of a color variation. The last sibling will receive
  667. * this value.
  668. *
  669. * @type {number}
  670. * @apioption plotOptions.sunburst.levels.colorVariation.to
  671. */
  672. /**
  673. * Can set `dataLabels` on all points which lies on the same level.
  674. *
  675. * @extends plotOptions.sunburst.dataLabels
  676. * @apioption plotOptions.sunburst.levels.dataLabels
  677. */
  678. /**
  679. * Decides which level takes effect from the options set in the levels
  680. * object.
  681. *
  682. * @sample highcharts/demo/sunburst
  683. * Sunburst chart
  684. *
  685. * @type {number}
  686. * @apioption plotOptions.sunburst.levels.level
  687. */
  688. /**
  689. * Can set a `levelSize` on all points which lies on the same level.
  690. *
  691. * @type {object}
  692. * @apioption plotOptions.sunburst.levels.levelSize
  693. */
  694. /**
  695. * Can set a `rotation` on all points which lies on the same level.
  696. *
  697. * @type {number}
  698. * @apioption plotOptions.sunburst.levels.rotation
  699. */
  700. /**
  701. * Can set a `rotationMode` on all points which lies on the same level.
  702. *
  703. * @type {string}
  704. * @apioption plotOptions.sunburst.levels.rotationMode
  705. */
  706. /**
  707. * When enabled the user can click on a point which is a parent and
  708. * zoom in on its children. Deprecated and replaced by
  709. * [allowTraversingTree](#plotOptions.sunburst.allowTraversingTree).
  710. *
  711. * @deprecated
  712. * @type {boolean}
  713. * @default false
  714. * @since 6.0.0
  715. * @product highcharts
  716. * @apioption plotOptions.sunburst.allowDrillToNode
  717. */
  718. /**
  719. * When enabled the user can click on a point which is a parent and
  720. * zoom in on its children.
  721. *
  722. * @type {boolean}
  723. * @default false
  724. * @since 7.0.3
  725. * @product highcharts
  726. * @apioption plotOptions.sunburst.allowTraversingTree
  727. */
  728. /**
  729. * The center of the sunburst chart relative to the plot area. Can be
  730. * percentages or pixel values.
  731. *
  732. * @sample {highcharts} highcharts/plotoptions/pie-center/
  733. * Centered at 100, 100
  734. *
  735. * @type {Array<number|string>}
  736. * @default ["50%", "50%"]
  737. * @product highcharts
  738. */
  739. center: ['50%', '50%'],
  740. colorByPoint: false,
  741. /**
  742. * Disable inherited opacity from Treemap series.
  743. *
  744. * @ignore-option
  745. */
  746. opacity: 1,
  747. /**
  748. * @declare Highcharts.SeriesSunburstDataLabelsOptionsObject
  749. */
  750. dataLabels: {
  751. allowOverlap: true,
  752. defer: true,
  753. /**
  754. * Decides how the data label will be rotated relative to the
  755. * perimeter of the sunburst. Valid values are `auto`, `circular`,
  756. * `parallel` and `perpendicular`. When `auto`, the best fit will be
  757. * computed for the point. The `circular` option works similiar
  758. * to `auto`, but uses the `textPath` feature - labels are curved,
  759. * resulting in a better layout, however multiple lines and
  760. * `textOutline` are not supported.
  761. *
  762. * The `series.rotation` option takes precedence over
  763. * `rotationMode`.
  764. *
  765. * @type {string}
  766. * @sample {highcharts} highcharts/plotoptions/sunburst-datalabels-rotationmode-circular/
  767. * Circular rotation mode
  768. * @validvalue ["auto", "perpendicular", "parallel", "circular"]
  769. * @since 6.0.0
  770. */
  771. rotationMode: 'auto',
  772. style: {
  773. /** @internal */
  774. textOverflow: 'ellipsis'
  775. }
  776. },
  777. /**
  778. * Which point to use as a root in the visualization.
  779. *
  780. * @type {string}
  781. */
  782. rootId: void 0,
  783. /**
  784. * Used together with the levels and `allowDrillToNode` options. When
  785. * set to false the first level visible when drilling is considered
  786. * to be level one. Otherwise the level will be the same as the tree
  787. * structure.
  788. */
  789. levelIsConstant: true,
  790. /**
  791. * Determines the width of the ring per level.
  792. *
  793. * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/
  794. * Sunburst with various sizes per level
  795. *
  796. * @since 6.0.5
  797. */
  798. levelSize: {
  799. /**
  800. * The value used for calculating the width of the ring. Its' affect
  801. * is determined by `levelSize.unit`.
  802. *
  803. * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/
  804. * Sunburst with various sizes per level
  805. */
  806. value: 1,
  807. /**
  808. * How to interpret `levelSize.value`.
  809. *
  810. * - `percentage` gives a width relative to result of outer radius
  811. * minus inner radius.
  812. *
  813. * - `pixels` gives the ring a fixed width in pixels.
  814. *
  815. * - `weight` takes the remaining width after percentage and pixels,
  816. * and distributes it accross all "weighted" levels. The value
  817. * relative to the sum of all weights determines the width.
  818. *
  819. * @sample {highcharts} highcharts/plotoptions/sunburst-levelsize/
  820. * Sunburst with various sizes per level
  821. *
  822. * @validvalue ["percentage", "pixels", "weight"]
  823. */
  824. unit: 'weight'
  825. },
  826. /**
  827. * Options for the button appearing when traversing down in a treemap.
  828. *
  829. * @extends plotOptions.treemap.traverseUpButton
  830. * @since 6.0.0
  831. * @apioption plotOptions.sunburst.traverseUpButton
  832. */
  833. /**
  834. * If a point is sliced, moved out from the center, how many pixels
  835. * should it be moved?.
  836. *
  837. * @sample highcharts/plotoptions/sunburst-sliced
  838. * Sliced sunburst
  839. *
  840. * @since 6.0.4
  841. */
  842. slicedOffset: 10
  843. });
  844. return SunburstSeries;
  845. }(TreemapSeries));
  846. extend(SunburstSeries.prototype, {
  847. drawDataLabels: noop,
  848. pointAttribs: ColumnSeries.prototype.pointAttribs,
  849. pointClass: SunburstPoint,
  850. utils: SunburstUtilities
  851. });
  852. SeriesRegistry.registerSeriesType('sunburst', SunburstSeries);
  853. /* *
  854. *
  855. * Default Export
  856. *
  857. * */
  858. export default SunburstSeries;
  859. /* *
  860. *
  861. * API Options
  862. *
  863. * */
  864. /**
  865. * A `sunburst` series. If the [type](#series.sunburst.type) option is
  866. * not specified, it is inherited from [chart.type](#chart.type).
  867. *
  868. * @extends series,plotOptions.sunburst
  869. * @excluding dataParser, dataURL, stack, dataSorting, boostThreshold,
  870. * boostBlending
  871. * @product highcharts
  872. * @requires modules/sunburst.js
  873. * @apioption series.sunburst
  874. */
  875. /**
  876. * @type {Array<number|null|*>}
  877. * @extends series.treemap.data
  878. * @excluding x, y
  879. * @product highcharts
  880. * @apioption series.sunburst.data
  881. */
  882. /**
  883. * @type {Highcharts.SeriesSunburstDataLabelsOptionsObject|Array<Highcharts.SeriesSunburstDataLabelsOptionsObject>}
  884. * @product highcharts
  885. * @apioption series.sunburst.data.dataLabels
  886. */
  887. /**
  888. * The value of the point, resulting in a relative area of the point
  889. * in the sunburst.
  890. *
  891. * @type {number|null}
  892. * @since 6.0.0
  893. * @product highcharts
  894. * @apioption series.sunburst.data.value
  895. */
  896. /**
  897. * Use this option to build a tree structure. The value should be the id of the
  898. * point which is the parent. If no points has a matching id, or this option is
  899. * undefined, then the parent will be set to the root.
  900. *
  901. * @type {string}
  902. * @since 6.0.0
  903. * @product highcharts
  904. * @apioption series.sunburst.data.parent
  905. */
  906. /**
  907. * Whether to display a slice offset from the center. When a sunburst point is
  908. * sliced, its children are also offset.
  909. *
  910. * @sample highcharts/plotoptions/sunburst-sliced
  911. * Sliced sunburst
  912. *
  913. * @type {boolean}
  914. * @default false
  915. * @since 6.0.4
  916. * @product highcharts
  917. * @apioption series.sunburst.data.sliced
  918. */
  919. ''; // detach doclets above