3

I am using Brian's Progress Ring Component here- https://gist.github.com/brianmfear/d1308608c0facdc626b85c9c248fc7af

It works great, however it fills in anticlockwise way. I have a requirement to fill it clockwise.

I couldn't understand the document here- https://www.lightningdesignsystem.com/components/progress-ring/

Code to set values-->

({
    // Create SVG, path, populate with default values from controller
    render: function(component, helper) {
        var result = this.superRender(),
            xmlns = "http://www.w3.org/2000/svg",
            updateContainer = result[0].querySelector("#progressContainer"),
            value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = document.createElementNS(xmlns,"svg"),
            path = document.createElementNS(xmlns,"path");
        svg.setAttributeNS(null,"viewBox", "-1 -1 2 2");
        path.setAttributeNS(null, "class", "slds-progress-ring__path");
        path.setAttributeNS(null, "d", dValue);
        svg.appendChild(path);
        updateContainer.appendChild(svg);
        return result;
    },
    // Update the progress bar on a rerender event
    rerender: function(component, helper) {
        var value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = component.getElement().querySelector("svg"),
            path = svg.childNodes[0];
        this.superRerender();
        path.setAttributeNS(null, "d", dValue);
    }
})

I tried interchanging cos and sin but didn't work, can anybody help.

1
  • Please use edit to format your code
    – cropredy
    Jul 12, 2019 at 4:12

2 Answers 2

2

Just came across a similar requrement in my LWC project. Couldn't find anything helpful regarding this in the SLDS docs. But in SLDS for React docs, I found a useful property called flowDirection="fill". This adds a css property transform: scaleX(1) rotate(-90deg); to the progressbar div to flip/mirror it.

So adding the same to my component did the trick.

<div class="slds-progress-ring__progress" style="transform: scaleX(1) rotate(-90deg);" role="progressbar" aria-valuemin={min} aria-valuemax={max} aria-valuenow={value}>
0

I had to develop a component with the same requirement. I found this solution:

//For example: 90%
var fillPercentage = 90;

var progressPath = 'M 1 0 A 1 1 0 {isLong} 0 {arcX} {arcY} L 0 0';

var isLong = fillPercentage > 50 ? 1 : 0;
var arcX = Math.cos(2 * Math.PI * fillPercentage / 100);
var arcY = Math.sin(2 * Math.PI * fillPercentage / 100) * -1;

progressPath = progressPath.replace('{isLong}', isLong);
progressPath = progressPath.replace('{arcX}', arcX);
progressPath = progressPath.replace('{arcY}', arcY);

The progressPath variable is taken from the Lightning Design System instructions you pasted, the only difference I applied is the "-1" multiplication in "arcY" variable since I have to get the opposite result.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.