Skip to content

Commit

Permalink
feat: include tradingview in wallet table
Browse files Browse the repository at this point in the history
  • Loading branch information
Josep Batallé committed Aug 19, 2022
1 parent f6d1c02 commit 01a64d4
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 91 deletions.
40 changes: 24 additions & 16 deletions frontend/src/components/Dashboard/Views/Accounts/Accounts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
placeholder="Select account">
<el-option
class="select-default"
:error="errors.entity ? errors.entity : ''"
v-for="item in entities"
:key="item.id"
:label="item.name"
:error="errors.entity ? errors.entity : ''"
:value="item.id">
</el-option>
</el-select>
Expand All @@ -34,7 +34,10 @@
<el-option
class="select-default"
:error="errors.currency ? errors.currency : ''"
v-for="item in ['EUR', 'USD']" :key="item" :label="item" :value="item">
v-for="item in ['EUR', 'USD']"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
Expand Down Expand Up @@ -363,11 +366,11 @@ export default {
deep: true
},
"credential": {
handler(entity) {
handler(val, oldVal) {
this.errors = {};
}
},
deep: true
},
deep: true
},
methods: {
async deleteAccount() {
Expand Down Expand Up @@ -416,6 +419,7 @@ export default {
this.readDialogVisible = false;
},
async addAccount(done) {
console.log("Add or update account");
this.errors = {};
if (!this.credential.entity) {
this.errors.entity = 'Choose an entity';
Expand All @@ -427,15 +431,15 @@ export default {
if (!this.credential.currency) {
this.errors.currency = 'The currency is required';
}
if (!this.credential.parameters.length) {
if (!this.credential.parameters.length && this.credential.id == undefined) {
this.errors.parameters = 'Credentials are required';
}
if (!this.credential.encrypt_password) {
if (!this.credential.encrypt_password && this.credential.id == undefined) {
this.errors.encrypt_password = 'Encryption password is required';
}
if (Object.keys(this.errors).length) {
console.log(this.errors)
return;
}
Expand All @@ -444,11 +448,14 @@ export default {
"entity_id": this.credential.entity,
"currency": this.credential.currency
}
var vm = this;
let vm = this;
if (this.credential['id'] != undefined) {
console.log("Update credentials!")
this.createCredential(this.credential);
console.log("Update account!");
await axios.put(process.env.VUE_APP_BACKEND_URL + "/entities/accounts/" + this.credential['id'], data).then(function (res) {});
if (this.credential.parameters.length) {
console.log("Update credential!");
await this.createCredential(this.credential);
}
} else {
await axios.post(process.env.VUE_APP_BACKEND_URL + "/entities/accounts", data).then(function (res) {
vm.createCredential(res.data);
Expand All @@ -458,7 +465,7 @@ export default {
},
async createCredential(account) {
let parameters = []
for (var key in this.credential.parameters) {
for (let key in this.credential.parameters) {
parameters.push({
"value": this.credential.parameters[key],
"credential_type_id": Number(key)
Expand All @@ -480,7 +487,9 @@ export default {
this.dialogVisible = true;
this.credential = {
"parameters": [],
"entity": undefined
"entity": undefined,
"currency": undefined,
"name": ""
}
if (account !== undefined) {
this.credential["id"] = account.id;
Expand All @@ -490,9 +499,8 @@ export default {
}
this.errors = [];
this.entities = [];
var vm = this;
let vm = this;
await axios.get(process.env.VUE_APP_BACKEND_URL + "/entities/").then(function (res) {
//let res_code = res.status === 200 ? true : false;
res.data.forEach(function (e) {
if (e.type == account_type) {
vm.entities.push(e);
Expand Down
92 changes: 73 additions & 19 deletions frontend/src/components/Dashboard/Views/Broker/Balance.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
<el-popover trigger="hover"
placement="bottom">
<div>
<div class="popover-body">Current wallet value</div>
<div class="popover-body">Current wallet value. Benefits vs cost and benefits from previous day
</div>
</div>
<div slot="reference">
<stats-card type="success"
Expand All @@ -33,7 +34,8 @@
:title="total_value | toCurrency(base_currency)">
<div class="stats" slot="footer">
<i class="nc-icon nc-refresh-69"></i>
{{ this.current_benefits_percent }}%
{{ this.current_benefits_percent }}% | Previous day:
{{ this.total_value - this.base_previous_value | toCurrency(base_currency) }}
</div>
</stats-card>
</div>
Expand Down Expand Up @@ -63,7 +65,7 @@
<el-popover trigger="hover"
placement="bottom">
<div>
<div class="popover-body">Executed benefits over bought items. Only open orders</div>
<div class="popover-body">Executed benefits over bought items. Only current open orders</div>
</div>
<div slot="reference">
<stats-card type="success"
Expand Down Expand Up @@ -97,8 +99,41 @@
</div>
<div class="card-body table-full-width">
<el-table :data="this.wallet" :default-sort="{property: 'win_lose', order: 'descending'}"
row-key="id" :cell-class-name="testClass" :default-expand-all="false"
:cell-class-name="colorClass"
:cell-style="{padding: '0', height: '20px'}">
<el-table-column type="expand">
<template #default="props">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<el-table :data="props.row.children">
<el-table-column label="Date" prop="ticker.ticker"/>
<el-table-column label="Shares" prop="shares"/>
<el-table-column label="Price" prop="price">
<template slot-scope="scope">
{{ scope.row.price | toCurrency(scope.row.ticker.currency) }}
</template>
</el-table-column>
<el-table-column label="Cost" prop="cost">
<template slot-scope="scope">
{{ scope.row.cost | toCurrency(scope.row.ticker.currency) }}
</template>
</el-table-column>
<el-table-column label="Rate" prop="currency_rate">
<template slot-scope="scope">
{{ scope.row.transaction.currency_rate | toCurrency(scope.row.ticker.currency) }}
</template>
</el-table-column>
<!--el-table-column label="Broker" prop="broker"/-->
</el-table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div :id="props.row.ticker.ticker"></div>
<VueTradingView :options="props.row"/>
</div>
</div>
</template>
</el-table-column>

<el-table-column label="Symbol" property="ticker.ticker" sortable></el-table-column>
<el-table-column label="Shares" property="shares" width="100px"></el-table-column>
<el-table-column label="Price" property="price">
Expand All @@ -118,7 +153,7 @@
</el-table-column>
<el-table-column label="Market price" property="current_price">
<template slot-scope="scope">
{{ scope.row.current_price | toCurrency(scope.row.ticker.currency) }}
{{ scope.row.market.price | toCurrency(scope.row.ticker.currency) }}
</template>
</el-table-column>
<el-table-column label="Value" property="current_value" sortable>
Expand All @@ -131,17 +166,21 @@
{{ scope.row.win_lose | toCurrency(base_currency) }}
</template>
</el-table-column>
<el-table-column label="Change" property="price_change_percent" sortable>
<el-table-column label="Change" property="market.price_change" sortable>
<template slot-scope="scope">
{{ scope.row.price_change_percent | round(2) }}%
{{ scope.row.market.price_change | round(2) }}%
</template>
</el-table-column>
<el-table-column label="Pre" property="current_pre">
<el-table-column label="Pre" property="pre">
<template slot-scope="scope">
{{ scope.row.current_pre | toCurrency(scope.row.ticker.currency) }}
{{ scope.row.market.pre | toCurrency(scope.row.ticker.currency) }}
</template>
</el-table-column>
<el-table-column label="Pre change" property="market.pre_change" sortable>
<template slot-scope="scope">
{{ scope.row.market.pre_change | round(2) }}%
</template>
</el-table-column>
<el-table-column label="Pre change" property="pre_change_percent" sortable></el-table-column>
</el-table>
</div>
</div>
Expand Down Expand Up @@ -173,7 +212,7 @@
</div>
<div class="card-body table-responsive table-full-width">
<el-table :data="this.wallet" :default-sort="{property: 'percentage', order: 'descending'}"
:cell-class-name="testClass">
:cell-class-name="colorClass">
<el-table-column label="Symbol" property="ticker.ticker" width="100px" sortable></el-table-column>
<el-table-column label="cost" property="cost">
<template slot-scope="scope">
Expand Down Expand Up @@ -210,6 +249,7 @@ import {Table, TableColumn, Tabs, TabPane, Popover} from 'element-ui';
import axios from "axios";
import StatsCard from "../../../UIComponents/Cards/StatsCard";
import ChartCard from 'src/components/UIComponents/Cards/ChartCard';
import VueTradingView from 'vue-trading-view/src/vue-trading-view';
const tooltipOptions = {
tooltipFillColor: "rgba(0,0,0,0.5)",
Expand All @@ -231,7 +271,7 @@ export default {
name: "Wallet",
components: {
Table, TableColumn, StatsCard, ChartCard, Tabs, TabPane,
[Popover.name]: Popover,
[Popover.name]: Popover, VueTradingView
},
data() {
return {
Expand All @@ -244,6 +284,7 @@ export default {
total_cost: 0,
current_benefits_percent: 0,
benefits_percent: 0,
base_previous_value: 0,
investKey: 0,
investChart: {
labels: [],
Expand Down Expand Up @@ -285,9 +326,9 @@ export default {
createInvestChart(wallet_value) {
this.investChart.labels = this.wallet.map(el => el.ticker.ticker);
this.investChart.datasets[0].backgroundColor = this.wallet.map(function (el) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
});
Expand All @@ -296,17 +337,22 @@ export default {
},
fillWallet(res) {
this.wallet = res.data;
var vm = this;
let vm = this;
this.wallet = []
this.total_cost = 0;
this.total_current_benefits = 0; // taking into account if we sell the wallet right now
this.total_benefits = 0;
this.total_value = 0;
this.base_previous_value = 0;
let bar = new Promise((resolve, reject) => {
res.data.forEach(function (t, index, array) {
t.children = t.open_orders;
t['win_lose'] = t.current_benefit;
t.symbol = t.ticker.ticker;
t.container_id = t.ticker.ticker;
t.style = "3";
t.break_even = t.break_even * vm.fx_rate;
t.children.forEach(function (c) {
c.ticker = {
Expand All @@ -323,6 +369,7 @@ export default {
vm.total_benefits += t.benefits;
vm.total_current_benefits += t.current_benefit;
vm.total_value += t.base_current_value;
vm.base_previous_value += t.base_previous_value;
if (index === array.length - 1) resolve();
});
Expand All @@ -345,10 +392,17 @@ export default {
await axios.get(process.env.VUE_APP_BACKEND_URL + "/stock/fx_rate").then(this.fillFxRate);
await axios.get(process.env.VUE_APP_BACKEND_URL + "/stock/wallet").then(this.fillWallet);
},
testClass(item) {
if (item.column.property == 'pre_price_change_percent' || item.column.property == 'current_price_change_percent'
colorClass(item) {
if (item.column.property == 'market.price_change' || item.column.property == 'market.pre_change'
|| item.column.property == 'win_lose') {
if (parseInt(item.row[item.column.property]) > 0)
let objects = item.column.property.split('.')
let value = 0;
if (objects.length > 1){
value = objects.reduce((a, prop) => a[prop], item.row);
} else {
value = item.row[item.column.property]
}
if (parseFloat(value) > 0)
return "green";
else
return "red"
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/Dashboard/Views/Broker/Orders.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@
filter-placement="bottom-end"
>
</el-table-column>
<el-table-column label="Value date" property="value_date" sortable></el-table-column>
<el-table-column label="Value date" prop="value_date" sortable/>
<!--el-table-column label="type" property="type" sortable></el-table-column-->
<el-table-column label="Shares" property="shares" width="100px"></el-table-column>
<el-table-column label="price" width="100px">
<template slot-scope="scope">
{{ scope.row.price | toCurrency(scope.row.currency) }}
{{ scope.row.price | toCurrency(scope.row.ticker.currency) }}
</template>
</el-table-column>
<el-table-column label="fee" property="fee">
Expand All @@ -78,7 +78,7 @@
</template></el-table-column>
<el-table-column label="Total" property="total" sortable>
<template slot-scope="scope">
{{scope.row.total | toCurrency(scope.row.currency)}}
{{scope.row.total | toCurrency(scope.row.ticker.currency)}}
</template>
</el-table-column>
<el-table-column label="Cost" property="cost" sortable>
Expand Down Expand Up @@ -178,9 +178,9 @@ export default {
this.orders.forEach(function (s) {
s.value_date = s.value_date.split(' ')[0];
s.total = s.shares * s.price;
if (s.type == 0) {
if (s.type === 0) {
s.type = "Buy";
s.cost = s.total - s.fee - s.exchange_fee;
s.cost = s.total * s.currency_rate - s.fee - s.exchange_fee;
} else {
s.type = "Sell";
s.cost = s.total * s.currency_rate + s.fee + s.exchange_fee;
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/components/Dashboard/Views/Broker/Tax.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
</div>
<div class="card-body table-full-width">
<el-table name="tax_items" :data="this.closedOrders" :default-sort="{property: 'id', order: 'descending'}"
row-key="id" :cell-class-name="testClass" default-expand-all
row-key="id" :cell-class-name="colorClass" default-expand-all
:cell-style="{padding: '0', height: '20px'}">
<el-table-column label="Symbol">
<template #default="scope">
Expand Down Expand Up @@ -123,7 +123,6 @@ export default {
},
methods: {
fillTaxes(res) {
let resStatus = res.status === 200;
this.closedOrders = res.data;
this.benefits = 0;
this.fees = 0;
Expand Down Expand Up @@ -153,9 +152,8 @@ export default {
async getData() {
await axios.get(process.env.VUE_APP_BACKEND_URL + "/stock/tax?year=" + this.tax_year).then(this.fillTaxes);
},
testClass(item) {
if (item.column.property == 'pre_price_change_percent' || item.column.property == 'current_price_change_percent'
|| item.column.property == 'win_lose') {
colorClass(item) {
if (item.column.property == 'benefits') {
if (parseInt(item.row[item.column.property]) > 0)
return "green";
else
Expand Down
Loading

0 comments on commit 01a64d4

Please sign in to comment.