breakout orders

src/charts/ordershapes.js

@@ -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},

src/charts/shape.js

@@ -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

src/components/LinePrice.vue

@@ -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'
+    msg += ' diagonal'
-  return props.isBreakout ? 'breakout' : 'limit'
+  return msg
 })
 
 

src/components/Status.vue

@@ -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)

src/components/chart/BuilderPanel.vue

@@ -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

src/components/chart/ChartOrder.vue

@@ -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-tooltip text="Spread order across time" location="top">
-          <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">
             <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>

src/components/chart/DiagonalBuilder.vue

@@ -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>
 

src/components/chart/LimitBuilder.vue

@@ -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)

src/components/chart/RungBuilder.vue

@@ -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>