VariablePieSeries.js 15 KB

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