NoDataToDisplay.js 5.2 KB

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