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) {
-    widget.activeChart().setSymbol(symbol.ticker)
+export async function setSymbol(symbol) {
+    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
-        if (this.symbol.inverted)
-            buy = !buy
+        const symbol = this.symbol
+        const scale = 10**symbol.decimals;
+        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)
-        let price = buy ?
-            Number(f.filledIn) / out * 10**this.symbol.decimals :
-            out / Number(f.filledIn) * 10**this.symbol.decimals
+        const out = Number(f.filledOut) / (1-this.status.order.route.fee/1000000)
+        let price = out / Number(f.filledIn)
+        if (inverted)
+            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({
-                    price: intercept * scale,
-                    color,
+                // console.log('hline', price, inverted)
+                const s = new HLine({price, color,
                     // todo allocation maxAllocation amount amountSymbol
                 }, null, null, null, true)
                 this.shapes.push(s)
             } else {
                 // diagonal line
-                const startPrice = intercept + slope * t.startTime;
-                const endPrice = intercept + slope * t.endTime;
+                let startTime = t.startTime
+                // 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);