Sure.

<aura:component controller="SalesAndAssets_CTRL" implements="flexipage:availableForAllPageTypes,
force:appHostable,lightning:actionOverride,force:hasRecordId,force:hasSObjectName">
<ltng:require scripts="{!join(',',$Resource.ChartJs, $Resource.chartjsplugindatalabels)}" afterScriptsLoaded="{!c.init}"
/>
<aura:attribute name="parentId" type="id" />
<aura:attribute name="heartbeatId" type='string' />
<aura:attribute name="graphData" type="list" />
<aura:attribute name="graphLabels" type="list" />
<aura:attribute name="aum" type="Integer" />
<aura:attribute name="asOfAum" type="string" />
<aura:attribute name="asOfGraph" type="string" />
<aura:attribute name="salesBreakdownRange" type="string" />
<aura:attribute name="salesAndAssets" type="list" />
<aura:attribute name="retailTotals" type="list" />
<aura:attribute name="dcioTotals" type="list" />
<aura:attribute name="recordkeeperTotals" type="list" />
<aura:attribute name="retailSalesYst" type="list" />
<aura:attribute name="retailRedemYst" type="list" />
<aura:attribute name="retailSalesYtd" type="list" />
<aura:attribute name="retailRedemYtd" type="list" />
<aura:attribute name="retailSalesPy" type="list" />
<aura:attribute name="retailRedemPy" type="list" />
<aura:attribute name="retailSales2Py" type="list" />
<aura:attribute name="retailRedem2Py" type="list" />
<aura:attribute name="salesBreakdown" type="list" />
<aura:attribute name="redemBreakdown" type="list" />
<aura:attribute name="assetsBreakdown" type="list" />
<aura:attribute name="recordkeeperBreakdown" type="list" />
<aura:attribute name="retailSalesTotal" type="double" />
<aura:attribute name="retailRedemTotal" type="double" />
<aura:attribute name="dcioSalesTotal" type="double" />
<aura:attribute name="dcioRedemTotal" type="double" />
<aura:attribute name="assets" type="list" />
<aura:attribute name="spinner" type="boolean" default="false" />
<aura:handler event="aura:waiting" action="{!c.spinnerOn}" />
<aura:handler event="aura:doneWaiting" action="{!c.spinnerOff}" />
<aura:attribute name="gridAlignment" type="string" />
<aura:attribute name="gridColumn1" type="string" />
<aura:attribute name="gridColumn2" type="string" />
<aura:attribute name="device" type="string" />
<aura:attribute name="activeTimeFrame" type="string" />
<aura:attribute name="activeBreakdown" type="string" />
<aura:attribute name="bdTimeFrameTitle" type="string" default="YEST" />
<aura:attribute name="bdFundType" type="string" default="Retail" />
<aura:attribute name="aumValue" type="string" />
<aura:attribute name="fundCode" type="string" />
<aura:attribute name="showFundDetails" type="boolean" default="false" />

<!--<aura:handler name="init" value="{!this}" action="{!c.init}" />-->
<aura:if isTrue="{!v.spinner}">
<div class="exampleHolder">
<lightning:spinner alternativeText="Loading" size="large" />
</div>
</aura:if>
<div class="body">
<div class="buttonGroup1">
<ui:button label="YEST" aura:id="previous_day" class="activeButton1" press="{!c.timeFrameSelect}" />
<ui:button label="MTD" aura:id="month_to_date" class="button1" press="{!c.timeFrameSelect}" />
<ui:button label="YTD" aura:id="year_to_date" class="button1" press="{!c.timeFrameSelect}" />
<ui:button label="PY" aura:id="prior_year" class="button1" press="{!c.timeFrameSelect}" />
<ui:button label="2YR" aura:id="two_years_prior" class="button1" press="{!c.timeFrameSelect}" />
</div>
<div class="header">
<p>
Directional AUM:
<lightning:formattedNumber value="{!v.aum}" style="currency" currencyCode="USD" class="{!v.aumValue}" />
</p>
</div>
<div class="{!v.gridAlignment}">
<div class="{!v.gridColumn1}">
<span>
<div class="slds-grid slds-gutters " style="height:50px; padding-top:20px">
<div class="slds-col slds-order_1 slds-size_1-of-2">Retail</div>
<div class="slds-col slds-order_2 slds-size_1-of-2" style="font-size: 0.75rem; color: #515151;">as of {!v.asOfGraph}</div>
</div>
<div class=" " >
<div class="slds-grid slds-gutters " style="height:70px; padding-top:20px">
<div class="slds-col slds-order_1 slds-size_1-of-2" style="font-size:.85rem; ">
<span class="icon">
<lightning:icon iconName="standard:opportunity" class="salesIcon" alternativeText="Approved" />
</span>
<span class="text">Sales
<br/>
<lightning:formattedNumber value="{!' '+v.retailSalesTotal}" style="currency" currencyCode="USD" class="aumPositive" />
</span>
</div>
<div class="slds-col slds-order_2 slds-size_1-of-2" style="font-size:.75rem; ">
<span class="icon">
<lightning:icon iconName="standard:lightning_component" class="redemIcon" alternativeText="Approved" />
</span>
<span class="text">Redemptions
<br/>
<lightning:formattedNumber value="{!' '+v.retailRedemTotal}" style="currency" currencyCode="USD" class="aumNegative" />
</span>
</div>
</div>
<div class="graph">
<canvas aura:id="barChart" id="barChart" class="barChart chart" />
</div>
</div>
</span>
</div>
<div class="{!v.gridColumn2}">
<span>
<div class="slds-grid slds-gutters " style="height:50px; padding-top:20px">
<div class="slds-col slds-order_1 slds-size_1-of-2">DCIO</div>
<div class=" slds-col slds-order_2 slds-size_1-of-2" style="font-size: 0.75rem; color: #515151;">as of {!v.asOfGraph}</div>
</div>
<div class=" ">
<div class="slds-grid slds-gutters " style="height:70px; padding-top:20px">
<div class="slds-col slds-order_1 slds-size_1-of-2" style="font-size:.75rem;">
<span class="icon">
<lightning:icon iconName="standard:opportunity" class="salesIcon" alternativeText="Approved" />
</span>
<span class="text">Sales
<br/>
<lightning:formattedNumber value="{!' '+v.dcioSalesTotal}" style="currency" currencyCode="USD" class="aumPositive" />
</span>
</div>
<div class="slds-col slds-order_2 slds-size_1-of-2" style="font-size:.75rem;">
<span class="icon">
<lightning:icon iconName="standard:lightning_component" class="redemIcon" alternativeText="Approved" />
</span>
<span class="text">Redemptions
<br/>
<lightning:formattedNumber value="{!' '+v.dcioRedemTotal}" style="currency" currencyCode="USD" class="aumNegative" />
</span>
</div>
</div>
<div class="graph">
<canvas aura:id="dcioChart" id="dcioChart" class="barChart chart" />
</div>
</div>
</span>
</div>
</div>
<div class="buttonGroup2" style="padding-left:15px; height:50px; padding-top:20px">
<ui:button label="Retail" class="activeButton2" press="{!c.breakdownSelect}" aura:id="composite_fund_breakdown.sales_and_redemptions."
/>
<ui:button label="DCIO" class="button2" press="{!c.breakdownSelect}" aura:id="retirement_breakdown.dcio_composite_fund_breakdown.sales_and_redemptions."
/>
<ui:button label="Recordkeeper" class="button2" press="{!c.breakdownSelect}" aura:id="retirement_breakdown.dcio_composite_fund_breakdown.top_platforms."
/>
<ui:button label="Assets" class="button2" press="{!c.breakdownSelect}" aura:id="composite_fund_breakdown.assets_under_management.assets_breakdown"
/>
</div>
<aura:if isTrue="{!v.bdFundType == 'DCIO' || v.bdFundType == 'Retail'}">
<div class="{!v.gridAlignment}">
<div class="{!v.gridColumn1}">
<div class="infoHeader">{!v.bdTimeFrameTitle+' '+v.bdFundType+' Fund Sales'}</div>
<table class="table">
<aura:iteration items="{!v.salesBreakdown}" var="sb">
<tr class="row" onclick="{!c.openModal}" id="{!sb.comp_fund_code}" value="{!sb.comp_fund_code}" >
<td class="fund" >
{!sb.fund_name}
</td>
<td class="sales">
<lightning:formattedNumber value="{!sb.sales}" style="currency" currencyCode="USD" />
</td>
</tr>
</aura:iteration>
</table>
</div>
<div class="{!v.gridColumn2}">
<div class="infoHeader">{!v.bdTimeFrameTitle+' '+v.bdFundType+' Fund Redemptions'}</div>
<table class="table">
<aura:iteration items="{!v.redemBreakdown}" var="rb">
<tr class="row" onclick="{!c.openModal}" id="{!rb.comp_fund_code}" >
<td class="fund">
{!rb.fund_name}
</td>
<td class="redems">
<lightning:formattedNumber value="{!rb.redemptions}" style="currency" currencyCode="USD" />
</td>
</tr>
</aura:iteration>
</table>
</div>
</div>
</aura:if>
<aura:if isTrue="{!v.bdFundType == 'Assets'}">
<div class="assetBreakdown">
<div class="infoHeader" style="padding-left:12px">DIRECTIONAL ASSETS BY FUND (current, trackable holdings)</div>
<table class="table">
<aura:iteration items="{!v.assetsBreakdown}" var="ab">
<tr class="row" onclick="{!c.openModal}" aura:id="{!ab.comp_fund_code}" >
<td class="fund">
{!ab.fund_name}
</td>
<td class="sales">
<lightning:formattedNumber value="{!ab.assets}" style="currency" currencyCode="USD" />
</td>
</tr>
</aura:iteration>
</table>
</div>
</aura:if>
<aura:if isTrue="{!v.bdFundType == 'Recordkeeper'}">
<div class="{!v.gridAlignment}">
<div class="{!v.gridColumn1}">
<div class="infoHeader">{!v.bdTimeFrameTitle+' '+v.bdFundType+' Fund Sales'}</div>
<table class="table">
<aura:iteration items="{!v.recordkeeperBreakdown}" var="rkb">
<tr class="row" onclick="{!c.openModal}" aura:id="{!rkb.fundCode}" >
<td class="fund">
{!rkb.platform_name}
</td>
<td class="sales">
<lightning:formattedNumber value="{!rkb.platform_sales}" style="currency" currencyCode="USD" />
</td>
</tr>
</aura:iteration>
</table>
</div>
<div class="{!v.gridColumn2}">
<div class="infoHeader">{!v.bdTimeFrameTitle+' '+v.bdFundType+' Fund Redemptions'}</div>
<table class="table">
<aura:iteration items="{!v.recordkeeperBreakdown}" var="rkb">
<tr class="row" onclick="{!c.openModal}" aura:id="{!rkb.fundCode}" >
<td class="fund">
{!rkb.platform_name}
</td>
<td class="redems">
<lightning:formattedNumber value="{!rkb.platform_redemptions}" style="currency" currencyCode="USD" />
</td>
</tr>
</aura:iteration>
</table>
</div>
</div>
</aura:if>
</div>
<!--FUND DETAILS MODAL-->
<aura:if isTrue="{!v.isOpen}">
<!--###### MODAL BOX Start######-->
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- ###### MODAL BOX HEADER Start ######-->
<header class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{! c.closeModel }"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About Sfdcmonkey.com</h2>
</header>
<!--###### MODAL BOX BODY Part Start######-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<c:Contact_AdvisorFundDetails fundCode="{!v.fundCode}" heartbeatId="{!v.heartbeatId}" />
</div>
<!--###### MODAL BOX FOOTER Part Start ######-->
<footer class="slds-modal__footer">
<lightning:button variant="neutral"
label="Previous"
onclick=""/>
<lightning:button variant="neutral"
label="Next"
onclick=""/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
<!--###### MODAL BOX Part END Here ######-->
</aura:if>
</aura:component>

Class
({
init: function (component, event, helper) {
var heartbeatId = component.get("v.heartbeatId");
var tab = 'retail';
var canvas = '';
//remove below code
if (heartbeatId == null || heartbeatId == '') {
heartbeatId = '00000000000022052882';
}
var action = component.get("c.getAdvisorSalesAssets");
action.setParams({
"heartbeatId": heartbeatId
});
action.setCallback(this, function (result) {
var device = $A.get("$Browser.formFactor");
component.set('v.device', device);
if (device == "TABLET") {
component.set('v.gridAlignment', 'slds-grid slds-gutters slds-wrap');
component.set('v.gridColumn1', 'slds-col slds-order_1 slds-size_6-of-12');
component.set('v.gridColumn2', 'slds-col slds-order_2 slds-size_6-of-12');
} else {
component.set('v.gridAlignment', 'slds-grid slds-gutters slds-grid_vertical');
component.set('v.gridColumn1', 'slds-col slds-order_1');
component.set('v.gridColumn2', 'slds-col slds-order_2');
}
component.set('v.activeTimeFrame','previous_day');
component.set('v.activeBreakdown', 'composite_fund_breakdown.sales_and_redemptions.');
var graphData = [];
var salesData = [];
var redemptionData = [];
var salesAndAssets = JSON.parse(result.getReturnValue());
console.log('salesAndAssets');
console.log(salesAndAssets);
component.set('v.salesAndAssets',salesAndAssets);
var aum = salesAndAssets.composite_fund_breakdown.assets_under_management.total_assets;
if(aum >= 0){
component.set('v.aumValue', 'aumPositive');
}else{
component.set('v.aumValue', 'aumNegative');
}
var retailTotals = salesAndAssets.composite_fund_breakdown.sales_and_redemptions;
var dcioTotals = salesAndAssets.retirement_breakdown.dcio_composite_fund_breakdown.sales_and_redemptions;
var recordkeeperTotals = salesAndAssets.retirement_breakdown.dcio_composite_fund_breakdown.top_platforms;
var assets = salesAndAssets.composite_fund_breakdown.assets_under_management.assets_breakdown;
var graphLabels = ["YEST", "YTD", "PY", "2PY"];
var retailSalesYst = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.previous_day.sales_breakdown;
if (salesAndAssets.composite_fund_breakdown.sales_and_redemptions.previous_day.sales_breakdown.length > 0) {
component.set('v.salesBreakdown', salesAndAssets.composite_fund_breakdown.sales_and_redemptions.previous_day.sales_breakdown);
}
var retailRedemYst = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.previous_day.redemptions_breakdown;
if (salesAndAssets.composite_fund_breakdown.sales_and_redemptions.previous_day.redemptions_breakdown.length > 0) {
component.set('v.redemBreakdown', salesAndAssets.composite_fund_breakdown.sales_and_redemptions.previous_day.redemptions_breakdown);
}
var retailSalesYtd = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.year_to_date.sales_breakdown;
var retailRedemYtd = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.year_to_date.redemptions_breakdown;
var retailSalesPy = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.prior_year.sales_breakdown;
var retailRedemPy = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.prior_year.redemptions_breakdown;
var retailSales2Py = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.two_years_prior.sales_breakdown;
var retailRedem2Py = salesAndAssets.composite_fund_breakdown.sales_and_redemptions.two_years_prior.redemptions_breakdown;
component.set('v.aum', aum);
component.set('v.asOfAum', salesAndAssets.aum_eff_date);
component.set('v.asOfGraph', salesAndAssets.sales_and_redemptions.year_to_date.as_of_date);
component.set('v.totalSales', salesAndAssets.sales_and_redemptions.year_to_date.sales);
component.set('v.totalRedemptions', salesAndAssets.sales_and_redemptions.year_to_date.redemptions);
component.set('v.retailTotals', retailTotals);
component.set('v.retailSalesTotal', retailTotals.previous_day.sales_total);
component.set('v.retailRedemTotal', retailTotals.previous_day.redemptions_total);
component.set('v.dcioTotals', dcioTotals);
component.set('v.dcioSalesTotal', 0);
component.set('v.dcioRedemTotal', 0);
component.set('v.recordkeeperTotals', recordkeeperTotals);
component.set('v.assets', assets);
component.set('v.graphLabels', graphLabels);
component.set('v.retailSalesYst', retailSalesYst);
component.set('v.retailRedemYst', retailRedemYst);
component.set('v.retailSalesYtd', retailSalesYtd);
component.set('v.retailRedemYtd', retailRedemYtd);
component.set('v.retailSalesPy', retailSalesPy);
component.set('v.retailRedemPy', retailRedemPy);
component.set('v.retailSales2Py', retailSales2Py);
component.set('v.retailRedem2Py', retailRedem2Py);
salesData.push(retailTotals.previous_day.sales_total);
salesData.push(retailTotals.year_to_date.sales_total);
salesData.push(retailTotals.prior_year.sales_total);
salesData.push(retailTotals.two_years_prior.sales_total);
redemptionData.push(retailTotals.previous_day.redemptions_total * -1);
redemptionData.push(retailTotals.year_to_date.redemptions_total * -1);
redemptionData.push(retailTotals.prior_year.redemptions_total * -1);
redemptionData.push(retailTotals.two_years_prior.redemptions_total * -1);
helper.createVerticalGraph(component, event, 'retail', 'YEST' );
helper.createVerticalGraph(component, event, 'dcio', 'MTD');
});
$A.enqueueAction(action);
},
timeFrameSelect: function (component, event, helper) {
var timeFrame = event.getSource().getLocalId();
var buttonName = event.getSource().get("v.label");
var salesBackground = [];
var redemBackground = [];
if(buttonName == 'YEST'){
helper.createVerticalGraph(component, event, 'retail',buttonName );
helper.createVerticalGraph(component, event, 'dcio',buttonName );
}else if(buttonName == 'MTD'){
helper.createVerticalGraph(component, event, 'retail',buttonName );
helper.createVerticalGraph(component, event, 'dcio',buttonName );
}else if(buttonName == 'YTD'){
helper.createVerticalGraph(component, event, 'retail',buttonName );
helper.createVerticalGraph(component, event, 'dcio',buttonName );
}else if(buttonName == 'PY'){
helper.createVerticalGraph(component, event, 'retail',buttonName );
helper.createVerticalGraph(component, event, 'dcio',buttonName );
}else if(buttonName == '2YR'){
helper.createVerticalGraph(component, event, 'retail',buttonName );
helper.createVerticalGraph(component, event, 'dcio',buttonName );
}
helper.changeButtons(component, event, buttonName);
component.set('v.bdTimeFrameTitle', buttonName);
component.set('v.activeTimeFrame', timeFrame);
var breakdown = component.get('v.bdFundType');
var path = component.get('v.activeBreakdown');
var retailSales = 'v.retailTotals[0].'+timeFrame+'.sales_total';
var retailRedem = 'v.retailTotals[0].'+timeFrame+'.redemptions_total';
var dcioSales = 'v.dcioTotals[0].'+timeFrame+'.sales_total';
var dcioRedem = 'v.dcioTotals[0].'+timeFrame+'.redemptions_total';
helper.getSalesTotals(component, event, retailSales, retailRedem, dcioSales, dcioRedem);
if(breakdown == 'DCIO' || breakdown == 'Retail'){
var salesBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.sales_breakdown';
var redemBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.redemptions_breakdown';
helper.getSalesRedems(component, event, salesBreakdown, redemBreakdown);
}else if(breakdown == 'Recordkeeper'){
var platformsBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.platforms_breakdown';
helper.getRecordkeeper(component, event, platformsBreakdown);
}else{
var assetBreakdown = 'v.salesAndAssets[0].composite_fund_breakdown.assets_under_management.assets_breakdown';
helper.getAssetBreakdown(component, event, assetBreakdown);
}
},
breakdownSelect: function (component, event, helper) {
var buttonName = event.getSource().get("v.label");
helper.changeButtons(component, event, buttonName);
var path = event.getSource().getLocalId();
var timeFrame = component.get('v.activeTimeFrame');
component.set('v.activeBreakdown',path);
component.set('v.bdFundType', buttonName);
if(buttonName == 'Retail'){
var salesBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.sales_breakdown';
var redemBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.redemptions_breakdown';
helper.getSalesRedems(component, event, salesBreakdown, redemBreakdown);
}else if(buttonName == 'DCIO'){
var salesBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.sales_breakdown';
var redemBreakdown = 'v.salesAndAssets[0].'+path+timeFrame+'.redemptions_breakdown';
helper.getSalesRedems(component, event, salesBreakdown, redemBreakdown);
}else if(buttonName == 'Recordkeeper'){
var Recordkeeper = 'v.salesAndAssets[0].'+path+timeFrame+'.platforms_breakdown';
helper.getRecordkeeper(component, event, Recordkeeper);
}else{
var assets = 'v.salesAndAssets[0].composite_fund_breakdown.assets_under_management.assets_breakdown';
helper.getAssetBreakdown(component, event, assets);
}
},
spinnerOn: function (component, event, helper) {
component.set('v.spinner', true);
},
spinnerOff: function (component, event, helper) {
component.set('v.spinner', false);
},
openModal: function (component, event, helper) {
console.log('open modal')
console.log(component);
var rectarget = event.currentTarget;
var fundCode = rectarget.getAttribute("id");
var fundCodeClass = rectarget.getAttribute("class");
console.log('fund code is '+fundCode);
console.log('fundClass code is '+fundCodeClass);
component.set('v.fundCode',fundCode);
component.set('v.showFundDetails', true);
},
closeModal: function (component, event, helper) {
console.log('close modal');
component.set('v.fundCode','');
component.set('v.showFundDetails', false);
},

})