item-series.src.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * Item series type for Highcharts
  5. *
  6. * (c) 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/item-series', ['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/item-series.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
  32. /* *
  33. *
  34. * (c) 2019 Torstein Honsi
  35. *
  36. * Item series type for Highcharts
  37. *
  38. * License: www.highcharts.com/license
  39. *
  40. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  41. *
  42. * */
  43. var defined = U.defined, extend = U.extend, isNumber = U.isNumber, objectEach = U.objectEach, pick = U.pick;
  44. var fireEvent = H.fireEvent, merge = H.merge, piePoint = H.seriesTypes.pie.prototype.pointClass.prototype;
  45. /**
  46. * The item series type.
  47. *
  48. * @requires module:modules/item-series
  49. *
  50. * @private
  51. * @class
  52. * @name Highcharts.seriesTypes.item
  53. *
  54. * @augments Highcharts.seriesTypes.pie
  55. */
  56. H.seriesType('item',
  57. // Inherits pie as the most tested non-cartesian series with individual
  58. // point legend, tooltips etc. Only downside is we need to re-enable
  59. // marker options.
  60. 'pie',
  61. /**
  62. * An item chart is an infographic chart where a number of items are laid
  63. * out in either a rectangular or circular pattern. It can be used to
  64. * visualize counts within a group, or for the circular pattern, typically
  65. * a parliament.
  66. *
  67. * The circular layout has much in common with a pie chart. Many of the item
  68. * series options, like `center`, `size` and data label positioning, are
  69. * inherited from the pie series and don't apply for rectangular layouts.
  70. *
  71. * @sample highcharts/demo/parliament-chart
  72. * Parliament chart (circular item chart)
  73. * @sample highcharts/series-item/rectangular
  74. * Rectangular item chart
  75. * @sample highcharts/series-item/symbols
  76. * Infographic with symbols
  77. *
  78. * @extends plotOptions.pie
  79. * @since 7.1.0
  80. * @product highcharts
  81. * @excluding borderColor, borderWidth, depth, linecap, shadow,
  82. * slicedOffset
  83. * @requires modules/item-series
  84. * @optionparent plotOptions.item
  85. */
  86. {
  87. /**
  88. * In circular view, the end angle of the item layout, in degrees where
  89. * 0 is up.
  90. *
  91. * @sample highcharts/demo/parliament-chart
  92. * Parliament chart
  93. * @type {undefined|number}
  94. */
  95. endAngle: void 0,
  96. /**
  97. * In circular view, the size of the inner diameter of the circle. Can
  98. * be a percentage or pixel value. Percentages are relative to the outer
  99. * perimeter. Pixel values are given as integers.
  100. *
  101. * If the `rows` option is set, it overrides the `innerSize` setting.
  102. *
  103. * @sample highcharts/demo/parliament-chart
  104. * Parliament chart
  105. * @type {string|number}
  106. */
  107. innerSize: '40%',
  108. /**
  109. * The padding between the items, given in relative size where the size
  110. * of the item is 1.
  111. * @type {number}
  112. */
  113. itemPadding: 0.1,
  114. /**
  115. * The layout of the items in rectangular view. Can be either
  116. * `horizontal` or `vertical`.
  117. * @sample highcharts/series-item/symbols
  118. * Horizontal layout
  119. * @type {string}
  120. */
  121. layout: 'vertical',
  122. /**
  123. * @extends plotOptions.series.marker
  124. */
  125. marker: merge(H.defaultOptions.plotOptions.line.marker, {
  126. radius: null
  127. }),
  128. /**
  129. * The number of rows to display in the rectangular or circular view. If
  130. * the `innerSize` is set, it will be overridden by the `rows` setting.
  131. *
  132. * @sample highcharts/series-item/rows-columns
  133. * Fixed row count
  134. * @type {number}
  135. */
  136. rows: void 0,
  137. showInLegend: true,
  138. /**
  139. * In circular view, the start angle of the item layout, in degrees
  140. * where 0 is up.
  141. *
  142. * @sample highcharts/demo/parliament-chart
  143. * Parliament chart
  144. * @type {undefined|number}
  145. */
  146. startAngle: void 0
  147. },
  148. // Prototype members
  149. {
  150. translate: function () {
  151. if (!this.slots) {
  152. this.slots = [];
  153. }
  154. if (isNumber(this.options.startAngle) &&
  155. isNumber(this.options.endAngle)) {
  156. H.seriesTypes.pie.prototype.translate.call(this);
  157. this.slots = this.getSlots();
  158. }
  159. else {
  160. this.generatePoints();
  161. fireEvent(this, 'afterTranslate');
  162. }
  163. },
  164. // Get the semi-circular slots
  165. getSlots: function () {
  166. var center = this.center, diameter = center[2], innerSize = center[3], row, slots = this.slots, x, y, rowRadius, rowLength, colCount, increment, angle, col, itemSize = 0, rowCount, fullAngle = (this.endAngleRad - this.startAngleRad), itemCount = Number.MAX_VALUE, finalItemCount, rows, testRows, rowsOption = this.options.rows,
  167. // How many rows (arcs) should be used
  168. rowFraction = (diameter - innerSize) / diameter;
  169. // Increase the itemSize until we find the best fit
  170. while (itemCount > this.total) {
  171. finalItemCount = itemCount;
  172. // Reset
  173. slots.length = 0;
  174. itemCount = 0;
  175. // Now rows is the last successful run
  176. rows = testRows;
  177. testRows = [];
  178. itemSize++;
  179. // Total number of rows (arcs) from the center to the
  180. // perimeter
  181. rowCount = diameter / itemSize / 2;
  182. if (rowsOption) {
  183. innerSize = ((rowCount - rowsOption) / rowCount) * diameter;
  184. if (innerSize >= 0) {
  185. rowCount = rowsOption;
  186. // If innerSize is negative, we are trying to set too
  187. // many rows in the rows option, so fall back to
  188. // treating it as innerSize 0
  189. }
  190. else {
  191. innerSize = 0;
  192. rowFraction = 1;
  193. }
  194. }
  195. else {
  196. rowCount = Math.floor(rowCount * rowFraction);
  197. }
  198. for (row = rowCount; row > 0; row--) {
  199. rowRadius = (innerSize + (row / rowCount) *
  200. (diameter - innerSize - itemSize)) / 2;
  201. rowLength = fullAngle * rowRadius;
  202. colCount = Math.ceil(rowLength / itemSize);
  203. testRows.push({
  204. rowRadius: rowRadius,
  205. rowLength: rowLength,
  206. colCount: colCount
  207. });
  208. itemCount += colCount + 1;
  209. }
  210. }
  211. if (!rows) {
  212. return;
  213. }
  214. // We now have more slots than we have total items. Loop over
  215. // the rows and remove the last slot until the count is correct.
  216. // For each iteration we sort the last slot by the angle, and
  217. // remove those with the highest angles.
  218. var overshoot = finalItemCount - this.total;
  219. /**
  220. * @private
  221. * @param {Highcharts.ItemRowContainerObject} item
  222. * Wrapped object with angle and row
  223. * @return {void}
  224. */
  225. function cutOffRow(item) {
  226. if (overshoot > 0) {
  227. item.row.colCount--;
  228. overshoot--;
  229. }
  230. }
  231. while (overshoot > 0) {
  232. rows
  233. // Return a simplified representation of the angle of
  234. // the last slot within each row.
  235. .map(function (row) {
  236. return {
  237. angle: row.colCount / row.rowLength,
  238. row: row
  239. };
  240. })
  241. // Sort by the angles...
  242. .sort(function (a, b) {
  243. return b.angle - a.angle;
  244. })
  245. // ...so that we can ignore the items with the lowest
  246. // angles...
  247. .slice(0, Math.min(overshoot, Math.ceil(rows.length / 2)))
  248. // ...and remove the ones with the highest angles
  249. .forEach(cutOffRow);
  250. }
  251. rows.forEach(function (row) {
  252. var rowRadius = row.rowRadius, colCount = row.colCount;
  253. increment = colCount ? fullAngle / colCount : 0;
  254. for (col = 0; col <= colCount; col += 1) {
  255. angle = this.startAngleRad + col * increment;
  256. x = center[0] + Math.cos(angle) * rowRadius;
  257. y = center[1] + Math.sin(angle) * rowRadius;
  258. slots.push({ x: x, y: y, angle: angle });
  259. }
  260. }, this);
  261. // Sort by angle
  262. slots.sort(function (a, b) {
  263. return a.angle - b.angle;
  264. });
  265. this.itemSize = itemSize;
  266. return slots;
  267. },
  268. getRows: function () {
  269. var rows = this.options.rows, cols, ratio;
  270. // Get the row count that gives the most square cells
  271. if (!rows) {
  272. ratio = this.chart.plotWidth / this.chart.plotHeight;
  273. rows = Math.sqrt(this.total);
  274. if (ratio > 1) {
  275. rows = Math.ceil(rows);
  276. while (rows > 0) {
  277. cols = this.total / rows;
  278. if (cols / rows > ratio) {
  279. break;
  280. }
  281. rows--;
  282. }
  283. }
  284. else {
  285. rows = Math.floor(rows);
  286. while (rows < this.total) {
  287. cols = this.total / rows;
  288. if (cols / rows < ratio) {
  289. break;
  290. }
  291. rows++;
  292. }
  293. }
  294. }
  295. return rows;
  296. },
  297. drawPoints: function () {
  298. var series = this, options = this.options, renderer = series.chart.renderer, seriesMarkerOptions = options.marker, borderWidth = this.borderWidth, crisp = borderWidth % 2 ? 0.5 : 1, i = 0, rows = this.getRows(), cols = Math.ceil(this.total / rows), cellWidth = this.chart.plotWidth / cols, cellHeight = this.chart.plotHeight / rows, itemSize = this.itemSize || Math.min(cellWidth, cellHeight);
  299. /*
  300. this.slots.forEach(slot => {
  301. this.chart.renderer.circle(slot.x, slot.y, 6)
  302. .attr({
  303. fill: 'silver'
  304. })
  305. .add(this.group);
  306. });
  307. //*/
  308. this.points.forEach(function (point) {
  309. var attr, graphics, pointAttr, pointMarkerOptions = point.marker || {}, symbol = (pointMarkerOptions.symbol ||
  310. seriesMarkerOptions.symbol), r = pick(pointMarkerOptions.radius, seriesMarkerOptions.radius), size = defined(r) ? 2 * r : itemSize, padding = size * options.itemPadding, x, y, width, height;
  311. point.graphics = graphics = point.graphics || {};
  312. if (!series.chart.styledMode) {
  313. pointAttr = series.pointAttribs(point, point.selected && 'select');
  314. }
  315. if (!point.isNull && point.visible) {
  316. if (!point.graphic) {
  317. point.graphic = renderer.g('point')
  318. .add(series.group);
  319. }
  320. for (var val = 0; val < point.y; val++) {
  321. // Semi-circle
  322. if (series.center && series.slots) {
  323. // Fill up the slots from left to right
  324. var slot = series.slots.shift();
  325. x = slot.x - itemSize / 2;
  326. y = slot.y - itemSize / 2;
  327. }
  328. else if (options.layout === 'horizontal') {
  329. x = cellWidth * (i % cols);
  330. y = cellHeight * Math.floor(i / cols);
  331. }
  332. else {
  333. x = cellWidth * Math.floor(i / rows);
  334. y = cellHeight * (i % rows);
  335. }
  336. x += padding;
  337. y += padding;
  338. width = Math.round(size - 2 * padding);
  339. height = width;
  340. if (series.options.crisp) {
  341. x = Math.round(x) - crisp;
  342. y = Math.round(y) + crisp;
  343. }
  344. attr = {
  345. x: x,
  346. y: y,
  347. width: width,
  348. height: height
  349. };
  350. if (typeof r !== 'undefined') {
  351. attr.r = r;
  352. }
  353. if (graphics[val]) {
  354. graphics[val].animate(attr);
  355. }
  356. else {
  357. graphics[val] = renderer
  358. .symbol(symbol, null, null, null, null, {
  359. backgroundSize: 'within'
  360. })
  361. .attr(extend(attr, pointAttr))
  362. .add(point.graphic);
  363. }
  364. graphics[val].isActive = true;
  365. i++;
  366. }
  367. }
  368. objectEach(graphics, function (graphic, key) {
  369. if (!graphic.isActive) {
  370. graphic.destroy();
  371. delete graphics[key];
  372. }
  373. else {
  374. graphic.isActive = false;
  375. }
  376. });
  377. });
  378. },
  379. drawDataLabels: function () {
  380. if (this.center && this.slots) {
  381. H.seriesTypes.pie.prototype.drawDataLabels.call(this);
  382. // else, it's just a dot chart with no natural place to put the
  383. // data labels
  384. }
  385. else {
  386. this.points.forEach(function (point) {
  387. point.destroyElements({ dataLabel: 1 });
  388. });
  389. }
  390. },
  391. // Fade in the whole chart
  392. animate: function (init) {
  393. if (init) {
  394. this.group.attr({
  395. opacity: 0
  396. });
  397. }
  398. else {
  399. this.group.animate({
  400. opacity: 1
  401. }, this.options.animation);
  402. this.animate = null;
  403. }
  404. }
  405. },
  406. // Point class
  407. {
  408. connectorShapes: piePoint.connectorShapes,
  409. getConnectorPath: piePoint.getConnectorPath,
  410. setVisible: piePoint.setVisible,
  411. getTranslate: piePoint.getTranslate
  412. });
  413. /**
  414. * An `item` series. If the [type](#series.item.type) option is not specified,
  415. * it is inherited from [chart.type](#chart.type).
  416. *
  417. * @extends series,plotOptions.item
  418. * @excluding dataParser, dataURL, stack, xAxis, yAxis
  419. * @product highcharts
  420. * @requires modules/item-series
  421. * @apioption series.item
  422. */
  423. /**
  424. * An array of data points for the series. For the `item` series type,
  425. * points can be given in the following ways:
  426. *
  427. * 1. An array of numerical values. In this case, the numerical values will be
  428. * interpreted as `y` options. Example:
  429. * ```js
  430. * data: [0, 5, 3, 5]
  431. * ```
  432. *
  433. * 2. An array of objects with named values. The following snippet shows only a
  434. * few settings, see the complete options set below. If the total number of
  435. * data points exceeds the series'
  436. * [turboThreshold](#series.item.turboThreshold),
  437. * this option is not available.
  438. * ```js
  439. * data: [{
  440. * y: 1,
  441. * name: "Point2",
  442. * color: "#00FF00"
  443. * }, {
  444. * y: 7,
  445. * name: "Point1",
  446. * color: "#FF00FF"
  447. * }]
  448. * ```
  449. *
  450. * @sample {highcharts} highcharts/chart/reflow-true/
  451. * Numerical values
  452. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  453. * Arrays of numeric x and y
  454. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  455. * Arrays of datetime x and y
  456. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  457. * Arrays of point.name and y
  458. * @sample {highcharts} highcharts/series/data-array-of-objects/
  459. * Config objects
  460. *
  461. * @type {Array<number|Array<string,(number|null)>|null|*>}
  462. * @extends series.pie.data
  463. * @excludes sliced
  464. * @product highcharts
  465. * @apioption series.item.data
  466. */
  467. /**
  468. * The sequential index of the data point in the legend.
  469. *
  470. * @type {number}
  471. * @product highcharts
  472. * @apioption series.pie.data.legendIndex
  473. */
  474. ''; // adds the doclets above to the transpiled file
  475. });
  476. _registerModule(_modules, 'masters/modules/item-series.src.js', [], function () {
  477. });
  478. }));