base_gauge.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. /**
  2. * DevExtreme (viz/gauges/base_gauge.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var _Number = Number;
  11. var _getAppropriateFormat = require("../core/utils").getAppropriateFormat;
  12. var extend = require("../../core/utils/extend").extend;
  13. var translator1DModule = require("../translators/translator1d");
  14. var _extend = extend;
  15. var BaseWidget = require("../core/base_widget");
  16. var themeManagerModule = require("./theme_manager");
  17. var Tracker = require("./tracker");
  18. var dxBaseGauge = BaseWidget.inherit({
  19. _rootClassPrefix: "dxg",
  20. _themeSection: "gauge",
  21. _createThemeManager: function() {
  22. return new themeManagerModule.ThemeManager(this._getThemeManagerOptions())
  23. },
  24. _initCore: function() {
  25. var that = this;
  26. var root = that._renderer.root;
  27. that._valueChangingLocker = 0;
  28. that._translator = that._factory.createTranslator();
  29. that._tracker = that._factory.createTracker({
  30. renderer: that._renderer,
  31. container: root
  32. });
  33. that._setTrackerCallbacks()
  34. },
  35. _beginValueChanging: function() {
  36. this._resetIsReady();
  37. this._onBeginUpdate();
  38. ++this._valueChangingLocker
  39. },
  40. _endValueChanging: function() {
  41. if (0 === --this._valueChangingLocker) {
  42. this._drawn()
  43. }
  44. },
  45. _setTrackerCallbacks: function() {
  46. var that = this;
  47. var renderer = that._renderer;
  48. var tooltip = that._tooltip;
  49. that._tracker.setCallbacks({
  50. "tooltip-show": function(target, info) {
  51. var tooltipParameters = target.getTooltipParameters();
  52. var offset = renderer.getRootOffset();
  53. var formatObject = _extend({
  54. value: tooltipParameters.value,
  55. valueText: tooltip.formatValue(tooltipParameters.value),
  56. color: tooltipParameters.color
  57. }, info);
  58. return tooltip.show(formatObject, {
  59. x: tooltipParameters.x + offset.left,
  60. y: tooltipParameters.y + offset.top,
  61. offset: tooltipParameters.offset
  62. }, {
  63. target: info
  64. })
  65. },
  66. "tooltip-hide": function() {
  67. return tooltip.hide()
  68. }
  69. })
  70. },
  71. _dispose: function() {
  72. this._cleanCore();
  73. this.callBase.apply(this, arguments)
  74. },
  75. _disposeCore: function() {
  76. var that = this;
  77. that._themeManager.dispose();
  78. that._tracker.dispose();
  79. that._translator = that._tracker = null
  80. },
  81. _cleanCore: function() {
  82. var that = this;
  83. that._tracker.deactivate();
  84. that._cleanContent()
  85. },
  86. _renderCore: function() {
  87. var that = this;
  88. if (!that._isValidDomain) {
  89. return
  90. }
  91. that._renderContent();
  92. that._tracker.setTooltipState(that._tooltip.isEnabled());
  93. that._tracker.activate();
  94. that._noAnimation = false
  95. },
  96. _applyChanges: function() {
  97. this.callBase.apply(this, arguments);
  98. this._resizing = this._noAnimation = false
  99. },
  100. _setContentSize: function() {
  101. var that = this;
  102. that._resizing = that._noAnimation = 2 === that._changes.count();
  103. that.callBase.apply(that, arguments)
  104. },
  105. _applySize: function(rect) {
  106. var that = this;
  107. that._innerRect = {
  108. left: rect[0],
  109. top: rect[1],
  110. right: rect[2],
  111. bottom: rect[3]
  112. };
  113. var layoutCache = that._layout._cache;
  114. that._cleanCore();
  115. that._renderCore();
  116. that._layout._cache = that._layout._cache || layoutCache;
  117. return [rect[0], that._innerRect.top, rect[2], that._innerRect.bottom]
  118. },
  119. _initialChanges: ["DOMAIN"],
  120. _themeDependentChanges: ["DOMAIN"],
  121. _optionChangesMap: {
  122. subtitle: "MOSTLY_TOTAL",
  123. indicator: "MOSTLY_TOTAL",
  124. geometry: "MOSTLY_TOTAL",
  125. animation: "MOSTLY_TOTAL",
  126. startValue: "DOMAIN",
  127. endValue: "DOMAIN"
  128. },
  129. _optionChangesOrder: ["DOMAIN", "MOSTLY_TOTAL"],
  130. _change_DOMAIN: function() {
  131. this._setupDomain()
  132. },
  133. _change_MOSTLY_TOTAL: function() {
  134. this._applyMostlyTotalChange()
  135. },
  136. _setupDomain: function() {
  137. var that = this;
  138. that._setupDomainCore();
  139. that._isValidDomain = isFinite(1 / (that._translator.getDomain()[1] - that._translator.getDomain()[0]));
  140. if (!that._isValidDomain) {
  141. that._incidentOccurred("W2301")
  142. }
  143. that._change(["MOSTLY_TOTAL"])
  144. },
  145. _applyMostlyTotalChange: function() {
  146. var that = this;
  147. that._setupCodomain();
  148. that._setupAnimationSettings();
  149. that._setupDefaultFormat();
  150. that._change(["LAYOUT"])
  151. },
  152. _setupAnimationSettings: function() {
  153. var that = this;
  154. var option = that.option("animation");
  155. that._animationSettings = null;
  156. if (void 0 === option || option) {
  157. option = _extend({
  158. enabled: true,
  159. duration: 1e3,
  160. easing: "easeOutCubic"
  161. }, option);
  162. if (option.enabled && option.duration > 0) {
  163. that._animationSettings = {
  164. duration: _Number(option.duration),
  165. easing: option.easing
  166. }
  167. }
  168. }
  169. that._containerBackgroundColor = that.option("containerBackgroundColor") || that._themeManager.theme().containerBackgroundColor
  170. },
  171. _setupDefaultFormat: function() {
  172. var domain = this._translator.getDomain();
  173. this._defaultFormatOptions = _getAppropriateFormat(domain[0], domain[1], this._getApproximateScreenRange())
  174. },
  175. _setupDomainCore: null,
  176. _calculateSize: null,
  177. _cleanContent: null,
  178. _renderContent: null,
  179. _setupCodomain: null,
  180. _getApproximateScreenRange: null,
  181. _factory: {
  182. createTranslator: function() {
  183. return new translator1DModule.Translator1D
  184. },
  185. createTracker: function(parameters) {
  186. return new Tracker(parameters)
  187. }
  188. }
  189. });
  190. exports.dxBaseGauge = dxBaseGauge;
  191. var _format = require("../../format_helper").format;
  192. var formatValue = function(value, options, extra) {
  193. options = options || {};
  194. var text = _format(value, options.format);
  195. var formatObject;
  196. if ("function" === typeof options.customizeText) {
  197. formatObject = _extend({
  198. value: value,
  199. valueText: text
  200. }, extra);
  201. return String(options.customizeText.call(formatObject, formatObject))
  202. }
  203. return text
  204. };
  205. var getSampleText = function(translator, options) {
  206. var text1 = formatValue(translator.getDomainStart(), options);
  207. var text2 = formatValue(translator.getDomainEnd(), options);
  208. return text1.length >= text2.length ? text1 : text2
  209. };
  210. exports.formatValue = formatValue;
  211. exports.getSampleText = getSampleText;
  212. exports.compareArrays = function(array1, array2) {
  213. return array1 && array2 && array1.length === array2.length && compareArraysElements(array1, array2)
  214. };
  215. function compareArraysElements(array1, array2) {
  216. var i;
  217. var ii = array1.length;
  218. var array1ValueIsNaN;
  219. var array2ValueIsNaN;
  220. for (i = 0; i < ii; ++i) {
  221. array1ValueIsNaN = array1[i] !== array1[i];
  222. array2ValueIsNaN = array2[i] !== array2[i];
  223. if (array1ValueIsNaN && array2ValueIsNaN) {
  224. continue
  225. }
  226. if (array1[i] !== array2[i]) {
  227. return false
  228. }
  229. }
  230. return true
  231. }
  232. dxBaseGauge.addPlugin(require("../core/export").plugin);
  233. dxBaseGauge.addPlugin(require("../core/title").plugin);
  234. dxBaseGauge.addPlugin(require("../core/tooltip").plugin);
  235. dxBaseGauge.addPlugin(require("../core/loading_indicator").plugin);
  236. var _setTooltipOptions = dxBaseGauge.prototype._setTooltipOptions;
  237. dxBaseGauge.prototype._setTooltipOptions = function() {
  238. _setTooltipOptions.apply(this, arguments);
  239. this._tracker && this._tracker.setTooltipState(this._tooltip.isEnabled())
  240. };