Last active
February 26, 2022 07:58
-
-
Save shimarin/c627c928cac34941d00087b1bdd86055 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>信用取引計算くん</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 © 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://twitter.com/shimariso/status/1497428191388274688