all files / progressbar/types/ circular-progress.js

99.53% Statements 210/211
90.86% Branches 179/197
100% Functions 10/10
99.52% Lines 209/210
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274   30× 30× 30×   108× 108× 108× 108× 108× 108× 108× 108× 108× 108× 108× 108×   108× 108× 108× 108× 108× 108×   108× 108×   108× 108× 108× 108× 33× 33×   108×   108× 108×   111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 108×       111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 111× 38×   111× 91×   84×     77× 74×       77× 26×   77×     91× 91×   91× 16× 16× 16× 16× 12× 12×   16×       91×     38× 38× 38× 38× 38× 38× 38× 38× 38× 38× 38×   38× 38×     35× 35× 17×   35×     38× 38×   38×                             111× 111× 111× 111×     103×     99×   111×   149× 149× 149× 149×           145×   149×        
define(["require", "exports", "../utils/progress-animation", "@syncfusion/ej2-svg-base", "../utils/helper", "./segment-progress", "../utils/helper"], function (require, exports, progress_animation_1, ej2_svg_base_1, helper_1, segment_progress_1, helper_2) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Circular = (function () {
        function Circular(progress) {
            this.segment = new segment_progress_1.Segment();
            this.animation = new progress_animation_1.ProgressAnimation();
            this.progress = progress;
        }
        Circular.prototype.renderCircularTrack = function () {
            var progress = this.progress;
            var circularTrackGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_CircularTrackGroup' });
            var radius;
            var endAngle;
            var startAngle = progress.startAngle;
            progress.totalAngle = (progress.endAngle - progress.startAngle) % 360;
            progress.totalAngle = (progress.totalAngle <= 0 ? (360 + progress.totalAngle) : progress.totalAngle);
            progress.totalAngle -= (progress.totalAngle === 360) ? 0.01 : 0;
            this.trackEndAngle = endAngle = (progress.startAngle + ((progress.enableRtl) ? -progress.totalAngle : +progress.totalAngle)) % 360;
            this.centerX = progress.progressRect.x + (progress.progressRect.width / 2);
            this.centerY = progress.progressRect.y + (progress.progressRect.height / 2);
            this.maxThickness = Math.max(progress.trackThickness, progress.progressThickness) ||
                Math.max(progress.themeStyle.circularProgressThickness, progress.themeStyle.circularTrackThickness);
            this.availableSize = (Math.min(progress.progressRect.height, progress.progressRect.width) / 2) - this.maxThickness / 2;
            radius = helper_1.stringToNumber(progress.radius, this.availableSize);
            radius = (radius === null) ? 0 : radius;
            var stroke = (progress.argsData.trackColor || progress.themeStyle.circularTrackColor);
            var fill = (progress.enablePieProgress) ? (progress.argsData.trackColor || progress.themeStyle.circularTrackColor) : 'none';
            var strokeWidth = (progress.enablePieProgress) ? 0 :
                (progress.trackThickness || progress.themeStyle.circularTrackThickness);
            var circularPath = helper_1.getPathArc(this.centerX, this.centerY, radius, startAngle, endAngle, progress.enableRtl, progress.enablePieProgress);
            this.isRange = (this.progress.rangeColors[0].color !== '' || this.progress.rangeColors[0].start !== null ||
                this.progress.rangeColors[0].end !== null);
            var option = new ej2_svg_base_1.PathOption(progress.element.id + '_Circulartrack', fill, strokeWidth, stroke, progress.themeStyle.trackOpacity, '0', circularPath);
            var circularTrack = progress.renderer.drawPath(option);
            progress.trackWidth = circularTrack.getTotalLength();
            if (progress.segmentCount > 1 && !progress.enableProgressSegments && !progress.enablePieProgress && !this.isRange) {
                progress.segmentSize = progress.calculateSegmentSize(progress.trackWidth, strokeWidth);
                circularTrack.setAttribute('stroke-dasharray', progress.segmentSize);
            }
            if (progress.cornerRadius === 'Round' && !progress.enablePieProgress && !this.isRange) {
                circularTrack.setAttribute('stroke-linecap', 'round');
            }
            circularTrackGroup.appendChild(circularTrack);
            progress.svgObject.appendChild(circularTrackGroup);
        };
        Circular.prototype.renderCircularProgress = function (previousEnd, previousTotalEnd, refresh) {
            var progress = this.progress;
            var startAngle = progress.startAngle;
            var endAngle;
            var totalAngle;
            var radius;
            var previousPath;
            var progressTotalAngle;
            var progressEnd;
            var circularProgress;
            var linearClipPath;
            var circularProgressGroup;
            var segmentWidth;
            if (!refresh) {
                circularProgressGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_CircularProgressGroup' });
            }
            else {
                circularProgressGroup = ej2_svg_base_1.getElement(progress.element.id + '_CircularProgressGroup');
            }
            radius = helper_1.stringToNumber(progress.innerRadius, this.availableSize);
            radius = (radius === null) ? 0 : radius;
            progress.previousTotalEnd = progressEnd = progress.calculateProgressRange(progress.argsData.value);
            var progressEndAngle = (progress.startAngle + ((progress.enableRtl) ? -progressEnd : progressEnd)) % 360;
            progress.previousEndAngle = endAngle = ((progress.isIndeterminate && !progress.enableProgressSegments) ? (progress.startAngle + ((progress.enableRtl) ? -progress.totalAngle : progress.totalAngle)) % 360 : progressEndAngle);
            progressTotalAngle = (progressEnd - progress.startAngle) % 360;
            progressTotalAngle = (progressTotalAngle <= 0 ? (360 + progressTotalAngle) : progressTotalAngle);
            progressTotalAngle -= (progressTotalAngle === 360) ? 0.01 : 0;
            var circularPath = helper_1.getPathArc(this.centerX, this.centerY, radius, startAngle, endAngle, progress.enableRtl, progress.enablePieProgress);
            var stroke = this.checkingCircularProgressColor();
            var fill = (progress.enablePieProgress) ? stroke : 'none';
            var thickness = (progress.progressThickness || progress.themeStyle.circularProgressThickness);
            var strokeWidth = (progress.enablePieProgress) ? 0 : thickness;
            var option = new ej2_svg_base_1.PathOption(progress.element.id + '_Circularprogress', fill, strokeWidth, stroke, progress.themeStyle.progressOpacity, '0', circularPath);
            progress.progressWidth = progress.renderer.drawPath(option).getTotalLength();
            progress.segmentSize = this.validateSegmentSize(progress, thickness);
            if (progress.secondaryProgress !== null && !progress.isIndeterminate) {
                this.renderCircularBuffer(progress, radius, progressTotalAngle);
            }
            if (progress.argsData.value !== null) {
                if (progress.segmentColor.length !== 0 && !progress.isIndeterminate && !progress.enablePieProgress) {
                    totalAngle = (!progress.enableProgressSegments) ? progress.totalAngle : progressTotalAngle;
                    segmentWidth = (!progress.enableProgressSegments) ? progress.trackWidth : progress.progressWidth;
                    circularProgress = this.segment.createCircularSegment(progress, '_CircularProgressSegment', this.centerX, this.centerY, radius, progress.argsData.value, progress.themeStyle.progressOpacity, thickness, totalAngle, segmentWidth);
                }
                else if (this.isRange && !progress.isIndeterminate) {
                    circularProgress = this.segment.createCircularRange(this.centerX, this.centerY, radius, progress);
                }
                else {
                    if (!refresh) {
                        circularProgress = progress.renderer.drawPath(option);
                    }
                    else {
                        circularProgress = ej2_svg_base_1.getElement(progress.element.id + '_Circularprogress');
                        previousPath = circularProgress.getAttribute('d');
                        circularProgress.setAttribute('stroke', stroke);
                        circularProgress.setAttribute('d', circularPath);
                    }
                    if (progress.segmentCount > 1 && !progress.enablePieProgress) {
                        circularProgress.setAttribute('stroke-dasharray', progress.segmentSize);
                    }
                    if (progress.cornerRadius === 'Round' && startAngle !== endAngle) {
                        circularProgress.setAttribute('stroke-linecap', 'round');
                    }
                }
                circularProgressGroup.appendChild(circularProgress);
                if (progress.isActive && !progress.isIndeterminate && !progress.enablePieProgress) {
                    this.renderActiveState(circularProgressGroup, radius, strokeWidth, circularPath, progressEndAngle, progressEnd, refresh);
                }
                if (progress.animation.enable || progress.isIndeterminate) {
                    this.delay = (progress.secondaryProgress !== null) ? 300 : progress.animation.delay;
                    linearClipPath = progress.createClipPath(progress.clipPath, null, refresh ? previousPath : '', refresh);
                    circularProgressGroup.appendChild(progress.clipPath);
                    if (progress.animation.enable && !progress.isIndeterminate && !progress.isActive) {
                        circularProgress.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippath)');
                        this.animation.doCircularAnimation(this.centerX, this.centerY, radius, progressEndAngle, progressEnd, linearClipPath, progress, thickness, this.delay, refresh ? previousEnd : null, refresh ? previousTotalEnd : null);
                    }
                    if (progress.isIndeterminate) {
                        if (progress.enableProgressSegments) {
                            linearClipPath.setAttribute('d', helper_1.getPathArc(this.centerX, this.centerY, radius + (thickness / 2), progress.startAngle, this.trackEndAngle, progress.enableRtl, true));
                        }
                        circularProgress.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippath)');
                        this.animation.doCircularIndeterminate((!progress.enableProgressSegments) ? linearClipPath : circularProgress, progress, startAngle, progressEndAngle, this.centerX, this.centerY, radius, thickness, linearClipPath);
                    }
                }
                progress.svgObject.appendChild(circularProgressGroup);
            }
        };
        Circular.prototype.renderCircularBuffer = function (progress, radius, progressTotalAngle) {
            var bufferClipPath;
            var circularBuffer;
            var segmentWidth;
            var totalAngle;
            var circularBufferGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_ CircularBufferGroup' });
            var bufferEnd = progress.calculateProgressRange(progress.secondaryProgress);
            var endAngle = (progress.startAngle + ((progress.enableRtl) ? -bufferEnd : bufferEnd)) % 360;
            var circularPath = helper_1.getPathArc(this.centerX, this.centerY, radius, progress.startAngle, endAngle, progress.enableRtl, progress.enablePieProgress);
            var stroke = this.checkingCircularProgressColor();
            var fill = (progress.enablePieProgress) ? stroke : 'none';
            var strokeWidth = (progress.enablePieProgress) ? 0 :
                (progress.progressThickness || progress.themeStyle.circularProgressThickness);
            var option = new ej2_svg_base_1.PathOption(progress.element.id + '_Circularbuffer', fill, strokeWidth, stroke, progress.themeStyle.bufferOpacity, '0', circularPath);
            if (progress.segmentColor.length !== 0 && !progress.isIndeterminate && !progress.enablePieProgress && !this.isRange) {
                totalAngle = (!progress.enableProgressSegments) ? progress.totalAngle : progressTotalAngle;
                segmentWidth = (!progress.enableProgressSegments) ? progress.trackWidth : progress.progressWidth;
                circularBuffer = this.segment.createCircularSegment(progress, '_CircularBufferSegment', this.centerX, this.centerY, radius, progress.secondaryProgress, progress.themeStyle.bufferOpacity, strokeWidth, totalAngle, segmentWidth);
            }
            else {
                circularBuffer = progress.renderer.drawPath(option);
                if (progress.segmentCount > 1 && !progress.enablePieProgress && !this.isRange) {
                    circularBuffer.setAttribute('stroke-dasharray', progress.segmentSize);
                }
                if (progress.cornerRadius === 'Round' && !this.isRange) {
                    circularBuffer.setAttribute('stroke-linecap', 'round');
                }
            }
            circularBufferGroup.appendChild(circularBuffer);
            if (progress.animation.enable && !progress.isActive) {
                bufferClipPath = progress.createClipPath(progress.bufferClipPath, null, '', false);
                circularBufferGroup.appendChild(progress.bufferClipPath);
                circularBuffer.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippathBuffer)');
                this.animation.doCircularAnimation(this.centerX, this.centerY, radius, endAngle, bufferEnd, bufferClipPath, progress, (progress.progressThickness || progress.themeStyle.circularProgressThickness), progress.animation.delay);
            }
            progress.svgObject.appendChild(circularBufferGroup);
        };
        Circular.prototype.renderCircularLabel = function (isProgressRefresh) {
            Eif (isProgressRefresh === void 0) { isProgressRefresh = false; }
            var end;
            var circularLabel;
            var centerY;
            var textSize;
            var option;
            var percentage = 100;
            var progress = this.progress;
            var labelText = progress.labelStyle.text;
            var circularLabelGroup = progress.renderer.createGroup({ 'id': progress.element.id + '_CircularLabelGroup' });
            Iif (document.getElementById(circularLabelGroup.id)) {
                document.getElementById(circularLabelGroup.id).remove();
            }
            var labelValue = ((progress.value - progress.minimum) / (progress.maximum - progress.minimum)) * percentage;
            var circularValue = (progress.value < progress.minimum || progress.value > progress.maximum) ? 0 : Math.round(labelValue);
            var argsData = {
                cancel: false, text: labelText ? labelText : String(circularValue) + '%', color: progress.labelStyle.color
            };
            progress.trigger('textRender', argsData);
            if (!argsData.cancel) {
                textSize = ej2_svg_base_1.measureText(argsData.text, progress.labelStyle);
                centerY = this.centerY + (textSize.height / 2);
                option = new helper_2.TextOption(progress.element.id + '_circularLabel', progress.labelStyle.size || progress.themeStyle.circularFontSize, progress.labelStyle.fontStyle || progress.themeStyle.circularFontStyle, progress.labelStyle.fontFamily || progress.themeStyle.circularFontFamily, progress.labelStyle.fontWeight, 'middle', argsData.color || progress.themeStyle.fontColor, this.centerX, centerY, progress.progressRect.width, progress.progressRect.height);
                circularLabel = progress.renderer.createText(option, argsData.text);
                circularLabelGroup.appendChild(circularLabel);
                if (progress.animation.enable && !progress.isIndeterminate) {
                    end = ((progress.value - progress.minimum) / (progress.maximum - progress.minimum)) * progress.totalAngle;
                    end = (progress.value < progress.minimum || progress.value > progress.maximum) ? 0 : end;
                    this.animation.doLabelAnimation(circularLabel, isProgressRefresh ? progress.previousWidth : progress.startAngle, end, progress, this.delay);
                }
                progress.svgObject.appendChild(circularLabelGroup);
                progress.previousWidth = end;
            }
        };
        Circular.prototype.renderActiveState = function (progressGroup, radius, strokeWidth, circularPath, endAngle, totalEnd, refresh) {
            var circularActive;
            var option;
            var progress = this.progress;
            var thickness = strokeWidth + 1;
            if (!refresh) {
                option = new ej2_svg_base_1.PathOption(progress.element.id + '_CircularActiveProgress', 'none', thickness, '#ffffff', 0.5, '0', circularPath);
                circularActive = progress.renderer.drawPath(option);
            }
            else {
                circularActive = ej2_svg_base_1.getElement(progress.element.id + '_CircularActiveProgress');
                circularActive.setAttribute('d', circularPath);
            }
            if (progress.segmentCount > 1) {
                circularActive.setAttribute('stroke-dasharray', progress.segmentSize);
            }
            if (progress.cornerRadius === 'Round') {
                circularActive.setAttribute('stroke-linecap', 'round');
            }
            var activeClip = progress.createClipPath(progress.clipPath, null, '', refresh);
            circularActive.setAttribute('style', 'clip-path:url(#' + progress.element.id + '_clippath)');
            progressGroup.appendChild(circularActive);
            progressGroup.appendChild(progress.clipPath);
            this.animation.doCircularAnimation(this.centerX, this.centerY, radius, endAngle, totalEnd, activeClip, progress, thickness, 0, null, null, circularActive);
        };
        Circular.prototype.validateSegmentSize = function (progress, thickness) {
            var validSegment;
            var progressSegment;
            var rDiff = parseInt(progress.radius, 10) - parseInt(progress.innerRadius, 10);
            if (rDiff !== 0 && !progress.enableProgressSegments) {
                progressSegment = progress.trackWidth + ((rDiff < 0) ? (progress.trackWidth * Math.abs(rDiff)) / parseInt(progress.radius, 10) :
                    -(progress.trackWidth * Math.abs(rDiff)) / parseInt(progress.radius, 10));
                validSegment = progress.calculateSegmentSize(progressSegment, thickness);
            }
            else if (progress.enableProgressSegments) {
                validSegment = progress.calculateSegmentSize(progress.progressWidth, thickness);
            }
            else {
                validSegment = progress.segmentSize;
            }
            return validSegment;
        };
        Circular.prototype.checkingCircularProgressColor = function () {
            var circularColor;
            var progress = this.progress;
            var role = progress.role;
            switch (role) {
                case 'Success':
                    circularColor = progress.themeStyle.success;
                    break;
                case 'Info':
                    circularColor = progress.themeStyle.info;
                    break;
                case 'Warning':
                    circularColor = progress.themeStyle.warning;
                    break;
                case 'Danger':
                    circularColor = progress.themeStyle.danger;
                    break;
                default:
                    circularColor = (progress.argsData.progressColor || progress.themeStyle.circularProgressColor);
            }
            return circularColor;
        };
        return Circular;
    }());
    exports.Circular = Circular;
});