dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DCA redraw hacks

Browse Source
This commit is contained in:
Tim
2024-04-17 22:18:34 -04:00
parent 45a3d09e2b
commit 1579060024
6 changed files with 248 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/charts/chart.js
View File

@@ -77,6 +77,8 @@ function initChart() {
chart.crossHairMoved().subscribe(null, (point)=>setTimeout(()=>handleCrosshairMovement(point),0) )
chart.onSymbolChanged().subscribe(null, changeSymbol)
chart.onIntervalChanged().subscribe(null, changeInterval)
// chart.onHoveredSourceChanged().subscribe(null, ()=>console.log('hovered source changed', arguments))
// chart.selection().onChanged().subscribe(null, s => console.log('selection', chart.selection().allSources()));
changeSymbol(chart.symbolExt())
changeInterval(widget.symbolInterval().interval)
useChartOrderStore().chartReady = true
@@ -205,6 +207,7 @@ export let draggingShapeIds = []
function handleCrosshairMovement(point) {
// console.log('crosshair moved')
crosshairPoint = point
const co = useChartOrderStore()
if (co.drawing)

88
src/charts/shape.js
View File

@@ -61,12 +61,14 @@ export class Shape {
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
this.tvCallbacks = null
this.ourPoints = null
this.tvPoints = null
this.creationOptions = {disableSave:true, disableUndo:false, disableSelection:false}
this.ourProps = {}
if (props !== null)
this.ourProps = mixin(props, this.ourProps)
this.tvProps = null
this.tvProps = {}
if (onModel !== null)
this.onModel = onModel
if (onDelete !== null )
@@ -129,7 +131,9 @@ export class Shape {
newProps.linecolor = color
// text label
const text = allocationText(this.model.allocation, this.model.amount, this.model.amountSymbol)
const text =
// `${this.id} ` +
allocationText(this.model.allocation, this.model.amount, this.model.amountSymbol)
if (!text.length)
newProps.showLabel = false
else {
@@ -197,8 +201,11 @@ export class Shape {
doCreate() {
// createShape(this.type, this.points, {overrides:this.props}, new ShapeTVCallbacks(this))
const options = {...this.creationOptions}
options['overrides'] = this.ourProps
this.tvPoints = [...this.ourPoints]
createShape(this.type, this.ourPoints, {overrides:this.ourProps}, new ShapeTVCallbacks(this))
this.tvCallbacks = new ShapeTVCallbacks(this);
createShape(this.type, this.ourPoints, options, this.tvCallbacks)
if (this.debug) console.log('created', this.type.name, this.ourPoints, this.id)
}
@@ -219,7 +226,8 @@ export class Shape {
setPoints(points) {
// setting points to null will delete the shape from the chart. setting points to a valid value will cause the
// shape to be drawn.
if (this.debug) console.log('setPoints', points, this.id)
if (this.debug) console.log('setPoints', this.id, this.ourPoints, points)
const oldPoints = this.ourPoints
this.ourPoints = points
if (points === null || !points.length)
this.delete()
@@ -228,8 +236,32 @@ export class Shape {
this.doCreate()
else if (dirtyPoints(this.tvPoints, points)) {
const s = this.tvShape();
if (this.debug) console.log('adjusting tv points', s, this.tvPoints, points)
if (!dragging) {
let sbm = false
if( draggingShapeIds.length ) {
const dragShape = chart.getShapeById(draggingShapeIds[0])
const sbms = [...dragShape._model._sourcesBeingMoved]
// console.log('shape setPoints', this.id, dragShape, sbm)
sbm = !sbms.length
// if (!sbms.length) {
// console.log('shape setPoints SBM return')
// return
// }
}
if (this.debug) console.log('adjusting tv points', this.tvPoints, points, dragging, this.beingDragged())
// if ( dragging && !this.beingDragged())
// s.setSelectionEnabled(false)
// s.setPoints(points)
// if ( dragging && !this.beingDragged())
// s.setSelectionEnabled(true)
// best so far
if (sbm && this.type === ShapeType.VLine) {
// console.log('sbm: re-create shape')
this.delete()
this.ourPoints = points
this.create()
} else
if (!dragging || this.type !== ShapeType.HLine) {
if (this.debug) console.log('not dragging. use setPoints.')
s.setPoints(points)
}
@@ -276,7 +308,13 @@ export class Shape {
delete() {
if (this.debug) console.log('shape.delete', this.id)
this.ourPoints = null
this.tvPoints = null
this.tvProps = null
if (this.id === null) return
if (this.tvCallbacks !== null) {
this.tvCallbacks.enabled = false
this.tvCallbacks = null
}
deleteShapeId(this.id)
this.id = null
}
@@ -341,21 +379,25 @@ class ShapeTVCallbacks {
constructor(shape) {
this.shape = shape
this.creating = false
this.enabled = true // gets disabled when the shape is deleted, squelching any further callbacks
}
onCreate(shapeId, _tvShape, points, props) {
if (!this.enabled) return // possible when shape is deleted and re-created
this.creating = true
this.shape.id = shapeId
invokeCallback(this.shape, 'onCreate', points, props)
}
onPoints(shapeId, _tvShape, points) {
if (!this.enabled) return // possible when shape is deleted and re-created
if (this.shape.debug) console.log('tvcb onPoints', points)
this.shape.tvPoints = points
this.shape.onPoints(points)
}
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.creating) { // todo still useful?
this.creating = false
@@ -366,43 +408,53 @@ class ShapeTVCallbacks {
}
onDraw() {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onDraw')
}
onRedraw() {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onRedraw')
}
onUndraw() {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onUndraw')
}
onAddPoint() {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onAddPoint')
}
onMove(_shapeId, _tvShape, points) {
onMove(shapeId, _tvShape, points) {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onMove',points)
}
onDrag(_shapeId, _tvShape, points) {
onDrag(shapeId, _tvShape, points) {
if (!this.enabled) return // possible when shape is deleted and re-created
if (this.shape.debug) console.log('onDrag')
invokeCallback(this.shape, 'onDrag', points)
}
onHide(_shapeId, _tvShape, props) {
onHide(shapeId, _tvShape, props) {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onHide',props)
}
onShow(_shapeId, _tvShape, props) {
onShow(shapeId, _tvShape, props) {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onShow',props)
}
onClick(_shapeId, _tvShape) {
onClick(shapeId, _tvShape) {
if (!this.enabled) return // possible when shape is deleted and re-created
invokeCallback(this.shape, 'onClick')
}
onDelete(shapeId) {
this.enabled = false
this.shape.id = null
invokeCallback(this.shape, 'onDelete', shapeId)
}
@@ -481,7 +533,6 @@ export class VLine extends Line {
// Model
this.model.time = null
this.debug=true
this.setModel(model) // call setModel at the end
}
@@ -493,25 +544,30 @@ export class VLine extends Line {
setModel(model) {
// console.log('VLine setModel', this.id, {...this.model}, model)
super.setModel(model)
if (model.time === null) {
this.model.time = null
this.delete()
}
else {
else if (model.time !== this.model.time) {
this.model.time = model.time
const time = nearestOhlcStart(model.time);
this.setPoints([{time, price:0}])
}
}
setPoints(points) {
// console.error('VLine setPoints', points)
super.setPoints(points);
}
onPoints(points) {
super.onPoints(points);
const orig = this.ourPoints && this.ourPoints.length ? this.ourPoints[0].time : null
super.onPoints(points);
const time = points[0].time;
if (!timeAdjustmentTooSmall(orig, time)) {
if (!timeAdjustmentTooSmall(orig, time))
this.updateModel({time: time})
}
}
}

112
src/components/chart/DCABuilder.vue
View File

@@ -1,7 +1,10 @@
<template>
<rung-builder name='DCA' :order="order" :builder="builder"
v-model:value-a="absTimeA" v-model:value-b="absTimeB" :mode="1" :shape="VLine"
:get-model-value="getModelValue" :set-model-value="setModelValue" :set-values="setValues"
v-model:value-a="absTimeA" v-model:value-b="absTimeB" :mode="1" :flip="flipped"
:shape="VLine"
:get-model-value="getModelValue" :set-model-value="setModelValue"
:get-points-value="getPointsValue"
:set-values="setValues" :set-weights="setWeights"
:std-width="stdWidth" :build-tranches="buildTranches">
<v-list style="background-color: inherit">
<v-list-item v-for="t in absoluteTimes">{{t}}</v-list-item>
@@ -17,7 +20,8 @@ import {useTheme} from "vuetify";
import {useOrderStore, useStore} from "@/store/store.js";
import {DISTANT_FUTURE, 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, dragging} from "@/charts/chart.js";
const s = useStore()
const os = useOrderStore()
@@ -25,7 +29,8 @@ const co = useChartOrderStore()
const theme = useTheme().current
const props = defineProps(['order', 'builder'])
const stdWidth = computed(()=>10 * co.intervalSecs)
const minWidth = computed(()=>co.intervalSecs)
const stdWidth = computed(()=>10 * minWidth.value)
function computeDefaultColor() {
const index = props.order.builders.indexOf(props.builder)
@@ -46,6 +51,8 @@ builderDefaults(props.builder, {
})
const rawTimes = ref([])
const weights = ref([])
const times = computed(()=>rawTimes.value.map((t)=>Math.round(t)))
const endTimes = computed(()=>{
if (props.builder.rungs === 1)
@@ -55,27 +62,49 @@ const endTimes = computed(()=>{
return ts.map((t)=>t+window)
})
const absoluteTimes = computed(()=>{
console.log('absoluteTimes', props.builder.relative, times.value)
// console.log('absoluteTimes', props.builder.relative, times.value)
if (!props.builder.relative)
return times.value
const now = s.clock
return times.value.map((t)=>now+t)
})
watchEffect(()=>{
// auto scroll
if (!dragging && absoluteTimes.value.length) {
const endTime = absoluteTimes.value[absoluteTimes.value.length-1]
const range = chart.getVisibleRange()
const width = range.to - range.from
const now = s.clock
const extra = (Math.max(0,endTime - now) + minWidth.value) / width
// console.log('visrange', range, width, absV)
if (range.to < endTime) {
// console.log('scrolling')
chart.setVisibleRange({from: now - width, to: now}, {
percentRightMargin: Math.round(100 * extra),
applyDefaultRightMargin: false
})
}
}
})
const absTimeA = computed({
get() {
let result = props.builder.timeA
if (props.builder.relative)
result += s.clock
console.log('absTimeA', result)
// console.log('absTimeA', result)
return result
},
set(v) {
console.log('set absTimeA', props.builder.timeA, v)
// console.log('set absTimeA', props.builder.timeA, v)
if (props.builder.relative)
v -= s.clock
props.builder.timeA = v
console.log('absTimeA=',props.builder.timeA)
// console.log('absTimeA=',props.builder.timeA)
scroll()
}
})
const absTimeB = computed({
@@ -83,15 +112,57 @@ const absTimeB = computed({
let result = props.builder.timeB
if (props.builder.relative)
result += s.clock
console.log('absTimeB', result)
// console.log('absTimeB', result)
return result
},
set(v) {
console.log('set absTimeB', props.builder.timeB, v)
// console.log('set absTimeB', props.builder.timeB, v)
const absV = v
if ( v !== null && props.builder.relative )
v -= s.clock
props.builder.timeB = v
console.log('absTimeB=',props.builder.timeB)
const maxA = v - minWidth.value;
if (props.builder.timeA > maxA)
props.builder.timeA = maxA
// console.log('absTimeB=',props.builder.timeB)
scroll()
}
})
const flipped = computed(()=>{
const a = props.builder.timeA
const b = props.builder.timeB
return a !== null && b !== null && a > b
})
const higherIndex = computed(()=>flipped.value ? 0 : weights.value.length-1)
const lowerIndex = computed(()=>!flipped.value ? 0 : weights.value.length-1)
const innerIndexes = computed(()=>{
const n = times.value.length
const f = flipped.value
const result = []
for (let i=1; i<n-1; i++)
result.push(f?i:n-1-i)
return result
})
const earlierTime = computed({
get() { return !flipped.value ? props.builder.timeA : props.builder.timeB },
set(v) {
if (!flipped.value)
props.builder.timeA = v
else
props.builder.timeB = v
}
})
const laterTime = computed({
get() { return !flipped.value ? props.builder.timeA : props.builder.timeB },
set(v) {
if (!flipped.value)
props.builder.timeA = v
else
props.builder.timeB = v
}
})
@@ -124,11 +195,15 @@ function getModelValue(model) {
return model.time
}
function getPointsValue(points) {
return points[0].price
}
function setModelValue(model, value) {
console.log('DCA set model value', model, value)
// console.log('DCA set model value', model, value)
const v = value === null ? null : props.builder.relative ? s.clock + Math.round(value) : Math.round(value)
if (model.time !== v) {
console.log('DCA do set time', v)
// console.log('DCA do set time', v)
model.time = v
}
}
@@ -138,18 +213,11 @@ function setValues(values) {
rawTimes.value = values
else {
const now = s.clock
const vs = []
for (let i = 0; i < values.length; i++)
vs.push(values[i] - now)
rawTimes.value = vs
rawTimes.value = values.map((v)=>v-now)
}
}
function valueFromPoints(points) {
const result = points[0].time;
console.log('valueFromPoints', points, result);
return result
}
function setWeights(ws) { weights.value = ws }
</script>

16
src/components/chart/LimitBuilder.vue
View File

@@ -1,7 +1,9 @@
<template>
<rung-builder :name="prices.length>1?'Ladder':'Limit'" :order="order" :builder="builder"
v-model:value-a="priceA" v-model:value-b="priceB" :mode="0" :shape="HLine"
v-model:value-a="priceA" v-model:value-b="priceB" :mode="0" :flip="flipped"
:shape="HLine"
:get-model-value="getModelValue" :set-model-value="setModelValue"
:get-points-value="getPointsValue"
:set-values="setPrices" :set-weights="setWeights"
:std-width="stdWidth" :build-tranches="buildTranches">
<table>
@@ -131,9 +133,9 @@ const higherPrice = computed({
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
const result = []
for (let i=1; i<n-1; i++)
result.push(f?i:n-1-i)
return result
@@ -210,6 +212,10 @@ function getModelValue(model) {
return model.price
}
function getPointsValue(points) {
return points[0].price
}
function setModelValue(model, value) {
// console.log('setModelValue->', {...model}, value)
if (model.price !== value)
@@ -220,12 +226,6 @@ function setModelValue(model, value) {
</script>
<style scoped lang="scss">
:deep(.v-slider.v-input--vertical > .v-input__control) {
min-height: 5em !important;
}
:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
background-color: inherit !important;
}
td.weight {
padding-left: 0.5em;
padding-right: 0.5em;

83
src/components/chart/RungBuilder.vue
View File

@@ -36,12 +36,12 @@
<script setup>
import BuilderPanel from "@/components/chart/BuilderPanel.vue";
import {useOrderStore} from "@/store/store.js";
import {allocationText, deleteBuilder, linearWeights, useChartOrderStore, weightColors} from "@/orderbuild.js";
import {deleteBuilder, linearWeights, useChartOrderStore} from "@/orderbuild.js";
import {useTheme} from "vuetify";
import {linspace, sideColor} from "@/misc.js";
import {computed, onUnmounted, watchEffect} from "vue";
import Color from "color";
import {cancelDrawing} from "@/charts/chart.js";
import {cancelDrawing, chart} from "@/charts/chart.js";
const os = useOrderStore()
const co = useChartOrderStore()
@@ -56,14 +56,15 @@ const props = defineProps({
stdWidth: Number,
shape: Function, // shape() -> Shape
mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
getModelValue: Function, // getModelValue(model) -> value
setModelValue: Function, // setModelValue(model,value) -> void
getPointsValue: Function, // getValueFromPoints(points) -> value
setValues: Function, // setValues(values:Array) -> void
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 flippedSign = computed(()=>props.flip?-1:1)
const skew100 = computed( {
get() {return flippedSign.value*props.builder.skew*100},
@@ -73,9 +74,9 @@ const skew100 = computed( {
// validity checks
watchEffect(()=>{
const rungs = props.builder.rungs
const prev = props.builder.valid
// const prev = props.builder.valid
props.builder.valid = rungs >= 1 && valueA.value && (rungs < 2 || valueB.value)
console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
// console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
})
@@ -138,7 +139,7 @@ const values = computed(()=>{
const weights = computed(() => {
// const skew = flipped.value ? -props.builder.skew : props.builder.skew
// const skew = props.flip ? -props.builder.skew : props.builder.skew
const ws = linearWeights(props.builder.rungs, -props.builder.skew)
if (props.setWeights)
props.setWeights(ws)
@@ -184,6 +185,7 @@ function createShape(value, model, onModel, onDelete) {
function translateOnDrag(shape) {
const oldOnPoints = shape.onPoints
shape.onPoints = function (points) {
// console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
if (!this.beingDragged()) {
oldOnPoints.call(this, points)
return
@@ -192,6 +194,7 @@ function translateOnDrag(shape) {
oldOnPoints.call(this, points)
const cur = props.getModelValue(this.model)
const delta = cur - prev
// console.log('delta', points, shape.ourPoints, prev, cur, delta)
if (delta !== 0) {
valueA.value += delta
valueB.value += delta
@@ -199,6 +202,28 @@ function translateOnDrag(shape) {
}
}
// function translateOnDrag(shape) {
// const oldOnPoints = shape.onPoints
// shape.onPoints = function (points) {
// console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
// if (!this.beingDragged()) {
// oldOnPoints.call(this, points)
// return
// }
//
// // todo vectorize
// const prev = props.getPointsValue(shape.ourPoints)
// const cur = props.getPointsValue(points)
// const delta = cur - prev
// console.log('delta', points, shape.ourPoints, prev, cur, delta)
// if (delta !== 0) {
// valueA.value += delta
// valueB.value += delta
// }
// oldOnPoints.call(this, points)
// }
// }
const shapeA = createShape(valueA.value, {color: defaultColor},
function (model) {
@@ -258,10 +283,42 @@ function makeModel(index) {
return result
}
let group = null
function adjustShapes() {
// this is where all the shapes are created or adjusted
// console.log('adjustShapes()', valueA.value, valueB.value)
const vs = values.value
//
//
// const selection = []
// if (shapeA.id !== null)
// selection.push(shapeA.id)
// if (shapeB.id !== null)
// selection.push(shapeB.id)
// for( const s of interiorShapes ) {
// if (s.id !== null)
// selection.push(s.id)
// }
// if (group===null) {
// if (selection.length) {
// const gc = chart.shapesGroupController();
// group = gc.createGroupFromSelection(selection)
// }
// }
// else {
// const gc = chart.shapesGroupController();
// const shapes = gc.shapesInGroup(group)
//
// console.log('shapes', group, shapes)
// for (const s of selection)
// if (!shapes.includes(s)) {
// console.log('add shape to group', group, s)
// gc.addShapeToGroup(group, s)
// }
// }
//
//
if (vs.length)
cancelDrawing()
// shape properties
@@ -306,10 +363,13 @@ function adjustShapes() {
}
function deleteSelf() {
if (valueA.value===null)
cancelDrawing()
deleteBuilder(props.order, props.builder);
}
function deleteShapes() {
cancelDrawing()
shapeA.delete()
shapeB.delete()
for (const shape of interiorShapes)
@@ -325,5 +385,10 @@ if (!valueA.value)
</script>
<style scoped lang="scss">
</style>
:deep(.v-slider.v-input--vertical > .v-input__control) {
min-height: 5em !important;
}
:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
background-color: inherit !important;
}
</style>

4
src/orderbuild.js
View File

@@ -272,7 +272,7 @@ export function allocationText(weight, amount, symbol) {
const hasWeight = weight!==null && weight!==undefined
if (hasWeight)
text += `${(weight * 100).toFixed(1)}%`
const hasAmount = amount!==null && amount!==undefined
const hasAmount = amount!==null && amount!==undefined && amount > 0
const hasSymbol = symbol!==null && symbol!==undefined
if (hasAmount && hasSymbol) {
if (hasWeight)
@@ -284,6 +284,4 @@ export function allocationText(weight, amount, symbol) {
export function deleteBuilder(order, builder) {
order.builders = order.builders.filter((b) => b !== builder)
// if (props.deleteShapes) // todo is this redundant?
// props.deleteShapes()
}