Skip to content

Instantly share code, notes, and snippets.

@shimarin

shimarin/trade.html

Last active February 26, 2022 07:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shimarin/c627c928cac34941d00087b1bdd86055 to your computer and use it in GitHub Desktop.
Save shimarin/c627c928cac34941d00087b1bdd86055 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
trade.html
<html>
<head>
<title>信用取引計算くん</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
</head>
<body>
<div id="page-content" class="card">
<h1 class="card-header"><i class="bi bi-calculator"></i>信用取引計算くん</h1>
<div class="card-body">
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi bi-graph-up-arrow"></i> 現在単価</div>
<div class="col-auto">
<input class="form-control form-control-sm" v-bind:class="{'is-invalid':!valid.price}" v-model="price" type="number">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi bi-basket"></i> 建玉数</div>
<div class="col-sm-2 col-md-1">
<input class="form-control form-control-sm" v-bind:class="{'is-invalid':!valid.tama}" v-model="tama" type="number">
</div>
<div class="col-auto">
<input class="form-check-input" type="radio" id="sell" value="sell" v-model="direction"><label for="sell">売り</label>
<input class="form-check-input" type="radio" id="buy" value="buy" v-model="direction"><label for="buy">買い</label>
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi bi-bank"></i> 返済価格</div>
<div class="col-auto"> {{isNumber(price) && isNumber(tama)? numberFormat(price * tama) : '-'}}</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi" v-bind:class="emoji(profit)"></i> 現在損益</div>
<div class="col-sm-2 col-md-1">
<input class="form-control form-control-sm" v-bind:class="{'is-invalid':!valid.profit}" v-model="profit" type="number">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi bi-signpost-split"></i> 損益分岐点</div>
<div class="col-auto">{{breakEven !== null? numberFormat(breakEven) : '-'}}</div>
<div class="col-auto">
<button class="btn btn-outline-primary" v-on:click="targetPrice = breakEven"><i class="bi bi-arrow-down-square"></i></button>
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi bi-bullseye"></i> 目標単価</div>
<div class="col-auto">
<input class="form-control form-control-sm" v-bind:class="{'is-invalid':!valid.targetPrice}" v-model="targetPrice" type="number">
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-sm-2"><i class="bi" v-bind:class="emoji(targetProfit)"></i> 目標単価<br/>到達時損益</div>
<div class="col-auto">{{targetProfit !== null? numberFormat(targetProfit) : '-'}}</div>
</div>
<br>
<div class="alert alert-warning" v-if="profit > 0">
<i class="bi bi-exclamation-triangle"></i> 勝ち逃げは正義
</div>
</div>
<div class="card-footer text-muted">
<footer><p>このツールを使用した結果いかなる損失が発生しても一切の責任を負いません。<br/>Copyright &copy; 2022 Tomoatsu Shimada</p></footer>
</div>
</div>
<script type="module">
import { createApp } from "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.esm-browser.min.js";
createApp({
data() { return {
price: 13000,
tama: 10,
direction: "sell",
profit: -6,
targetPrice: null,
numberFormat: new Intl.NumberFormat("ja-JP").format
}},
computed: {
valid() {
return {
price: this.isNumber(this.price) && this.price > 0,
tama: this.isNumber(this.tama) && this.tama > 0,
profit: this.isNumber(this.profit),
targetPrice: this.isEmpty(this.targetPrice) || (this.isNumber(this.targetPrice) && this.targetPrice > 0)
};
},
breakEven() {
if (!this.valid.price || !this.valid.tama || !this.valid.profit) return null;
//else
return (this.direction=="buy"? Math.ceil : Math.floor)(
(this.price*this.tama+(this.direction=="buy"? -this.profit : this.profit))/this.tama
);
},
targetProfit() {
if (!this.valid.price || !this.valid.tama || !this.valid.profit || this.isEmpty(this.targetPrice) || !this.valid.targetPrice) return null;
//else
return (this.direction=="buy"? (this.targetPrice - this.price) : (this.price - this.targetPrice)) * this.tama + this.profit;
}
},
methods: {
isNumber(value) {
return ((typeof value === 'number') && (isFinite(value)));
},
isEmpty(value) {
return value === null || value === undefined || value === "";
},
emoji(value) {
if (value > 0) return "bi-emoji-heart-eyes";
//else
if (value < 0) return "bi-emoji-dizzy";
//else
return "bi-emoji-neutral";
}
}
}).mount("#page-content");
</script>
</body>
</html>
@shimarin
Copy link
Author

https://twitter.com/shimariso/status/1497428191388274688

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment