funnel.src.js 18 KB

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