SankeySeries.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065
  1. /* *
  2. *
  3. * Sankey diagram module
  4. *
  5. * (c) 2010-2020 Torstein Honsi
  6. *
  7. * License: www.highcharts.com/license
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import H from '../Core/Globals.js';
  14. import NodesMixin from '../Mixins/Nodes.js';
  15. /**
  16. * A node in a sankey diagram.
  17. *
  18. * @interface Highcharts.SankeyNodeObject
  19. * @extends Highcharts.Point
  20. * @product highcharts
  21. */ /**
  22. * The color of the auto generated node.
  23. *
  24. * @name Highcharts.SankeyNodeObject#color
  25. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  26. */ /**
  27. * The color index of the auto generated node, especially for use in styled
  28. * mode.
  29. *
  30. * @name Highcharts.SankeyNodeObject#colorIndex
  31. * @type {number}
  32. */ /**
  33. * An optional column index of where to place the node. The default behaviour is
  34. * to place it next to the preceding node.
  35. *
  36. * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/sankey-node-column/|Highcharts-Demo:}
  37. * Specified node column
  38. *
  39. * @name Highcharts.SankeyNodeObject#column
  40. * @type {number}
  41. * @since 6.0.5
  42. */ /**
  43. * The id of the auto-generated node, refering to the `from` or `to` setting of
  44. * the link.
  45. *
  46. * @name Highcharts.SankeyNodeObject#id
  47. * @type {string}
  48. */ /**
  49. * The name to display for the node in data labels and tooltips. Use this when
  50. * the name is different from the `id`. Where the id must be unique for each
  51. * node, this is not necessary for the name.
  52. *
  53. * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/sankey/|Highcharts-Demo:}
  54. * Sankey diagram with node options
  55. *
  56. * @name Highcharts.SankeyNodeObject#name
  57. * @type {string}
  58. * @product highcharts
  59. */ /**
  60. * The vertical offset of a node in terms of weight. Positive values shift the
  61. * node downwards, negative shift it upwards.
  62. *
  63. * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/sankey-node-column/|Highcharts-Demo:}
  64. * Specified node offset
  65. *
  66. * @name Highcharts.SankeyNodeObject#offset
  67. * @type {number}
  68. * @default 0
  69. * @since 6.0.5
  70. */
  71. /**
  72. * Formatter callback function.
  73. *
  74. * @callback Highcharts.SeriesSankeyDataLabelsFormatterCallbackFunction
  75. *
  76. * @param {Highcharts.SeriesSankeyDataLabelsFormatterContextObject|Highcharts.PointLabelObject} this
  77. * Data label context to format
  78. *
  79. * @return {string|undefined}
  80. * Formatted data label text
  81. */
  82. /**
  83. * Context for the node formatter function.
  84. *
  85. * @interface Highcharts.SeriesSankeyDataLabelsFormatterContextObject
  86. * @extends Highcharts.PointLabelObject
  87. */ /**
  88. * The node object. The node name, if defined, is available through
  89. * `this.point.name`.
  90. * @name Highcharts.SeriesSankeyDataLabelsFormatterContextObject#point
  91. * @type {Highcharts.SankeyNodeObject}
  92. */
  93. import Color from '../Core/Color.js';
  94. import Point from '../Core/Series/Point.js';
  95. import U from '../Core/Utilities.js';
  96. var defined = U.defined, find = U.find, isObject = U.isObject, merge = U.merge, pick = U.pick, relativeLength = U.relativeLength, seriesType = U.seriesType, stableSort = U.stableSort;
  97. import TreeSeriesMixin from '../Mixins/TreeSeries.js';
  98. var getLevelOptions = TreeSeriesMixin.getLevelOptions;
  99. import '../Core/Options.js';
  100. import './ColumnSeries.js';
  101. // eslint-disable-next-line valid-jsdoc
  102. /**
  103. * @private
  104. */
  105. var getDLOptions = function getDLOptions(params) {
  106. var optionsPoint = (isObject(params.optionsPoint) ?
  107. params.optionsPoint.dataLabels :
  108. {}), optionsLevel = (isObject(params.level) ?
  109. params.level.dataLabels :
  110. {}), options = merge({
  111. style: {}
  112. }, optionsLevel, optionsPoint);
  113. return options;
  114. };
  115. /**
  116. * @private
  117. * @class
  118. * @name Highcharts.seriesTypes.sankey
  119. *
  120. * @augments Highcharts.Series
  121. */
  122. seriesType('sankey', 'column',
  123. /**
  124. * A sankey diagram is a type of flow diagram, in which the width of the
  125. * link between two nodes is shown proportionally to the flow quantity.
  126. *
  127. * @sample highcharts/demo/sankey-diagram/
  128. * Sankey diagram
  129. * @sample highcharts/plotoptions/sankey-inverted/
  130. * Inverted sankey diagram
  131. * @sample highcharts/plotoptions/sankey-outgoing
  132. * Sankey diagram with outgoing links
  133. *
  134. * @extends plotOptions.column
  135. * @since 6.0.0
  136. * @product highcharts
  137. * @excluding animationLimit, boostThreshold, borderRadius,
  138. * crisp, cropThreshold, colorAxis, colorKey, depth, dragDrop,
  139. * edgeColor, edgeWidth, findNearestPointBy, grouping,
  140. * groupPadding, groupZPadding, maxPointWidth, negativeColor,
  141. * pointInterval, pointIntervalUnit, pointPadding,
  142. * pointPlacement, pointRange, pointStart, pointWidth,
  143. * shadow, softThreshold, stacking, threshold, zoneAxis,
  144. * zones, minPointLength, dataSorting, boostBlending
  145. * @requires modules/sankey
  146. * @optionparent plotOptions.sankey
  147. */
  148. {
  149. borderWidth: 0,
  150. colorByPoint: true,
  151. /**
  152. * Higher numbers makes the links in a sankey diagram or dependency
  153. * wheelrender more curved. A `curveFactor` of 0 makes the lines
  154. * straight.
  155. *
  156. * @private
  157. */
  158. curveFactor: 0.33,
  159. /**
  160. * Options for the data labels appearing on top of the nodes and links.
  161. * For sankey charts, data labels are visible for the nodes by default,
  162. * but hidden for links. This is controlled by modifying the
  163. * `nodeFormat`, and the `format` that applies to links and is an empty
  164. * string by default.
  165. *
  166. * @declare Highcharts.SeriesSankeyDataLabelsOptionsObject
  167. *
  168. * @private
  169. */
  170. dataLabels: {
  171. enabled: true,
  172. backgroundColor: 'none',
  173. crop: false,
  174. /**
  175. * The
  176. * [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
  177. * specifying what to show for _nodes_ in the sankey diagram. By
  178. * default the `nodeFormatter` returns `{point.name}`.
  179. *
  180. * @sample highcharts/plotoptions/sankey-link-datalabels/
  181. * Node and link data labels
  182. *
  183. * @type {string}
  184. */
  185. nodeFormat: void 0,
  186. // eslint-disable-next-line valid-jsdoc
  187. /**
  188. * Callback to format data labels for _nodes_ in the sankey diagram.
  189. * The `nodeFormat` option takes precedence over the
  190. * `nodeFormatter`.
  191. *
  192. * @type {Highcharts.SeriesSankeyDataLabelsFormatterCallbackFunction}
  193. * @since 6.0.2
  194. */
  195. nodeFormatter: function () {
  196. return this.point.name;
  197. },
  198. format: void 0,
  199. // eslint-disable-next-line valid-jsdoc
  200. /**
  201. * @type {Highcharts.SeriesSankeyDataLabelsFormatterCallbackFunction}
  202. */
  203. formatter: function () {
  204. return;
  205. },
  206. inside: true
  207. },
  208. /**
  209. * @ignore-option
  210. *
  211. * @private
  212. */
  213. inactiveOtherPoints: true,
  214. /**
  215. * Set options on specific levels. Takes precedence over series options,
  216. * but not node and link options.
  217. *
  218. * @sample highcharts/demo/sunburst
  219. * Sunburst chart
  220. *
  221. * @type {Array<*>}
  222. * @since 7.1.0
  223. * @apioption plotOptions.sankey.levels
  224. */
  225. /**
  226. * Can set `borderColor` on all nodes which lay on the same level.
  227. *
  228. * @type {Highcharts.ColorString}
  229. * @apioption plotOptions.sankey.levels.borderColor
  230. */
  231. /**
  232. * Can set `borderWidth` on all nodes which lay on the same level.
  233. *
  234. * @type {number}
  235. * @apioption plotOptions.sankey.levels.borderWidth
  236. */
  237. /**
  238. * Can set `color` on all nodes which lay on the same level.
  239. *
  240. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  241. * @apioption plotOptions.sankey.levels.color
  242. */
  243. /**
  244. * Can set `colorByPoint` on all nodes which lay on the same level.
  245. *
  246. * @type {boolean}
  247. * @default true
  248. * @apioption plotOptions.sankey.levels.colorByPoint
  249. */
  250. /**
  251. * Can set `dataLabels` on all points which lay on the same level.
  252. *
  253. * @extends plotOptions.sankey.dataLabels
  254. * @apioption plotOptions.sankey.levels.dataLabels
  255. */
  256. /**
  257. * Decides which level takes effect from the options set in the levels
  258. * object.
  259. *
  260. * @type {number}
  261. * @apioption plotOptions.sankey.levels.level
  262. */
  263. /**
  264. * Can set `linkOpacity` on all points which lay on the same level.
  265. *
  266. * @type {number}
  267. * @default 0.5
  268. * @apioption plotOptions.sankey.levels.linkOpacity
  269. */
  270. /**
  271. * Can set `states` on all nodes and points which lay on the same level.
  272. *
  273. * @extends plotOptions.sankey.states
  274. * @apioption plotOptions.sankey.levels.states
  275. */
  276. /**
  277. * Opacity for the links between nodes in the sankey diagram.
  278. *
  279. * @private
  280. */
  281. linkOpacity: 0.5,
  282. /**
  283. * The minimal width for a line of a sankey. By default,
  284. * 0 values are not shown.
  285. *
  286. * @sample highcharts/plotoptions/sankey-minlinkwidth
  287. * Sankey diagram with minimal link height
  288. *
  289. * @type {number}
  290. * @since 7.1.3
  291. * @default 0
  292. * @apioption plotOptions.sankey.minLinkWidth
  293. *
  294. * @private
  295. */
  296. minLinkWidth: 0,
  297. /**
  298. * The pixel width of each node in a sankey diagram or dependency wheel,
  299. * or the height in case the chart is inverted.
  300. *
  301. * @private
  302. */
  303. nodeWidth: 20,
  304. /**
  305. * The padding between nodes in a sankey diagram or dependency wheel, in
  306. * pixels.
  307. *
  308. * If the number of nodes is so great that it is possible to lay them
  309. * out within the plot area with the given `nodePadding`, they will be
  310. * rendered with a smaller padding as a strategy to avoid overflow.
  311. *
  312. * @private
  313. */
  314. nodePadding: 10,
  315. showInLegend: false,
  316. states: {
  317. hover: {
  318. /**
  319. * Opacity for the links between nodes in the sankey diagram in
  320. * hover mode.
  321. */
  322. linkOpacity: 1
  323. },
  324. /**
  325. * The opposite state of a hover for a single point node/link.
  326. *
  327. * @declare Highcharts.SeriesStatesInactiveOptionsObject
  328. */
  329. inactive: {
  330. /**
  331. * Opacity for the links between nodes in the sankey diagram in
  332. * inactive mode.
  333. */
  334. linkOpacity: 0.1,
  335. /**
  336. * Opacity of inactive markers.
  337. *
  338. * @type {number}
  339. * @apioption plotOptions.series.states.inactive.opacity
  340. */
  341. opacity: 0.1,
  342. /**
  343. * Animation when not hovering over the marker.
  344. *
  345. * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
  346. * @apioption plotOptions.series.states.inactive.animation
  347. */
  348. animation: {
  349. /** @internal */
  350. duration: 50
  351. }
  352. }
  353. },
  354. tooltip: {
  355. /**
  356. * A callback for defining the format for _nodes_ in the chart's
  357. * tooltip, as opposed to links.
  358. *
  359. * @type {Highcharts.FormatterCallbackFunction<Highcharts.SankeyNodeObject>}
  360. * @since 6.0.2
  361. * @apioption plotOptions.sankey.tooltip.nodeFormatter
  362. */
  363. /**
  364. * Whether the tooltip should follow the pointer or stay fixed on
  365. * the item.
  366. */
  367. followPointer: true,
  368. headerFormat: '<span style="font-size: 10px">{series.name}</span><br/>',
  369. pointFormat: '{point.fromNode.name} \u2192 {point.toNode.name}: <b>{point.weight}</b><br/>',
  370. /**
  371. * The
  372. * [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting)
  373. * specifying what to show for _nodes_ in tooltip of a diagram
  374. * series, as opposed to links.
  375. */
  376. nodeFormat: '{point.name}: <b>{point.sum}</b><br/>'
  377. }
  378. }, {
  379. isCartesian: false,
  380. invertable: true,
  381. forceDL: true,
  382. orderNodes: true,
  383. pointArrayMap: ['from', 'to'],
  384. // Create a single node that holds information on incoming and outgoing
  385. // links.
  386. createNode: NodesMixin.createNode,
  387. searchPoint: H.noop,
  388. setData: NodesMixin.setData,
  389. destroy: NodesMixin.destroy,
  390. /* eslint-disable valid-jsdoc */
  391. /**
  392. * Overridable function to get node padding, overridden in dependency
  393. * wheel series type.
  394. * @private
  395. */
  396. getNodePadding: function () {
  397. var nodePadding = this.options.nodePadding || 0;
  398. // If the number of columns is so great that they will overflow with
  399. // the given nodePadding, we sacrifice the padding in order to
  400. // render all nodes within the plot area (#11917).
  401. if (this.nodeColumns) {
  402. var maxLength = this.nodeColumns.reduce(function (acc, col) { return Math.max(acc, col.length); }, 0);
  403. if (maxLength * nodePadding > this.chart.plotSizeY) {
  404. nodePadding = this.chart.plotSizeY / maxLength;
  405. }
  406. }
  407. return nodePadding;
  408. },
  409. /**
  410. * Create a node column.
  411. * @private
  412. */
  413. createNodeColumn: function () {
  414. var series = this, chart = this.chart, column = [];
  415. column.sum = function () {
  416. return this.reduce(function (sum, node) {
  417. return sum + node.getSum();
  418. }, 0);
  419. };
  420. // Get the offset in pixels of a node inside the column.
  421. column.offset = function (node, factor) {
  422. var offset = 0, totalNodeOffset, nodePadding = series.nodePadding;
  423. for (var i = 0; i < column.length; i++) {
  424. var sum = column[i].getSum();
  425. var height = Math.max(sum * factor, series.options.minLinkWidth);
  426. if (sum) {
  427. totalNodeOffset = height + nodePadding;
  428. }
  429. else {
  430. // If node sum equals 0 nodePadding is missed #12453
  431. totalNodeOffset = 0;
  432. }
  433. if (column[i] === node) {
  434. return {
  435. relativeTop: offset + relativeLength(node.options.offset || 0, totalNodeOffset)
  436. };
  437. }
  438. offset += totalNodeOffset;
  439. }
  440. };
  441. // Get the top position of the column in pixels.
  442. column.top = function (factor) {
  443. var nodePadding = series.nodePadding;
  444. var height = this.reduce(function (height, node) {
  445. if (height > 0) {
  446. height += nodePadding;
  447. }
  448. var nodeHeight = Math.max(node.getSum() * factor, series.options.minLinkWidth);
  449. height += nodeHeight;
  450. return height;
  451. }, 0);
  452. return (chart.plotSizeY - height) / 2;
  453. };
  454. return column;
  455. },
  456. /**
  457. * Create node columns by analyzing the nodes and the relations between
  458. * incoming and outgoing links.
  459. * @private
  460. */
  461. createNodeColumns: function () {
  462. var columns = [];
  463. this.nodes.forEach(function (node) {
  464. var fromColumn = -1, fromNode, i, point;
  465. if (!defined(node.options.column)) {
  466. // No links to this node, place it left
  467. if (node.linksTo.length === 0) {
  468. node.column = 0;
  469. // There are incoming links, place it to the right of the
  470. // highest order column that links to this one.
  471. }
  472. else {
  473. for (i = 0; i < node.linksTo.length; i++) {
  474. point = node.linksTo[0];
  475. if (point.fromNode.column > fromColumn) {
  476. fromNode = point.fromNode;
  477. fromColumn = fromNode.column;
  478. }
  479. }
  480. node.column = fromColumn + 1;
  481. // Hanging layout for organization chart
  482. if (fromNode &&
  483. fromNode.options.layout === 'hanging') {
  484. node.hangsFrom = fromNode;
  485. i = -1; // Reuse existing variable i
  486. find(fromNode.linksFrom, function (link, index) {
  487. var found = link.toNode === node;
  488. if (found) {
  489. i = index;
  490. }
  491. return found;
  492. });
  493. node.column += i;
  494. }
  495. }
  496. }
  497. if (!columns[node.column]) {
  498. columns[node.column] = this.createNodeColumn();
  499. }
  500. columns[node.column].push(node);
  501. }, this);
  502. // Fill in empty columns (#8865)
  503. for (var i = 0; i < columns.length; i++) {
  504. if (typeof columns[i] === 'undefined') {
  505. columns[i] = this.createNodeColumn();
  506. }
  507. }
  508. return columns;
  509. },
  510. /**
  511. * Define hasData function for non-cartesian series.
  512. * @private
  513. * @return {boolean}
  514. * Returns true if the series has points at all.
  515. */
  516. hasData: function () {
  517. return !!this.processedXData.length; // != 0
  518. },
  519. /**
  520. * Return the presentational attributes.
  521. * @private
  522. */
  523. pointAttribs: function (point, state) {
  524. var series = this, level = point.isNode ? point.level : point.fromNode.level, levelOptions = series.mapOptionsToLevel[level || 0] || {}, options = point.options, stateOptions = (levelOptions.states && levelOptions.states[state]) || {}, values = [
  525. 'colorByPoint', 'borderColor', 'borderWidth', 'linkOpacity'
  526. ].reduce(function (obj, key) {
  527. obj[key] = pick(stateOptions[key], options[key], levelOptions[key], series.options[key]);
  528. return obj;
  529. }, {}), color = pick(stateOptions.color, options.color, values.colorByPoint ? point.color : levelOptions.color);
  530. // Node attributes
  531. if (point.isNode) {
  532. return {
  533. fill: color,
  534. stroke: values.borderColor,
  535. 'stroke-width': values.borderWidth
  536. };
  537. }
  538. // Link attributes
  539. return {
  540. fill: Color.parse(color).setOpacity(values.linkOpacity).get()
  541. };
  542. },
  543. /**
  544. * Extend generatePoints by adding the nodes, which are Point objects
  545. * but pushed to the this.nodes array.
  546. * @private
  547. */
  548. generatePoints: function () {
  549. NodesMixin.generatePoints.apply(this, arguments);
  550. /**
  551. * Order the nodes, starting with the root node(s). (#9818)
  552. * @private
  553. */
  554. function order(node, level) {
  555. // Prevents circular recursion:
  556. if (typeof node.level === 'undefined') {
  557. node.level = level;
  558. node.linksFrom.forEach(function (link) {
  559. if (link.toNode) {
  560. order(link.toNode, level + 1);
  561. }
  562. });
  563. }
  564. }
  565. if (this.orderNodes) {
  566. this.nodes
  567. // Identify the root node(s)
  568. .filter(function (node) {
  569. return node.linksTo.length === 0;
  570. })
  571. // Start by the root node(s) and recursively set the level
  572. // on all following nodes.
  573. .forEach(function (node) {
  574. order(node, 0);
  575. });
  576. stableSort(this.nodes, function (a, b) {
  577. return a.level - b.level;
  578. });
  579. }
  580. },
  581. /**
  582. * Run translation operations for one node.
  583. * @private
  584. */
  585. translateNode: function (node, column) {
  586. var translationFactor = this.translationFactor, chart = this.chart, options = this.options, sum = node.getSum(), height = Math.max(Math.round(sum * translationFactor), this.options.minLinkWidth), crisp = Math.round(options.borderWidth) % 2 / 2, nodeOffset = column.offset(node, translationFactor), fromNodeTop = Math.floor(pick(nodeOffset.absoluteTop, (column.top(translationFactor) +
  587. nodeOffset.relativeTop))) + crisp, left = Math.floor(this.colDistance * node.column +
  588. options.borderWidth / 2) + crisp, nodeLeft = chart.inverted ?
  589. chart.plotSizeX - left :
  590. left, nodeWidth = Math.round(this.nodeWidth);
  591. node.sum = sum;
  592. // If node sum is 0, don't render the rect #12453
  593. if (sum) {
  594. // Draw the node
  595. node.shapeType = 'rect';
  596. node.nodeX = nodeLeft;
  597. node.nodeY = fromNodeTop;
  598. if (!chart.inverted) {
  599. node.shapeArgs = {
  600. x: nodeLeft,
  601. y: fromNodeTop,
  602. width: node.options.width || options.width || nodeWidth,
  603. height: node.options.height || options.height || height
  604. };
  605. }
  606. else {
  607. node.shapeArgs = {
  608. x: nodeLeft - nodeWidth,
  609. y: chart.plotSizeY - fromNodeTop - height,
  610. width: node.options.height || options.height || nodeWidth,
  611. height: node.options.width || options.width || height
  612. };
  613. }
  614. node.shapeArgs.display = node.hasShape() ? '' : 'none';
  615. // Calculate data label options for the point
  616. node.dlOptions = getDLOptions({
  617. level: this.mapOptionsToLevel[node.level],
  618. optionsPoint: node.options
  619. });
  620. // Pass test in drawPoints
  621. node.plotY = 1;
  622. // Set the anchor position for tooltips
  623. node.tooltipPos = chart.inverted ? [
  624. chart.plotSizeY - node.shapeArgs.y - node.shapeArgs.height / 2,
  625. chart.plotSizeX - node.shapeArgs.x - node.shapeArgs.width / 2
  626. ] : [
  627. node.shapeArgs.x + node.shapeArgs.width / 2,
  628. node.shapeArgs.y + node.shapeArgs.height / 2
  629. ];
  630. }
  631. else {
  632. node.dlOptions = {
  633. enabled: false
  634. };
  635. }
  636. },
  637. /**
  638. * Run translation operations for one link.
  639. * @private
  640. */
  641. translateLink: function (point) {
  642. var getY = function (node, fromOrTo) {
  643. var _a;
  644. var linkTop = (node.offset(point, fromOrTo) *
  645. translationFactor);
  646. var y = Math.min(node.nodeY + linkTop,
  647. // Prevent links from spilling below the node (#12014)
  648. node.nodeY + ((_a = node.shapeArgs) === null || _a === void 0 ? void 0 : _a.height) - linkHeight);
  649. return y;
  650. };
  651. var fromNode = point.fromNode, toNode = point.toNode, chart = this.chart, translationFactor = this.translationFactor, linkHeight = Math.max(point.weight * translationFactor, this.options.minLinkWidth), options = this.options, curvy = ((chart.inverted ? -this.colDistance : this.colDistance) *
  652. options.curveFactor), fromY = getY(fromNode, 'linksFrom'), toY = getY(toNode, 'linksTo'), nodeLeft = fromNode.nodeX, nodeW = this.nodeWidth, right = toNode.column * this.colDistance, outgoing = point.outgoing, straight = right > nodeLeft + nodeW;
  653. if (chart.inverted) {
  654. fromY = chart.plotSizeY - fromY;
  655. toY = (chart.plotSizeY || 0) - toY;
  656. right = chart.plotSizeX - right;
  657. nodeW = -nodeW;
  658. linkHeight = -linkHeight;
  659. straight = nodeLeft > right;
  660. }
  661. point.shapeType = 'path';
  662. point.linkBase = [
  663. fromY,
  664. fromY + linkHeight,
  665. toY,
  666. toY + linkHeight
  667. ];
  668. // Links going from left to right
  669. if (straight && typeof toY === 'number') {
  670. point.shapeArgs = {
  671. d: [
  672. ['M', nodeLeft + nodeW, fromY],
  673. [
  674. 'C',
  675. nodeLeft + nodeW + curvy,
  676. fromY,
  677. right - curvy,
  678. toY,
  679. right,
  680. toY
  681. ],
  682. ['L', right + (outgoing ? nodeW : 0), toY + linkHeight / 2],
  683. ['L', right, toY + linkHeight],
  684. [
  685. 'C',
  686. right - curvy,
  687. toY + linkHeight,
  688. nodeLeft + nodeW + curvy,
  689. fromY + linkHeight,
  690. nodeLeft + nodeW, fromY + linkHeight
  691. ],
  692. ['Z']
  693. ]
  694. };
  695. // Experimental: Circular links pointing backwards. In
  696. // v6.1.0 this breaks the rendering completely, so even
  697. // this experimental rendering is an improvement. #8218.
  698. // @todo
  699. // - Make room for the link in the layout
  700. // - Automatically determine if the link should go up or
  701. // down.
  702. }
  703. else if (typeof toY === 'number') {
  704. var bend = 20, vDist = chart.plotHeight - fromY - linkHeight, x1 = right - bend - linkHeight, x2 = right - bend, x3 = right, x4 = nodeLeft + nodeW, x5 = x4 + bend, x6 = x5 + linkHeight, fy1 = fromY, fy2 = fromY + linkHeight, fy3 = fy2 + bend, y4 = fy3 + vDist, y5 = y4 + bend, y6 = y5 + linkHeight, ty1 = toY, ty2 = ty1 + linkHeight, ty3 = ty2 + bend, cfy1 = fy2 - linkHeight * 0.7, cy2 = y5 + linkHeight * 0.7, cty1 = ty2 - linkHeight * 0.7, cx1 = x3 - linkHeight * 0.7, cx2 = x4 + linkHeight * 0.7;
  705. point.shapeArgs = {
  706. d: [
  707. ['M', x4, fy1],
  708. ['C', cx2, fy1, x6, cfy1, x6, fy3],
  709. ['L', x6, y4],
  710. ['C', x6, cy2, cx2, y6, x4, y6],
  711. ['L', x3, y6],
  712. ['C', cx1, y6, x1, cy2, x1, y4],
  713. ['L', x1, ty3],
  714. ['C', x1, cty1, cx1, ty1, x3, ty1],
  715. ['L', x3, ty2],
  716. ['C', x2, ty2, x2, ty2, x2, ty3],
  717. ['L', x2, y4],
  718. ['C', x2, y5, x2, y5, x3, y5],
  719. ['L', x4, y5],
  720. ['C', x5, y5, x5, y5, x5, y4],
  721. ['L', x5, fy3],
  722. ['C', x5, fy2, x5, fy2, x4, fy2],
  723. ['Z']
  724. ]
  725. };
  726. }
  727. // Place data labels in the middle
  728. point.dlBox = {
  729. x: nodeLeft + (right - nodeLeft + nodeW) / 2,
  730. y: fromY + (toY - fromY) / 2,
  731. height: linkHeight,
  732. width: 0
  733. };
  734. // And set the tooltip anchor in the middle
  735. point.tooltipPos = chart.inverted ? [
  736. chart.plotSizeY - point.dlBox.y - linkHeight / 2,
  737. chart.plotSizeX - point.dlBox.x
  738. ] : [
  739. point.dlBox.x,
  740. point.dlBox.y + linkHeight / 2
  741. ];
  742. // Pass test in drawPoints
  743. point.y = point.plotY = 1;
  744. if (!point.color) {
  745. point.color = fromNode.color;
  746. }
  747. },
  748. /**
  749. * Run pre-translation by generating the nodeColumns.
  750. * @private
  751. */
  752. translate: function () {
  753. var _this = this;
  754. // Get the translation factor needed for each column to fill up the
  755. // plot height
  756. var getColumnTranslationFactor = function (column) {
  757. var nodes = column.slice();
  758. var minLinkWidth = _this.options.minLinkWidth || 0;
  759. var exceedsMinLinkWidth;
  760. var factor = 0;
  761. var i;
  762. var remainingHeight = chart.plotSizeY -
  763. options.borderWidth - (column.length - 1) * series.nodePadding;
  764. // Because the minLinkWidth option doesn't obey the direct
  765. // translation, we need to run translation iteratively, check
  766. // node heights, remove those nodes affected by minLinkWidth,
  767. // check again, etc.
  768. while (column.length) {
  769. factor = remainingHeight / column.sum();
  770. exceedsMinLinkWidth = false;
  771. i = column.length;
  772. while (i--) {
  773. if (column[i].getSum() * factor < minLinkWidth) {
  774. column.splice(i, 1);
  775. remainingHeight -= minLinkWidth;
  776. exceedsMinLinkWidth = true;
  777. }
  778. }
  779. if (!exceedsMinLinkWidth) {
  780. break;
  781. }
  782. }
  783. // Re-insert original nodes
  784. column.length = 0;
  785. nodes.forEach(function (node) { return column.push(node); });
  786. return factor;
  787. };
  788. if (!this.processedXData) {
  789. this.processData();
  790. }
  791. this.generatePoints();
  792. this.nodeColumns = this.createNodeColumns();
  793. this.nodeWidth = relativeLength(this.options.nodeWidth, this.chart.plotSizeX);
  794. var series = this, chart = this.chart, options = this.options, nodeWidth = this.nodeWidth, nodeColumns = this.nodeColumns;
  795. this.nodePadding = this.getNodePadding();
  796. // Find out how much space is needed. Base it on the translation
  797. // factor of the most spaceous column.
  798. this.translationFactor = nodeColumns.reduce(function (translationFactor, column) { return Math.min(translationFactor, getColumnTranslationFactor(column)); }, Infinity);
  799. this.colDistance =
  800. (chart.plotSizeX - nodeWidth -
  801. options.borderWidth) / Math.max(1, nodeColumns.length - 1);
  802. // Calculate level options used in sankey and organization
  803. series.mapOptionsToLevel = getLevelOptions({
  804. // NOTE: if support for allowTraversingTree is added, then from
  805. // should be the level of the root node.
  806. from: 1,
  807. levels: options.levels,
  808. to: nodeColumns.length - 1,
  809. defaults: {
  810. borderColor: options.borderColor,
  811. borderRadius: options.borderRadius,
  812. borderWidth: options.borderWidth,
  813. color: series.color,
  814. colorByPoint: options.colorByPoint,
  815. // NOTE: if support for allowTraversingTree is added, then
  816. // levelIsConstant should be optional.
  817. levelIsConstant: true,
  818. linkColor: options.linkColor,
  819. linkLineWidth: options.linkLineWidth,
  820. linkOpacity: options.linkOpacity,
  821. states: options.states
  822. }
  823. });
  824. // First translate all nodes so we can use them when drawing links
  825. nodeColumns.forEach(function (column) {
  826. column.forEach(function (node) {
  827. series.translateNode(node, column);
  828. });
  829. }, this);
  830. // Then translate links
  831. this.nodes.forEach(function (node) {
  832. // Translate the links from this node
  833. node.linksFrom.forEach(function (linkPoint) {
  834. // If weight is 0 - don't render the link path #12453,
  835. // render null points (for organization chart)
  836. if ((linkPoint.weight || linkPoint.isNull) && linkPoint.to) {
  837. series.translateLink(linkPoint);
  838. linkPoint.allowShadow = false;
  839. }
  840. });
  841. });
  842. },
  843. /**
  844. * Extend the render function to also render this.nodes together with
  845. * the points.
  846. * @private
  847. */
  848. render: function () {
  849. var points = this.points;
  850. this.points = this.points.concat(this.nodes || []);
  851. H.seriesTypes.column.prototype.render.call(this);
  852. this.points = points;
  853. },
  854. /* eslint-enable valid-jsdoc */
  855. animate: H.Series.prototype.animate
  856. }, {
  857. applyOptions: function (options, x) {
  858. Point.prototype.applyOptions.call(this, options, x);
  859. // Treat point.level as a synonym of point.column
  860. if (defined(this.options.level)) {
  861. this.options.column = this.column = this.options.level;
  862. }
  863. return this;
  864. },
  865. setState: NodesMixin.setNodeState,
  866. getClassName: function () {
  867. return (this.isNode ? 'highcharts-node ' : 'highcharts-link ') +
  868. Point.prototype.getClassName.call(this);
  869. },
  870. isValid: function () {
  871. return this.isNode || typeof this.weight === 'number';
  872. }
  873. });
  874. /**
  875. * A `sankey` series. If the [type](#series.sankey.type) option is not
  876. * specified, it is inherited from [chart.type](#chart.type).
  877. *
  878. * @extends series,plotOptions.sankey
  879. * @excluding animationLimit, boostBlending, boostThreshold, borderColor,
  880. * borderRadius, borderWidth, crisp, cropThreshold, dataParser,
  881. * dataURL, depth, dragDrop, edgeColor, edgeWidth,
  882. * findNearestPointBy, getExtremesFromAll, grouping, groupPadding,
  883. * groupZPadding, label, maxPointWidth, negativeColor, pointInterval,
  884. * pointIntervalUnit, pointPadding, pointPlacement, pointRange,
  885. * pointStart, pointWidth, shadow, softThreshold, stacking,
  886. * threshold, zoneAxis, zones, dataSorting
  887. * @product highcharts
  888. * @requires modules/sankey
  889. * @apioption series.sankey
  890. */
  891. /**
  892. * A collection of options for the individual nodes. The nodes in a sankey
  893. * diagram are auto-generated instances of `Highcharts.Point`, but options can
  894. * be applied here and linked by the `id`.
  895. *
  896. * @sample highcharts/css/sankey/
  897. * Sankey diagram with node options
  898. *
  899. * @declare Highcharts.SeriesSankeyNodesOptionsObject
  900. * @type {Array<*>}
  901. * @product highcharts
  902. * @apioption series.sankey.nodes
  903. */
  904. /**
  905. * The id of the auto-generated node, refering to the `from` or `to` setting of
  906. * the link.
  907. *
  908. * @type {string}
  909. * @product highcharts
  910. * @apioption series.sankey.nodes.id
  911. */
  912. /**
  913. * The color of the auto generated node.
  914. *
  915. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  916. * @product highcharts
  917. * @apioption series.sankey.nodes.color
  918. */
  919. /**
  920. * The color index of the auto generated node, especially for use in styled
  921. * mode.
  922. *
  923. * @type {number}
  924. * @product highcharts
  925. * @apioption series.sankey.nodes.colorIndex
  926. */
  927. /**
  928. * An optional column index of where to place the node. The default behaviour is
  929. * to place it next to the preceding node. Note that this option name is
  930. * counter intuitive in inverted charts, like for example an organization chart
  931. * rendered top down. In this case the "columns" are horizontal.
  932. *
  933. * @sample highcharts/plotoptions/sankey-node-column/
  934. * Specified node column
  935. *
  936. * @type {number}
  937. * @since 6.0.5
  938. * @product highcharts
  939. * @apioption series.sankey.nodes.column
  940. */
  941. /**
  942. * Individual data label for each node. The options are the same as
  943. * the ones for [series.sankey.dataLabels](#series.sankey.dataLabels).
  944. *
  945. * @extends plotOptions.sankey.dataLabels
  946. * @apioption series.sankey.nodes.dataLabels
  947. */
  948. /**
  949. * An optional level index of where to place the node. The default behaviour is
  950. * to place it next to the preceding node. Alias of `nodes.column`, but in
  951. * inverted sankeys and org charts, the levels are laid out as rows.
  952. *
  953. * @type {number}
  954. * @since 7.1.0
  955. * @product highcharts
  956. * @apioption series.sankey.nodes.level
  957. */
  958. /**
  959. * The name to display for the node in data labels and tooltips. Use this when
  960. * the name is different from the `id`. Where the id must be unique for each
  961. * node, this is not necessary for the name.
  962. *
  963. * @sample highcharts/css/sankey/
  964. * Sankey diagram with node options
  965. *
  966. * @type {string}
  967. * @product highcharts
  968. * @apioption series.sankey.nodes.name
  969. */
  970. /**
  971. * In a horizontal layout, the vertical offset of a node in terms of weight.
  972. * Positive values shift the node downwards, negative shift it upwards. In a
  973. * vertical layout, like organization chart, the offset is horizontal.
  974. *
  975. * If a percantage string is given, the node is offset by the percentage of the
  976. * node size plus `nodePadding`.
  977. *
  978. * @sample highcharts/plotoptions/sankey-node-column/
  979. * Specified node offset
  980. *
  981. * @type {number|string}
  982. * @default 0
  983. * @since 6.0.5
  984. * @product highcharts
  985. * @apioption series.sankey.nodes.offset
  986. */
  987. /**
  988. * An array of data points for the series. For the `sankey` series type,
  989. * points can be given in the following way:
  990. *
  991. * An array of objects with named values. The following snippet shows only a
  992. * few settings, see the complete options set below. If the total number of data
  993. * points exceeds the series' [turboThreshold](#series.area.turboThreshold),
  994. * this option is not available.
  995. *
  996. * ```js
  997. * data: [{
  998. * from: 'Category1',
  999. * to: 'Category2',
  1000. * weight: 2
  1001. * }, {
  1002. * from: 'Category1',
  1003. * to: 'Category3',
  1004. * weight: 5
  1005. * }]
  1006. * ```
  1007. *
  1008. * @sample {highcharts} highcharts/series/data-array-of-objects/
  1009. * Config objects
  1010. *
  1011. * @declare Highcharts.SeriesSankeyPointOptionsObject
  1012. * @type {Array<*>}
  1013. * @extends series.line.data
  1014. * @excluding dragDrop, drilldown, marker, x, y
  1015. * @product highcharts
  1016. * @apioption series.sankey.data
  1017. */
  1018. /**
  1019. * The color for the individual _link_. By default, the link color is the same
  1020. * as the node it extends from. The `series.fillOpacity` option also applies to
  1021. * the points, so when setting a specific link color, consider setting the
  1022. * `fillOpacity` to 1.
  1023. *
  1024. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  1025. * @product highcharts
  1026. * @apioption series.sankey.data.color
  1027. */
  1028. /**
  1029. * @type {Highcharts.SeriesSankeyDataLabelsOptionsObject|Array<Highcharts.SeriesSankeyDataLabelsOptionsObject>}
  1030. * @product highcharts
  1031. * @apioption series.sankey.data.dataLabels
  1032. */
  1033. /**
  1034. * The node that the link runs from.
  1035. *
  1036. * @type {string}
  1037. * @product highcharts
  1038. * @apioption series.sankey.data.from
  1039. */
  1040. /**
  1041. * The node that the link runs to.
  1042. *
  1043. * @type {string}
  1044. * @product highcharts
  1045. * @apioption series.sankey.data.to
  1046. */
  1047. /**
  1048. * Whether the link goes out of the system.
  1049. *
  1050. * @sample highcharts/plotoptions/sankey-outgoing
  1051. * Sankey chart with outgoing links
  1052. *
  1053. * @type {boolean}
  1054. * @default false
  1055. * @product highcharts
  1056. * @apioption series.sankey.data.outgoing
  1057. */
  1058. /**
  1059. * The weight of the link.
  1060. *
  1061. * @type {number|null}
  1062. * @product highcharts
  1063. * @apioption series.sankey.data.weight
  1064. */
  1065. ''; // adds doclets above to transpiled file