Covid19_IND_TrackerCmp

<aura:component controller="Covid19_IND_TrackerController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="total" type="String"/>
    <aura:attribute name="confirmed" type="String"/>
    <aura:attribute name="active" type="String"/>
    <aura:attribute name="recovered" type="String"/>
    <aura:attribute name="deaths" type="String"/>
    <!-- attributes -->
    <aura:attribute name="sortDirection" type="String" default="asc" />
    <aura:attribute name="defaultSortDirection" type="String" default="asc" />
    <aura:attribute name="sortedBy" type="String" />
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="Spinner" type="boolean" default="false"/>
    
    <aura:attribute name="lastUpdated" type="String"/>
    
    
    
    <div class="slds-page-header">
        <div class="slds-grid">
            <div class="slds-col slds-size--7-of-12">
                <span style="font-size:22px;">COVID 19 (State-Wise) Tracker</span>
            </div>
            <div class="slds-col slds-size--4-of-12">
                <span style="color:green; font-size:14px; font-style:bold; position:relative;top:10px;"><!--Last Update :--> <b>{!v.lastUpdated}</b></span>
            </div>
            <div class="slds-col slds-size--1-of-12">
                
                <lightning:buttonIcon iconName="utility:refresh" size="large" variant="bare" onclick="{! c.doInit }" alternativeText="Refresh" title="Refresh" />
                
            </div>
        </div>
    </div>
    
    <!--loading spinner start... style=Brand Medium (blue dots)-->
    <aura:if isTrue="{!v.Spinner}">
        <div aura:id="spinnerId" class="slds-spinner_container">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
    <lightning:tabset selectedTabId="one">
        <lightning:tab label="LIVE DATA" id="one">
            
            <div class="slds-grid">
                <div class="slds-col slds-size--3-of-12" style="background-color:red; padding:10px;">
                    <span style="color:white; font-size:14px;">CONFIRMED : <b style="font-size:18px;">{!v.confirmed}</b></span>
                </div>
                <div class="slds-col slds-size--3-of-12" style="background-color:#009DDC; padding:10px;">
                    <span style="color:white;font-size:14px;"> ACTIVE : <b style="font-size:18px;">{!v.active}</b></span>
                </div>
                <div class="slds-col slds-size--3-of-12" style="background-color:green; padding:10px;">
                    <span style="color:white;font-size:14px;">RECOVERED : <b style="font-size:18px;">{!v.recovered}</b></span>
                </div>
                <div class="slds-col slds-size--3-of-12" style="background-color:gray; padding:10px;">
                    <span style="color:white;font-size:14px;">DECEASED: <b style="font-size:18px;">{!v.deaths} </b></span>
                </div>
            </div>
            <!-- the container element determine the height of the datatable -->
            <div style="height: 100%; font-size: 18px; padding: 1%;">
                <lightning:datatable
                                     keyField="id"
                                     data="{! v.data }"
                                     columns="{! v.columns }"
                                     hideCheckboxColumn="true"
                                     
                                     defaultSortDirection="{!v.defaultSortDirection}"
                                     sortedDirection="{!v.sortDirection}"
                                     sortedBy="{!v.sortedBy}"
                                     onsort="{!c.handleSort}">
                </lightning:datatable>
            </div>
        </lightning:tab>
        
        <lightning:tab label="CHART" id="three">
            <div id="confirmedCase">
                <c:Covid19_Tracking_Chart/>
            </div>
        </lightning:tab>
        <lightning:tab label="NEWS" id="two">
            <c:Covid19_News/>
        </lightning:tab>
        <lightning:tab label="INFORMATION AND ADVISORY" id="four">
            <div style="padding:2%; ">
                <b style="font-size:25px; color:blue;">INFORMATION AND ADVISORY:By GOI</b> <br/><br/>
                <ul style="font-size:16px;">
                    <li>
                        <a href="https://www.mohfw.gov.in/pdf/Poster1GHFanDHGA.pdf" target="_blank">
                            What is Novel Coronavirus?
                        </a>
                    </li><br/>
                    
                </ul>
            </div>
        </lightning:tab>
    </lightning:tabset>
    <div class="slds-page-header">
        <div class="slds-grid">
            <div class="slds-col slds-size--3-of-12">
                Developed By: <b> <a href="https://sfdclesson.com/" target="_blank">SFDC LESSONS</a></b>
            </div>
            
            <div class="slds-col slds-size--5-of-12">
                COVID-19 stats and patient tracing in India (Unofficial).
            </div>
            <div class="slds-col slds-size--4-of-12" style="font-size:10px">
                Powered By: <a href="https://api.covid19india.org/">covid19india.org</a> &amp; <a href="https://newsapi.org/">NewsAPI</a>
            </div>
        </div>
    </div>
</aura:component>