dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

breakout orders

Browse Source
This commit is contained in:
tim
2024-10-31 16:54:57 -04:00
parent 4eb15355a6
commit a65bc94dac
9 changed files with 87 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/charts/ordershapes.js
View File

@@ -98,13 +98,13 @@ class TrancheShapes {
const amountSymbol = buy ? this.symbol.base.s : this.symbol.quote.s
const color = buy ? 'green' : 'red'
if (intercept !== 0 || slope !== 0) {
console.log('tranche line', intercept, slope)
// console.log('tranche line', intercept, slope)
// line active
if (slope === 0) {
let price = intercept
price *= scale
// horizontal line
console.log('hline', price)
// console.log('hline', price)
const model = {price, color, maxAllocation: status.order.amount, amount, amountSymbol};
const s = new HLine(model, null, null, null, true)
this.shapes.push(s)
@@ -120,7 +120,7 @@ class TrancheShapes {
let endPrice = (intercept + slope * endTime);
startPrice *= scale
endPrice *= scale
console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice)
// console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice)
// noinspection EqualityComparisonWithCoercionJS
const model = {
pointA: {time: startTime, price: startPrice},

14
src/charts/shape.js
View File

@@ -108,6 +108,8 @@ export class Shape {
// both amount and amountSymbol must be set in order to display amount text
this.model.amount = null
this.model.amountSymbol = null
this.model.extraText = null
this.model.textLocation = 'above'
// LEAF SUBCLASSES MUST CALL setModel(model) AFTER ALL CONSTRUCTION.
}
@@ -127,6 +129,10 @@ export class Shape {
this.model.amount = model.amount
if (model.amountSymbol)
this.model.amountSymbol = model.amountSymbol
if (model.extraText)
this.model.extraText = model.extraText
if (model.textLocation)
this.model.textLocation = model.textLocation
const newProps = {}
@@ -152,12 +158,18 @@ export class Shape {
// text label
let text = allocationText(this.model.allocation, this.model.amount, this.model.amountSymbol)
if (this.model.extraText)
text += ' '+this.model.extraText
if (this.debug) text = `${this.id} ` + text
if (!text.length)
newProps.showLabel = false
else {
newProps.text = text
newProps.showLabel = true
newProps.textLocation = this.model.textLocation
newProps.vertLabelsAlign =
this.model.textLocation === 'above' ? 'bottom' :
this.model.textLocation === 'below' ? 'top' : null;
}
if (this.debug && this.id)
@@ -612,7 +624,7 @@ export class DLine extends Line {
}
/*
/* todo tim
pointsToTvOhlcStart(points, periodSeconds = null) {
if (points === null) return null
const [v,w] = points

9
src/components/LinePrice.vue
View File

@@ -1,6 +1,6 @@
<template>
<span v-if="b||m">
{{description}}
{{description}}<br/>
<suspense>
<pair-price :base="base" :quote="quote" :value="price" :show-btn="showBtn"/>
</suspense>
@@ -13,7 +13,7 @@ import PairPrice from "@/components/PairPrice.vue";
import {computed} from "vue";
import {useStore} from "@/store/store.js";
const props = defineProps(['base', 'quote', 'm', 'b', 'isMin', 'showBtn', 'buy'])
const props = defineProps(['base', 'quote', 'm', 'b', 'isBreakout', 'showBtn', 'buy'])
const s = useStore()
@@ -25,9 +25,10 @@ const price = computed(()=>{
})
const description = computed(()=>{
let msg = props.isBreakout ? 'breakout' : 'limit'
if( props.m !== 0 )
return 'diagonal'
return props.isBreakout ? 'breakout' : 'limit'
msg += ' diagonal'
return msg
})

4
src/components/Status.vue
View File

@@ -100,7 +100,6 @@
<template v-for="(t, i) in item.order.tranches">
<tr>
<td class="text-right" colspan="2">
Tranche {{ i + 1 }}
<div class="text-right">
<div v-if="s.clock < item.trancheStatus[i].startTime">
Activates {{ timestampString(item.trancheStatus[i].startTime) }}
@@ -368,7 +367,8 @@ const orders = computed(()=>{
}
st.base = st.order.inverted ? high : low;
st.quote = st.order.inverted ? low : high;
st.minIsLimit = buy !== st.order.inverted // whether limit/breakout is flipped
st.minIsLimit = buy === st.order.inverted // whether limit/breakout is flipped
// console.log('buy/inverted/minIsLimit', buy, st.order.inverted, st.minIsLimit)
// console.log('elaborated', st)
}
result.sort((a,b)=>b.startTime-a.startTime)

3
src/components/chart/BuilderPanel.vue
View File

@@ -18,7 +18,7 @@
</template>
<script setup>
import {builderFuncs, deleteBuilder, useChartOrderStore} from "@/orderbuild.js";
import {builderFuncs, deleteBuilder} from "@/orderbuild.js";
import ColorBand from "@/components/chart/ColorBand.vue";
import RowBar from "@/components/chart/RowBar.vue";
import {onBeforeUnmount, onMounted, onUnmounted, onUpdated, watchEffect} from "vue";
@@ -31,7 +31,6 @@ const props = defineProps({
deleteShapes: {type: Function, default: null},
})
const emit = defineEmits(['update:builder'])
const co = useChartOrderStore()
let lastId = props.builder.id

30
src/components/chart/ChartOrder.vue
View File

@@ -29,18 +29,34 @@
</template>
<div class="my-3">
<div v-if="order.builders.length===0"> <!--todo remove gralpha limitation of one builder-->
<v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
<v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
<v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" @click="build(order,'DiagonalBuilder')">Diagonal</v-btn>
<!--
<v-tooltip text="Coming Soon!" location="top">
<v-tooltip text="Spread order across time" location="top">
<template v-slot:activator="{ props }">
<span v-bind="props">
<v-btn :color="color" variant="text" prepend-icon="mdi-information-outline">New Thing!</v-btn>
<v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
</span>
</template>
</v-tooltip>
<v-tooltip text="Trade a price level" location="top">
<template v-slot:activator="{ props }">
<span v-bind="props">
<v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
</span>
</template>
</v-tooltip>
<v-tooltip text="Trade trends and channels" location="top">
<template v-slot:activator="{ props }">
<span v-bind="props">
<v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" @click="build(order,'DiagonalBuilder')">Diagonal</v-btn>
</span>
</template>
</v-tooltip>
<v-tooltip text="Coming Soon! Stoplosses and Takeprofits" location="top">
<template v-slot:activator="{ props }">
<span v-bind="props">
<v-btn :color="color" variant="text" prepend-icon="mdi-plus-minus" disabled>Stoploss</v-btn>
</span>
</template>
</v-tooltip>
-->
<!-- mdi-ray-start-end mdi-vector-polyline -->
</div>
</div>

15
src/components/chart/DiagonalBuilder.vue
View File

@@ -1,5 +1,6 @@
<template>
<rung-builder name="Diagonal" :order="order" :builder="builder" v-model="endpoints"
<rung-builder :name="name" :description="description"
:order="order" :builder="builder" v-model="endpoints"
:shape="DLine" :mode="0"
:get-model-value="getModelValue" :set-model-value="setModelValue"
:set-values="setLines" :set-weights="setWeights"
@@ -122,6 +123,7 @@ builderDefaults(props.builder, {
extendRight: true,
rungs: 1,
skew: 0,
breakout: false,
color: defaultColor,
})
@@ -150,9 +152,11 @@ function buildTranches() {
// console.log('tranche start/end',
// t.startTime === DISTANT_PAST ? 'PAST' : t.startTime,
// t.endTime === DISTANT_FUTURE ? 'FUTURE' : t.endTime)
applyLinePoints(t, symbol, order.buy, ...line)
applyLinePoints(t, symbol, order.buy, ...line, builder.breakout)
tranches.push(t)
}
// if( flipped.value )
// tranches.reverse()
return tranches
}
@@ -395,6 +399,13 @@ function dirtyLine(a, b) {
return result
}
const name = computed(()=>(props.builder.breakout?'Breakout':'Limit')+' Diagonal'+(weights.value.length>1?'s':''))
const description = computed(()=>{
const buy = props.order.buy
const above = buy === props.builder.breakout
return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'
})
</script>

19
src/components/chart/LimitBuilder.vue
View File

@@ -1,5 +1,7 @@
<template>
<rung-builder :name="prices.length>1?'Ladder':'Limit'" :order="order" :builder="builder"
<rung-builder :name="(builder.breakout?'Breakout':'Limit')+(prices.length>1?' Ladder':'')"
:description="description"
:order="order" :builder="builder"
v-model="priceEndpoints" :mode="0" :flip="flipped"
:shape="HLine"
:get-model-value="getModelValue" :set-model-value="setModelValue"
@@ -70,6 +72,7 @@ builderDefaults(props.builder, {
priceB: null,
rungs: 1,
skew: 0,
breakout: false,
color: defaultColor,
})
@@ -81,7 +84,7 @@ function buildTranches() {
console.log('buildTranches', builder, order, tranches)
const ps = prices.value
const ws = weights.value
for(let i=ps.length-1; i>=0; i--) { // reverse
for(let i=0; i<ps.length; i++) {
let p = ps[i]
const w = ws[i]
const t = newTranche({
@@ -90,9 +93,11 @@ function buildTranches() {
})
const symbol = co.selectedSymbol
console.log('symbol', symbol, p)
applyLinePoint(t, symbol, order.buy, p)
applyLinePoint(t, symbol, order.buy, p, builder.breakout)
tranches.push(t)
}
if (!flipped.value)
tranches.reverse()
return tranches
}
@@ -191,11 +196,13 @@ function setWeights(ws) { weights.value = ws }
const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
const stdWidth = computed(()=>co.meanRange)
const description = computed(()=>{
const buy = props.order.buy
const above = buy === props.builder.breakout
return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'
})
function getModelValue(model) {
if(!model)

15
src/components/chart/RungBuilder.vue
View File

@@ -3,7 +3,10 @@
:adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
<div style="min-width: 4em; font-size: larger" :style="colorStyle"
class="d-flex flex-column align-self-start ml-2">
<span class="w-100 text-center">{{ name }}</span>
<div class="flex-row align-items-center">
<v-btn variant="outlined" @click="props.builder.breakout=!props.builder.breakout">{{ name }}</v-btn>
<div class="description">{{description}}</div>
</div>
<v-text-field type="number" v-model="rungs"
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Rungs"
@@ -55,6 +58,7 @@ const co = useChartOrderStore()
const endpoints = defineModel('modelValue') // 2-item list of points/values
const props = defineProps({
name: String,
description: String,
order: Object,
builder: Object,
buildTranches: Function,
@@ -309,12 +313,18 @@ function removeInteriorShape() {
function makeModel(index) {
const ws = weights.value
const alloc = props.builder.allocation * ws[index];
const buy = props.order.buy
const above = buy === props.builder.breakout
const result = {
color: color.value,
allocation: alloc,
maxAllocation: Math.max(...weights.value),
amount: props.order.amount * alloc,
amountSymbol: amountSymbol.value,
textLocation: above ? 'above' : 'below',
extraText: !props.builder.breakout ? ' ' :
// (above ? '↑ Breakout ↑' : '↓ Breakout ↓')
(above ? '▲ Breakout ▲' : '▼ Breakout ▼')
}
setModelValue(result, values.value[index])
return result
@@ -411,4 +421,7 @@ if (!endpoints.value[0])
min-width: 9em;
max-width: 12em;
}
.description {
font-size: 0.6em;
}
</style>