From bb630c510cdae9a990a6ffd0d848228f77af12e6 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 17 Apr 2024 02:14:18 -0400 Subject: [PATCH] skew flipping improvements --- src/charts/chart.js | 2 +- src/charts/shape.js | 4 +- src/components/chart/LimitBuilder.vue | 71 ++++++++++++++++++--------- src/components/chart/RungBuilder.vue | 39 +++++---------- 4 files changed, 63 insertions(+), 53 deletions(-) diff --git a/src/charts/chart.js b/src/charts/chart.js index 09b8fd8..bc36db8 100644 --- a/src/charts/chart.js +++ b/src/charts/chart.js @@ -266,7 +266,7 @@ function drawingEventWorker() { } function doHandleDrawingEvent(id, event) { - console.log('drawing event', id, event) + // console.log('drawing event', id, event) let shape if (event==='remove') shape = null diff --git a/src/charts/shape.js b/src/charts/shape.js index d7d1c07..6379a98 100644 --- a/src/charts/shape.js +++ b/src/charts/shape.js @@ -93,7 +93,7 @@ export class Shape { // setModel(model) { - console.log('shape setModel', model) + // console.log('shape setModel', model) if (model.color) this.model.color = model.color @@ -261,7 +261,7 @@ export class Shape { } onProps(props) { // the display properties of an existing shape were changed - console.log('shape onProps', this.model, props) + if (this.debug) console.log('shape onProps', this.model, props) if (props.textcolor && props.textcolor !== this.tvProps.textcolor) this.updateModel({color:props.textcolor}) else if (props.linecolor && props.linecolor !== this.tvProps.linecolor) diff --git a/src/components/chart/LimitBuilder.vue b/src/components/chart/LimitBuilder.vue index 7d023c3..308bc2e 100644 --- a/src/components/chart/LimitBuilder.vue +++ b/src/components/chart/LimitBuilder.vue @@ -9,30 +9,30 @@ - - {{ weights.length ? allocationText(weights[0]) : '' }} + {{ weights.length ? allocationText(weights[lowerIndex]) : '' }} @@ -46,7 +46,7 @@ import {useTheme} from "vuetify"; 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 {computed, ref, watchEffect} from "vue"; import {chart} from "@/charts/chart.js"; import {HLine} from "@/charts/shape.js"; @@ -112,6 +112,45 @@ const priceB = computed({ } }) +const flipped = computed(()=>{ + const a = props.builder.priceA + const b = props.builder.priceB + return a !== null && b !== null && a > b +}) + +const higherPrice = computed({ + get() { return flipped.value ? priceA.value : priceB.value }, + set(v) { + if (flipped.value) + priceA.value = v + else + priceB.value = v + } +}) + +const higherIndex = computed(()=>flipped.value ? 0 : weights.value.length-1) +const lowerIndex = computed(()=>!flipped.value ? 0 : weights.value.length-1) +const innerIndexes = computed(()=>{ + const result = [] + const n = prices.value.length + const f = flipped.value + for (let i=1; i', {...model}, value) + // console.log('setModelValue->', {...model}, value) if (model.price !== value) model.price = value } -function setValues(values) { - prices.value = values -} - -function valueFromPoints(points) { - const result = points[0].time; - console.log('valueFromPoints', points, result); - return result -} diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue index bf55af7..6d2b751 100644 --- a/src/components/chart/RungBuilder.vue +++ b/src/components/chart/RungBuilder.vue @@ -39,7 +39,7 @@ import {useOrderStore} from "@/store/store.js"; import {allocationText, deleteBuilder, linearWeights, useChartOrderStore, weightColors} from "@/orderbuild.js"; import {useTheme} from "vuetify"; import {linspace, sideColor} from "@/misc.js"; -import {computed, watchEffect} from "vue"; +import {computed, onUnmounted, watchEffect} from "vue"; import Color from "color"; import {cancelDrawing} from "@/charts/chart.js"; @@ -62,9 +62,12 @@ const props = defineProps({ setWeights: Function, // setValues(values:Array) -> void }) +const flipped = computed(() => valueA.value !== null && valueB.value !== null && valueA.value > valueB.value) +const flippedSign = computed(()=>flipped.value?-1:1) + const skew100 = computed( { - get() {return props.builder.skew*100}, - set(v) {props.builder.skew = v/100; } + get() {console.log('skew100 flipped?',flippedSign.value); return flippedSign.value*props.builder.skew*100}, + set(v) {props.builder.skew = flippedSign.value*v/100; } } ) // validity checks @@ -83,7 +86,6 @@ const rungs = computed({ return props.builder.rungs }, set(r) { - // todo this is subclass specific: make TWAP extend the range rather than compressing it if (!r) { props.builder.rungs = 1 return @@ -91,13 +93,12 @@ const rungs = computed({ r = Number(r) props.builder.rungs = r const b = valueB.value - console.log('set rungs', r, valueA.value, b) + // console.log('set rungs', r, valueA.value, b) if ( r > 0 && b === null ) { // convert single shape to a range if (props.mode===0) { const width = props.stdWidth const mid = valueA.value - console.log('single to range', mid - width/2, mid + width/2) valueA.value = mid - width/2 valueB.value = mid + width/2 } @@ -139,6 +140,7 @@ const values = computed(()=>{ const weights = computed(() => { + // const skew = flipped.value ? -props.builder.skew : props.builder.skew const ws = linearWeights(props.builder.rungs, -props.builder.skew) if (props.setWeights) props.setWeights(ws) @@ -159,28 +161,16 @@ const color = computed({ get() {return props.builder.color}, set(v) { const maxLightness = 60 + // noinspection JSUnresolvedReference const c = new Color(v).hsl() props.builder.color = c.saturation <= maxLightness ? v : c.lightness(maxLightness).rgb().string() } }) -const colors = computed( ()=> { - const color = props.builder.color !== null ? props.builder.color - : props.buy ? theme.value.colors.success : theme.value.colors.error - const ws = weights.value; - return weightColors(ws, color); -}) const colorStyle = computed(() => { return {'color': color.value} }) -function allocText(weight) { - const alloc = props.builder.allocation - if (alloc===null) return '' - return allocationText(weight * alloc, props.order.amount * alloc, amountSymbol.value); -} - - // // SHAPE MANAGEMENT // @@ -214,7 +204,6 @@ function translateOnDrag(shape) { const shapeA = createShape(valueA.value, {color: defaultColor}, function (model) { - console.log('shapeA onModel', model) const value = props.getModelValue(model); if (value!==null && value!==undefined) valueA.value = value; @@ -259,7 +248,6 @@ function removeInteriorShape() { function makeModel(index) { const ws = weights.value - const w = ws[index] const alloc = props.builder.allocation * ws[index]; const result = { color: color.value, @@ -274,12 +262,10 @@ function makeModel(index) { function adjustShapes() { // this is where all the shapes are created or adjusted - console.log('adjustShapes()', valueA.value, valueB.value) + // console.log('adjustShapes()', valueA.value, valueB.value) const vs = values.value if (vs.length) cancelDrawing() - const ws = weights.value - const colorStrings = colors.value // shape properties if( vs.length === 0 ) { shapeA.delete() @@ -312,8 +298,6 @@ function adjustShapes() { removeInteriorShape() // adjust the interior shape values and/or add shapes for( let i=1; i