Store (un)realized P/L

[devanp92]

It would be helpful to display the unrealized + realized P/L over a trading session in the UI.

[charles-rumley]

If someone gives directions to calculate P/L, I can work on adding it.

[jannainm]

@devanp92

Say you want to calculate the net P/L for the current trading session in USD. If you inspect the HTML you find that quoteValue stores the current USD equivalent of your currency balance (pictured below).

We need to make a few changes to use this data to show our net P/L.

Open the following files:

• /admin/position.ts
• /common/models.ts
• /service/broker.ts
• /static/index.html

In position.ts:

1. Add a new variable originalValue to the PositionScope:

interface PositionScope extends ng.IScope {
    baseCurrency : string;
    basePosition : string;
    quoteCurrency : string;
    quotePosition : string;
    baseHeldPosition : string;
    quoteHeldPosition : string;
    value : string;
    quoteValue : string;
    originalValue: string;
}

2. Set originalValue on the first window load in the updatePosition function:

var updatePosition = (position : Models.PositionReport) => {
    if (!$scope.originalValue) {
      $scope.originalValue = toAmt(position.quoteValue);
    }
    $scope.baseCurrency = Models.Currency[position.pair.base];
    $scope.quoteCurrency = Models.Currency[position.pair.quote];
    $scope.basePosition = toAmt(position.baseAmount);
    $scope.quotePosition = toAmt(position.quoteAmount);
    $scope.baseHeldPosition = toAmt(position.baseHeldAmount);
    $scope.quoteHeldPosition = toAmt(position.quoteHeldAmount);
    $scope.value = toAmt(position.value);
    $scope.quoteValue = toAmt(position.quoteValue);
};

In models.ts add originalValue to PositionReport:

export class PositionReport {
    constructor(public baseAmount: number,
                public quoteAmount: number,
                public baseHeldAmount: number,
                public quoteHeldAmount: number,
                public value: number,
                public quoteValue: number,
                public originalValue: number,
                public pair: CurrencyPair,
                public exchange: Exchange,
                public time: Date) {}
}

In broker.ts add originalValue by passing in the quoteValue twice to the calculation of the positionReport in the onPositionUpdate function:

const positionReport = new Models.PositionReport(baseAmount, quoteAmount, basePosition.heldAmount, quotePosition.heldAmount, baseValue, quoteValue, quoteValue, this._base.pair, this._base.exchange(), this._timeProvider.utcNow());

In index.html add the following to the script <script type="text/ng-template" id="positions.html">:

<h4 class="col-md-12 col-xs-2"><small>
  Net: {{ quoteValue - originalValue | number: 2 }} ({{ quoteValue }} - {{ originalValue }})
</small></h4>

Note: In angular you can perform subtraction in templates. | number: 2 rounds the value to 2 places.

You will get something like this in your platform to help you tell the net value (picture was before I implemented rounding, yours should look better):

You'll want to use an official P/L calculation but the goal here is to show how to implement changes to the variables and display them in the UI. If you're simply looking for an estimate while trading (as I was) then this should suffice.

The originalValue is overwritten if you refresh the window, so it's far from perfect. Still needs persistence added with mongo, which I have not looked into it yet. You may also need to update backtest.ts with originalValue if you want to continue using backtesting - I noticed quoteValue being referenced there so check it out. Hope this helps.