funnel.src.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * Highcharts funnel module
  5. *
  6. * (c) 2010-2019 Torstein Honsi
  7. *
  8. * License: www.highcharts.com/license
  9. */
  10. 'use strict';
  11. (function (factory) {
  12. if (typeof module === 'object' && module.exports) {
  13. factory['default'] = factory;
  14. module.exports = factory;
  15. } else if (typeof define === 'function' && define.amd) {
  16. define('highcharts/modules/funnel', ['highcharts'], function (Highcharts) {
  17. factory(Highcharts);
  18. factory.Highcharts = Highcharts;
  19. return factory;
  20. });
  21. } else {
  22. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  23. }
  24. }(function (Highcharts) {
  25. var _modules = Highcharts ? Highcharts._modules : {};
  26. function _registerModule(obj, path, args, fn) {
  27. if (!obj.hasOwnProperty(path)) {
  28. obj[path] = fn.apply(null, args);
  29. }
  30. }
  31. _registerModule(_modules, 'modules/funnel.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (Highcharts, U) {
  32. /* *
  33. *
  34. * Highcharts funnel module
  35. *
  36. * (c) 2010-2019 Torstein Honsi
  37. *
  38. * License: www.highcharts.com/license
  39. *
  40. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  41. *
  42. * */
  43. /* eslint indent: 0 */
  44. var pick = U.pick;
  45. // create shortcuts
  46. var seriesType = Highcharts.seriesType, seriesTypes = Highcharts.seriesTypes, fireEvent = Highcharts.fireEvent, addEvent = Highcharts.addEvent, noop = Highcharts.noop;
  47. /**
  48. * @private
  49. * @class
  50. * @name Highcharts.seriesTypes.funnel
  51. *
  52. * @augments Highcharts.Series
  53. */
  54. seriesType('funnel', 'pie',
  55. /**
  56. * Funnel charts are a type of chart often used to visualize stages in a
  57. * sales project, where the top are the initial stages with the most
  58. * clients. It requires that the modules/funnel.js file is loaded.
  59. *
  60. * @sample highcharts/demo/funnel/
  61. * Funnel demo
  62. *
  63. * @extends plotOptions.pie
  64. * @excluding innerSize,size
  65. * @product highcharts
  66. * @requires modules/funnel
  67. * @optionparent plotOptions.funnel
  68. */
  69. {
  70. /**
  71. * Initial animation is by default disabled for the funnel chart.
  72. */
  73. animation: false,
  74. /**
  75. * The center of the series. By default, it is centered in the middle
  76. * of the plot area, so it fills the plot area height.
  77. *
  78. * @type {Array<number|string>}
  79. * @default ["50%", "50%"]
  80. * @since 3.0
  81. */
  82. center: ['50%', '50%'],
  83. /**
  84. * The width of the funnel compared to the width of the plot area,
  85. * or the pixel width if it is a number.
  86. *
  87. * @type {number|string}
  88. * @since 3.0
  89. */
  90. width: '90%',
  91. /**
  92. * The width of the neck, the lower part of the funnel. A number defines
  93. * pixel width, a percentage string defines a percentage of the plot
  94. * area width.
  95. *
  96. * @sample {highcharts} highcharts/demo/funnel/
  97. * Funnel demo
  98. *
  99. * @type {number|string}
  100. * @since 3.0
  101. */
  102. neckWidth: '30%',
  103. /**
  104. * The height of the funnel or pyramid. If it is a number it defines
  105. * the pixel height, if it is a percentage string it is the percentage
  106. * of the plot area height.
  107. *
  108. * @sample {highcharts} highcharts/demo/funnel/
  109. * Funnel demo
  110. *
  111. * @type {number|string}
  112. * @since 3.0
  113. */
  114. height: '100%',
  115. /**
  116. * The height of the neck, the lower part of the funnel. A number
  117. * defines pixel width, a percentage string defines a percentage of the
  118. * plot area height.
  119. *
  120. * @type {number|string}
  121. */
  122. neckHeight: '25%',
  123. /**
  124. * A reversed funnel has the widest area down. A reversed funnel with
  125. * no neck width and neck height is a pyramid.
  126. *
  127. * @since 3.0.10
  128. */
  129. reversed: false,
  130. /**
  131. * To avoid adapting the data label size in Pie.drawDataLabels.
  132. * @ignore-option
  133. */
  134. size: true,
  135. dataLabels: {
  136. connectorWidth: 1,
  137. verticalAlign: 'middle'
  138. },
  139. /**
  140. * Options for the series states.
  141. */
  142. states: {
  143. /**
  144. * @excluding halo, marker, lineWidth, lineWidthPlus
  145. * @apioption plotOptions.funnel.states.hover
  146. */
  147. /**
  148. * Options for a selected funnel item.
  149. *
  150. * @excluding halo, marker, lineWidth, lineWidthPlus
  151. */
  152. select: {
  153. /**
  154. * A specific color for the selected point.
  155. *
  156. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  157. */
  158. color: '#cccccc',
  159. /**
  160. * A specific border color for the selected point.
  161. *
  162. * @type {Highcharts.ColorString}
  163. */
  164. borderColor: '#000000'
  165. }
  166. }
  167. },
  168. // Properties
  169. {
  170. animate: noop,
  171. // Overrides the pie translate method
  172. translate: function () {
  173. var sum = 0, series = this, chart = series.chart, options = series.options, reversed = options.reversed, ignoreHiddenPoint = options.ignoreHiddenPoint, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, cumulative = 0, // start at top
  174. center = options.center, centerX = getLength(center[0], plotWidth), centerY = getLength(center[1], plotHeight), width = getLength(options.width, plotWidth), tempWidth, height = getLength(options.height, plotHeight), neckWidth = getLength(options.neckWidth, plotWidth), neckHeight = getLength(options.neckHeight, plotHeight), neckY = (centerY - height / 2) + height - neckHeight, data = series.data, path, fraction, half = (options.dataLabels.position === 'left' ?
  175. 1 :
  176. 0), x1, y1, x2, x3, y3, x4, y5;
  177. /**
  178. * Get positions - either an integer or a percentage string must be
  179. * given.
  180. * @private
  181. * @param {number|string|undefined} length
  182. * Length
  183. * @param {number} relativeTo
  184. * Relative factor
  185. * @return {number}
  186. * Relative position
  187. */
  188. function getLength(length, relativeTo) {
  189. return (/%$/).test(length) ?
  190. relativeTo * parseInt(length, 10) / 100 :
  191. parseInt(length, 10);
  192. }
  193. series.getWidthAt = function (y) {
  194. var top = (centerY - height / 2);
  195. return (y > neckY || height === neckHeight) ?
  196. neckWidth :
  197. neckWidth + (width - neckWidth) *
  198. (1 - (y - top) / (height - neckHeight));
  199. };
  200. series.getX = function (y, half, point) {
  201. return centerX + (half ? -1 : 1) *
  202. ((series.getWidthAt(reversed ? 2 * centerY - y : y) / 2) +
  203. point.labelDistance);
  204. };
  205. // Expose
  206. series.center = [centerX, centerY, height];
  207. series.centerX = centerX;
  208. /*
  209. Individual point coordinate naming:
  210. x1,y1 _________________ x2,y1
  211. \ /
  212. \ /
  213. \ /
  214. \ /
  215. \ /
  216. x3,y3 _________ x4,y3
  217. Additional for the base of the neck:
  218. | |
  219. | |
  220. | |
  221. x3,y5 _________ x4,y5
  222. */
  223. // get the total sum
  224. data.forEach(function (point) {
  225. if (!ignoreHiddenPoint || point.visible !== false) {
  226. sum += point.y;
  227. }
  228. });
  229. data.forEach(function (point) {
  230. // set start and end positions
  231. y5 = null;
  232. fraction = sum ? point.y / sum : 0;
  233. y1 = centerY - height / 2 + cumulative * height;
  234. y3 = y1 + fraction * height;
  235. tempWidth = series.getWidthAt(y1);
  236. x1 = centerX - tempWidth / 2;
  237. x2 = x1 + tempWidth;
  238. tempWidth = series.getWidthAt(y3);
  239. x3 = centerX - tempWidth / 2;
  240. x4 = x3 + tempWidth;
  241. // the entire point is within the neck
  242. if (y1 > neckY) {
  243. x1 = x3 = centerX - neckWidth / 2;
  244. x2 = x4 = centerX + neckWidth / 2;
  245. // the base of the neck
  246. }
  247. else if (y3 > neckY) {
  248. y5 = y3;
  249. tempWidth = series.getWidthAt(neckY);
  250. x3 = centerX - tempWidth / 2;
  251. x4 = x3 + tempWidth;
  252. y3 = neckY;
  253. }
  254. if (reversed) {
  255. y1 = 2 * centerY - y1;
  256. y3 = 2 * centerY - y3;
  257. if (y5 !== null) {
  258. y5 = 2 * centerY - y5;
  259. }
  260. }
  261. // save the path
  262. path = [
  263. 'M',
  264. x1, y1,
  265. 'L',
  266. x2, y1,
  267. x4, y3
  268. ];
  269. if (y5 !== null) {
  270. path.push(x4, y5, x3, y5);
  271. }
  272. path.push(x3, y3, 'Z');
  273. // prepare for using shared dr
  274. point.shapeType = 'path';
  275. point.shapeArgs = { d: path };
  276. // for tooltips and data labels
  277. point.percentage = fraction * 100;
  278. point.plotX = centerX;
  279. point.plotY = (y1 + (y5 || y3)) / 2;
  280. // Placement of tooltips and data labels
  281. point.tooltipPos = [
  282. centerX,
  283. point.plotY
  284. ];
  285. point.dlBox = {
  286. x: x3,
  287. y: y1,
  288. topWidth: x2 - x1,
  289. bottomWidth: x4 - x3,
  290. height: Math.abs(pick(y5, y3) - y1),
  291. width: NaN
  292. };
  293. // Slice is a noop on funnel points
  294. point.slice = noop;
  295. // Mimicking pie data label placement logic
  296. point.half = half;
  297. if (!ignoreHiddenPoint || point.visible !== false) {
  298. cumulative += fraction;
  299. }
  300. });
  301. fireEvent(series, 'afterTranslate');
  302. },
  303. // Funnel items don't have angles (#2289)
  304. sortByAngle: function (points) {
  305. points.sort(function (a, b) {
  306. return a.plotY - b.plotY;
  307. });
  308. },
  309. // Extend the pie data label method
  310. drawDataLabels: function () {
  311. var series = this, data = series.data, labelDistance = series.options.dataLabels.distance, leftSide, sign, point, i = data.length, x, y;
  312. // In the original pie label anticollision logic, the slots are
  313. // distributed from one labelDistance above to one labelDistance
  314. // below the pie. In funnels we don't want this.
  315. series.center[2] -= 2 * labelDistance;
  316. // Set the label position array for each point.
  317. while (i--) {
  318. point = data[i];
  319. leftSide = point.half;
  320. sign = leftSide ? 1 : -1;
  321. y = point.plotY;
  322. point.labelDistance = pick(point.options.dataLabels &&
  323. point.options.dataLabels.distance, labelDistance);
  324. series.maxLabelDistance = Math.max(point.labelDistance, series.maxLabelDistance || 0);
  325. x = series.getX(y, leftSide, point);
  326. // set the anchor point for data labels
  327. point.labelPosition = {
  328. // initial position of the data label - it's utilized for
  329. // finding the final position for the label
  330. natural: {
  331. x: 0,
  332. y: y
  333. },
  334. 'final': {
  335. // used for generating connector path -
  336. // initialized later in drawDataLabels function
  337. // x: undefined,
  338. // y: undefined
  339. },
  340. // left - funnel on the left side of the data label
  341. // right - funnel on the right side of the data label
  342. alignment: leftSide ? 'right' : 'left',
  343. connectorPosition: {
  344. breakAt: {
  345. x: x + (point.labelDistance - 5) * sign,
  346. y: y
  347. },
  348. touchingSliceAt: {
  349. x: x + point.labelDistance * sign,
  350. y: y
  351. }
  352. }
  353. };
  354. }
  355. seriesTypes[series.options.dataLabels.inside ? 'column' : 'pie'].prototype.drawDataLabels.call(this);
  356. },
  357. alignDataLabel: function (point, dataLabel, options, alignTo, isNew) {
  358. var series = point.series, reversed = series.options.reversed, dlBox = point.dlBox || point.shapeArgs, align = options.align, verticalAlign = options.verticalAlign, inside = ((series.options || {}).dataLabels || {}).inside, centerY = series.center[1], pointPlotY = (reversed ?
  359. 2 * centerY - point.plotY :
  360. point.plotY), widthAtLabel = series.getWidthAt(pointPlotY - dlBox.height / 2 +
  361. dataLabel.height), offset = verticalAlign === 'middle' ?
  362. (dlBox.topWidth - dlBox.bottomWidth) / 4 :
  363. (widthAtLabel - dlBox.bottomWidth) / 2, y = dlBox.y, x = dlBox.x;
  364. if (verticalAlign === 'middle') {
  365. y = dlBox.y - dlBox.height / 2 + dataLabel.height / 2;
  366. }
  367. else if (verticalAlign === 'top') {
  368. y = dlBox.y - dlBox.height + dataLabel.height +
  369. options.padding;
  370. }
  371. if (verticalAlign === 'top' && !reversed ||
  372. verticalAlign === 'bottom' && reversed ||
  373. verticalAlign === 'middle') {
  374. if (align === 'right') {
  375. x = dlBox.x - options.padding + offset;
  376. }
  377. else if (align === 'left') {
  378. x = dlBox.x + options.padding - offset;
  379. }
  380. }
  381. alignTo = {
  382. x: x,
  383. y: reversed ? y - dlBox.height : y,
  384. width: dlBox.bottomWidth,
  385. height: dlBox.height
  386. };
  387. options.verticalAlign = 'bottom';
  388. // Call the parent method
  389. if (!inside || point.visible) {
  390. Highcharts.Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
  391. }
  392. if (inside) {
  393. if (!point.visible && point.dataLabel) {
  394. // Avoid animation from top
  395. point.dataLabel.placed = false;
  396. }
  397. // If label is inside and we have contrast, set it:
  398. if (point.contrastColor) {
  399. dataLabel.css({
  400. color: point.contrastColor
  401. });
  402. }
  403. }
  404. }
  405. });
  406. /* eslint-disable no-invalid-this */
  407. addEvent(Highcharts.Chart, 'afterHideAllOverlappingLabels', function () {
  408. this.series.forEach(function (series) {
  409. if (series instanceof seriesTypes.pie &&
  410. series.placeDataLabels &&
  411. !((series.options || {}).dataLabels || {}).inside) {
  412. series.placeDataLabels();
  413. }
  414. });
  415. });
  416. /**
  417. * A `funnel` series. If the [type](#series.funnel.type) option is
  418. * not specified, it is inherited from [chart.type](#chart.type).
  419. *
  420. * @extends series,plotOptions.funnel
  421. * @excluding dataParser, dataURL, stack, xAxis, yAxis
  422. * @product highcharts
  423. * @requires modules/funnel
  424. * @apioption series.funnel
  425. */
  426. /**
  427. * An array of data points for the series. For the `funnel` series type,
  428. * points can be given in the following ways:
  429. *
  430. * 1. An array of numerical values. In this case, the numerical values
  431. * will be interpreted as `y` options. Example:
  432. *
  433. * ```js
  434. * data: [0, 5, 3, 5]
  435. * ```
  436. *
  437. * 2. An array of objects with named values. The following snippet shows only a
  438. * few settings, see the complete options set below. If the total number of data
  439. * points exceeds the series' [turboThreshold](#series.funnel.turboThreshold),
  440. * this option is not available.
  441. *
  442. * ```js
  443. * data: [{
  444. * y: 3,
  445. * name: "Point2",
  446. * color: "#00FF00"
  447. * }, {
  448. * y: 1,
  449. * name: "Point1",
  450. * color: "#FF00FF"
  451. * }]
  452. * ```
  453. *
  454. * @sample {highcharts} highcharts/chart/reflow-true/
  455. * Numerical values
  456. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  457. * Arrays of numeric x and y
  458. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  459. * Arrays of datetime x and y
  460. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  461. * Arrays of point.name and y
  462. * @sample {highcharts} highcharts/series/data-array-of-objects/
  463. * Config objects
  464. *
  465. * @type {Array<number|null|*>}
  466. * @extends series.pie.data
  467. * @excluding sliced
  468. * @product highcharts
  469. * @apioption series.funnel.data
  470. */
  471. /**
  472. * Pyramid series type.
  473. *
  474. * @private
  475. * @class
  476. * @name Highcharts.seriesTypes.pyramid
  477. *
  478. * @augments Highcharts.Series
  479. */
  480. seriesType('pyramid', 'funnel',
  481. /**
  482. * A pyramid series is a special type of funnel, without neck and reversed
  483. * by default.
  484. *
  485. * @sample highcharts/demo/pyramid/
  486. * Pyramid chart
  487. *
  488. * @extends plotOptions.funnel
  489. * @product highcharts
  490. * @requires modules/funnel
  491. * @optionparent plotOptions.pyramid
  492. */
  493. {
  494. /**
  495. * The pyramid neck width is zero by default, as opposed to the funnel,
  496. * which shares the same layout logic.
  497. *
  498. * @since 3.0.10
  499. */
  500. neckWidth: '0%',
  501. /**
  502. * The pyramid neck width is zero by default, as opposed to the funnel,
  503. * which shares the same layout logic.
  504. *
  505. * @since 3.0.10
  506. */
  507. neckHeight: '0%',
  508. /**
  509. * The pyramid is reversed by default, as opposed to the funnel, which
  510. * shares the layout engine, and is not reversed.
  511. *
  512. * @since 3.0.10
  513. */
  514. reversed: true
  515. });
  516. /**
  517. * A `pyramid` series. If the [type](#series.pyramid.type) option is
  518. * not specified, it is inherited from [chart.type](#chart.type).
  519. *
  520. * @extends series,plotOptions.pyramid
  521. * @excluding dataParser, dataURL, stack, xAxis, yAxis
  522. * @product highcharts
  523. * @requires modules/funnel
  524. * @apioption series.pyramid
  525. */
  526. /**
  527. * An array of data points for the series. For the `pyramid` series
  528. * type, points can be given in the following ways:
  529. *
  530. * 1. An array of numerical values. In this case, the numerical values will be
  531. * interpreted as `y` options. Example:
  532. * ```js
  533. * data: [0, 5, 3, 5]
  534. * ```
  535. *
  536. * 2. An array of objects with named values. The following snippet shows only a
  537. * few settings, see the complete options set below. If the total number of
  538. * data points exceeds the series'
  539. * [turboThreshold](#series.pyramid.turboThreshold), this option is not
  540. * available.
  541. * ```js
  542. * data: [{
  543. * y: 9,
  544. * name: "Point2",
  545. * color: "#00FF00"
  546. * }, {
  547. * y: 6,
  548. * name: "Point1",
  549. * color: "#FF00FF"
  550. * }]
  551. * ```
  552. *
  553. * @sample {highcharts} highcharts/chart/reflow-true/
  554. * Numerical values
  555. * @sample {highcharts} highcharts/series/data-array-of-objects/
  556. * Config objects
  557. *
  558. * @type {Array<number|null|*>}
  559. * @extends series.pie.data
  560. * @excluding sliced
  561. * @product highcharts
  562. * @apioption series.pyramid.data
  563. */
  564. ''; // adds doclets above into transpiled file
  565. });
  566. _registerModule(_modules, 'masters/modules/funnel.src.js', [], function () {
  567. });
  568. }));