Trading Utils

by joplomacedo

HTML

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">

  <el-tabs v-model="activeTab" @tab-click="handleClick">
  
  
  
  
  
    <el-tab-pane label="Position calculator" name="positionCalculator">
      <el-form ref="form">
        <el-form-item label="Account Total ($)">
          <el-input v-model="accountTotal"></el-input>
        </el-form-item>

        <el-form-item label="Entry ($)">
          <el-input v-model="entryPrice"></el-input>
        </el-form-item>


        <el-form-item label="Stop Loss ($)">
          <el-input v-model="stopLossPrice"></el-input>
        </el-form-item>


        <el-form-item label="Max account risk (%)">
          <el-input v-model="acceptedAccountLossPercentage"></el-input>
        </el-form-item>
      </el-form>


      <el-alert :title="`Max Shares: ${maxShares}`" type="warning">
      </el-alert>
    </el-tab-pane>

    <el-tab-pane label="Tax calculator" name="profitAfterTaxesCalculator">
      <el-form ref="form">
        <el-form-item label="Profit ($)">
          <el-input v-model="profit"></el-input>
        </el-form-item>

        <el-form-item label="Tax Rate (%)">
          <el-input v-model="taxRateInPercentage"></el-input>
        </el-form-item>
        
        <el-form-item label="Fund Rate (%)">
          <el-input v-model="fundRateInPercentage"></el-input>
        </el-form-item>

      </el-form>

      <el-alert :title="`Profit after taxes and fund: ${profitAfterTaxesAndFund}`" type="warning">
      </el-alert>
      <el-alert :title="`Owed to fund: ${owedToFund}`" type="warning"> </el-alert>
      <el-alert :title="`Owed taxes: ${owedTaxes}`" type="warning">
      </el-alert>
    </el-tab-pane>
    
    
    <el-tab-pane label="Compounding calculator" name="compoundingCalculator">
      <el-form ref="form">
        <el-form-item label="Starting balance ($)">
          <el-input...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    accountTotal: 20906.69,
    entryPrice: '',
    stopLossPrice: '',
    acceptedAccountLossPercentage: 1,
    activeTab: 'positionCalculator',
    profit: '',
    taxRateInPercentage: 28,
    fundRateInPercentage: 7,
    
    compoundingCalculator: {
      initialAmount: 28300,
      dailyGrowthRateInPercentage: 1,
      periodInDays: 240,
    }
  },
  methods: {
  	calculateMaxShareSize({
        accountTotal,
        entryPrice,
        stopLossPrice,
        acceptedAccountLossPercentage = 1
    }) {
        const acceptedAccountLossInDollars = accountTotal * acceptedAccountLossPercentage/100;
        const lossPerShare = entryPrice - stopLossPrice;

        return acceptedAccountLossInDollars/lossPerShare;
    },
    
    calculateOwedTaxes( profit, taxRate ) {
    	return  profit * taxRate;
    },
    
    calculateProfitAfterTaxes( profit, taxRate ) {
    	return  profit * (1-taxRate);
    },
    
  },
  
  computed: {
    taxRate() {
			return this.taxRateInPercentage/100;
    },
    	
    fundRate() {
    	return this.fundRateInPercentage/100;
    },
    
  	owedTaxes() {
      return this.calculateOwedTaxes( this.profit, this.taxRate );
    },

    owedToFund() {
    	return this.profit * this.fundRate;
    },
    
    profitAfterTaxesAndFund() {
    	return this.profit - this.owedToFund - this.owedTaxes;
    },
    
  
  	maxShares() {
    const {
    	accountTotal,
      entryPrice,
      stopLossPrice,
      acceptedAccountLossPercentage,
    } = this;
    
    if ( accountTotal === '') return '?'
      if ( entryPrice === '') return '?'
      if ( stopLossPrice === '') return '?'
      if ( acceptedAccountLossPercentage === '') return '?'
        
    
    	return this.calculateMaxShareSize({
      	accountTotal,
        entryPrice,
        stopLossPrice,
        acceptedAccountLossPercentage
      })
    },
    
    
    compoundingCalculatorDailyGowthRate() {
    	return...