You need to sign in to do that
Don't have an account?
Luke 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:
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'); } } })
All Answers
The code of the controller ( sectionOne, sectionOne1 ) and the event ( spreadEvent ) is missing.
These things are held in a seperate Controller.js and spreadEvent.evt,
controller: event:
Thank you for your help!
Why don't you replace :
var totburden = (1 + burdenPer);
with just
var totburden = burdenPer;