item-series.src.js 16 KB

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