inner rungs display

src/charts/chart.js

@@ -136,12 +136,18 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
     options.shape = shapeType.code
     // programatically adds a shape to the chart
     let shapeId
-    if( points.time || points.price )
+    try {
-        shapeId = chart.createShape(points, options)
+        if (points.time || points.price)
-    else if( points.length === 1 )
+            shapeId = chart.createShape(points, options)
-        shapeId = chart.createShape(points[0], options)
+        else if (points.length === 1)
-    else
+            shapeId = chart.createShape(points[0], options)
-        shapeId = chart.createMultipointShape(points, options)
+        else
+            shapeId = chart.createMultipointShape(points, options)
+    }
+    catch (e) {
+        console.error('Could not create shape', shapeType, points, options, e)
+        return null
+    }
     if( callbacks.length )
         shapeCallbacks[shapeId] = callbacks
     // console.log(`created ${shapeType.name}`, shapeId)

src/components/chart/ChartPlaceOrder.vue

@@ -6,7 +6,8 @@
                :color="orderColor" v-if="co.orders.length>0" :disabled="!valid">
           Place Dexorder
         </v-btn>
-        <v-btn variant="flat" prepend-icon="mdi-delete" v-if="co.orders.length>0" @click="cancelOrder">Reset</v-btn>
+        <v-btn variant="text" prepend-icon="mdi-delete" v-if="co.orders.length>0"
+                     :disabled="!orderChanged" @click="cancelOrder">Reset</v-btn>
       </template>
       <needs-chart>
         <template v-for="o in co.orders">
@@ -17,7 +18,7 @@
             <v-card-actions>
               <v-spacer/>
               <v-btn @click="()=>showResetDialog=false">Keep Existing</v-btn>
-              <v-btn @click="()=>{co.resetOrders(); showResetDialog=false}" color="red">Reset Order</v-btn>
+              <v-btn @click="()=>{co.resetOrders(); showResetDialog=false}" color="red" text="Reset Order"/>
             </v-card-actions>
           </v-card>
         </v-dialog>
@@ -69,6 +70,9 @@ const valid = computed(()=>{
   return true
 })
 
+
+const orderChanged = computed(()=>!(co.orders.length===1 && co.orders[0].builders.length===0 && !co.orders[0].amount))
+
 function cancelOrder() {
   showResetDialog.value = true
 }

src/components/chart/LimitBuilder.vue

@@ -13,22 +13,34 @@
                       style="width: 4.5em;"
         />
       </div>
-      <div>
+      <table>
-        <div v-if="rungs>1">
+        <tbody>
-          <v-text-field type="number" v-model="lineBPrice" min="0"
+        <template v-if="rungs>1">
+          <tr>
+            <td><v-text-field type="number" v-model="lineBPrice" min="0"
                         density="compact" hide-details class="mx-1 my-2" variant="outlined"
                         label="Price"
                         :color="color" :base-color="color"
                         style="flex: 6em"
-          />
+            /></td>
-        </div>
+            <td class="weight">{{(weights[weights.length-1]*100).toFixed(1)}}%</td>
-        <v-text-field type="number" v-model="lineAPrice" min="0"
+          </tr>
-                      density="compact" hide-details class="mx-1 my-2" variant="outlined"
+          <tr v-for="num in rungs-2" class="ml-5">
-                      label="Price"
+            <td class="pl-5">{{prices[prices.length-1-num]}}</td>
-                      :color="color" :base-color="color"
+            <td class="weight">{{(weights[prices.length-1-num]*100).toFixed(1)}}%</td>
-                      style="flex: 6em"
+          </tr>
-        />
+        </template>
-      </div>
+        <tr>
+          <td><v-text-field type="number" v-model="lineAPrice" min="0"
+                        density="compact" hide-details class="mx-1 my-2" variant="outlined"
+                        label="Price"
+                        :color="color" :base-color="color"
+                        style="flex: 6em"
+          /></td>
+          <td class="weight">{{weights.length?(weights[0]*100).toFixed(1):''}}%</td>
+        </tr>
+        </tbody>
+      </table>
       <div v-if="co.drawing" class="d-flex align-center pl-3"><v-icon icon="mdi-chat-alert-outline" color="grey" class="mr-1"/>Click the chart!</div>
       <div v-if="rungs>1" class="mx-2 d-flex align-center">
         <v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100" class="no-slider-bg ml-2 mr-4" hide-details/>
@@ -280,8 +292,6 @@ const rungs = computed({
 const prices = computed(()=>{
   let a = props.builder.priceA
   let b = props.builder.priceB
-
-
   const r = props.builder.rungs
   // console.log('prices for', a, b, r)
   if ( a===null || !r ) return []  // no data
@@ -291,6 +301,7 @@ const prices = computed(()=>{
   const result = []
   for( let i=0; i<r; i++ )
     result.push(a+i*spacing)
+  // console.log('prices', result)
   return result
 })
 
@@ -316,6 +327,7 @@ const weights = computed(() => {
     for (let i = 0; i < n; i++)
       result.push((1 - s * (2 * i / (n - 1) - 1)) / n)
   }
+  // console.log('weights', result)
   return result
 })
 
@@ -348,8 +360,9 @@ function allocationText(weight) {
 function adjustShapes() {
   // this is where all the lines are created or adjusted
   // console.log('adjustShapes()')
-  cancelDrawing()
   const limits = prices.value
+  if (limits.length)
+      cancelDrawing()
   const colorStrings = colors.value
   // line properties
   const lps = weights.value.map((w)=>{return {text:allocationText(w), textcolor:color.value, showLabel: true}})  // todo make this label innate to HLine with allocation and amount set in the model
@@ -436,5 +449,10 @@ onBeforeUnmount(deleteShapes)
 :deep(.v-slider.no-slider-bg .v-slider-track__fill) {
   background-color: inherit !important;
 }
+td.weight {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  text-align: right;
+}
 </style>