WordcloudSeries.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /* *
  2. *
  3. * Experimental Highcharts module which enables visualization of a word cloud.
  4. *
  5. * (c) 2016-2021 Highsoft AS
  6. * Authors: Jon Arild Nygard
  7. *
  8. * License: www.highcharts.com/license
  9. *
  10. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  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 H from '../../Core/Globals.js';
  27. var noop = H.noop;
  28. import PolygonMixin from '../../Mixins/Polygon.js';
  29. var getBoundingBoxFromPolygon = PolygonMixin.getBoundingBoxFromPolygon, getPolygon = PolygonMixin.getPolygon, isPolygonsColliding = PolygonMixin.isPolygonsColliding, rotate2DToOrigin = PolygonMixin.rotate2DToOrigin, rotate2DToPoint = PolygonMixin.rotate2DToPoint;
  30. import Series from '../../Core/Series/Series.js';
  31. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  32. var ColumnSeries = SeriesRegistry.seriesTypes.column;
  33. import U from '../../Core/Utilities.js';
  34. var extend = U.extend, find = U.find, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, merge = U.merge;
  35. import WordcloudPoint from './WordcloudPoint.js';
  36. import WordcloudUtils from './WordcloudUtils.js';
  37. /**
  38. * @private
  39. * @class
  40. * @name Highcharts.seriesTypes.wordcloud
  41. *
  42. * @augments Highcharts.Series
  43. */
  44. var WordcloudSeries = /** @class */ (function (_super) {
  45. __extends(WordcloudSeries, _super);
  46. function WordcloudSeries() {
  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. return _this;
  62. }
  63. /**
  64. *
  65. * Functions
  66. *
  67. */
  68. WordcloudSeries.prototype.bindAxes = function () {
  69. var wordcloudAxis = {
  70. endOnTick: false,
  71. gridLineWidth: 0,
  72. lineWidth: 0,
  73. maxPadding: 0,
  74. startOnTick: false,
  75. title: void 0,
  76. tickPositions: []
  77. };
  78. Series.prototype.bindAxes.call(this);
  79. extend(this.yAxis.options, wordcloudAxis);
  80. extend(this.xAxis.options, wordcloudAxis);
  81. };
  82. WordcloudSeries.prototype.pointAttribs = function (point, state) {
  83. var attribs = H.seriesTypes.column.prototype
  84. .pointAttribs.call(this, point, state);
  85. delete attribs.stroke;
  86. delete attribs['stroke-width'];
  87. return attribs;
  88. };
  89. /**
  90. * Calculates the fontSize of a word based on its weight.
  91. *
  92. * @private
  93. * @function Highcharts.Series#deriveFontSize
  94. *
  95. * @param {number} [relativeWeight=0]
  96. * The weight of the word, on a scale 0-1.
  97. *
  98. * @param {number} [maxFontSize=1]
  99. * The maximum font size of a word.
  100. *
  101. * @param {number} [minFontSize=1]
  102. * The minimum font size of a word.
  103. *
  104. * @return {number}
  105. * Returns the resulting fontSize of a word. If minFontSize is larger then
  106. * maxFontSize the result will equal minFontSize.
  107. */
  108. WordcloudSeries.prototype.deriveFontSize = function (relativeWeight, maxFontSize, minFontSize) {
  109. var weight = isNumber(relativeWeight) ? relativeWeight : 0, max = isNumber(maxFontSize) ? maxFontSize : 1, min = isNumber(minFontSize) ? minFontSize : 1;
  110. return Math.floor(Math.max(min, weight * max));
  111. };
  112. WordcloudSeries.prototype.drawPoints = function () {
  113. var series = this, hasRendered = series.hasRendered, xAxis = series.xAxis, yAxis = series.yAxis, chart = series.chart, group = series.group, options = series.options, animation = options.animation, allowExtendPlayingField = options.allowExtendPlayingField, renderer = chart.renderer, testElement = renderer.text().add(group), placed = [], placementStrategy = series.placementStrategy[options.placementStrategy], spiral, rotation = options.rotation, scale, weights = series.points.map(function (p) {
  114. return p.weight;
  115. }), maxWeight = Math.max.apply(null, weights),
  116. // concat() prevents from sorting the original array.
  117. data = series.points.concat().sort(function (a, b) {
  118. return b.weight - a.weight; // Sort descending
  119. }), field;
  120. // Reset the scale before finding the dimensions (#11993).
  121. // SVGGRaphicsElement.getBBox() (used in SVGElement.getBBox(boolean))
  122. // returns slightly different values for the same element depending on
  123. // whether it is rendered in a group which has already defined scale
  124. // (e.g. 6) or in the group without a scale (scale = 1).
  125. series.group.attr({
  126. scaleX: 1,
  127. scaleY: 1
  128. });
  129. // Get the dimensions for each word.
  130. // Used in calculating the playing field.
  131. data.forEach(function (point) {
  132. var relativeWeight = 1 / maxWeight * point.weight, fontSize = series.deriveFontSize(relativeWeight, options.maxFontSize, options.minFontSize), css = extend({
  133. fontSize: fontSize + 'px'
  134. }, options.style), bBox;
  135. testElement.css(css).attr({
  136. x: 0,
  137. y: 0,
  138. text: point.name
  139. });
  140. bBox = testElement.getBBox(true);
  141. point.dimensions = {
  142. height: bBox.height,
  143. width: bBox.width
  144. };
  145. });
  146. // Calculate the playing field.
  147. field = WordcloudUtils.getPlayingField(xAxis.len, yAxis.len, data);
  148. spiral = WordcloudUtils.getSpiral(series.spirals[options.spiral], {
  149. field: field
  150. });
  151. // Draw all the points.
  152. data.forEach(function (point) {
  153. var relativeWeight = 1 / maxWeight * point.weight, fontSize = series.deriveFontSize(relativeWeight, options.maxFontSize, options.minFontSize), css = extend({
  154. fontSize: fontSize + 'px'
  155. }, options.style), placement = placementStrategy(point, {
  156. data: data,
  157. field: field,
  158. placed: placed,
  159. rotation: rotation
  160. }), attr = extend(series.pointAttribs(point, (point.selected && 'select')), {
  161. align: 'center',
  162. 'alignment-baseline': 'middle',
  163. x: placement.x,
  164. y: placement.y,
  165. text: point.name,
  166. rotation: isNumber(placement.rotation) ?
  167. placement.rotation :
  168. void 0
  169. }), polygon = getPolygon(placement.x, placement.y, point.dimensions.width, point.dimensions.height, placement.rotation), rectangle = getBoundingBoxFromPolygon(polygon), delta = WordcloudUtils.intersectionTesting(point, {
  170. rectangle: rectangle,
  171. polygon: polygon,
  172. field: field,
  173. placed: placed,
  174. spiral: spiral,
  175. rotation: placement.rotation
  176. }), animate;
  177. // If there is no space for the word, extend the playing field.
  178. if (!delta && allowExtendPlayingField) {
  179. // Extend the playing field to fit the word.
  180. field = WordcloudUtils.extendPlayingField(field, rectangle);
  181. // Run intersection testing one more time to place the word.
  182. delta = WordcloudUtils.intersectionTesting(point, {
  183. rectangle: rectangle,
  184. polygon: polygon,
  185. field: field,
  186. placed: placed,
  187. spiral: spiral,
  188. rotation: placement.rotation
  189. });
  190. }
  191. // Check if point was placed, if so delete it, otherwise place it
  192. // on the correct positions.
  193. if (isObject(delta)) {
  194. attr.x = (attr.x || 0) + delta.x;
  195. attr.y = (attr.y || 0) + delta.y;
  196. rectangle.left += delta.x;
  197. rectangle.right += delta.x;
  198. rectangle.top += delta.y;
  199. rectangle.bottom += delta.y;
  200. field = WordcloudUtils.updateFieldBoundaries(field, rectangle);
  201. placed.push(point);
  202. point.isNull = false;
  203. point.isInside = true; // #15447
  204. }
  205. else {
  206. point.isNull = true;
  207. }
  208. if (animation) {
  209. // Animate to new positions
  210. animate = {
  211. x: attr.x,
  212. y: attr.y
  213. };
  214. // Animate from center of chart
  215. if (!hasRendered) {
  216. attr.x = 0;
  217. attr.y = 0;
  218. // or animate from previous position
  219. }
  220. else {
  221. delete attr.x;
  222. delete attr.y;
  223. }
  224. }
  225. point.draw({
  226. animatableAttribs: animate,
  227. attribs: attr,
  228. css: css,
  229. group: group,
  230. renderer: renderer,
  231. shapeArgs: void 0,
  232. shapeType: 'text'
  233. });
  234. });
  235. // Destroy the element after use.
  236. testElement = testElement.destroy();
  237. // Scale the series group to fit within the plotArea.
  238. scale = WordcloudUtils.getScale(xAxis.len, yAxis.len, field);
  239. series.group.attr({
  240. scaleX: scale,
  241. scaleY: scale
  242. });
  243. };
  244. WordcloudSeries.prototype.hasData = function () {
  245. var series = this;
  246. return (isObject(series) &&
  247. series.visible === true &&
  248. isArray(series.points) &&
  249. series.points.length > 0);
  250. };
  251. WordcloudSeries.prototype.getPlotBox = function () {
  252. var series = this, chart = series.chart, inverted = chart.inverted,
  253. // Swap axes for inverted (#2339)
  254. xAxis = series[(inverted ? 'yAxis' : 'xAxis')], yAxis = series[(inverted ? 'xAxis' : 'yAxis')], width = xAxis ? xAxis.len : chart.plotWidth, height = yAxis ? yAxis.len : chart.plotHeight, x = xAxis ? xAxis.left : chart.plotLeft, y = yAxis ? yAxis.top : chart.plotTop;
  255. return {
  256. translateX: x + (width / 2),
  257. translateY: y + (height / 2),
  258. scaleX: 1,
  259. scaleY: 1
  260. };
  261. };
  262. /**
  263. * A word cloud is a visualization of a set of words, where the size and
  264. * placement of a word is determined by how it is weighted.
  265. *
  266. * @sample highcharts/demo/wordcloud
  267. * Word Cloud chart
  268. *
  269. * @extends plotOptions.column
  270. * @excluding allAreas, boostThreshold, clip, colorAxis, compare,
  271. * compareBase, crisp, cropTreshold, dataGrouping, dataLabels,
  272. * depth, dragDrop, edgeColor, findNearestPointBy,
  273. * getExtremesFromAll, grouping, groupPadding, groupZPadding,
  274. * joinBy, maxPointWidth, minPointLength, navigatorOptions,
  275. * negativeColor, pointInterval, pointIntervalUnit,
  276. * pointPadding, pointPlacement, pointRange, pointStart,
  277. * pointWidth, pointStart, pointWidth, shadow, showCheckbox,
  278. * showInNavigator, softThreshold, stacking, threshold,
  279. * zoneAxis, zones, dataSorting, boostBlending
  280. * @product highcharts
  281. * @since 6.0.0
  282. * @requires modules/wordcloud
  283. * @optionparent plotOptions.wordcloud
  284. */
  285. WordcloudSeries.defaultOptions = merge(ColumnSeries.defaultOptions, {
  286. /**
  287. * If there is no space for a word on the playing field, then this
  288. * option will allow the playing field to be extended to fit the word.
  289. * If false then the word will be dropped from the visualization.
  290. *
  291. * NB! This option is currently not decided to be published in the API,
  292. * and is therefore marked as private.
  293. *
  294. * @private
  295. */
  296. allowExtendPlayingField: true,
  297. animation: {
  298. /** @internal */
  299. duration: 500
  300. },
  301. borderWidth: 0,
  302. clip: false,
  303. colorByPoint: true,
  304. /**
  305. * A threshold determining the minimum font size that can be applied to
  306. * a word.
  307. */
  308. minFontSize: 1,
  309. /**
  310. * The word with the largest weight will have a font size equal to this
  311. * value. The font size of a word is the ratio between its weight and
  312. * the largest occuring weight, multiplied with the value of
  313. * maxFontSize.
  314. */
  315. maxFontSize: 25,
  316. /**
  317. * This option decides which algorithm is used for placement, and
  318. * rotation of a word. The choice of algorith is therefore a crucial
  319. * part of the resulting layout of the wordcloud. It is possible for
  320. * users to add their own custom placement strategies for use in word
  321. * cloud. Read more about it in our
  322. * [documentation](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series#custom-placement-strategies)
  323. *
  324. * @validvalue: ["center", "random"]
  325. */
  326. placementStrategy: 'center',
  327. /**
  328. * Rotation options for the words in the wordcloud.
  329. *
  330. * @sample highcharts/plotoptions/wordcloud-rotation
  331. * Word cloud with rotation
  332. */
  333. rotation: {
  334. /**
  335. * The smallest degree of rotation for a word.
  336. */
  337. from: 0,
  338. /**
  339. * The number of possible orientations for a word, within the range
  340. * of `rotation.from` and `rotation.to`. Must be a number larger
  341. * than 0.
  342. */
  343. orientations: 2,
  344. /**
  345. * The largest degree of rotation for a word.
  346. */
  347. to: 90
  348. },
  349. showInLegend: false,
  350. /**
  351. * Spiral used for placing a word after the initial position
  352. * experienced a collision with either another word or the borders.
  353. * It is possible for users to add their own custom spiralling
  354. * algorithms for use in word cloud. Read more about it in our
  355. * [documentation](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series#custom-spiralling-algorithm)
  356. *
  357. * @validvalue: ["archimedean", "rectangular", "square"]
  358. */
  359. spiral: 'rectangular',
  360. /**
  361. * CSS styles for the words.
  362. *
  363. * @type {Highcharts.CSSObject}
  364. * @default {"fontFamily":"sans-serif", "fontWeight": "900"}
  365. */
  366. style: {
  367. /** @ignore-option */
  368. fontFamily: 'sans-serif',
  369. /** @ignore-option */
  370. fontWeight: '900',
  371. /** @ignore-option */
  372. whiteSpace: 'nowrap'
  373. },
  374. tooltip: {
  375. followPointer: true,
  376. pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.weight}</b><br/>'
  377. }
  378. });
  379. return WordcloudSeries;
  380. }(ColumnSeries));
  381. extend(WordcloudSeries.prototype, {
  382. animate: Series.prototype.animate,
  383. animateDrilldown: noop,
  384. animateDrillupFrom: noop,
  385. pointClass: WordcloudPoint,
  386. setClip: noop,
  387. // Strategies used for deciding rotation and initial position of a word. To
  388. // implement a custom strategy, have a look at the function random for
  389. // example.
  390. placementStrategy: {
  391. random: function (point, options) {
  392. var field = options.field, r = options.rotation;
  393. return {
  394. x: WordcloudUtils.getRandomPosition(field.width) - (field.width / 2),
  395. y: WordcloudUtils.getRandomPosition(field.height) - (field.height / 2),
  396. rotation: WordcloudUtils.getRotation(r.orientations, point.index, r.from, r.to)
  397. };
  398. },
  399. center: function (point, options) {
  400. var r = options.rotation;
  401. return {
  402. x: 0,
  403. y: 0,
  404. rotation: WordcloudUtils.getRotation(r.orientations, point.index, r.from, r.to)
  405. };
  406. }
  407. },
  408. pointArrayMap: ['weight'],
  409. // Spirals used for placing a word after the initial position experienced a
  410. // collision with either another word or the borders. To implement a custom
  411. // spiral, look at the function archimedeanSpiral for example.
  412. spirals: {
  413. 'archimedean': WordcloudUtils.archimedeanSpiral,
  414. 'rectangular': WordcloudUtils.rectangularSpiral,
  415. 'square': WordcloudUtils.squareSpiral
  416. },
  417. utils: {
  418. extendPlayingField: WordcloudUtils.extendPlayingField,
  419. getRotation: WordcloudUtils.getRotation,
  420. isPolygonsColliding: isPolygonsColliding,
  421. rotate2DToOrigin: rotate2DToOrigin,
  422. rotate2DToPoint: rotate2DToPoint
  423. }
  424. });
  425. SeriesRegistry.registerSeriesType('wordcloud', WordcloudSeries);
  426. /* *
  427. *
  428. * Export Default
  429. *
  430. * */
  431. export default WordcloudSeries;
  432. /* *
  433. *
  434. * API Options
  435. *
  436. * */
  437. /**
  438. * A `wordcloud` series. If the [type](#series.wordcloud.type) option is not
  439. * specified, it is inherited from [chart.type](#chart.type).
  440. *
  441. * @extends series,plotOptions.wordcloud
  442. * @exclude dataSorting, boostThreshold, boostBlending
  443. * @product highcharts
  444. * @requires modules/wordcloud
  445. * @apioption series.wordcloud
  446. */
  447. /**
  448. * An array of data points for the series. For the `wordcloud` series type,
  449. * points can be given in the following ways:
  450. *
  451. * 1. An array of arrays with 2 values. In this case, the values correspond to
  452. * `name,weight`.
  453. * ```js
  454. * data: [
  455. * ['Lorem', 4],
  456. * ['Ipsum', 1]
  457. * ]
  458. * ```
  459. *
  460. * 2. An array of objects with named values. The following snippet shows only a
  461. * few settings, see the complete options set below. If the total number of
  462. * data points exceeds the series'
  463. * [turboThreshold](#series.arearange.turboThreshold), this option is not
  464. * available.
  465. * ```js
  466. * data: [{
  467. * name: "Lorem",
  468. * weight: 4
  469. * }, {
  470. * name: "Ipsum",
  471. * weight: 1
  472. * }]
  473. * ```
  474. *
  475. * @type {Array<Array<string,number>|*>}
  476. * @extends series.line.data
  477. * @excluding drilldown, marker, x, y
  478. * @product highcharts
  479. * @apioption series.wordcloud.data
  480. */
  481. /**
  482. * The name decides the text for a word.
  483. *
  484. * @type {string}
  485. * @since 6.0.0
  486. * @product highcharts
  487. * @apioption series.sunburst.data.name
  488. */
  489. /**
  490. * The weighting of a word. The weight decides the relative size of a word
  491. * compared to the rest of the collection.
  492. *
  493. * @type {number}
  494. * @since 6.0.0
  495. * @product highcharts
  496. * @apioption series.sunburst.data.weight
  497. */
  498. ''; // detach doclets above