diagonal debug

2024-05-06 14:32:02 -04:00
parent 49b41450c3
commit 613cb7d7f5
4 changed files with 184 additions and 53 deletions
--- a/src/charts/shape.js
+++ b/src/charts/shape.js
@@ -57,7 +57,7 @@ export class Shape {
        //   lineColor, textColor, color, // lineColor and textColor default to color
        // }

-        this.debug = false
+        this.debug = true
        this.id = null // TradingView shapeId, or null if no TV shape created yet (drawing mode)
        this.type = type  // ShapeType
        this.model = {}  // set to nothing at first
@@ -324,30 +324,17 @@ export class Shape {
 }


-let lineChangeInfo = null
-
 function dirtyPoints(pointsA, pointsB) {
-    const result = dirtyPoints2(pointsA,pointsB)
-    console.error('dirtyPoints', result, pointsA, pointsB)
-    return result
-}
-function dirtyPoints2(pointsA, pointsB) {
-    console.log('dp2', pointsA, pointsB)
    if (pointsA === undefined)
        return true
-    console.log('dp2b')
    if (pointsB === undefined)
        return false
-    console.log('dp2c')
    if (pointsB===null)
        return pointsA !== null
-    console.log('dp2d')
    if (pointsA===null)
        return pointsB.length > 0
-    console.log('dp2e')
    if (pointsA.length!==pointsB.length)
        return true
-    console.log('dp2f')
    for (const i in pointsA) {
        const a = pointsA[i]
        const b = pointsB[i]
@@ -355,7 +342,6 @@ function dirtyPoints2(pointsA, pointsB) {
            a.time !== b.time || a.price !== b.price )
            return true
    }
-    console.log('dp3')
    return false
 }

@@ -401,7 +387,7 @@ class ShapeTVCallbacks {

    onProps(shapeId, _tvShape, props) {
        if (!this.enabled) return // possible when shape is deleted and re-created
-        if (this.shape.debug) console.log('tvOnProps', props)
+        if (this.shape.debug) console.error('tvOnProps', props)
        this.shape.onProps(props)
        this.shape.tvProps = props
    }
@@ -563,6 +549,13 @@ export class DLine extends Line {
    }


+    drawingOverrides() {
+        const result = super.drawingOverrides();
+        result.linetoolextended = {extendLeft: false, extendRight: false}
+        return result
+    }
+
+
    delete() {
        this.model.pointA = null
        this.model.pointB = null
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -29,7 +29,6 @@
      </template>
      <div class="my-3">
        <div v-if="order.builders.length===0">  <!--todo remove gralpha limitation of one builder-->
-          <span :style="colorStyle" class="ma-3">Add condition:</span>
          <v-btn :color="color" variant="text" prepend-icon="mdi-clock-outline" @click="build(order,'DCABuilder')">DCA</v-btn>
          <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
          <v-btn :color="color" variant="text" prepend-icon="mdi-vector-line" @click="build(order,'DiagonalBuilder')">Diagonal</v-btn>
--- a/src/components/chart/DiagonalBuilder.vue
+++ b/src/components/chart/DiagonalBuilder.vue
@@ -4,53 +4,84 @@
                :get-model-value="getModelValue" :set-model-value="setModelValue"
                :set-values="setLines" :set-weights="setWeights"
                :std-width="stdWidth" :build-tranches="buildTranches">
-    <span>{{ endpoints }}</span>
-<!--
    <table>
      <tbody>
-      <template v-if="prices.length>1">
        <tr>
+          <td rowspan="2" class="label">Line A</td>
          <td>
-            <v-text-field type="number" v-model="higherPrice" min="0"
-                          density="compact" hide-details class="mx-1 my-2" variant="outlined"
-                          label="Price"
+            <absolute-time-entry v-model="time1A"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price1A" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
                          :color="color" :base-color="color"
-                          style="flex: 6em"
+                          label="Price"
+            />
+          </td>
+          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+        </tr>
+        <tr>
+          <td>
+            <absolute-time-entry v-model="time1B"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price1B" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
+                          :color="color" :base-color="color"
+                          label="Price"
            />
          </td>
-          <td class="weight">{{ allocationText(weights[higherIndex]) }}</td>
        </tr>
        <tr v-for="i in innerIndexes" class="ml-5">
-          <td class="pl-5">{{ prices[i] }}</td>
+          <td class="text-right">&nbsp;</td>
+          <td colspan="2" class="text-center"><i>Diagonal</i></td>
          <td class="weight">{{ allocationText(weights[i]) }}</td>
        </tr>
-      </template>
-      <tr>
-        <td>
-          <v-text-field type="number" v-model="lowerPrice" 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 ? allocationText(weights[lowerIndex]) : '' }}</td>
-      </tr>
+        <tr v-if="weights.length>1">
+          <td rowspan="2" class="label">Line B</td>
+          <td>
+            <absolute-time-entry v-model="time2A"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price2A" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
+                          :color="color" :base-color="color"
+                          label="Price"
+            />
+          </td>
+          <td rowspan="2" class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+        </tr>
+        <tr v-if="weights.length>1">
+          <td>
+            <absolute-time-entry v-model="time2B"/>
+          </td>
+          <td>
+            <v-text-field type="number" v-model="price2B" min="0"
+                          density="compact" hide-details variant="outlined"
+                          class="mx-1 my-2 price"
+                          :color="color" :base-color="color"
+                          label="Price"
+            />
+          </td>
+        </tr>
      </tbody>
    </table>
-->
  </rung-builder>
 </template>

 <script setup>
-import {applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
+import {allocationText, applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
 import {sideColor} from "@/misc.js";
 import {useOrderStore, useStore} from "@/store/store.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
 import {computed, ref} from "vue";
 import {DLine} from "@/charts/shape.js";
-import {vectorInterpolate} from "@/vector.js";
+import {vectorEquals, vectorInterpolate} from "@/vector.js";
+import AbsoluteTimeEntry from "@/components/AbsoluteTimeEntry.vue";

 const s = useStore()
 const os = useOrderStore()
@@ -65,6 +96,8 @@ function computeDefaultColor() {

 const defaultColor = computeDefaultColor()

+const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
+
 // Fields must be defined in order to be reactive
 builderDefaults(props.builder, {
  lineA: null, // [{time, price}, {time, price}]
@@ -123,11 +156,101 @@ const endpoints = computed({
  }
 })

+const time1A = computed({
+  get() { return _endpoints.value[0] === null ? 0 : _endpoints.value[0][0] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:v, price: flatline0[1]}, {time:flatline0[2], price: flatline0[3]}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const price1A = computed({
+  get() { return _endpoints.value[0] === null ? null : _endpoints.value[0][1] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:flatline0[0], price: v}, {time:flatline0[2], price: flatline0[3]}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const time1B = computed({
+  get() { return _endpoints.value[0] === null ? 0 : _endpoints.value[0][2] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:flatline0[0], price: flatline0[1]}, {time:v, price: flatline0[3]}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const price1B = computed({
+  get() { return _endpoints.value[0] === null ? null : _endpoints.value[0][3] },
+  set(v) {
+    const flatline0 = _endpoints.value[0];
+    update(
+        [{time:flatline0[0], price: flatline0[1]}, {time:flatline0[2], price: v}],
+        _endpoints.value[1]
+    )
+  }
+})
+
+const time2A = computed({
+  get() { return _endpoints.value[1] === null ? 0 : _endpoints.value[1][0] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:v, price: flatline[1]}, {time:flatline[2], price: flatline[3]}],
+    )
+  }
+})
+
+const price2A = computed({
+  get() { return _endpoints.value[1] === null ? null : _endpoints.value[1][1] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:flatline[0], price: v}, {time:flatline[2], price: flatline[3]}],
+    )
+  }
+})
+
+const time2B = computed({
+  get() { return _endpoints.value[1] === null ? 0 : _endpoints.value[1][2] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:flatline[0], price: flatline[1]}, {time:v, price: flatline[3]}],
+    )
+  }
+})
+
+const price2B = computed({
+  get() { return _endpoints.value[1] === null ? null : _endpoints.value[1][3] },
+  set(v) {
+    const flatline = _endpoints.value[1];
+    update(
+        _endpoints.value[0],
+        [{time:flatline[0], price: flatline[1]}, {time:flatline[2], price: v}],
+    )
+  }
+})
+
 function update(a, b) { // a and b are lines of two points
-  const newBuilder = {...props.builder}
-  newBuilder.lineA = a
-  newBuilder.lineB = b
-  emit('update:builder', newBuilder)
+  if (!vectorEquals(props.builder.lineA, a) || !vectorEquals(props.builder.lineB, b)) {
+    const newBuilder = {...props.builder}
+    newBuilder.lineA = a
+    newBuilder.lineB = b
+    emit('update:builder', newBuilder)
+  }
 }


@@ -198,9 +321,24 @@ function dirtyLine(a, b) {

 <style scoped lang="scss">
 td.weight {
-  width: 11em;
+  width: 5em;
+  max-width: 8em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  text-align: right;
 }
+td.label {
+  $w: 4em;
+  width: $w;
+  min-width: $w;
+  max-width: $w;
+  text-align: right;
+  padding-right: .5em;
+}
+.price {
+  $w: 6em;
+  //width: $w;
+  min-width: $w;
+  max-width: 10em;
+}
 </style>
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -1,8 +1,9 @@
 <template>
  <builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
                 :adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
-    <div style="min-width: 4em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}</div>
-    <div>
+    <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>
      <v-text-field type="number" v-model="rungs"
                    density="compact" hide-details class="mx-1 my-2" variant="outlined"
                    label="Rungs"
@@ -110,9 +111,9 @@ const rungs = computed({
    if ( r > 0 && vectorIsNull(b) ) {
      // convert single shape to a range
      if (props.mode===0) {
-        const width = props.stdWidth
+        const width = vectorize(props.stdWidth)
        const mid = vectorize(a)
-        // console.log('stdWidth', width)
+        console.log('stdWidth', width)
        const halfWidth = vectorDiv(width,2);
        a = vectorAdd(mid, vectorNeg(halfWidth) )
        b = vectorAdd(mid, halfWidth)
@@ -142,12 +143,13 @@ const rungs = computed({
  }
 })

-const rungsDisabled = computed(()=>{console.log('rd',endpoints.value); return endpoints.value[0]===null})
+const rungsDisabled = computed(()=>endpoints.value[0]===null)

 const values = computed(()=>{
  let [a, b] = endpoints.value
  a = vectorize(a)
  b = vectorize(b)
+  console.log('computing values', a, b)
  const r = props.builder.rungs
  let result
  if ( !r || vectorIsNull(a) )
@@ -251,14 +253,13 @@ function translateOnModel(shape) {

 function setModelColor(model) {
  console.log('setmc', color.value, model.color)
-  if (model.color && model.color !== color.value)
+  if (model.color !== undefined && model.color !== color.value)
    color.value = model.color
 }

 const shapeA = createShape(endpoints.value[0], {color: defaultColor},
    function (model) {
      const value = getModelValue(model);
-      console.log('gotModelValue', model, value)
      if ( !vectorEquals(value, endpoints.value[0]) )
        setEndpoints(value, endpoints.value[1])
      setModelColor(model)