breakout orders

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

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>