placement, line drawing, and price display fixes (inverted test)

src/charts/chart.js

@@ -22,7 +22,7 @@ export function removeSymbolChangedCallback(cb) {
 }
 
 function changeSymbol(symbol) {
-    console.log('change symbol', symbol)
+    console.error('change symbol', symbol)
     if (symbol===null)
         co.selectedSymbol = null
     else {
@@ -33,8 +33,13 @@ function changeSymbol(symbol) {
 }
 
 
-export function setSymbol(symbol) {
+export async function setSymbol(symbol) {
-    widget.activeChart().setSymbol(symbol.ticker)
+    await new Promise(resolve => {
+        if (co.selectedSymbol?.ticker !== symbol.ticker)
+            widget.activeChart().setSymbol(symbol.ticker, null, resolve)
+        else
+            resolve()
+    })
 }
 
 
@@ -194,6 +199,9 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
         console.error('tvShape could not create', shapeType, points, options, e)
         return null
     }
+    if (shapeId===null) {
+        console.error('could not create shape', points, options)
+    }
     allShapeIds.push(shapeId)
     if( callbacks.length )
         shapeCallbacks[shapeId] = callbacks

src/charts/ordershapes.js

@@ -2,6 +2,7 @@ import {DISTANT_FUTURE, DISTANT_PAST} from "@/blockchain/orderlib.js";
 import {DLine, HLine} from "@/charts/shape.js";
 import {createShape, deleteShapeId} from "@/charts/chart.js";
 import {allocationText} from "@/orderbuild.js";
+import {timestamp} from "@/misc.js";
 
 export class OrderShapes {
     constructor(symbol, orderStatus) {
@@ -59,19 +60,21 @@ class TrancheShapes {
     createFillPoint(f) {
         // console.log('draw fill', f, this.symbol)
         const order = this.status.order;
-        let buy = order.tokenIn === this.symbol.quote.a
+        const symbol = this.symbol
-        if (this.symbol.inverted)
+        const scale = 10**symbol.decimals;
-            buy = !buy
+        const buy = order.tokenIn === this.symbol.quote.a
+        const inverted = buy === symbol.inverted
         const time = f.time
-        const out = Number(f.filledOut) * (1+this.status.order.route.fee/1000000)
+        const out = Number(f.filledOut) / (1-this.status.order.route.fee/1000000)
-        let price = buy ?
+        let price = out / Number(f.filledIn)
-            Number(f.filledIn) / out * 10**this.symbol.decimals :
+        if (inverted)
-            out / Number(f.filledIn) * 10**this.symbol.decimals
+            price = 1/price
+        price *= scale
         // console.log('price', price)
         const channel = buy?'low':'high';
         const text = (buy ? 'Buy ' : 'Sell ') + allocationText(null, f.filled, '')
         const s = createShape(buy?'arrow_up':'arrow_down', {time, price}, {channel,text,lock:true})
-        console.log('created fill shape at', time, price)
+        // console.log('created fill shape at', time, price)
         this.fills.push(s)
     }
 
@@ -81,21 +84,41 @@ class TrancheShapes {
         const symbol = this.symbol
         const scale = 10**symbol.decimals;
         const buy = status.order.tokenIn === this.symbol.quote.a
+        const inverted = buy === symbol.inverted
         const color = buy ? 'green' : 'red'
         if (intercept !== 0 || slope !== 0) {
+            // console.log('tranche line', intercept, slope)
             // line active
             if (slope === 0) {
+                let price = intercept
+                if (inverted)
+                    price = 1/price
+                price *= scale
                 // horizontal line
-                const s = new HLine({
+                // console.log('hline', price, inverted)
-                    price: intercept * scale,
+                const s = new HLine({price, color,
-                    color,
                     // todo allocation maxAllocation amount amountSymbol
                 }, null, null, null, true)
                 this.shapes.push(s)
             } else {
                 // diagonal line
-                const startPrice = intercept + slope * t.startTime;
+                let startTime = t.startTime
-                const endPrice = intercept + slope * t.endTime;
+                // noinspection EqualityComparisonWithCoercionJS
+                if (startTime == DISTANT_PAST)
+                    startTime = 1231006505  // use Bitcoin genesis as the drawing point's start time. unnecessary.
+                let endTime = t.endTime
+                // noinspection EqualityComparisonWithCoercionJS
+                if (endTime == DISTANT_FUTURE)
+                    endTime = timestamp() // use "now" as the drawing point's time
+                let startPrice = (intercept + slope * startTime);
+                let endPrice = (intercept + slope * endTime);
+                if (inverted) {
+                    startPrice = 1/startPrice
+                    endPrice = 1/endPrice
+                }
+                startPrice *= scale
+                endPrice *= scale
+                // console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice)
                 const s = new DLine({
                     pointA: {time: t.startTime, price: startPrice},
                     pointB: {time: t.endTime, price: endPrice},

src/charts/shape.js

@@ -202,7 +202,7 @@ export class Shape {
 
     doCreate(points, props, options={}) {
         // createShape(this.type, this.points, {overrides:this.props}, new ShapeTVCallbacks(this))
-        options = {...options}
+        options = mixin(options, this.drawingOverrides())
         options['overrides'] = props
         this.tvPoints = pointsToTvOhlcStart(points)
         this.tvCallbacks = new ShapeTVCallbacks(this);

src/components/LinePrice.vue

@@ -17,13 +17,17 @@ const props = defineProps(['base', 'quote', 'm', 'b', 'isMin', 'showBtn', 'buy']
 const s = useStore()
 
 
-const price = computed(()=>props.m === 0 ? props.b : props.b + props.m * s.clock)
+const price = computed(()=>{
+  if (props.m === 0)
+    return props.b === 0 ? null : props.b
+  console.log('raw line price', props.b + props.m * s.clock)
+  return props.b + props.m * s.clock
+})
 
 const description = computed(()=>{
-  // console.log('tranche line', isMin, b, m)
   if( props.m !== 0 )
     return 'diagonal'
-  return props.isMin === props.buy ? 'dont-chase' : 'limit'
+  return props.isMin ? 'limit' : 'dont-chase'
 })
 
 

src/components/Status.vue

@@ -94,13 +94,13 @@
             <div>
               <div class="mx-3" v-if="t.marketOrder">market order</div>
               <line-price class="mx-3" v-if="!t.marketOrder"
-                          :base="item.token0" :quote="item.token1"
+                          :base="item.order.tokenIn" :quote="item.order.tokenOut"
                           :b="t.minLine.intercept" :m="t.minLine.slope" :is-min="true"
-                          :buy="item.order.tokenIn===item.token1" :show-btn="false"/>
+                          :show-btn="false"/>
               <line-price class="mx-3" v-if="!t.marketOrder"
-                          :base="item.token0" :quote="item.token1"
+                          :base="item.order.tokenIn" :quote="item.order.tokenOut"
                           :b="t.maxLine.intercept" :m="t.maxLine.slope" :is-min="false"
-                          :buy="item.order.tokenIn===item.token1" :show-btn="false"/>
+                          :show-btn="false"/>
             </div>
 
           </td>
@@ -140,7 +140,7 @@
               <pair-price :base="item.order.tokenIn" :quote="item.order.tokenOut" :value="item.trancheStatus[i].avg" :show-btn="false"/>
             </suspense>
           </td>
-          <td>{{ item.trancheStatus[i].status }}(todo:status)</td>
+          <td>{{ item.trancheStatus[i].status }}<!--todo:tranche status--></td>
         </tr>
       </template>
     </v-data-table>
@@ -149,7 +149,6 @@
 
 <script setup>
 import LinePrice from "@/components/LinePrice.vue";
-import {FixedNumber} from "ethers";
 import {useStore} from "@/store/store";
 import {computed, defineAsyncComponent, onUnmounted, ref, watch} from "vue";
 import Btn from "@/components/Btn.vue"
@@ -174,7 +173,7 @@ const props = defineProps(['vault'])
 const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
 const selected = ref([])
 
-watch(selected, ()=>{
+watch(selected, async ()=>{
   const statusIndex = {}
   for (const order of orders.value)
     statusIndex[order.id] = order
@@ -191,7 +190,7 @@ watch(selected, ()=>{
       const symbol = lookupSymbol(symbolKey)
       if (co.selectedSymbol.ticker !== symbolKey) {
         co.selectedSymbol = symbol
-        setSymbol(symbol)
+        await setSymbol(symbol)
       }
       orderShapes[id] = new OrderShapes(symbol, status)
     }
@@ -308,8 +307,6 @@ const orders = computed(()=>{
       st.output = !o.amountIsInput ? o.amount : 0
       st.remaining = o.amount - st.filled
       st.selectable = st.state===OrderState.Open
-      st.token0 = o.tokenIn < o.tokenOut ? o.tokenIn : o.tokenOut
-      st.token1 = o.tokenIn < o.tokenOut ? o.tokenOut : o.tokenIn
       for( const ts of st.trancheStatus ) {
         let filledIn = 0n
         let filledOut = 0n