2

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.

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

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}>

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.