NoDataToDisplay.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /* *
  2. *
  3. * Plugin for displaying a message when there is no data visible in chart.
  4. *
  5. * (c) 2010-2020 Highsoft AS
  6. *
  7. * Author: Oystein Moseng
  8. *
  9. * License: www.highcharts.com/license
  10. *
  11. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  12. *
  13. * */
  14. 'use strict';
  15. import H from '../Core/Globals.js';
  16. import U from '../Core/Utilities.js';
  17. var addEvent = U.addEvent, extend = U.extend, getOptions = U.getOptions;
  18. import '../Core/Series/Series.js';
  19. var chartPrototype = H.Chart.prototype, defaultOptions = getOptions();
  20. // Add language option
  21. extend(defaultOptions.lang,
  22. /**
  23. * @optionparent lang
  24. */
  25. {
  26. /**
  27. * The text to display when the chart contains no data.
  28. *
  29. * @see [noData](#noData)
  30. *
  31. * @sample highcharts/no-data-to-display/no-data-line
  32. * No-data text
  33. *
  34. * @since 3.0.8
  35. * @product highcharts highstock
  36. * @requires modules/no-data-to-display
  37. */
  38. noData: 'No data to display'
  39. });
  40. // Add default display options for message
  41. /**
  42. * Options for displaying a message like "No data to display".
  43. * This feature requires the file no-data-to-display.js to be loaded in the
  44. * page. The actual text to display is set in the lang.noData option.
  45. *
  46. * @sample highcharts/no-data-to-display/no-data-line
  47. * Line chart with no-data module
  48. * @sample highcharts/no-data-to-display/no-data-pie
  49. * Pie chart with no-data module
  50. *
  51. * @product highcharts highstock gantt
  52. * @requires modules/no-data-to-display
  53. * @optionparent noData
  54. */
  55. defaultOptions.noData = {
  56. /**
  57. * An object of additional SVG attributes for the no-data label.
  58. *
  59. * @type {Highcharts.SVGAttributes}
  60. * @since 3.0.8
  61. * @product highcharts highstock gantt
  62. * @apioption noData.attr
  63. */
  64. attr: {
  65. zIndex: 1
  66. },
  67. /**
  68. * Whether to insert the label as HTML, or as pseudo-HTML rendered with
  69. * SVG.
  70. *
  71. * @type {boolean}
  72. * @default false
  73. * @since 4.1.10
  74. * @product highcharts highstock gantt
  75. * @apioption noData.useHTML
  76. */
  77. /**
  78. * The position of the no-data label, relative to the plot area.
  79. *
  80. * @type {Highcharts.AlignObject}
  81. * @since 3.0.8
  82. */
  83. position: {
  84. /**
  85. * Horizontal offset of the label, in pixels.
  86. */
  87. x: 0,
  88. /**
  89. * Vertical offset of the label, in pixels.
  90. */
  91. y: 0,
  92. /**
  93. * Horizontal alignment of the label.
  94. *
  95. * @type {Highcharts.AlignValue}
  96. */
  97. align: 'center',
  98. /**
  99. * Vertical alignment of the label.
  100. *
  101. * @type {Highcharts.VerticalAlignValue}
  102. */
  103. verticalAlign: 'middle'
  104. },
  105. /**
  106. * CSS styles for the no-data label.
  107. *
  108. * @sample highcharts/no-data-to-display/no-data-line
  109. * Styled no-data text
  110. *
  111. * @type {Highcharts.CSSObject}
  112. */
  113. style: {
  114. /** @ignore */
  115. fontWeight: 'bold',
  116. /** @ignore */
  117. fontSize: '12px',
  118. /** @ignore */
  119. color: '#666666'
  120. }
  121. };
  122. /**
  123. * Display a no-data message.
  124. * @private
  125. * @function Highcharts.Chart#showNoData
  126. * @param {string} [str]
  127. * An optional message to show in place of the default one
  128. * @return {void}
  129. * @requires modules/no-data-to-display
  130. */
  131. chartPrototype.showNoData = function (str) {
  132. var chart = this, options = chart.options, text = str || (options && options.lang.noData), noDataOptions = options && options.noData;
  133. if (!chart.noDataLabel && chart.renderer) {
  134. chart.noDataLabel = chart.renderer
  135. .label(text, 0, 0, null, null, null, noDataOptions.useHTML, null, 'no-data');
  136. if (!chart.styledMode) {
  137. chart.noDataLabel
  138. .attr(noDataOptions.attr)
  139. .css(noDataOptions.style);
  140. }
  141. chart.noDataLabel.add();
  142. chart.noDataLabel.align(extend(chart.noDataLabel.getBBox(), noDataOptions.position), false, 'plotBox');
  143. }
  144. };
  145. /**
  146. * Hide no-data message.
  147. *
  148. * @private
  149. * @function Highcharts.Chart#hideNoData
  150. * @return {void}
  151. * @requires modules/no-data-to-display
  152. */
  153. chartPrototype.hideNoData = function () {
  154. var chart = this;
  155. if (chart.noDataLabel) {
  156. chart.noDataLabel = chart.noDataLabel.destroy();
  157. }
  158. };
  159. /**
  160. * Returns true if there are data points within the plot area now.
  161. *
  162. * @private
  163. * @function Highcharts.Chart#hasData
  164. * @return {boolean|undefined}
  165. * True, if there are data points.
  166. * @requires modules/no-data-to-display
  167. */
  168. chartPrototype.hasData = function () {
  169. var chart = this, series = chart.series || [], i = series.length;
  170. while (i--) {
  171. if (series[i].hasData() && !series[i].options.isInternal) {
  172. return true;
  173. }
  174. }
  175. return chart.loadingShown; // #4588
  176. };
  177. /* eslint-disable no-invalid-this */
  178. // Add event listener to handle automatic show or hide no-data message.
  179. addEvent(H.Chart, 'render', function handleNoData() {
  180. if (this.hasData()) {
  181. this.hideNoData();
  182. }
  183. else {
  184. this.showNoData();
  185. }
  186. });