breakout orders

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)