devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
255 lines (251 loc) • 9.15 kB
JavaScript
/**
* DevExtreme (cjs/viz/gauges/base_gauge.js)
* Version: 24.2.7
* Build date: Mon Apr 28 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.BaseGauge = void 0;
exports.compareArrays = compareArrays;
exports.getSampleText = exports.formatValue = void 0;
var _utils = require("../core/utils");
var _extend2 = require("../../core/utils/extend");
var _translator1d = require("../translators/translator1d");
var _m_base_widget = _interopRequireDefault(require("../../__internal/viz/core/m_base_widget"));
var _theme_manager = _interopRequireDefault(require("./theme_manager"));
var _tracker = _interopRequireDefault(require("./tracker"));
var _format_helper = _interopRequireDefault(require("../../format_helper"));
var _export = require("../core/export");
var _title = require("../core/title");
var _tooltip = require("../core/tooltip");
var _loading_indicator = require("../core/loading_indicator");
var _common = require("../../core/utils/common");
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",
_createThemeManager: function() {
return new _theme_manager.default.ThemeManager(this._getThemeManagerOptions())
},
_initCore: function() {
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: function() {
this._resetIsReady();
this._onBeginUpdate();
++this._valueChangingLocker
},
_endValueChanging: function() {
if (0 === --this._valueChangingLocker) {
this._drawn()
}
},
_setTrackerCallbacks: function() {
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: function() {
this._cleanCore();
this.callBase.apply(this, arguments)
},
_disposeCore: function() {
this._themeManager.dispose();
this._tracker.dispose();
this._translator = this._tracker = null
},
_cleanCore: function() {
this._tracker.deactivate();
this._noAnimation = false;
this._cleanContent()
},
_renderCore: function() {
if (!this._isValidDomain) {
return
}
this._renderContent();
this._renderGraphicObjects();
this._tracker.setTooltipState(this._tooltip.isEnabled());
this._tracker.activate();
this._noAnimation = false
},
_applyChanges: function() {
this.callBase.apply(this, arguments);
this._resizing = this._noAnimation = false
},
_setContentSize: function() {
this._resizing = this._noAnimation = 2 === this._changes.count();
this.callBase.apply(this, arguments)
},
_applySize: function(rect) {
this._innerRect = {
left: rect[0],
top: rect[1],
right: rect[2],
bottom: rect[3]
};
const layoutCache = this._layout._cache;
this._cleanCore();
this._renderCore();
this._layout._cache = this._layout._cache || layoutCache;
return [rect[0], this._innerRect.top, rect[2], this._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: function() {
this._setupDomain()
},
_change_MOSTLY_TOTAL: function() {
this._applyMostlyTotalChange()
},
_updateExtraElements: _common.noop,
_setupDomain: function() {
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: function() {
this._setupCodomain();
this._setupAnimationSettings();
this._setupDefaultFormat();
this._change(["LAYOUT"])
},
_setupAnimationSettings: function() {
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: function() {
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: function() {
return new _translator1d.Translator1D
},
createTracker: function(parameters) {
return 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())
};