VectorSeries.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. /* *
  2. *
  3. * Vector plot series module
  4. *
  5. * (c) 2010-2021 Torstein Honsi
  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 A from '../../Core/Animation/AnimationUtilities.js';
  27. var animObject = A.animObject;
  28. import H from '../../Core/Globals.js';
  29. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  30. var Series = SeriesRegistry.series, ScatterSeries = SeriesRegistry.seriesTypes.scatter;
  31. import U from '../../Core/Utilities.js';
  32. var arrayMax = U.arrayMax, extend = U.extend, merge = U.merge, pick = U.pick;
  33. /* *
  34. *
  35. * Class
  36. *
  37. * */
  38. /**
  39. * The vector series class.
  40. *
  41. * @private
  42. * @class
  43. * @name Highcharts.seriesTypes.vector
  44. *
  45. * @augments Highcharts.seriesTypes.scatter
  46. */
  47. var VectorSeries = /** @class */ (function (_super) {
  48. __extends(VectorSeries, _super);
  49. function VectorSeries() {
  50. /* *
  51. *
  52. * Static Properties
  53. *
  54. * */
  55. var _this = _super !== null && _super.apply(this, arguments) || this;
  56. /* *
  57. *
  58. * Properties
  59. *
  60. * */
  61. _this.data = void 0;
  62. _this.lengthMax = void 0;
  63. _this.options = void 0;
  64. _this.points = void 0;
  65. return _this;
  66. /* eslint-enable valid-jsdoc */
  67. }
  68. /* *
  69. *
  70. * Functions
  71. *
  72. * */
  73. /* eslint-disable valid-jsdoc */
  74. /**
  75. * Fade in the arrows on initializing series.
  76. * @private
  77. */
  78. VectorSeries.prototype.animate = function (init) {
  79. if (init) {
  80. this.markerGroup.attr({
  81. opacity: 0.01
  82. });
  83. }
  84. else {
  85. this.markerGroup.animate({
  86. opacity: 1
  87. }, animObject(this.options.animation));
  88. }
  89. };
  90. /**
  91. * Create a single arrow. It is later rotated around the zero
  92. * centerpoint.
  93. * @private
  94. */
  95. VectorSeries.prototype.arrow = function (point) {
  96. var path, fraction = point.length / this.lengthMax, u = fraction * this.options.vectorLength / 20, o = {
  97. start: 10 * u,
  98. center: 0,
  99. end: -10 * u
  100. }[this.options.rotationOrigin] || 0;
  101. // The stem and the arrow head. Draw the arrow first with rotation
  102. // 0, which is the arrow pointing down (vector from north to south).
  103. path = [
  104. ['M', 0, 7 * u + o],
  105. ['L', -1.5 * u, 7 * u + o],
  106. ['L', 0, 10 * u + o],
  107. ['L', 1.5 * u, 7 * u + o],
  108. ['L', 0, 7 * u + o],
  109. ['L', 0, -10 * u + o] // top
  110. ];
  111. return path;
  112. };
  113. /*
  114. drawLegendSymbol: function (legend, item) {
  115. var options = legend.options,
  116. symbolHeight = legend.symbolHeight,
  117. square = options.squareSymbol,
  118. symbolWidth = square ? symbolHeight : legend.symbolWidth,
  119. path = this.arrow.call({
  120. lengthMax: 1,
  121. options: {
  122. vectorLength: symbolWidth
  123. }
  124. }, {
  125. length: 1
  126. });
  127. item.legendLine = this.chart.renderer.path(path)
  128. .addClass('highcharts-point')
  129. .attr({
  130. zIndex: 3,
  131. translateY: symbolWidth / 2,
  132. rotation: 270,
  133. 'stroke-width': 1,
  134. 'stroke': 'black'
  135. }).add(item.legendGroup);
  136. },
  137. */
  138. /**
  139. * @private
  140. */
  141. VectorSeries.prototype.drawPoints = function () {
  142. var chart = this.chart;
  143. this.points.forEach(function (point) {
  144. var plotX = point.plotX, plotY = point.plotY;
  145. if (this.options.clip === false ||
  146. chart.isInsidePlot(plotX, plotY, chart.inverted)) {
  147. if (!point.graphic) {
  148. point.graphic = this.chart.renderer
  149. .path()
  150. .add(this.markerGroup)
  151. .addClass('highcharts-point ' +
  152. 'highcharts-color-' +
  153. pick(point.colorIndex, point.series.colorIndex));
  154. }
  155. point.graphic
  156. .attr({
  157. d: this.arrow(point),
  158. translateX: plotX,
  159. translateY: plotY,
  160. rotation: point.direction
  161. });
  162. if (!this.chart.styledMode) {
  163. point.graphic
  164. .attr(this.pointAttribs(point));
  165. }
  166. }
  167. else if (point.graphic) {
  168. point.graphic = point.graphic.destroy();
  169. }
  170. }, this);
  171. };
  172. /**
  173. * Get presentational attributes.
  174. * @private
  175. */
  176. VectorSeries.prototype.pointAttribs = function (point, state) {
  177. var options = this.options, stroke = point.color || this.color, strokeWidth = this.options.lineWidth;
  178. if (state) {
  179. stroke = options.states[state].color || stroke;
  180. strokeWidth =
  181. (options.states[state].lineWidth || strokeWidth) +
  182. (options.states[state].lineWidthPlus || 0);
  183. }
  184. return {
  185. 'stroke': stroke,
  186. 'stroke-width': strokeWidth
  187. };
  188. };
  189. /**
  190. * @private
  191. */
  192. VectorSeries.prototype.translate = function () {
  193. Series.prototype.translate.call(this);
  194. this.lengthMax = arrayMax(this.lengthData);
  195. };
  196. /**
  197. * A vector plot is a type of cartesian chart where each point has an X and
  198. * Y position, a length and a direction. Vectors are drawn as arrows.
  199. *
  200. * @sample {highcharts|highstock} highcharts/demo/vector-plot/
  201. * Vector pot
  202. *
  203. * @since 6.0.0
  204. * @extends plotOptions.scatter
  205. * @excluding boostThreshold, marker, connectEnds, connectNulls,
  206. * cropThreshold, dashStyle, dragDrop, gapSize, gapUnit,
  207. * dataGrouping, linecap, shadow, stacking, step, jitter,
  208. * boostBlending
  209. * @product highcharts highstock
  210. * @requires modules/vector
  211. * @optionparent plotOptions.vector
  212. */
  213. VectorSeries.defaultOptions = merge(ScatterSeries.defaultOptions, {
  214. /**
  215. * The line width for each vector arrow.
  216. */
  217. lineWidth: 2,
  218. /**
  219. * @ignore
  220. */
  221. marker: null,
  222. /**
  223. * What part of the vector it should be rotated around. Can be one of
  224. * `start`, `center` and `end`. When `start`, the vectors will start
  225. * from the given [x, y] position, and when `end` the vectors will end
  226. * in the [x, y] position.
  227. *
  228. * @sample highcharts/plotoptions/vector-rotationorigin-start/
  229. * Rotate from start
  230. *
  231. * @validvalue ["start", "center", "end"]
  232. */
  233. rotationOrigin: 'center',
  234. states: {
  235. hover: {
  236. /**
  237. * Additonal line width for the vector errors when they are
  238. * hovered.
  239. */
  240. lineWidthPlus: 1
  241. }
  242. },
  243. tooltip: {
  244. /**
  245. * @default [{point.x}, {point.y}] Length: {point.length} Direction: {point.direction}°
  246. */
  247. pointFormat: '<b>[{point.x}, {point.y}]</b><br/>Length: <b>{point.length}</b><br/>Direction: <b>{point.direction}\u00B0</b><br/>'
  248. },
  249. /**
  250. * Maximum length of the arrows in the vector plot. The individual arrow
  251. * length is computed between 0 and this value.
  252. */
  253. vectorLength: 20
  254. });
  255. return VectorSeries;
  256. }(ScatterSeries));
  257. extend(VectorSeries.prototype, {
  258. /**
  259. * @ignore
  260. * @deprecated
  261. */
  262. drawGraph: H.noop,
  263. /**
  264. * @ignore
  265. * @deprecated
  266. */
  267. getSymbol: H.noop,
  268. /**
  269. * @ignore
  270. * @deprecated
  271. */
  272. markerAttribs: H.noop,
  273. parallelArrays: ['x', 'y', 'length', 'direction'],
  274. pointArrayMap: ['y', 'length', 'direction']
  275. });
  276. SeriesRegistry.registerSeriesType('vector', VectorSeries);
  277. /* *
  278. *
  279. * Default Export
  280. *
  281. * */
  282. export default VectorSeries;
  283. /* *
  284. *
  285. * API Options
  286. *
  287. * */
  288. /**
  289. * A `vector` series. If the [type](#series.vector.type) option is not
  290. * specified, it is inherited from [chart.type](#chart.type).
  291. *
  292. * @extends series,plotOptions.vector
  293. * @excluding dataParser, dataURL, boostThreshold, boostBlending
  294. * @product highcharts highstock
  295. * @requires modules/vector
  296. * @apioption series.vector
  297. */
  298. /**
  299. * An array of data points for the series. For the `vector` series type,
  300. * points can be given in the following ways:
  301. *
  302. * 1. An array of arrays with 4 values. In this case, the values correspond to
  303. * to `x,y,length,direction`. If the first value is a string, it is applied
  304. * as the name of the point, and the `x` value is inferred.
  305. * ```js
  306. * data: [
  307. * [0, 0, 10, 90],
  308. * [0, 1, 5, 180],
  309. * [1, 1, 2, 270]
  310. * ]
  311. * ```
  312. *
  313. * 2. An array of objects with named values. The following snippet shows only a
  314. * few settings, see the complete options set below. If the total number of
  315. * data points exceeds the series'
  316. * [turboThreshold](#series.area.turboThreshold), this option is not
  317. * available.
  318. * ```js
  319. * data: [{
  320. * x: 0,
  321. * y: 0,
  322. * name: "Point2",
  323. * length: 10,
  324. * direction: 90
  325. * }, {
  326. * x: 1,
  327. * y: 1,
  328. * name: "Point1",
  329. * direction: 270
  330. * }]
  331. * ```
  332. *
  333. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  334. * Arrays of numeric x and y
  335. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  336. * Arrays of datetime x and y
  337. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  338. * Arrays of point.name and y
  339. * @sample {highcharts} highcharts/series/data-array-of-objects/
  340. * Config objects
  341. *
  342. * @type {Array<Array<(number|string),number,number,number>|*>}
  343. * @extends series.line.data
  344. * @product highcharts highstock
  345. * @apioption series.vector.data
  346. */
  347. /**
  348. * The length of the vector. The rendered length will relate to the
  349. * `vectorLength` setting.
  350. *
  351. * @type {number}
  352. * @product highcharts highstock
  353. * @apioption series.vector.data.length
  354. */
  355. /**
  356. * The vector direction in degrees, where 0 is north (pointing towards south).
  357. *
  358. * @type {number}
  359. * @product highcharts highstock
  360. * @apioption series.vector.data.direction
  361. */
  362. ''; // adds doclets above to the transpiled file