no-data-to-display.src.js 5.0 KB

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