VariablePieSeries.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. /* *
  2. *
  3. * Variable Pie module for Highcharts
  4. *
  5. * (c) 2010-2021 Grzegorz Blachliński
  6. *
  7. * License: www.highcharts.com/license
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. var __extends = (this && this.__extends) || (function () {
  14. var extendStatics = function (d, b) {
  15. extendStatics = Object.setPrototypeOf ||
  16. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  17. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  18. return extendStatics(d, b);
  19. };
  20. return function (d, b) {
  21. extendStatics(d, b);
  22. function __() { this.constructor = d; }
  23. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  24. };
  25. })();
  26. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  27. var PieSeries = SeriesRegistry.seriesTypes.pie;
  28. import U from '../../Core/Utilities.js';
  29. var arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, extend = U.extend, fireEvent = U.fireEvent, merge = U.merge, pick = U.pick;
  30. /* *
  31. *
  32. * Class
  33. *
  34. * */
  35. /**
  36. * The variablepie series type.
  37. *
  38. * @private
  39. * @class
  40. * @name Highcharts.seriesTypes.variablepie
  41. *
  42. * @augments Highcharts.Series
  43. */
  44. var VariablePieSeries = /** @class */ (function (_super) {
  45. __extends(VariablePieSeries, _super);
  46. function VariablePieSeries() {
  47. /* *
  48. *
  49. * Static Properties
  50. *
  51. * */
  52. var _this = _super !== null && _super.apply(this, arguments) || this;
  53. /* *
  54. *
  55. * Properties
  56. *
  57. * */
  58. _this.data = void 0;
  59. _this.options = void 0;
  60. _this.points = void 0;
  61. _this.radii = void 0;
  62. return _this;
  63. /* eslint-enable valid-jsdoc */
  64. }
  65. /* *
  66. *
  67. * Functions
  68. *
  69. * */
  70. /* eslint-disable valid-jsdoc */
  71. /**
  72. * Before standard translate method for pie chart it is needed to calculate
  73. * min/max radius of each pie slice based on its Z value.
  74. * @private
  75. */
  76. VariablePieSeries.prototype.calculateExtremes = function () {
  77. var series = this, chart = series.chart, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, seriesOptions = series.options, slicingRoom = 2 * (seriesOptions.slicedOffset || 0), zMin, zMax, zData = series.zData, smallestSize = Math.min(plotWidth, plotHeight) - slicingRoom,
  78. // Min and max size of pie slice:
  79. extremes = {},
  80. // In pie charts size of a pie is changed to make space for
  81. // dataLabels, then series.center is changing.
  82. positions = series.center || series.getCenter();
  83. ['minPointSize', 'maxPointSize'].forEach(function (prop) {
  84. var length = seriesOptions[prop], isPercent = /%$/.test(length);
  85. length = parseInt(length, 10);
  86. extremes[prop] = isPercent ?
  87. smallestSize * length / 100 :
  88. length * 2; // Because it should be radius, not diameter.
  89. });
  90. series.minPxSize = positions[3] + extremes.minPointSize;
  91. series.maxPxSize = clamp(positions[2], positions[3] + extremes.minPointSize, extremes.maxPointSize);
  92. if (zData.length) {
  93. zMin = pick(seriesOptions.zMin, arrayMin(zData.filter(series.zValEval)));
  94. zMax = pick(seriesOptions.zMax, arrayMax(zData.filter(series.zValEval)));
  95. this.getRadii(zMin, zMax, series.minPxSize, series.maxPxSize);
  96. }
  97. };
  98. /**
  99. * Finding radius of series points based on their Z value and min/max Z
  100. * value for all series.
  101. *
  102. * @private
  103. * @function Highcharts.Series#getRadii
  104. *
  105. * @param {number} zMin
  106. * Min threshold for Z value. If point's Z value is smaller that zMin, point
  107. * will have the smallest possible radius.
  108. *
  109. * @param {number} zMax
  110. * Max threshold for Z value. If point's Z value is bigger that zMax, point
  111. * will have the biggest possible radius.
  112. *
  113. * @param {number} minSize
  114. * Minimal pixel size possible for radius.
  115. *
  116. * @param {numbner} maxSize
  117. * Minimal pixel size possible for radius.
  118. */
  119. VariablePieSeries.prototype.getRadii = function (zMin, zMax, minSize, maxSize) {
  120. var i = 0, pos, zData = this.zData, len = zData.length, radii = [], options = this.options, sizeByArea = options.sizeBy !== 'radius', zRange = zMax - zMin, value, radius;
  121. // Calculate radius for all pie slice's based on their Z values
  122. for (i; i < len; i++) {
  123. // if zData[i] is null/undefined/string we need to take zMin for
  124. // smallest radius.
  125. value = this.zValEval(zData[i]) ? zData[i] : zMin;
  126. if (value <= zMin) {
  127. radius = minSize / 2;
  128. }
  129. else if (value >= zMax) {
  130. radius = maxSize / 2;
  131. }
  132. else {
  133. // Relative size, a number between 0 and 1
  134. pos = zRange > 0 ? (value - zMin) / zRange : 0.5;
  135. if (sizeByArea) {
  136. pos = Math.sqrt(pos);
  137. }
  138. radius = Math.ceil(minSize + pos * (maxSize - minSize)) / 2;
  139. }
  140. radii.push(radius);
  141. }
  142. this.radii = radii;
  143. };
  144. /**
  145. * It is needed to null series.center on chart redraw. Probably good idea
  146. * will be to add this option in directly in pie series.
  147. * @private
  148. */
  149. VariablePieSeries.prototype.redraw = function () {
  150. this.center = null;
  151. _super.prototype.redraw.apply(this, arguments);
  152. };
  153. /**
  154. * Extend translate by updating radius for each pie slice instead of using
  155. * one global radius.
  156. * @private
  157. */
  158. VariablePieSeries.prototype.translate = function (positions) {
  159. this.generatePoints();
  160. var series = this, cumulative = 0, precision = 1000, // issue #172
  161. options = series.options, slicedOffset = options.slicedOffset, connectorOffset = slicedOffset + (options.borderWidth || 0), finalConnectorOffset, start, end, angle, startAngle = options.startAngle || 0, startAngleRad = Math.PI / 180 * (startAngle - 90), endAngleRad = Math.PI / 180 * (pick(options.endAngle, startAngle + 360) - 90), circ = endAngleRad - startAngleRad, // 2 * Math.PI,
  162. points = series.points,
  163. // the x component of the radius vector for a given point
  164. radiusX, radiusY, labelDistance = options.dataLabels.distance, ignoreHiddenPoint = options.ignoreHiddenPoint, i, len = points.length, point, pointRadii, pointRadiusX, pointRadiusY;
  165. series.startAngleRad = startAngleRad;
  166. series.endAngleRad = endAngleRad;
  167. // Use calculateExtremes to get series.radii array.
  168. series.calculateExtremes();
  169. // Get positions - either an integer or a percentage string must be
  170. // given. If positions are passed as a parameter, we're in a
  171. // recursive loop for adjusting space for data labels.
  172. if (!positions) {
  173. series.center = positions = series.getCenter();
  174. }
  175. // Calculate the geometry for each point
  176. for (i = 0; i < len; i++) {
  177. point = points[i];
  178. pointRadii = series.radii[i];
  179. // Used for distance calculation for specific point.
  180. point.labelDistance = pick(point.options.dataLabels &&
  181. point.options.dataLabels.distance, labelDistance);
  182. // Saved for later dataLabels distance calculation.
  183. series.maxLabelDistance = Math.max(series.maxLabelDistance || 0, point.labelDistance);
  184. // set start and end angle
  185. start = startAngleRad + (cumulative * circ);
  186. if (!ignoreHiddenPoint || point.visible) {
  187. cumulative += point.percentage / 100;
  188. }
  189. end = startAngleRad + (cumulative * circ);
  190. // set the shape
  191. point.shapeType = 'arc';
  192. point.shapeArgs = {
  193. x: positions[0],
  194. y: positions[1],
  195. r: pointRadii,
  196. innerR: positions[3] / 2,
  197. start: Math.round(start * precision) / precision,
  198. end: Math.round(end * precision) / precision
  199. };
  200. // The angle must stay within -90 and 270 (#2645)
  201. angle = (end + start) / 2;
  202. if (angle > 1.5 * Math.PI) {
  203. angle -= 2 * Math.PI;
  204. }
  205. else if (angle < -Math.PI / 2) {
  206. angle += 2 * Math.PI;
  207. }
  208. // Center for the sliced out slice
  209. point.slicedTranslation = {
  210. translateX: Math.round(Math.cos(angle) * slicedOffset),
  211. translateY: Math.round(Math.sin(angle) * slicedOffset)
  212. };
  213. // set the anchor point for tooltips
  214. radiusX = Math.cos(angle) * positions[2] / 2;
  215. radiusY = Math.sin(angle) * positions[2] / 2;
  216. pointRadiusX = Math.cos(angle) * pointRadii;
  217. pointRadiusY = Math.sin(angle) * pointRadii;
  218. point.tooltipPos = [
  219. positions[0] + radiusX * 0.7,
  220. positions[1] + radiusY * 0.7
  221. ];
  222. point.half = angle < -Math.PI / 2 || angle > Math.PI / 2 ?
  223. 1 :
  224. 0;
  225. point.angle = angle;
  226. // Set the anchor point for data labels. Use point.labelDistance
  227. // instead of labelDistance // #1174
  228. // finalConnectorOffset - not override connectorOffset value.
  229. finalConnectorOffset = Math.min(connectorOffset, point.labelDistance / 5); // #1678
  230. point.labelPosition = {
  231. natural: {
  232. // initial position of the data label - it's utilized
  233. // for finding the final position for the label
  234. x: positions[0] + pointRadiusX +
  235. Math.cos(angle) * point.labelDistance,
  236. y: positions[1] + pointRadiusY +
  237. Math.sin(angle) * point.labelDistance
  238. },
  239. 'final': {
  240. // used for generating connector path -
  241. // initialized later in drawDataLabels function
  242. // x: undefined,
  243. // y: undefined
  244. },
  245. // left - pie on the left side of the data label
  246. // right - pie on the right side of the data label
  247. alignment: point.half ? 'right' : 'left',
  248. connectorPosition: {
  249. breakAt: {
  250. x: positions[0] + pointRadiusX +
  251. Math.cos(angle) * finalConnectorOffset,
  252. y: positions[1] + pointRadiusY +
  253. Math.sin(angle) * finalConnectorOffset
  254. },
  255. touchingSliceAt: {
  256. x: positions[0] + pointRadiusX,
  257. y: positions[1] + pointRadiusY
  258. }
  259. }
  260. };
  261. }
  262. fireEvent(series, 'afterTranslate');
  263. };
  264. /**
  265. * For arrayMin and arrayMax calculations array shouldn't have
  266. * null/undefined/string values. In this case it is needed to check if
  267. * points Z value is a Number.
  268. * @private
  269. */
  270. VariablePieSeries.prototype.zValEval = function (zVal) {
  271. if (typeof zVal === 'number' && !isNaN(zVal)) {
  272. return true;
  273. }
  274. return null;
  275. };
  276. /**
  277. * A variable pie series is a two dimensional series type, where each point
  278. * renders an Y and Z value. Each point is drawn as a pie slice where the
  279. * size (arc) of the slice relates to the Y value and the radius of pie
  280. * slice relates to the Z value.
  281. *
  282. * @sample {highcharts} highcharts/demo/variable-radius-pie/
  283. * Variable-radius pie chart
  284. *
  285. * @extends plotOptions.pie
  286. * @excluding dragDrop
  287. * @since 6.0.0
  288. * @product highcharts
  289. * @requires modules/variable-pie.js
  290. * @optionparent plotOptions.variablepie
  291. */
  292. VariablePieSeries.defaultOptions = merge(PieSeries.defaultOptions, {
  293. /**
  294. * The minimum size of the points' radius related to chart's `plotArea`.
  295. * If a number is set, it applies in pixels.
  296. *
  297. * @sample {highcharts} highcharts/variable-radius-pie/min-max-point-size/
  298. * Example of minPointSize and maxPointSize
  299. * @sample {highcharts} highcharts/variable-radius-pie/min-point-size-100/
  300. * minPointSize set to 100
  301. *
  302. * @type {number|string}
  303. * @since 6.0.0
  304. */
  305. minPointSize: '10%',
  306. /**
  307. * The maximum size of the points' radius related to chart's `plotArea`.
  308. * If a number is set, it applies in pixels.
  309. *
  310. * @sample {highcharts} highcharts/variable-radius-pie/min-max-point-size/
  311. * Example of minPointSize and maxPointSize
  312. *
  313. * @type {number|string}
  314. * @since 6.0.0
  315. */
  316. maxPointSize: '100%',
  317. /**
  318. * The minimum possible z value for the point's radius calculation. If
  319. * the point's Z value is smaller than zMin, the slice will be drawn
  320. * according to the zMin value.
  321. *
  322. * @sample {highcharts} highcharts/variable-radius-pie/zmin-5/
  323. * zMin set to 5, smaller z values are treated as 5
  324. * @sample {highcharts} highcharts/variable-radius-pie/zmin-zmax/
  325. * Series limited by both zMin and zMax
  326. *
  327. * @type {number}
  328. * @since 6.0.0
  329. */
  330. zMin: void 0,
  331. /**
  332. * The maximum possible z value for the point's radius calculation. If
  333. * the point's Z value is bigger than zMax, the slice will be drawn
  334. * according to the zMax value
  335. *
  336. * @sample {highcharts} highcharts/variable-radius-pie/zmin-zmax/
  337. * Series limited by both zMin and zMax
  338. *
  339. * @type {number}
  340. * @since 6.0.0
  341. */
  342. zMax: void 0,
  343. /**
  344. * Whether the pie slice's value should be represented by the area or
  345. * the radius of the slice. Can be either `area` or `radius`. The
  346. * default, `area`, corresponds best to the human perception of the size
  347. * of each pie slice.
  348. *
  349. * @sample {highcharts} highcharts/variable-radius-pie/sizeby/
  350. * Difference between area and radius sizeBy
  351. *
  352. * @type {Highcharts.VariablePieSizeByValue}
  353. * @since 6.0.0
  354. */
  355. sizeBy: 'area',
  356. tooltip: {
  357. pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>Value: {point.y}<br/>Size: {point.z}<br/>'
  358. }
  359. });
  360. return VariablePieSeries;
  361. }(PieSeries));
  362. extend(VariablePieSeries.prototype, {
  363. pointArrayMap: ['y', 'z'],
  364. parallelArrays: ['x', 'y', 'z']
  365. });
  366. SeriesRegistry.registerSeriesType('variablepie', VariablePieSeries);
  367. /* *
  368. *
  369. * Default Export
  370. *
  371. * */
  372. export default VariablePieSeries;
  373. /* *
  374. *
  375. * API Declarations
  376. *
  377. * */
  378. /**
  379. * @typedef {"area"|"radius"} Highcharts.VariablePieSizeByValue
  380. */
  381. ''; // detach doclets above
  382. /* *
  383. *
  384. * API Options
  385. *
  386. * */
  387. /**
  388. * A `variablepie` series. If the [type](#series.variablepie.type) option is not
  389. * specified, it is inherited from [chart.type](#chart.type).
  390. *
  391. * @extends series,plotOptions.variablepie
  392. * @excluding dataParser, dataURL, stack, xAxis, yAxis, dataSorting,
  393. * boostThreshold, boostBlending
  394. * @product highcharts
  395. * @requires modules/variable-pie.js
  396. * @apioption series.variablepie
  397. */
  398. /**
  399. * An array of data points for the series. For the `variablepie` series type,
  400. * points can be given in the following ways:
  401. *
  402. * 1. An array of arrays with 2 values. In this case, the numerical values will
  403. * be interpreted as `y, z` options. Example:
  404. * ```js
  405. * data: [
  406. * [40, 75],
  407. * [50, 50],
  408. * [60, 40]
  409. * ]
  410. * ```
  411. *
  412. * 2. An array of objects with named values. The following snippet shows only a
  413. * few settings, see the complete options set below. If the total number of
  414. * data points exceeds the series'
  415. * [turboThreshold](#series.variablepie.turboThreshold), this option is not
  416. * available.
  417. * ```js
  418. * data: [{
  419. * y: 1,
  420. * z: 4,
  421. * name: "Point2",
  422. * color: "#00FF00"
  423. * }, {
  424. * y: 7,
  425. * z: 10,
  426. * name: "Point1",
  427. * color: "#FF00FF"
  428. * }]
  429. * ```
  430. *
  431. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  432. * Arrays of numeric x and y
  433. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  434. * Arrays of datetime x and y
  435. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  436. * Arrays of point.name and y
  437. * @sample {highcharts} highcharts/series/data-array-of-objects/
  438. * Config objects
  439. *
  440. * @type {Array<Array<(number|string),number>|*>}
  441. * @extends series.pie.data
  442. * @excluding marker, x
  443. * @product highcharts
  444. * @apioption series.variablepie.data
  445. */
  446. ''; // adds doclets above to transpiled file