GaugeSeries.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  1. /* *
  2. *
  3. * (c) 2010-2021 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. var __extends = (this && this.__extends) || (function () {
  12. var extendStatics = function (d, b) {
  13. extendStatics = Object.setPrototypeOf ||
  14. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  15. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  16. return extendStatics(d, b);
  17. };
  18. return function (d, b) {
  19. extendStatics(d, b);
  20. function __() { this.constructor = d; }
  21. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  22. };
  23. })();
  24. import GaugePoint from './GaugePoint.js';
  25. import H from '../../Core/Globals.js';
  26. var noop = H.noop;
  27. import palette from '../../Core/Color/Palette.js';
  28. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  29. var Series = SeriesRegistry.series, ColumnSeries = SeriesRegistry.seriesTypes.column;
  30. import U from '../../Core/Utilities.js';
  31. var clamp = U.clamp, isNumber = U.isNumber, extend = U.extend, merge = U.merge, pick = U.pick, pInt = U.pInt;
  32. /* *
  33. *
  34. * Class
  35. *
  36. * */
  37. /**
  38. *
  39. * The `gauge` series type
  40. *
  41. * @private
  42. * @class
  43. * @name Highcharts.seriesTypes.map
  44. *
  45. * @augments Highcharts.Series
  46. */
  47. var GaugeSeries = /** @class */ (function (_super) {
  48. __extends(GaugeSeries, _super);
  49. function GaugeSeries() {
  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.points = void 0;
  63. _this.options = void 0;
  64. _this.yAxis = void 0;
  65. return _this;
  66. /* eslint-enable valid-jsdoc */
  67. }
  68. /* *
  69. *
  70. * Functions
  71. *
  72. * */
  73. /* eslint-disable valid-jsdoc */
  74. /**
  75. * Calculate paths etc
  76. * @private
  77. */
  78. GaugeSeries.prototype.translate = function () {
  79. var series = this, yAxis = series.yAxis, options = series.options, center = yAxis.center;
  80. series.generatePoints();
  81. series.points.forEach(function (point) {
  82. var dialOptions = merge(options.dial, point.dial), radius = ((pInt(pick(dialOptions.radius, '80%')) * center[2]) /
  83. 200), baseLength = ((pInt(pick(dialOptions.baseLength, '70%')) * radius) /
  84. 100), rearLength = ((pInt(pick(dialOptions.rearLength, '10%')) * radius) /
  85. 100), baseWidth = dialOptions.baseWidth || 3, topWidth = dialOptions.topWidth || 1, overshoot = options.overshoot, rotation = yAxis.startAngleRad + yAxis.translate(point.y, null, null, null, true);
  86. // Handle the wrap and overshoot options
  87. if (isNumber(overshoot) || options.wrap === false) {
  88. overshoot = isNumber(overshoot) ?
  89. (overshoot / 180 * Math.PI) : 0;
  90. rotation = clamp(rotation, yAxis.startAngleRad - overshoot, yAxis.endAngleRad + overshoot);
  91. }
  92. rotation = rotation * 180 / Math.PI;
  93. point.shapeType = 'path';
  94. var d = dialOptions.path || [
  95. ['M', -rearLength, -baseWidth / 2],
  96. ['L', baseLength, -baseWidth / 2],
  97. ['L', radius, -topWidth / 2],
  98. ['L', radius, topWidth / 2],
  99. ['L', baseLength, baseWidth / 2],
  100. ['L', -rearLength, baseWidth / 2],
  101. ['Z']
  102. ];
  103. point.shapeArgs = {
  104. d: d,
  105. translateX: center[0],
  106. translateY: center[1],
  107. rotation: rotation
  108. };
  109. // Positions for data label
  110. point.plotX = center[0];
  111. point.plotY = center[1];
  112. });
  113. };
  114. /**
  115. * Draw the points where each point is one needle
  116. * @private
  117. */
  118. GaugeSeries.prototype.drawPoints = function () {
  119. var series = this, chart = series.chart, center = series.yAxis.center, pivot = series.pivot, options = series.options, pivotOptions = options.pivot, renderer = chart.renderer;
  120. series.points.forEach(function (point) {
  121. var graphic = point.graphic, shapeArgs = point.shapeArgs, d = shapeArgs.d, dialOptions = merge(options.dial, point.dial); // #1233
  122. if (graphic) {
  123. graphic.animate(shapeArgs);
  124. shapeArgs.d = d; // animate alters it
  125. }
  126. else {
  127. point.graphic =
  128. renderer[point.shapeType](shapeArgs)
  129. .attr({
  130. // required by VML when animation is false
  131. rotation: shapeArgs.rotation,
  132. zIndex: 1
  133. })
  134. .addClass('highcharts-dial')
  135. .add(series.group);
  136. }
  137. // Presentational attributes
  138. if (!chart.styledMode) {
  139. point.graphic[graphic ? 'animate' : 'attr']({
  140. stroke: dialOptions.borderColor || 'none',
  141. 'stroke-width': dialOptions.borderWidth || 0,
  142. fill: dialOptions.backgroundColor ||
  143. palette.neutralColor100
  144. });
  145. }
  146. });
  147. // Add or move the pivot
  148. if (pivot) {
  149. pivot.animate({
  150. translateX: center[0],
  151. translateY: center[1]
  152. });
  153. }
  154. else {
  155. series.pivot =
  156. renderer.circle(0, 0, pick(pivotOptions.radius, 5))
  157. .attr({
  158. zIndex: 2
  159. })
  160. .addClass('highcharts-pivot')
  161. .translate(center[0], center[1])
  162. .add(series.group);
  163. // Presentational attributes
  164. if (!chart.styledMode) {
  165. series.pivot.attr({
  166. 'stroke-width': pivotOptions.borderWidth || 0,
  167. stroke: pivotOptions.borderColor ||
  168. palette.neutralColor20,
  169. fill: pivotOptions.backgroundColor ||
  170. palette.neutralColor100
  171. });
  172. }
  173. }
  174. };
  175. /**
  176. * Animate the arrow up from startAngle
  177. * @private
  178. */
  179. GaugeSeries.prototype.animate = function (init) {
  180. var series = this;
  181. if (!init) {
  182. series.points.forEach(function (point) {
  183. var graphic = point.graphic;
  184. if (graphic) {
  185. // start value
  186. graphic.attr({
  187. rotation: series.yAxis.startAngleRad * 180 / Math.PI
  188. });
  189. // animate
  190. graphic.animate({
  191. rotation: point.shapeArgs.rotation
  192. }, series.options.animation);
  193. }
  194. });
  195. }
  196. };
  197. /**
  198. * @private
  199. */
  200. GaugeSeries.prototype.render = function () {
  201. this.group = this.plotGroup('group', 'series', this.visible ? 'visible' : 'hidden', this.options.zIndex, this.chart.seriesGroup);
  202. Series.prototype.render.call(this);
  203. this.group.clip(this.chart.clipRect);
  204. };
  205. /**
  206. * Extend the basic setData method by running processData and generatePoints
  207. * immediately, in order to access the points from the legend.
  208. * @private
  209. */
  210. GaugeSeries.prototype.setData = function (data, redraw) {
  211. Series.prototype.setData.call(this, data, false);
  212. this.processData();
  213. this.generatePoints();
  214. if (pick(redraw, true)) {
  215. this.chart.redraw();
  216. }
  217. };
  218. /**
  219. * Define hasData function for non-cartesian series.
  220. * Returns true if the series has points at all.
  221. * @private
  222. */
  223. GaugeSeries.prototype.hasData = function () {
  224. return !!this.points.length; // != 0
  225. };
  226. /**
  227. * Gauges are circular plots displaying one or more values with a dial
  228. * pointing to values along the perimeter.
  229. *
  230. * @sample highcharts/demo/gauge-speedometer/
  231. * Gauge chart
  232. *
  233. * @extends plotOptions.line
  234. * @excluding animationLimit, boostThreshold, colorAxis, colorKey,
  235. * connectEnds, connectNulls, cropThreshold, dashStyle,
  236. * dragDrop, findNearestPointBy, getExtremesFromAll, marker,
  237. * negativeColor, pointPlacement, shadow, softThreshold,
  238. * stacking, states, step, threshold, turboThreshold, xAxis,
  239. * zoneAxis, zones, dataSorting, boostBlending
  240. * @product highcharts
  241. * @requires highcharts-more
  242. * @optionparent plotOptions.gauge
  243. */
  244. GaugeSeries.defaultOptions = merge(Series.defaultOptions, {
  245. /**
  246. * When this option is `true`, the dial will wrap around the axes.
  247. * For instance, in a full-range gauge going from 0 to 360, a value
  248. * of 400 will point to 40\. When `wrap` is `false`, the dial stops
  249. * at 360.
  250. *
  251. * @see [overshoot](#plotOptions.gauge.overshoot)
  252. *
  253. * @type {boolean}
  254. * @default true
  255. * @since 3.0
  256. * @product highcharts
  257. * @apioption plotOptions.gauge.wrap
  258. */
  259. /**
  260. * Data labels for the gauge. For gauges, the data labels are
  261. * enabled by default and shown in a bordered box below the point.
  262. *
  263. * @since 2.3.0
  264. * @product highcharts
  265. */
  266. dataLabels: {
  267. borderColor: palette.neutralColor20,
  268. borderRadius: 3,
  269. borderWidth: 1,
  270. crop: false,
  271. defer: false,
  272. enabled: true,
  273. verticalAlign: 'top',
  274. y: 15,
  275. zIndex: 2
  276. },
  277. /**
  278. * Options for the dial or arrow pointer of the gauge.
  279. *
  280. * In styled mode, the dial is styled with the
  281. * `.highcharts-gauge-series .highcharts-dial` rule.
  282. *
  283. * @sample {highcharts} highcharts/css/gauge/
  284. * Styled mode
  285. *
  286. * @type {*}
  287. * @since 2.3.0
  288. * @product highcharts
  289. */
  290. dial: {},
  291. /**
  292. * The length of the dial's base part, relative to the total radius
  293. * or length of the dial.
  294. *
  295. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  296. * Dial options demonstrated
  297. *
  298. * @type {string}
  299. * @default 70%
  300. * @since 2.3.0
  301. * @product highcharts
  302. * @apioption plotOptions.gauge.dial.baseLength
  303. */
  304. /**
  305. * The pixel width of the base of the gauge dial. The base is the
  306. * part closest to the pivot, defined by baseLength.
  307. *
  308. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  309. * Dial options demonstrated
  310. *
  311. * @type {number}
  312. * @default 3
  313. * @since 2.3.0
  314. * @product highcharts
  315. * @apioption plotOptions.gauge.dial.baseWidth
  316. */
  317. /**
  318. * The radius or length of the dial, in percentages relative to the
  319. * radius of the gauge itself.
  320. *
  321. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  322. * Dial options demonstrated
  323. *
  324. * @type {string}
  325. * @default 80%
  326. * @since 2.3.0
  327. * @product highcharts
  328. * @apioption plotOptions.gauge.dial.radius
  329. */
  330. /**
  331. * The length of the dial's rear end, the part that extends out on
  332. * the other side of the pivot. Relative to the dial's length.
  333. *
  334. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  335. * Dial options demonstrated
  336. *
  337. * @type {string}
  338. * @default 10%
  339. * @since 2.3.0
  340. * @product highcharts
  341. * @apioption plotOptions.gauge.dial.rearLength
  342. */
  343. /**
  344. * The width of the top of the dial, closest to the perimeter. The
  345. * pivot narrows in from the base to the top.
  346. *
  347. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  348. * Dial options demonstrated
  349. *
  350. * @type {number}
  351. * @default 1
  352. * @since 2.3.0
  353. * @product highcharts
  354. * @apioption plotOptions.gauge.dial.topWidth
  355. */
  356. /**
  357. * The background or fill color of the gauge's dial.
  358. *
  359. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  360. * Dial options demonstrated
  361. *
  362. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  363. * @default #000000
  364. * @since 2.3.0
  365. * @product highcharts
  366. * @apioption plotOptions.gauge.dial.backgroundColor
  367. */
  368. /**
  369. * The border color or stroke of the gauge's dial. By default, the
  370. * borderWidth is 0, so this must be set in addition to a custom
  371. * border color.
  372. *
  373. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  374. * Dial options demonstrated
  375. *
  376. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  377. * @default #cccccc
  378. * @since 2.3.0
  379. * @product highcharts
  380. * @apioption plotOptions.gauge.dial.borderColor
  381. */
  382. /**
  383. * The width of the gauge dial border in pixels.
  384. *
  385. * @sample {highcharts} highcharts/plotoptions/gauge-dial/
  386. * Dial options demonstrated
  387. *
  388. * @type {number}
  389. * @default 0
  390. * @since 2.3.0
  391. * @product highcharts
  392. * @apioption plotOptions.gauge.dial.borderWidth
  393. */
  394. /**
  395. * Allow the dial to overshoot the end of the perimeter axis by
  396. * this many degrees. Say if the gauge axis goes from 0 to 60, a
  397. * value of 100, or 1000, will show 5 degrees beyond the end of the
  398. * axis when this option is set to 5.
  399. *
  400. * @see [wrap](#plotOptions.gauge.wrap)
  401. *
  402. * @sample {highcharts} highcharts/plotoptions/gauge-overshoot/
  403. * Allow 5 degrees overshoot
  404. *
  405. * @type {number}
  406. * @since 3.0.10
  407. * @product highcharts
  408. * @apioption plotOptions.gauge.overshoot
  409. */
  410. /**
  411. * Options for the pivot or the center point of the gauge.
  412. *
  413. * In styled mode, the pivot is styled with the
  414. * `.highcharts-gauge-series .highcharts-pivot` rule.
  415. *
  416. * @sample {highcharts} highcharts/css/gauge/
  417. * Styled mode
  418. *
  419. * @type {*}
  420. * @since 2.3.0
  421. * @product highcharts
  422. */
  423. pivot: {},
  424. /**
  425. * The pixel radius of the pivot.
  426. *
  427. * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
  428. * Pivot options demonstrated
  429. *
  430. * @type {number}
  431. * @default 5
  432. * @since 2.3.0
  433. * @product highcharts
  434. * @apioption plotOptions.gauge.pivot.radius
  435. */
  436. /**
  437. * The border or stroke width of the pivot.
  438. *
  439. * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
  440. * Pivot options demonstrated
  441. *
  442. * @type {number}
  443. * @default 0
  444. * @since 2.3.0
  445. * @product highcharts
  446. * @apioption plotOptions.gauge.pivot.borderWidth
  447. */
  448. /**
  449. * The border or stroke color of the pivot. In able to change this,
  450. * the borderWidth must also be set to something other than the
  451. * default 0.
  452. *
  453. * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
  454. * Pivot options demonstrated
  455. *
  456. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  457. * @default #cccccc
  458. * @since 2.3.0
  459. * @product highcharts
  460. * @apioption plotOptions.gauge.pivot.borderColor
  461. */
  462. /**
  463. * The background color or fill of the pivot.
  464. *
  465. * @sample {highcharts} highcharts/plotoptions/gauge-pivot/
  466. * Pivot options demonstrated
  467. *
  468. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  469. * @default #000000
  470. * @since 2.3.0
  471. * @product highcharts
  472. * @apioption plotOptions.gauge.pivot.backgroundColor
  473. */
  474. tooltip: {
  475. headerFormat: ''
  476. },
  477. /**
  478. * Whether to display this particular series or series type in the
  479. * legend. Defaults to false for gauge series.
  480. *
  481. * @since 2.3.0
  482. * @product highcharts
  483. */
  484. showInLegend: false
  485. // Prototype members
  486. });
  487. return GaugeSeries;
  488. }(Series));
  489. extend(GaugeSeries.prototype, {
  490. // chart.angular will be set to true when a gauge series is present,
  491. // and this will be used on the axes
  492. angular: true,
  493. directTouch: true,
  494. drawGraph: noop,
  495. drawTracker: ColumnSeries.prototype.drawTracker,
  496. fixedBox: true,
  497. forceDL: true,
  498. noSharedTooltip: true,
  499. pointClass: GaugePoint,
  500. trackerGroups: ['group', 'dataLabelsGroup']
  501. });
  502. SeriesRegistry.registerSeriesType('gauge', GaugeSeries);
  503. /* *
  504. *
  505. * Default export
  506. *
  507. * */
  508. export default GaugeSeries;
  509. /* *
  510. *
  511. * API options
  512. *
  513. * */
  514. /**
  515. * A `gauge` series. If the [type](#series.gauge.type) option is not
  516. * specified, it is inherited from [chart.type](#chart.type).
  517. *
  518. * @extends series,plotOptions.gauge
  519. * @excluding animationLimit, boostThreshold, connectEnds, connectNulls,
  520. * cropThreshold, dashStyle, dataParser, dataURL, findNearestPointBy,
  521. * getExtremesFromAll, marker, negativeColor, pointPlacement, shadow,
  522. * softThreshold, stack, stacking, states, step, threshold,
  523. * turboThreshold, zoneAxis, zones, dataSorting, boostBlending
  524. * @product highcharts
  525. * @requires highcharts-more
  526. * @apioption series.gauge
  527. */
  528. /**
  529. * An array of data points for the series. For the `gauge` series type,
  530. * points can be given in the following ways:
  531. *
  532. * 1. An array of numerical values. In this case, the numerical values will be
  533. * interpreted as `y` options. Example:
  534. * ```js
  535. * data: [0, 5, 3, 5]
  536. * ```
  537. *
  538. * 2. An array of objects with named values. The following snippet shows only a
  539. * few settings, see the complete options set below. If the total number of
  540. * data points exceeds the series'
  541. * [turboThreshold](#series.gauge.turboThreshold), this option is not
  542. * available.
  543. * ```js
  544. * data: [{
  545. * y: 6,
  546. * name: "Point2",
  547. * color: "#00FF00"
  548. * }, {
  549. * y: 8,
  550. * name: "Point1",
  551. * color: "#FF00FF"
  552. * }]
  553. * ```
  554. *
  555. * The typical gauge only contains a single data value.
  556. *
  557. * @sample {highcharts} highcharts/chart/reflow-true/
  558. * Numerical values
  559. * @sample {highcharts} highcharts/series/data-array-of-objects/
  560. * Config objects
  561. *
  562. * @type {Array<number|null|*>}
  563. * @extends series.line.data
  564. * @excluding drilldown, marker, x
  565. * @product highcharts
  566. * @apioption series.gauge.data
  567. */
  568. ''; // adds the doclets above in the transpiled file