VLEX/BPM-UI/node_modules/devextreme/viz/gauges/bar_gauge.js

/**
 * DevExtreme (viz/gauges/bar_gauge.js)
 * Version: 19.1.16
 * Build date: Tue Oct 18 2022
 *
 * Copyright (c) 2012 - 2022 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 radius;
        var area = that._area;
        var 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 i;
        var count = that._bars.length;
        that._beginValueChanging();
        context.barSize = count > 0 ? _max((radius - (count - 1) * that._barSpacing) / count, 1) : 0;
        var 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();
        var unitOffset = context.barSize + spacing;
        var 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);