breakout orders

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>