devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
282 lines (278 loc) • 10.7 kB
JavaScript
/**
* DevExtreme (cjs/__internal/viz/gauges/base_gauge.js)
* Version: 25.2.7
* Build date: Tue May 05 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BaseGauge = void 0;
exports.compareArrays = compareArrays;
exports.getSampleText = exports.formatValue = void 0;
var _common = require("../../../core/utils/common");
var _extend2 = require("../../../core/utils/extend");
var _format_helper = _interopRequireDefault(require("../../../format_helper"));
var _export = require("../../viz/core/export");
var _loading_indicator = require("../../viz/core/loading_indicator");
var _m_base_widget = _interopRequireDefault(require("../../viz/core/m_base_widget"));
var _title = require("../../viz/core/title");
var _tooltip = require("../../viz/core/tooltip");
var _utils = require("../../viz/core/utils");
var _theme_manager = _interopRequireDefault(require("../../viz/gauges/theme_manager"));
var _tracker = _interopRequireDefault(require("../../viz/gauges/tracker"));
var _translator1d = require("../../viz/translators/translator1d");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const _Number = Number;
const _extend = _extend2.extend;
const _format = _format_helper.default.format;
const BaseGauge = exports.BaseGauge = _m_base_widget.default.inherit({
_rootClassPrefix: "dxg",
_themeSection: "gauge",
_titleBBoxCache: null,
_createThemeManager() {
return new _theme_manager.default.ThemeManager(this._getThemeManagerOptions())
},
_initCore() {
const root = this._renderer.root;
this._valueChangingLocker = 0;
this._translator = this._factory.createTranslator();
this._tracker = this._factory.createTracker({
renderer: this._renderer,
container: root
});
this._setTrackerCallbacks()
},
_beginValueChanging() {
this._resetIsReady();
this._onBeginUpdate();
++this._valueChangingLocker
},
_endValueChanging() {
if (0 === --this._valueChangingLocker) {
this._drawn()
}
},
_setTrackerCallbacks() {
const renderer = this._renderer;
const tooltip = this._tooltip;
this._tracker.setCallbacks({
"tooltip-show": function(target, info, callback) {
const tooltipParameters = target.getTooltipParameters();
const offset = renderer.getRootOffset();
const formatObject = _extend({
value: tooltipParameters.value,
valueText: tooltip.formatValue(tooltipParameters.value),
color: tooltipParameters.color
}, info);
return tooltip.show(formatObject, {
x: tooltipParameters.x + offset.left,
y: tooltipParameters.y + offset.top,
offset: tooltipParameters.offset
}, {
target: info
}, void 0, callback)
},
"tooltip-hide": function() {
return tooltip.hide()
}
})
},
_dispose() {
this._cleanCore();
this.callBase.apply(this, arguments)
},
_disposeCore() {
this._themeManager.dispose();
this._tracker.dispose();
this._translator = this._tracker = null
},
_cleanCore() {
this._tracker.deactivate();
this._noAnimation = false;
this._cleanContent()
},
_renderCore() {
if (!this._isValidDomain) {
return
}
this._renderContent();
this._renderGraphicObjects();
this._tracker.setTooltipState(this._tooltip.isEnabled());
this._tracker.activate();
this._noAnimation = false
},
_applyChanges() {
this.callBase.apply(this, arguments);
this._resizing = this._noAnimation = false
},
_setContentSize() {
this._resizing = this._noAnimation = 2 === this._changes.count();
this.callBase.apply(this, arguments)
},
_getChangesRequireCoreUpdate: () => ["DOMAIN", "MOSTLY_TOTAL", "EXPORT"],
_isTitleBBoxChanged() {
var _this$_titleBBoxCache, _this$_titleBBoxCache2, _this$_titleBBoxCache3;
const titleBBox = this._title.getLayoutOptions();
const hasTitleHeightChanged = titleBBox.height !== (null === (_this$_titleBBoxCache = this._titleBBoxCache) || void 0 === _this$_titleBBoxCache ? void 0 : _this$_titleBBoxCache.height);
const hasTitleYChanged = titleBBox.y !== (null === (_this$_titleBBoxCache2 = this._titleBBoxCache) || void 0 === _this$_titleBBoxCache2 ? void 0 : _this$_titleBBoxCache2.y);
const hasVerticalAlignmentChanged = titleBBox.verticalAlignment !== (null === (_this$_titleBBoxCache3 = this._titleBBoxCache) || void 0 === _this$_titleBBoxCache3 ? void 0 : _this$_titleBBoxCache3.verticalAlignment);
this._titleBBoxCache = null;
return hasTitleHeightChanged || hasTitleYChanged || hasVerticalAlignmentChanged
},
_forceCoreUpdate() {
const isTriggeredByTitleOnly = this._changes.has("TITLE") && !this._getChangesRequireCoreUpdate().some(change => this._changes.has(change));
if (isTriggeredByTitleOnly) {
return this._isTitleBBoxChanged()
}
return true
},
_applySize(rect) {
const that = this;
that._innerRect = {
left: rect[0],
top: rect[1],
right: rect[2],
bottom: rect[3]
};
const layoutCache = that._layout._cache;
if (that._forceCoreUpdate()) {
that._cleanCore();
that._renderCore()
}
that._layout._cache = that._layout._cache || layoutCache;
return [rect[0], that._innerRect.top, rect[2], that._innerRect.bottom]
},
_initialChanges: ["DOMAIN"],
_themeDependentChanges: ["DOMAIN"],
_optionChangesMap: {
subtitle: "MOSTLY_TOTAL",
indicator: "MOSTLY_TOTAL",
geometry: "MOSTLY_TOTAL",
animation: "MOSTLY_TOTAL",
startValue: "DOMAIN",
endValue: "DOMAIN"
},
_optionChangesOrder: ["DOMAIN", "MOSTLY_TOTAL"],
_change_DOMAIN() {
this._setupDomain()
},
_change_MOSTLY_TOTAL() {
this._applyMostlyTotalChange()
},
_updateExtraElements: _common.noop,
_setupDomain() {
const that = this;
that._setupDomainCore();
that._isValidDomain = isFinite(1 / (that._translator.getDomain()[1] - that._translator.getDomain()[0]));
if (!that._isValidDomain) {
that._incidentOccurred("W2301")
}
that._change(["MOSTLY_TOTAL"])
},
_applyMostlyTotalChange() {
this._setupCodomain();
this._setupAnimationSettings();
this._setupDefaultFormat();
this._change(["LAYOUT"])
},
_setupAnimationSettings() {
const that = this;
let option = that.option("animation");
that._animationSettings = null;
if (void 0 === option || option) {
option = _extend({
enabled: true,
duration: 1e3,
easing: "easeOutCubic"
}, option);
if (option.enabled && option.duration > 0) {
that._animationSettings = {
duration: _Number(option.duration),
easing: option.easing
}
}
}
that._containerBackgroundColor = that.option("containerBackgroundColor") || that._themeManager.theme().containerBackgroundColor
},
_setupDefaultFormat() {
const domain = this._translator.getDomain();
this._defaultFormatOptions = (0, _utils.getAppropriateFormat)(domain[0], domain[1], this._getApproximateScreenRange())
},
_setupDomainCore: null,
_calculateSize: null,
_cleanContent: null,
_renderContent: null,
_setupCodomain: null,
_getApproximateScreenRange: null,
_factory: {
createTranslator: () => new _translator1d.Translator1D,
createTracker: parameters => new _tracker.default(parameters)
}
});
const formatValue = function(value, options, extra) {
if (Object.is(value, -0)) {
value = 0
}
options = options || {};
const text = _format(value, options.format);
let formatObject;
if ("function" === typeof options.customizeText) {
formatObject = _extend({
value: value,
valueText: text
}, extra);
return String(options.customizeText.call(formatObject, formatObject))
}
return text
};
exports.formatValue = formatValue;
const getSampleText = function(translator, options) {
const text1 = formatValue(translator.getDomainStart(), options);
const text2 = formatValue(translator.getDomainEnd(), options);
return text1.length >= text2.length ? text1 : text2
};
exports.getSampleText = getSampleText;
function compareArrays(array1, array2) {
return array1 && array2 && array1.length === array2.length && compareArraysElements(array1, array2)
}
function compareArraysElements(array1, array2) {
let i;
const ii = array1.length;
let array1ValueIsNaN;
let array2ValueIsNaN;
for (i = 0; i < ii; ++i) {
array1ValueIsNaN = array1[i] !== array1[i];
array2ValueIsNaN = array2[i] !== array2[i];
if (array1ValueIsNaN && array2ValueIsNaN) {
continue
}
if (array1[i] !== array2[i]) {
return false
}
}
return true
}
BaseGauge.addPlugin(_export.plugin);
BaseGauge.addPlugin(_title.plugin);
BaseGauge.addPlugin(_tooltip.plugin);
BaseGauge.addPlugin(_loading_indicator.plugin);
const _setTooltipOptions = BaseGauge.prototype._setTooltipOptions;
BaseGauge.prototype._setTooltipOptions = function() {
_setTooltipOptions.apply(this, arguments);
this._tracker && this._tracker.setTooltipState(this._tooltip.isEnabled())
};
const {
_change_TITLE: _change_TITLE
} = BaseGauge.prototype;
BaseGauge.prototype._change_TITLE = function() {
this._titleBBoxCache = Object.assign({}, this._title.getLayoutOptions());
_change_TITLE.apply(this, arguments)
};