dependency-wheel.src.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. /* *
  2. *
  3. * Dependency wheel module
  4. *
  5. * (c) 2018-2019 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 '../parts/Globals.js';
  14. import U from '../parts/Utilities.js';
  15. var animObject = U.animObject;
  16. import '../parts/Options.js';
  17. import '../mixins/nodes.js';
  18. var base = H.seriesTypes.sankey.prototype;
  19. /**
  20. * @private
  21. * @class
  22. * @name Highcharts.seriesTypes.dependencywheel
  23. *
  24. * @augments Highcharts.seriesTypes.sankey
  25. */
  26. H.seriesType('dependencywheel', 'sankey',
  27. /**
  28. * A dependency wheel chart is a type of flow diagram, where all nodes are
  29. * laid out in a circle, and the flow between the are drawn as link bands.
  30. *
  31. * @sample highcharts/demo/dependency-wheel/
  32. * Dependency wheel
  33. *
  34. * @extends plotOptions.sankey
  35. * @since 7.1.0
  36. * @product highcharts
  37. * @requires modules/dependencywheel
  38. * @optionparent plotOptions.dependencywheel
  39. */
  40. {
  41. /**
  42. * The center of the wheel relative to the plot area. Can be
  43. * percentages or pixel values. The default behaviour is to
  44. * center the wheel inside the plot area.
  45. *
  46. * @type {Array<number|string|null>}
  47. * @default [null, null]
  48. * @product highcharts
  49. */
  50. center: [null, null],
  51. curveFactor: 0.6,
  52. /**
  53. * The start angle of the dependency wheel, in degrees where 0 is up.
  54. */
  55. startAngle: 0
  56. }, {
  57. orderNodes: false,
  58. getCenter: H.seriesTypes.pie.prototype.getCenter,
  59. /* eslint-disable valid-jsdoc */
  60. /**
  61. * Dependency wheel has only one column, it runs along the perimeter.
  62. * @private
  63. */
  64. createNodeColumns: function () {
  65. var columns = [this.createNodeColumn()];
  66. this.nodes.forEach(function (node) {
  67. node.column = 0;
  68. columns[0].push(node);
  69. });
  70. return columns;
  71. },
  72. /**
  73. * Translate from vertical pixels to perimeter.
  74. * @private
  75. */
  76. getNodePadding: function () {
  77. return this.options.nodePadding / Math.PI;
  78. },
  79. createNode: function (id) {
  80. var node = base.createNode.call(this, id);
  81. node.index = this.nodes.length - 1;
  82. /**
  83. * Return the sum of incoming and outgoing links.
  84. * @private
  85. */
  86. node.getSum = function () {
  87. return node.linksFrom
  88. .concat(node.linksTo)
  89. .reduce(function (acc, link) {
  90. return acc + link.weight;
  91. }, 0);
  92. };
  93. /**
  94. * Get the offset in weight values of a point/link.
  95. * @private
  96. */
  97. node.offset = function (point) {
  98. var offset = 0, i, links = node.linksFrom.concat(node.linksTo), sliced;
  99. /**
  100. * @private
  101. */
  102. function otherNode(link) {
  103. if (link.fromNode === node) {
  104. return link.toNode;
  105. }
  106. return link.fromNode;
  107. }
  108. // Sort and slice the links to avoid links going out of each
  109. // node crossing each other.
  110. links.sort(function (a, b) {
  111. return otherNode(a).index - otherNode(b).index;
  112. });
  113. for (i = 0; i < links.length; i++) {
  114. if (otherNode(links[i]).index > node.index) {
  115. links = links.slice(0, i).reverse().concat(links.slice(i).reverse());
  116. sliced = true;
  117. break;
  118. }
  119. }
  120. if (!sliced) {
  121. links.reverse();
  122. }
  123. for (i = 0; i < links.length; i++) {
  124. if (links[i] === point) {
  125. return offset;
  126. }
  127. offset += links[i].weight;
  128. }
  129. };
  130. return node;
  131. },
  132. /**
  133. * @private
  134. * @todo Override the refactored sankey translateLink and translateNode
  135. * functions instead of the whole translate function.
  136. */
  137. translate: function () {
  138. var options = this.options, factor = 2 * Math.PI /
  139. (this.chart.plotHeight + this.getNodePadding()), center = this.getCenter(), startAngle = (options.startAngle - 90) * H.deg2rad;
  140. base.translate.call(this);
  141. this.nodeColumns[0].forEach(function (node) {
  142. var shapeArgs = node.shapeArgs, centerX = center[0], centerY = center[1], r = center[2] / 2, innerR = r - options.nodeWidth, start = startAngle + factor * shapeArgs.y, end = startAngle +
  143. factor * (shapeArgs.y + shapeArgs.height);
  144. // Middle angle
  145. node.angle = start + (end - start) / 2;
  146. node.shapeType = 'arc';
  147. node.shapeArgs = {
  148. x: centerX,
  149. y: centerY,
  150. r: r,
  151. innerR: innerR,
  152. start: start,
  153. end: end
  154. };
  155. node.dlBox = {
  156. x: centerX + Math.cos((start + end) / 2) * (r + innerR) / 2,
  157. y: centerY + Math.sin((start + end) / 2) * (r + innerR) / 2,
  158. width: 1,
  159. height: 1
  160. };
  161. // Draw the links from this node
  162. node.linksFrom.forEach(function (point) {
  163. var distance;
  164. var corners = point.linkBase.map(function (top, i) {
  165. var angle = factor * top, x = Math.cos(startAngle + angle) * (innerR + 1), y = Math.sin(startAngle + angle) * (innerR + 1), curveFactor = options.curveFactor;
  166. // The distance between the from and to node along the
  167. // perimeter. This affect how curved the link is, so
  168. // that links between neighbours don't extend too far
  169. // towards the center.
  170. distance = Math.abs(point.linkBase[3 - i] * factor - angle);
  171. if (distance > Math.PI) {
  172. distance = 2 * Math.PI - distance;
  173. }
  174. distance = distance * innerR;
  175. if (distance < innerR) {
  176. curveFactor *= (distance / innerR);
  177. }
  178. return {
  179. x: centerX + x,
  180. y: centerY + y,
  181. cpX: centerX + (1 - curveFactor) * x,
  182. cpY: centerY + (1 - curveFactor) * y
  183. };
  184. });
  185. point.shapeArgs = {
  186. d: [
  187. 'M',
  188. corners[0].x, corners[0].y,
  189. 'A',
  190. innerR, innerR,
  191. 0,
  192. 0,
  193. 1,
  194. corners[1].x, corners[1].y,
  195. 'C',
  196. corners[1].cpX, corners[1].cpY,
  197. corners[2].cpX, corners[2].cpY,
  198. corners[2].x, corners[2].y,
  199. 'A',
  200. innerR, innerR,
  201. 0,
  202. 0,
  203. 1,
  204. corners[3].x, corners[3].y,
  205. 'C',
  206. corners[3].cpX, corners[3].cpY,
  207. corners[0].cpX, corners[0].cpY,
  208. corners[0].x, corners[0].y
  209. ]
  210. };
  211. });
  212. });
  213. },
  214. animate: function (init) {
  215. if (!init) {
  216. var duration = animObject(this.options.animation).duration, step = (duration / 2) / this.nodes.length;
  217. this.nodes.forEach(function (point, i) {
  218. var graphic = point.graphic;
  219. if (graphic) {
  220. graphic.attr({ opacity: 0 });
  221. setTimeout(function () {
  222. graphic.animate({ opacity: 1 }, { duration: step });
  223. }, step * i);
  224. }
  225. }, this);
  226. this.points.forEach(function (point) {
  227. var graphic = point.graphic;
  228. if (!point.isNode && graphic) {
  229. graphic.attr({ opacity: 0 })
  230. .animate({
  231. opacity: 1
  232. }, this.options.animation);
  233. }
  234. }, this);
  235. this.animate = null;
  236. }
  237. }
  238. /* eslint-enable valid-jsdoc */
  239. },
  240. // Point class
  241. {
  242. setState: H.NodesMixin.setNodeState,
  243. /* eslint-disable valid-jsdoc */
  244. /**
  245. * Return a text path that the data label uses.
  246. * @private
  247. */
  248. getDataLabelPath: function (label) {
  249. var renderer = this.series.chart.renderer, shapeArgs = this.shapeArgs, upperHalf = this.angle < 0 || this.angle > Math.PI, start = shapeArgs.start, end = shapeArgs.end;
  250. if (!this.dataLabelPath) {
  251. this.dataLabelPath = renderer
  252. .arc({ open: true })
  253. // Add it inside the data label group so it gets destroyed
  254. // with the label
  255. .add(label);
  256. }
  257. this.dataLabelPath.attr({
  258. x: shapeArgs.x,
  259. y: shapeArgs.y,
  260. r: (shapeArgs.r +
  261. (this.dataLabel.options.distance || 0)),
  262. start: (upperHalf ? start : end),
  263. end: (upperHalf ? end : start),
  264. clockwise: +upperHalf
  265. });
  266. return this.dataLabelPath;
  267. },
  268. isValid: function () {
  269. // No null points here
  270. return true;
  271. }
  272. /* eslint-enable valid-jsdoc */
  273. });
  274. /**
  275. * A `dependencywheel` series. If the [type](#series.dependencywheel.type)
  276. * option is not specified, it is inherited from [chart.type](#chart.type).
  277. *
  278. * @extends series,plotOptions.dependencywheel
  279. * @product highcharts
  280. * @requires modules/dependencywheel
  281. * @apioption series.dependencywheel
  282. */
  283. /**
  284. * A collection of options for the individual nodes. The nodes in a dependency
  285. * diagram are auto-generated instances of `Highcharts.Point`, but options can
  286. * be applied here and linked by the `id`.
  287. *
  288. * @extends series.sankey.nodes
  289. * @type {Array<*>}
  290. * @product highcharts
  291. * @excluding offset
  292. * @apioption series.dependencywheel.nodes
  293. */
  294. /**
  295. * An array of data points for the series. For the `dependencywheel` series
  296. * type, points can be given in the following way:
  297. *
  298. * An array of objects with named values. The following snippet shows only a
  299. * few settings, see the complete options set below. If the total number of data
  300. * points exceeds the series' [turboThreshold](#series.area.turboThreshold),
  301. * this option is not available.
  302. *
  303. * ```js
  304. * data: [{
  305. * from: 'Category1',
  306. * to: 'Category2',
  307. * weight: 2
  308. * }, {
  309. * from: 'Category1',
  310. * to: 'Category3',
  311. * weight: 5
  312. * }]
  313. * ```
  314. *
  315. * @type {Array<*>}
  316. * @extends series.sankey.data
  317. * @product highcharts
  318. * @excluding outgoing, dataLabels
  319. * @apioption series.dependencywheel.data
  320. */
  321. /**
  322. * Individual data label for each node. The options are the same as
  323. * the ones for [series.dependencywheel.dataLabels](#series.dependencywheel.dataLabels).
  324. *
  325. * @apioption series.dependencywheel.nodes.dataLabels
  326. */
  327. ''; // adds doclets above to the transpiled file