Skip to content

Instantly share code, notes, and snippets.

@brianbier

brianbier/progressRing.cmp

Forked from brianmfear/progressRing.cmp
Created June 13, 2018 16:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brianbier/20eeb464557aa0a72f5d3d8a3cb01955 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brianbier/20eeb464557aa0a72f5d3d8a3cb01955 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @brianmfear brianmfear created this gist Feb 23, 2018.
    24 changes: 24 additions & 0 deletions progressRing.cmp
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <aura:component >
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:attribute name="variant" type="String" />

    <aura:attribute name="hasVariant" type="Boolean" access="private" default="{!false}" />
    <aura:attribute name="ringClass" type="String" access="private" />
    <aura:attribute name="iconName" type="String" access="private" />
    <aura:attribute name="altText" type="String" access="private" />

    <aura:handler name="init" value="{!this}" action="{!c.updateView}" />
    <aura:handler name="change" value="{!v.value}" action="{!c.updateView}" />
    <aura:handler name="change" value="{!v.variant}" action="{!c.updateView}" />

    <div class="{!v.ringClass}">
    <div id="progressContainer" class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}">

    </div>
    <div class="slds-progress-ring__content">
    <aura:if isTrue="{!v.hasVariant}">
    <lightning:icon iconName="{!v.iconName}" size="xx-small" title="{!v.altText}" alternativeText="{!v.altText}" />
    </aura:if>
    </div>
    </div>
    </aura:component>
    18 changes: 18 additions & 0 deletions progressRingController.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    ({
    updateView: function(component, event, helper) {
    var variant = component.get("v.variant"),
    hasVariant = variant == "warning" || variant == "expired",
    style = "slds-progress-ring",
    iconName,
    altText;
    if(hasVariant) {
    style = style + " " + style + "_" + variant;
    iconName = "utility:"+({ warning: "warning", expired: "error" }[variant]);
    altText = { warning: "Warning", expired: "Expired" }[variant];
    }
    component.set("v.ringClass", style);
    component.set("v.hasVariant", hasVariant);
    component.set("v.iconName", iconName);
    component.set("v.altText", altText)
    }
    })
    31 changes: 31 additions & 0 deletions progressRingRenderer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    ({
    // 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);
    }
    })