Salesforce Path - Read Only Lightning Component

ReadOnlyChevron.cmp.html

<aura:component controller="ReadOnlyChevronController" implements="force:hasRecordId, flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.loadChevron}"/> 
    <aura:attribute name="fieldName" Description="API Name of Picklist Value" type="String" />
    <aura:attribute name="recordId" type="Id" description="Id of record on which this component is hosted." />
    <aura:attribute name="records" type="object[]" description="Records for Chevron calculated by Apex class" access="private" />  
    <div style="width:100%" class="slds-align_absolute-center">
        <div class="chevron noaction">
            <aura:iteration items="{!v.records}" var="item" indexVar="i"> 
               <a href="#" class="{#item.cssClass}" style="{! 'width:'+item.width}">
                    <aura:if isTrue="{!item.cssClass == 'visited'}">
                        <div class="flipper">
                            <div class="front"> 
                                <lightning:icon iconName="utility:check" size="x-small" variant="inverse"/>
                            </div> 
                            <div class="back">
                                {#item.val}
                            </div>
                        </div> 
                        <aura:set attribute="else"> 
                            {#item.val} 
                        </aura:set> 
                    </aura:if> 
               </a>
            </aura:iteration> 
        </div>
    </div> 
</aura:component>

ReadOnlyChevron.css

.THIS .chevron { 
    display: inline-block;
    /* box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
    overflow: hidden;
    border-radius: 5px; 
    font-family:  verdana; 
    text-align: center; 
    width:100%;
    padding-left:5%;
    padding-right:5%;
}
 
.THIS .chevron a {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 36px;
    color: white; 
    padding: 0 10px 0 60px; 
    position: relative;
    height:36px;
}

.THIS .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.THIS a.visited:hover .flipper{
        transform: rotateX(180deg);
}

.THIS .back {
    transform: rotateX(180deg);
}

 
.THIS .chevron a:first-child {
    padding-left: 46px;
    border-radius: 20px 0 0 20px;  
}
.THIS .chevron a:first-child:before {
    left: 14px;
}
.THIS .chevron a:last-child {
    border-radius: 0 20px 20px 0; 
    padding-right: 20px;
}

.THIS .chevron a:after {
    content: '';
    position: absolute;
    top: 0; 
    right: -18px;  
    width: 36px; 
    height: 36px; 
    transform: scale(0.707) rotate(45deg); 
    z-index: 1;  
    box-shadow: 
        2px -2px 0 2px #fff, 
        3px -3px 0 2px #fff; 
    border-radius: 0 5px 0 50px;
} 
.THIS .chevron a:last-child:after {
    content: none;
} 
.THIS .chevron a:before {  
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 8px 0;
    position: absolute;
    top: 0;
    left: 30px; 
    font-weight: bold;
} 

.THIS .noaction a, .THIS .noaction a:after {
    background: #E0E5EE;
    color: black;
    transition: all 0.5s;
}
.THIS .noaction a:before {
    background: #E0E5EE;
    box-shadow: 0 0 0 1px #ccc;
}
.THIS .noaction a:hover, .THIS .noaction a:hover:after  {
    background: #93a5c4; 
}

.THIS .noaction a.visited, .THIS .noaction a.visited:after{
    background: #4BCA81;
    color:white;
}
.THIS .noaction a.visited:hover, .THIS .noaction a.visited:hover:after  {
    background: #30a260; 
}

.THIS .noaction a.active, .THIS .noaction a.active:after{
    background: #0070D2;
    color:white;
}

.THIS .noaction a.active:hover, .THIS .noaction a.active:hover:after  {
    background: #00315b;
    color:white;
}

ReadOnlyChevron.design.html

<design:component >
	<design:attribute name="fieldName" label="API Name of Picklist Field" 
                      description="API Name of the Picklist field for which Chevron needs to be displayed" />
</design:component>

ReadOnlyChevronController.class.java

/**
 * @Author	:	Jitendra Zaa
 * @Date	:	17 Sep 2017
 * @Desc	:	Controller for Lightning Component "ReadOnlyChevron"
 * 
 * */
public class ReadOnlyChevronController {
    @AuraEnabled
    public static String getChevronData(String recId,String fieldName){ 
        //For Demo purpose
        if(recId == null){
            recId = '00Q3600000cSOFwEAO';
        }        
        // Logic as per Q 112 : Dynamic Apex
        // http://www.jitendrazaa.com/blog/salesforce/salesforce-interview-question-part-12/         
        List<Schema.SObjectType> gd = Schema.getGlobalDescribe().Values();
        Map<String,String> objectMap = new Map<String,String>();
        for(Schema.SObjectType f : gd)
        {
             objectMap.put(f.getDescribe().getKeyPrefix(), f.getDescribe().getName());
        }
        String prefix =  recId.left(3); 
        String objectName = objectMap.get(prefix);
        String query = 'SELECT '+fieldName+' FROM '+objectName+' WHERE Id =: recId';        
        List<SOBject> lstObj = Database.query(query);        
        String selVal =  String.valueOf(lstObj[0].get(fieldName)) ;  
        Schema.SObjectField sobjField = Schema.getGlobalDescribe().get(objectName).getDescribe().Fields.getMap().get(fieldName) ;
        Schema.DescribeFieldResult fieldResult = sobjField.getDescribe() ;
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();        
        Boolean curValMatched = false;
        Integer widthPerItem = 100/ple.size() ;
        List<chevronData> lstRet = new List<chevronData>();        
        for( Schema.PicklistEntry f : ple)
        {
            chevronData obj = new chevronData();
            obj.val = f.getLabel();
            obj.width = widthPerItem+'%';            
            if(obj.val == selVal){
                obj.cssClass = 'active';
                curValMatched = true;
            }
            else if(curValMatched){
                obj.cssClass = '';
            }else{
                obj.cssClass = 'visited'; 
            } 
            lstRet.add(obj);
        } 
        return JSON.serialize(lstRet);
    }    
    public class chevronData{
        public String val{get;set;}
        public String cssClass{get;set;}
        public String width {get;set;}
    }
}

ReadOnlyChevronController.js

({
	loadChevron : function(component, event, helper) {
		helper.loadChevron(component, event, helper);
	}
})

ReadOnlyChevronHelper.js

({
	loadChevron : function(component, event, helper) {		
        var action = component.get('c.getChevronData');
		var txt_recordId = component.get("v.recordId");
		var txt_FieldName = component.get("v.fieldName");
         action.setParams({
            recordId : txt_recordId,
            fieldName : txt_FieldName 
        });
        action.setStorable();        
        action.setCallback(this, function(res) { 
            helper.handleCallback(component, event, helper,res); 
        }); 
        $A.enqueueAction(action);  
	},
    handleCallback : function(component, event, helper,res){
        if (res.getState() === 'SUCCESS') { 
            var retJSON = JSON.parse(res.getReturnValue());  
            component.set("v.records",retJSON);
        }
    }
})