├── assets
    ├── img1.png
    ├── img2.png
    ├── img3.png
    └── img4.png
├── progressRing
    ├── progressRing.js-meta.xml
    ├── progressRing.html
    └── progressRing.js
├── jsconfig.json
└── README.md


/assets/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/texei/progress-ring/HEAD/assets/img1.png


--------------------------------------------------------------------------------
/assets/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/texei/progress-ring/HEAD/assets/img2.png


--------------------------------------------------------------------------------
/assets/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/texei/progress-ring/HEAD/assets/img3.png


--------------------------------------------------------------------------------
/assets/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/texei/progress-ring/HEAD/assets/img4.png


--------------------------------------------------------------------------------
/progressRing/progressRing.js-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="progressRing">
3 |     <apiVersion>46.0</apiVersion>
4 |     <isExposed>false</isExposed>
5 | </LightningComponentBundle>


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "experimentalDecorators": true,
 4 |         "baseUrl": ".",
 5 |         "paths": {
 6 |             "progressRing": [
 7 |                 "progressRing/progressRing.js"
 8 |             ]
 9 |         }
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/progressRing/progressRing.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class={ringClass}>
 3 |         <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin={min} aria-valuemax={max} aria-valuenow={value}>
 4 |             <svg viewBox="-1 -1 2 2">
 5 |                 <path class="slds-progress-ring__path" d={progress}></path>
 6 |             </svg>
 7 |         </div>
 8 |         <div class="slds-progress-ring__content">
 9 |             <template if:true={isComplete}>
10 |                 <lightning-icon icon-name="utility:check" size="x-small" alternative-text={state}></lightning-icon>
11 |             </template>
12 |         </div>
13 |     </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Progress Ring lightning web component
 2 | 
 3 | *Description*  
 4 | An easy to use lightning web component that integrate SLDS "progress ring"  
 5 | 
 6 | [SLDS Progress Ring documentation](https://www.lightningdesignsystem.com/components/progress-ring/)
 7 | 
 8 | ## How to use  
 9 | Exemple:  
10 | `<c-progress-ring min="0" max="100" value="80" state="normal"></c-progress-ring>`  
11 | 
12 | States:  
13 | Normal :  
14 | ![Normal](/assets/img1.png)  
15 | Warning :  
16 | ![Warning](/assets/img2.png)     
17 | Expired :  
18 | ![Expired](/assets/img3.png)  
19 | Complete :  
20 | ![Complete](/assets/img4.png)  
21 | 
22 | _min_: value min (ex: 0)  
23 | _max_: value max (ex: 100)  
24 | _value_: current value (ex: 80)  
25 | _state_: state of the progress ring (ex: warning, expired, active, complete, normal)  
26 | _large_: display the large size of the component as defined in the [Lightning Design System blueprint](https://www.lightningdesignsystem.com/components/progress-ring/#Large-Size)
27 |   
28 |   
29 | ## TODO  
30 | * Add an option to have a setInterval effect  
31 | * Add an option to customize line weight and style  
32 | 


--------------------------------------------------------------------------------
/progressRing/progressRing.js:
--------------------------------------------------------------------------------
 1 | import { LightningElement, api, track } from 'lwc';
 2 | 
 3 | export default class ProgressRing extends LightningElement {
 4 |     @api min;
 5 |     @api max;
 6 |     @api large = false;
 7 | 
 8 |     @track progress; // Value of the 'd' attribute of the progress-ring
 9 |     @track isComplete = false; // Use to render complete svg span
10 |     @track _state;
11 | 
12 |     @api 
13 |     get value() {
14 |         return this._value;
15 |     }
16 | 
17 |     // Set the corresponding value to the progress ring
18 |     set value(currentValue) {
19 |         this._value = currentValue;
20 |         this.progress = "M 1 0 A 1 1 0 " + this.getQuotient(currentValue, this.max) + " 1 " +
21 |                         Math.cos(2 * Math.PI * currentValue / this.max) + " " +
22 |                         Math.sin(2 * Math.PI * currentValue / this.max) + " L 0 0";
23 |         this.setAttribute('d', this.progress);
24 |     }
25 | 
26 |     @api 
27 |     get state() {
28 |         return this._state;
29 |     }
30 | 
31 |     /**
32 |      * @param currentState : get the current state of the component (warning, complete, active ....)
33 |      * CSS Styling is done in ringClass getter to handle both state and large properties
34 |      */
35 |     set state(currentState) {
36 |         if (currentState.toUpperCase() === 'COMPLETE') {
37 |             this.isComplete = true;     
38 |         }
39 |         this._state = currentState;
40 |      }
41 | 
42 |     get ringClass() {
43 |         let ringClass = (this.large === true) ? 'slds-progress-ring slds-progress-ring_large' : 'slds-progress-ring';
44 |         switch (this._state.toUpperCase()) {
45 |             case 'WARNING':
46 |                 return ringClass + ' slds-progress-ring_warning';
47 |             case 'EXPIRED':
48 |                 return ringClass + ' slds-progress-ring_expired';
49 |             case 'ACTIVE':
50 |                 return ringClass + ' slds-progress-ring_active-step';
51 |             case 'COMPLETE':
52 |                 return ringClass + ' slds-progress-ring_complete';
53 |             case 'NORMAL':
54 |                 return ringClass;
55 |             default:
56 |                 return ringClass;
57 |         }
58 |     }
59 | 
60 |     /**
61 |      * Method: GetQuotient
62 |      * @param value : current value of the progress ring
63 |      * @param max  : get the max value, set up by the component
64 |      * Description : Get the quotient of the value / max to have the {isLong} value (a binary flag if the arc should 'take the long path' (used for > 50% fill)) 
65 |      */
66 |     getQuotient(value, max) {
67 |         if (value / max >= 0.5) {
68 |             return "1";
69 |         }
70 |         return "0";
71 |     }
72 | }


--------------------------------------------------------------------------------