+ Start a Discussion
Luke Higgins 22Luke Higgins 22 

Lightning component calculator miscalculating

I'm trying to make a calculator lightning component and I got everything working fine up until the "burdenPer" field is edited. If it stays as it's default, the calculation is correct, but if that particular field is edited the calculation jumps down to the negative thousands. 

component:
<aura:component implements="flexipage:availableForAllPageTypes"
                access="global">
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="placement" type="ts2__Placement__c" />
    
        <force:recordData recordId="{!v.recordId}" 
                          targetFields="{!v.placement}" 
                          layoutType="FULL" 
                          recordUpdated="{!c.recordUpdated}"/>
        
    <aura:attribute name="burden" type="Integer" />
    <aura:attribute name="hours" type="Integer" default="40"/>
    <aura:attribute name="payrate" type="Decimal" default="0.00"/>
    <aura:attribute name="billrate" type="Decimal" default="0.00"/>
    <aura:attribute name="burdenPer" type="Decimal" default="0.20"/>

 	<!-- Overtime items -->
    <aura:attribute name="othours" type="Integer" default="0"/>
    <aura:attribute name="otbillrate" type="Decimal" default="0.00"/>
    <aura:attribute name="otpayrate" type="Decimal" default="0.00"/>
    
    <!--Net spread items -->
    <aura:attribute name="miscSpreadDed" type="Decimal" default="0.00"/>
    <aura:attribute name="nonbillexp" type="Decimal" default="0.00"/>
    <aura:attribute name="nonbilloth" type="Decimal" default="0.00"/>
    <aura:attribute name="nonbillbon" type="Decimal" default="0.00"/>
    <aura:attribute name="referfee" type="Decimal" default="0.00"/>
    <aura:attribute name="compbon" type="Decimal" default="0.00"/>
    <aura:attribute name="vms" type="Decimal" default="0.00"/>
    <aura:attribute name="discount" type="Decimal" default="0.00"/>
    <aura:attribute name="perdiem" type="Decimal" default="0.00"/>
    
    
    <aura:attribute name="spread" type="Decimal"/>
    <aura:attribute name="netspread" type="Decimal"/>

  
    <aura:registerEvent name="change" type="c:spreadEvent"/>
    
    <aura:handler name="change" value="{!v.hours}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.payrate}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.billrate}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.vms}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.discount}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.perdiem}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.othours}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.otbillrate}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.otpayrate}" action="{!c.calculateSpread}"/>
	<aura:handler name="change" value="{!v.burdenPer}" action="{!c.calculateSpread}"/>
    
    <aura:handler name="change" value="{!v.miscSpreadDed}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.nonbillexp}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.nonbilloth}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.nonbillbon}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.referfee}" action="{!c.calculateSpread}"/>
    <aura:handler name="change" value="{!v.compbon}" action="{!c.calculateSpread}"/>

    <aura:handler name="init" value="{!this}" action="{!c.calculateSpread}" />
	
	<div> <div class="title2">Spread Calculator: </div>
        <div class="input">
            <lightning:input aura:id="hours" type="number" label="Hours worked a week:" step="0.1" value="{!v.hours}"/>
            <lightning:input aura:id="payrate" type="number" label="Pay rate:" formatter="currency"  step="0.01" value="{!v.payrate}"/>
            <lightning:input aura:id="billrate" type="number" label="Bill Rate:" formatter="currency"  step="0.01" value="{!v.billrate}"></lightning:input>

            <!-- drop down code -->
            
            <div class="slds-page-header11" style="cursor: pointer;" onclick="{!c.sectionOne}">
              <section class="slds-clearfix">
                <div class="slds-float--left ">
                    <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:right" size="xx-small" alternativeText="Indicates add"/>
                    <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:down" size="xx-small" alternativeText="Indicates dash"/>
                </div>
                <div class="slds-m-left-x-small">Overtime Entry (optional)</div>
              </section>
   			</div>
            <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
               <lightning:input aura:id="othours" type="number" label="Overtime hours worked a week:" step="0.1" value="{!v.othours}"/>
               <lightning:input aura:id="otpayrate" type="number" label="Overtime Pay Rate:" formatter="currency" step="0.01" value="{!v.otpayrate}"/>
               <lightning:input aura:id="otbillrate" type="number" label="Overtime Bill Rate:" formatter="currency" step="0.01" value="{!v.otbillrate}"/>
            </div>
            
             
           
                        <lightning:input aura:id="burdenPer" type="number" label="Burden:" formatter="percent"  step="0.01" value="{!v.burdenPer}"></lightning:input>
						 <lightning:helptext content="Enter burden in decimal form. (Example: .03 = 3%)"/> 
           
        </div>
        <div class="result">
            Spread Amount: 
            <br/>
            <lightning:formattedNumber value="{!v.spread}" style="currency" currencyCode="USD"/>
        </div>
        
        <!-- Net Spread dropdown -->

            
        <div class="slds-page-header11" style="cursor: pointer;" onclick="{!c.sectionOne1}">
          <section class="slds-clearfix">
            <div class="slds-float--left ">
                <lightning:icon class="slds-show" aura:id="articleOne1" iconName="utility:right" size="xx-small" alternativeText="Indicates add"/>
                <lightning:icon class="slds-hide" aura:id="articleOne1" iconName="utility:down" size="xx-small" alternativeText="Indicates dash"/>
            </div>
            <div class="slds-m-left-x-small">Calculate Net Spread</div>
          </section>
    	</div>
        
        <div class="slds-hide slds-p-around--medium" aura:id="articleOne1">
                        <lightning:helptext content="Enter percentages in decimal form. (Example: .03 = 3%)"/> 

            <lightning:input aura:id="vms" type="number" label="VMS Fee:" formatter="percent"  step="0.01" value="{!v.vms}"></lightning:input>
            <lightning:input aura:id="discount" type="number" label="Discount Fee:" formatter="percent"  step="0.01" value="{!v.discount}"></lightning:input>
            <lightning:input aura:id="perdiem" type="number" label="Per Diem:" formatter="currency"  step="0.01" value="{!v.perdiem}"></lightning:input>
            <lightning:input aura:id="miscSpreadDed" type="number" label="Misc Spread Deductions:" formatter="currency"  step="0.01" value="{!v.miscSpreadDed}"></lightning:input>
            <lightning:input aura:id="nonbillexp" type="number" label="All Nonbillable Expenses" formatter="currency"  step="0.01" value="{!v.nonbillexp}"></lightning:input>
            <lightning:input aura:id="nonbilloth" type="number" label="Nonbillable Other Earnings" formatter="currency"  step="0.01" value="{!v.nonbilloth}"></lightning:input>
            <lightning:input aura:id="nonbillbon" type="number" label="Nonbillable Bonus" formatter="currency"  step="0.01" value="{!v.nonbillbon}"></lightning:input>
            <lightning:input aura:id="referfee" type="number" label="Referral Fees" formatter="currency"  step="0.01" value="{!v.referfee}"></lightning:input>
            <lightning:input aura:id="compbon" type="number" label="Completion Bonus" formatter="currency"  step="0.01" value="{!v.compbon}"></lightning:input>

 			<div class="result">
                Net Spread Amount: 
                <br/>
                <lightning:formattedNumber value="{!v.netspread}" style="currency" currencyCode="USD"/>
        	</div>        
        
        </div>

    </div>    
    
</aura:component>
helper:
({
	calculateSpread : function(component) {
        // 1. Calculate monthly payment
        var payrate = component.get("v.payrate");
        var billrate = component.get("v.billrate");
        var burdenPer = component.get("v.burdenPer");
        var hours = component.get("v.hours");
        var othours = component.get("v.othours");
        var otbillrate = component.get("v.otbillrate");
        var otpayrate = component.get("v.otpayrate");
        	 var vms = component.get("v.vms");
        	 var discount = component.get("v.discount");
        	 var perdiem = component.get("v.perdiem");
         	 var miscSpreadDed = component.get("v.miscSpreadDed");
             var nonbillexp = component.get("v.nonbillexp");
             var nonbilloth = component.get("v.nonbilloth");
             var nonbillbon = component.get("v.nonbillbon");
             var referfee = component.get("v.referfee");
             var compbon = component.get("v.compbon");
        
        
        if (payrate && billrate > 0){
            
            var totalBillings = (hours * billrate) + (othours * otbillrate);
            var totalPayroll = (hours * payrate) + (othours * otpayrate);
            var totburden = (1 + burdenPer)
            var spread = totalBillings - (totalPayroll * (totburden));
                
        	component.set("v.spread", spread);
            
            var vmsfee = billrate * (1- vms);
            var discountfee = billrate * (1-discount);
            
            var netVariables = (perdiem + miscSpreadDed + nonbillexp + nonbilloth + nonbillbon + vmsfee + discountfee + referfee + compbon)
            var netspread = spread - netVariables
            component.set("v.netspread", netspread);

            
            
            // 2. Fire event with new spread data
            var event = $A.get("e.c:spreadEvent");
            event.setParams({"payrate": payrate,
                             "billrate": billrate,
                             "burdenPer": burdenPer,
                             "vms": vms,
                             "discount": discount,
                             "hours": hours,
                             "perdiem": perdiem,
                             "othours": othours,
                             "otbillrate": otbillrate,
                             "otpayrate": otpayrate,
                                "miscSpreadDed": miscSpreadDed,
                                "nonbillexp": nonbillexp,
                                "nonbilloth": nonbilloth,
                                "nonbillbon": nonbillbon,
                                "referfee": referfee,
                                "compbon": compbon,
                             "netspread": netspread,
                             "spread": spread});
            event.fire();
        }
	},
    	helperFun : function(component,event,secId) {
	  var acc = component.find(secId);
        	for(var cmp in acc) {
        	$A.util.toggleClass(acc[cmp], 'slds-show');  
        	$A.util.toggleClass(acc[cmp], 'slds-hide');  
       }
	},
    
	helperFun1 : function(component,event,secId1) {
	  var acc1 = component.find(secId1);
        	for(var cmp1 in acc1) {
        	$A.util.toggleClass(acc1[cmp1], 'slds-show');  
        	$A.util.toggleClass(acc1[cmp1], 'slds-hide');  
       }
	}
})

 
Best Answer chosen by Luke Higgins 22
Luke Higgins 22Luke Higgins 22
I was simply missing a semi colon on var totburden = (1 + burdenPer);

All Answers

Alain CabonAlain Cabon
Hi,

The code of the controller ( sectionOne, sectionOne1 ) and the event spreadEvent ) is missing.
 
Luke Higgins 22Luke Higgins 22
Hi Alain,

These things are held in a seperate Controller.js and spreadEvent.evt, 

controller:
({
	  calculateSpread : function(component, event, helper) {
        helper.calculateSpread(component);
	},  
    recordUpdated : function(component) {
        component.set("v.payrate", component.get("v.placement").ts2__Placement__c);
	},
    
     sectionOne : function(component, event, helper) {
       helper.helperFun(component,event,'articleOne');
    },
      sectionOne1 : function(component, event, helper) {
       helper.helperFun1(component,event,'articleOne1');
    }
})
event:
<aura:event type="APPLICATION">
    <aura:attribute name="hours" type="Integer"/>
	<aura:attribute name="payrate" type="Decimal"/>
  	<aura:attribute name="billrate" type="Decimal"/>
    <aura:attribute name="burden" type="Decimal"/>
    <aura:attribute name="burdenPer" type="Decimal"/>
  	<aura:attribute name="spread" type="Decimal"/>
    <aura:attribute name="vms" type="Decimal"/>
    <aura:attribute name="discount" type="Decimal"/>
    <aura:attribute name="perdiem" type="Decimal"/>
    <aura:attribute name="othours" type="Integer"/>
    <aura:attribute name="otbillrate" type="Decimal"/>
    <aura:attribute name="otpayrate" type="Decimal"/>
    <aura:attribute name="miscSpreadDed" type="Decimal"/>
    <aura:attribute name="nonbillexp" type="Decimal"/>
    <aura:attribute name="nonbilloth" type="Decimal"/>
    <aura:attribute name="nonbillbon" type="Decimal"/>
    <aura:attribute name="referfee" type="Decimal"/>
    <aura:attribute name="compbon" type="Decimal"/>
  	<aura:attribute name="netspread" type="Decimal"/>
</aura:event>


Thank you for your help!
Alain CabonAlain Cabon
Hi Luke,

Why don't you replace :

var totburden = (1 + burdenPer);

with just

var totburden =  burdenPer;
 
Luke Higgins 22Luke Higgins 22
I was simply missing a semi colon on var totburden = (1 + burdenPer);
This was selected as the best answer