devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
650 lines (647 loc) • 24.3 kB
JavaScript
/**
* DevExtreme (viz/gauges/bar_gauge.js)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
var PI_DIV_180 = Math.PI / 180;
var _abs = Math.abs;
var _round = Math.round;
var _floor = Math.floor;
var _min = Math.min;
var _max = Math.max;
var registerComponent = require("../../core/component_registrator");
var objectUtils = require("../../core/utils/object");
var commonUtils = require("../../core/utils/common");
var extend = require("../../core/utils/extend").extend;
var _normalizeEnum = require("../core/utils").normalizeEnum;
var baseGaugeModule = require("./base_gauge");
var dxBaseGauge = baseGaugeModule.dxBaseGauge;
var _getSampleText = baseGaugeModule.getSampleText;
var _formatValue = baseGaugeModule.formatValue;
var _compareArrays = baseGaugeModule.compareArrays;
var dxCircularGauge = require("./circular_gauge");
var _isArray = Array.isArray;
var vizUtils = require("../core/utils");
var _convertAngleToRendererSpace = vizUtils.convertAngleToRendererSpace;
var _getCosAndSin = vizUtils.getCosAndSin;
var _patchFontOptions = vizUtils.patchFontOptions;
var _Number = Number;
var _isFinite = isFinite;
var _noop = commonUtils.noop;
var _extend = extend;
var OPTION_VALUES = "values";
var dxBarGauge = dxBaseGauge.inherit({
_rootClass: "dxbg-bar-gauge",
_themeSection: "barGauge",
_fontFields: ["label.font", "legend.font", "legend.title.font", "legend.title.subtitle.font"],
_initCore: function() {
var that = this;
that.callBase.apply(that, arguments);
that._barsGroup = that._renderer.g().attr({
"class": "dxbg-bars"
}).linkOn(that._renderer.root, "bars");
that._values = [];
that._context = {
renderer: that._renderer,
translator: that._translator,
tracker: that._tracker,
group: that._barsGroup
};
that._animateStep = function(pos) {
var bars = that._bars;
var i;
var ii;
for (i = 0, ii = bars.length; i < ii; ++i) {
bars[i].animate(pos)
}
};
that._animateComplete = function() {
that._bars.forEach(function(bar) {
return bar.endAnimation()
});
that._checkOverlap()
}
},
_disposeCore: function() {
var that = this;
that._barsGroup.linkOff();
that._barsGroup = that._values = that._context = that._animateStep = that._animateComplete = null;
that.callBase.apply(that, arguments)
},
_setupDomainCore: function() {
var that = this;
var startValue = that.option("startValue");
var endValue = that.option("endValue");
_isFinite(startValue) || (startValue = 0);
_isFinite(endValue) || (endValue = 100);
that._translator.setDomain(startValue, endValue);
that._baseValue = that._translator.adjust(that.option("baseValue"));
_isFinite(that._baseValue) || (that._baseValue = startValue < endValue ? startValue : endValue)
},
_getDefaultSize: function() {
return {
width: 300,
height: 300
}
},
_setupCodomain: dxCircularGauge.prototype._setupCodomain,
_getApproximateScreenRange: function() {
var that = this;
var sides = that._area.sides;
var width = that._canvas.width / (sides.right - sides.left);
var height = that._canvas.height / (sides.down - sides.up);
var r = width < height ? width : height;
return -that._translator.getCodomainRange() * r * PI_DIV_180
},
_setupAnimationSettings: function() {
var that = this;
that.callBase.apply(that, arguments);
if (that._animationSettings) {
that._animationSettings.step = that._animateStep;
that._animationSettings.complete = that._animateComplete
}
},
_cleanContent: function() {
var that = this;
that._barsGroup.linkRemove();
that._animationSettings && that._barsGroup.stopAnimation();
that._barsGroup.clear()
},
_renderContent: function() {
var that = this;
var labelOptions = that.option("label");
var text;
var bBox;
var context = that._context;
that._barsGroup.linkAppend();
context.textEnabled = void 0 === labelOptions || labelOptions && (!("visible" in labelOptions) || labelOptions.visible);
if (context.textEnabled) {
context.textColor = labelOptions && labelOptions.font && labelOptions.font.color || null;
labelOptions = _extend(true, {}, that._themeManager.theme().label, labelOptions);
context.formatOptions = {
format: void 0 !== labelOptions.format ? labelOptions.format : that._defaultFormatOptions,
customizeText: labelOptions.customizeText
};
context.textOptions = {
align: "center"
};
context.fontStyles = _patchFontOptions(_extend({}, that._themeManager.theme().label.font, labelOptions.font, {
color: null
}));
that._textIndent = labelOptions.indent > 0 ? _Number(labelOptions.indent) : 0;
context.lineWidth = labelOptions.connectorWidth > 0 ? _Number(labelOptions.connectorWidth) : 0;
context.lineColor = labelOptions.connectorColor || null;
text = that._renderer.text(_getSampleText(that._translator, context.formatOptions), 0, 0).attr(context.textOptions).css(context.fontStyles).append(that._barsGroup);
bBox = text.getBBox();
text.remove();
context.textY = bBox.y;
context.textWidth = bBox.width;
context.textHeight = bBox.height
}
dxCircularGauge.prototype._applyMainLayout.call(that);
that._renderBars()
},
_measureMainElements: function() {
var result = {
maxRadius: this._area.radius
};
if (this._context.textEnabled) {
result.horizontalMargin = this._context.textWidth;
result.verticalMargin = this._context.textHeight;
result.inverseHorizontalMargin = this._context.textWidth / 2;
result.inverseVerticalMargin = this._context.textHeight / 2
}
return result
},
_renderBars: function() {
var that = this;
var options = _extend({}, that._themeManager.theme(), that.option());
var relativeInnerRadius;
var radius;
var area = that._area;
relativeInnerRadius = options.relativeInnerRadius > 0 && options.relativeInnerRadius < 1 ? _Number(options.relativeInnerRadius) : .1;
radius = area.radius;
if (that._context.textEnabled) {
that._textIndent = _round(_min(that._textIndent, radius / 2));
radius -= that._textIndent
}
that._outerRadius = _floor(radius);
that._innerRadius = _floor(radius * relativeInnerRadius);
that._barSpacing = options.barSpacing > 0 ? _Number(options.barSpacing) : 0;
_extend(that._context, {
backgroundColor: options.backgroundColor,
x: area.x,
y: area.y,
startAngle: area.startCoord,
endAngle: area.endCoord,
baseAngle: that._translator.translate(that._baseValue)
});
that._arrangeBars()
},
_arrangeBars: function() {
var that = this;
var radius = that._outerRadius - that._innerRadius;
var context = that._context;
var spacing;
var colors;
var unitOffset;
var i;
var count = that._bars.length;
that._beginValueChanging();
context.barSize = count > 0 ? _max((radius - (count - 1) * that._barSpacing) / count, 1) : 0;
spacing = count > 1 ? _max(_min((radius - count * context.barSize) / (count - 1), that._barSpacing), 0) : 0;
var _count = _min(_floor((radius + spacing) / context.barSize), count);
that._setBarsCount(count);
radius = that._outerRadius;
context.textRadius = radius;
context.textIndent = that._textIndent;
that._palette.reset();
unitOffset = context.barSize + spacing;
colors = that._palette.generateColors(_count);
for (i = 0; i < _count; ++i, radius -= unitOffset) {
that._bars[i].arrange({
radius: radius,
color: colors[i]
})
}
for (var _i = _count; _i < count; _i++) {
that._bars[_i].hide()
}
if (that._animationSettings && !that._noAnimation) {
that._animateBars()
} else {
that._updateBars()
}
that._endValueChanging()
},
_setBarsCount: function() {
var that = this;
if (that._bars.length > 0) {
if (that._dummyBackground) {
that._dummyBackground.dispose();
that._dummyBackground = null
}
} else {
if (!that._dummyBackground) {
that._dummyBackground = that._renderer.arc().attr({
"stroke-linejoin": "round"
})
}
that._dummyBackground.attr({
x: that._context.x,
y: that._context.y,
outerRadius: that._outerRadius,
innerRadius: that._innerRadius,
startAngle: that._context.endAngle,
endAngle: that._context.startAngle,
fill: that._context.backgroundColor
}).append(that._barsGroup)
}
},
_updateBars: function() {
this._bars.forEach(function(bar) {
return bar.applyValue()
});
this._checkOverlap()
},
_checkOverlap: function() {
var that = this;
var bars = that._bars;
var overlapStrategy = _normalizeEnum(that._getOption("resolveLabelOverlapping", true));
if ("none" === overlapStrategy) {
return
}
var sortedBars = bars.concat().sort(function(a, b) {
return a.getValue() - b.getValue()
});
var currentIndex = 0;
var nextIndex = 1;
while (currentIndex < sortedBars.length && nextIndex < sortedBars.length) {
var current = sortedBars[currentIndex];
var next = sortedBars[nextIndex];
if (current.checkIntersect(next)) {
next.hideLabel();
nextIndex++
} else {
currentIndex = nextIndex;
nextIndex = currentIndex + 1
}
}
},
_animateBars: function() {
var that = this;
var i;
var ii = that._bars.length;
if (ii > 0) {
for (i = 0; i < ii; ++i) {
that._bars[i].beginAnimation()
}
that._barsGroup.animate({
_: 0
}, that._animationSettings)
}
},
_buildNodes: function() {
var that = this;
var options = that._options;
that._palette = that._themeManager.createPalette(options.palette, {
useHighlight: true,
extensionMode: options.paletteExtensionMode
});
that._palette.reset();
that._bars = that._bars || [];
that._animationSettings && that._barsGroup.stopAnimation();
var barValues = that._values.filter(_isFinite);
var count = barValues.length;
if (that._bars.length > count) {
var ii = that._bars.length;
for (var i = count; i < ii; ++i) {
that._bars[i].dispose()
}
that._bars.splice(count, ii - count)
} else {
if (that._bars.length < count) {
for (var _i2 = that._bars.length; _i2 < count; ++_i2) {
that._bars.push(new BarWrapper(_i2, that._context))
}
}
}
that._bars.forEach(function(bar, index) {
bar.update({
color: that._palette.getNextColor(count),
value: barValues[index]
})
})
},
_updateValues: function(values) {
var that = this;
var list = _isArray(values) && values || _isFinite(values) && [values] || [];
var i;
var ii = list.length;
var value;
that._values.length = ii;
for (i = 0; i < ii; ++i) {
value = list[i];
that._values[i] = value = _Number(_isFinite(value) ? value : that._values[i])
}
if (!that._resizing) {
if (!_compareArrays(that._values, that.option(OPTION_VALUES))) {
that.option(OPTION_VALUES, that._values.slice())
}
}
this._change(["NODES"])
},
values: function(arg) {
if (void 0 !== arg) {
this._updateValues(arg);
return this
} else {
return this._values.slice(0)
}
},
_optionChangesMap: {
backgroundColor: "MOSTLY_TOTAL",
relativeInnerRadius: "MOSTLY_TOTAL",
barSpacing: "MOSTLY_TOTAL",
label: "MOSTLY_TOTAL",
resolveLabelOverlapping: "MOSTLY_TOTAL",
palette: "MOSTLY_TOTAL",
paletteExtensionMode: "MOSTLY_TOTAL",
values: "VALUES"
},
_change_VALUES: function() {
this._updateValues(this.option(OPTION_VALUES))
},
_factory: objectUtils.clone(dxBaseGauge.prototype._factory),
_optionChangesOrder: ["VALUES", "NODES"],
_initialChanges: ["VALUES"],
_change_NODES: function() {
this._buildNodes()
},
_change_MOSTLY_TOTAL: function() {
this._change(["NODES"]);
this.callBase()
},
_proxyData: [],
_getLegendData: function() {
var that = this;
var formatOptions = {};
var options = that._options;
var labelFormatOptions = (options.label || {}).format;
var legendFormatOptions = (options.legend || {}).itemTextFormat;
if (legendFormatOptions) {
formatOptions.format = legendFormatOptions
} else {
formatOptions.format = labelFormatOptions || that._defaultFormatOptions
}
return (this._bars || []).map(function(b) {
return {
id: b.index,
item: {
value: b.getValue(),
color: b.getColor(),
index: b.index
},
text: _formatValue(b.getValue(), formatOptions),
visible: true,
states: {
normal: {
fill: b.getColor()
}
}
}
})
}
});
var BarWrapper = function(index, context) {
var that = this;
that._context = context;
that._tracker = context.renderer.arc().attr({
"stroke-linejoin": "round"
});
that.index = index
};
_extend(BarWrapper.prototype, {
dispose: function() {
var that = this;
that._background.dispose();
that._bar.dispose();
if (that._context.textEnabled) {
that._line.dispose();
that._text.dispose()
}
that._context.tracker.detach(that._tracker);
that._context = that._settings = that._background = that._bar = that._line = that._text = that._tracker = null;
return that
},
arrange: function(options) {
var that = this;
var context = that._context;
this._visible = true;
context.tracker.attach(that._tracker, that, {
index: that.index
});
that._background = context.renderer.arc().attr({
"stroke-linejoin": "round",
fill: context.backgroundColor
}).append(context.group);
that._settings = that._settings || {
x: context.x,
y: context.y,
startAngle: context.baseAngle,
endAngle: context.baseAngle
};
that._bar = context.renderer.arc().attr(_extend({
"stroke-linejoin": "round"
}, that._settings)).append(context.group);
if (context.textEnabled) {
that._line = context.renderer.path([], "line").attr({
"stroke-width": context.lineWidth
}).append(context.group);
that._text = context.renderer.text().css(context.fontStyles).attr(context.textOptions).append(context.group)
}
that._angle = isFinite(that._angle) ? that._angle : context.baseAngle;
that._settings.outerRadius = options.radius;
that._settings.innerRadius = options.radius - context.barSize;
that._settings.x = context.x;
that._settings.y = context.y;
that._background.attr(_extend({}, that._settings, {
startAngle: context.endAngle,
endAngle: context.startAngle,
fill: that._context.backgroundColor
}));
that._bar.attr({
x: context.x,
y: context.y,
outerRadius: that._settings.outerRadius,
innerRadius: that._settings.innerRadius,
fill: that._color
});
that._tracker.attr(that._settings);
if (context.textEnabled) {
that._line.attr({
points: [context.x, context.y - that._settings.innerRadius, context.x, context.y - context.textRadius - context.textIndent],
stroke: context.lineColor || that._color
}).sharp();
that._text.css({
fill: context.textColor || that._color
})
}
return that
},
getTooltipParameters: function() {
var that = this;
var cosSin = _getCosAndSin((that._angle + that._context.baseAngle) / 2);
return {
x: _round(that._context.x + (that._settings.outerRadius + that._settings.innerRadius) / 2 * cosSin.cos),
y: _round(that._context.y - (that._settings.outerRadius + that._settings.innerRadius) / 2 * cosSin.sin),
offset: 0,
color: that._color,
value: that._value
}
},
setAngle: function(angle) {
var that = this;
var context = that._context;
var settings = that._settings;
var cosSin;
that._angle = angle;
setAngles(settings, context.baseAngle, angle);
that._bar.attr(settings);
that._tracker.attr(settings);
if (context.textEnabled) {
cosSin = _getCosAndSin(angle);
var indent = context.textIndent;
var radius = context.textRadius + indent;
var x = context.x + radius * cosSin.cos;
var y = context.y - radius * cosSin.sin;
var halfWidth = .5 * context.textWidth;
var textHeight = context.textHeight;
var textY = context.textY;
if (_abs(x - context.x) > indent) {
x += x < context.x ? -halfWidth : halfWidth
}
if (_abs(y - context.y) <= indent) {
y -= textY + .5 * textHeight
} else {
y -= y < context.y ? textY + textHeight : textY
}
var text = _formatValue(that._value, context.formatOptions, {
index: that.index
});
var visibility = "" === text ? "hidden" : null;
that._text.attr({
text: text,
x: x,
y: y,
visibility: visibility
});
that._line.attr({
visibility: visibility
});
that._line.rotate(_convertAngleToRendererSpace(angle), context.x, context.y)
}
return that
},
hideLabel: function() {
this._text.attr({
visibility: "hidden"
});
this._line.attr({
visibility: "hidden"
})
},
checkIntersect: function(anotherBar) {
var coords = this.calculateLabelCoords();
var anotherCoords = anotherBar.calculateLabelCoords();
if (!coords || !anotherCoords) {
return false
}
var width = Math.max(0, Math.min(coords.bottomRight.x, anotherCoords.bottomRight.x) - Math.max(coords.topLeft.x, anotherCoords.topLeft.x));
var height = Math.max(0, Math.min(coords.bottomRight.y, anotherCoords.bottomRight.y) - Math.max(coords.topLeft.y, anotherCoords.topLeft.y));
return width * height !== 0
},
calculateLabelCoords: function() {
if (!this._text) {
return
}
var box = this._text.getBBox();
return {
topLeft: {
x: box.x,
y: box.y
},
bottomRight: {
x: box.x + box.width,
y: box.y + box.height
}
}
},
_processValue: function(value) {
return this._context.translator.translate(this._context.translator.adjust(value))
},
applyValue: function() {
if (!this._visible) {
return this
}
return this.setAngle(this._processValue(this.getValue()))
},
update: function(_ref) {
var color = _ref.color,
value = _ref.value;
this._color = color;
this._value = value
},
hide: function() {
this._visible = false
},
getColor: function() {
return this._color
},
getValue: function() {
return this._value
},
beginAnimation: function() {
if (!this._visible) {
return this
}
var that = this;
var angle = this._processValue(this.getValue());
if (!compareFloats(that._angle, angle)) {
that._start = that._angle;
that._delta = angle - that._angle;
that._tracker.attr({
visibility: "hidden"
});
if (that._context.textEnabled) {
that._line.attr({
visibility: "hidden"
});
that._text.attr({
visibility: "hidden"
})
}
} else {
that.animate = _noop;
that.setAngle(that._angle)
}
},
animate: function(pos) {
if (!this._visible) {
return this
}
var that = this;
that._angle = that._start + that._delta * pos;
setAngles(that._settings, that._context.baseAngle, that._angle);
that._bar.attr(that._settings)
},
endAnimation: function() {
var that = this;
if (void 0 !== that._delta) {
if (compareFloats(that._angle, that._start + that._delta)) {
that._tracker.attr({
visibility: null
});
that.setAngle(that._angle)
}
} else {
delete that.animate
}
delete that._start;
delete that._delta
}
});
function setAngles(target, angle1, angle2) {
target.startAngle = angle1 < angle2 ? angle1 : angle2;
target.endAngle = angle1 < angle2 ? angle2 : angle1
}
function compareFloats(value1, value2) {
return _abs(value1 - value2) < 1e-4
}
registerComponent("dxBarGauge", dxBarGauge);
exports.dxBarGauge = dxBarGauge;
dxBarGauge.addPlugin(require("../components/legend").plugin);