charting refactor into shapes, not debugged
This commit is contained in:
@@ -1,85 +1,316 @@
|
||||
<template>
|
||||
<!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
|
||||
<v-card flat rounded="0">
|
||||
<v-toolbar dense :color="faintColor">
|
||||
<v-toolbar dense :color="faintColor" elevation="3">
|
||||
<span :style="colorStyle" style="width:1em;height:100%"> </span>
|
||||
<v-toolbar-title>Limit</v-toolbar-title>
|
||||
<v-text-field type="number" v-model="price"
|
||||
density="compact" hide-details single-line class="justify-self-start" variant="outlined"
|
||||
:color="color" :base-color="color"
|
||||
/>
|
||||
<v-toolbar-title>{{ rungs === 1 ? 'Limit' : 'Ladder' }}</v-toolbar-title>
|
||||
<!-- <v-text-field type="number" v-model="lower"-->
|
||||
<!-- density="compact" hide-details single-line class="justify-self-start" variant="outlined"-->
|
||||
<!-- :color="color" :base-color="color" min="0"-->
|
||||
<!-- />-->
|
||||
<!-- <v-text-field type="number" v-model="rungs"-->
|
||||
<!-- density="compact" hide-details single-line class="justify-self-start" variant="outlined"-->
|
||||
<!-- :color="color" :base-color="color" min="1"-->
|
||||
<!-- />-->
|
||||
{{JSON.stringify(builder)}}
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-subheader :title="'Limit '+ (price?price.toPrecision(5):'')"/>
|
||||
<v-list-item title="Delete" key="withdraw" value="withdraw" prepend-icon="mdi-delete" color="red" @click="del"/>
|
||||
<v-list-item title="Delete" key="withdraw" value="withdraw" prepend-icon="mdi-delete" color="red"
|
||||
@click="deleteBuilder"/>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<!-- <v-col>-->
|
||||
<!-- <v-btn v-if="!co.drawing" prepend-icon="mdi-ray-vertex" @click="draw" variant="tonal">Draw</v-btn>-->
|
||||
<!-- <v-btn v-if="co.drawing" prepend-icon="mdi-ray-vertex" @click="cancelDrawing" variant="tonal">Cancel Drawing</v-btn>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- <v-col>-->
|
||||
<!-- <v-btn v-if="!co.drawing" prepend-icon="mdi-ray-vertex" @click="draw" variant="tonal">Draw</v-btn>-->
|
||||
<!-- <v-btn v-if="co.drawing" prepend-icon="mdi-ray-vertex" @click="cancelDrawing" variant="tonal">Cancel Drawing</v-btn>-->
|
||||
<!-- </v-col>-->
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref} from "vue";
|
||||
import {builderShape, chart, setPoints, ShapeType} from "@/chart.js";
|
||||
import {computed} from "vue";
|
||||
import {builderShape, chart, createShape, deleteShape, setPoints} from "@/charts/chart.js";
|
||||
import {useChartOrderStore} from "@/orderbuild.js";
|
||||
import {timestamp} from "@/misc.js";
|
||||
import Color from "color";
|
||||
import {prototype} from "@/common.js";
|
||||
import {HLine, ShapeType} from "@/charts/shape.js";
|
||||
|
||||
const co = useChartOrderStore()
|
||||
const props = defineProps(['builder'])
|
||||
|
||||
|
||||
const color = computed(()=>{
|
||||
// todo saturate the color when the corresponding shape is selected https://github.com/Qix-/color
|
||||
return props.builder.props.limit?.linecolor
|
||||
const shape = new HLine(props.builder)
|
||||
shape.createOrDraw()
|
||||
|
||||
|
||||
function builderDefaults( builder, defaults ) {
|
||||
for ( const k in defaults )
|
||||
if (builder[k] === undefined)
|
||||
builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
|
||||
}
|
||||
|
||||
|
||||
// Fields must be defined in order to be reactive
|
||||
builderDefaults(props.builder, {
|
||||
start: null, // todo
|
||||
end: null, // todo
|
||||
lower: null,
|
||||
upper: null,
|
||||
rungs: 1,
|
||||
})
|
||||
const faintColor = computed(()=>new Color(color.value).hsl().lightness(97).string())
|
||||
const colorStyle = computed(()=>{return {'background-color':color.value}})
|
||||
|
||||
|
||||
const price = computed({
|
||||
get() {return props.builder.limit},
|
||||
const color = computed(() => {
|
||||
// todo saturate the color when the corresponding shape is selected https://github.com/Qix-/color
|
||||
return props.builder.color
|
||||
})
|
||||
const faintColor = computed(() => new Color(color.value).hsl().lightness(97).string())
|
||||
const colorStyle = computed(() => {
|
||||
return {'background-color': color.value}
|
||||
})
|
||||
|
||||
|
||||
//
|
||||
// Builder parameters: lower, upper, rungs
|
||||
// lower/upper is the price range and rungs >= 1 is the number of lines split into that range
|
||||
//
|
||||
|
||||
const start = computed({
|
||||
get() {return props.builder.start || 0},
|
||||
set(v) {props.builder.start=v; adjustShapes()},
|
||||
})
|
||||
|
||||
const end = computed({
|
||||
get() {return props.builder.end || 0},
|
||||
set(v) {props.builder.end=v; adjustShapes()},
|
||||
})
|
||||
|
||||
const lower = computed({
|
||||
get() {
|
||||
return props.builder.lower
|
||||
},
|
||||
set(p) {
|
||||
p = Number(p)
|
||||
console.log('set price', p)
|
||||
props.builder.limit = p;
|
||||
if( drawingShapeId ) {
|
||||
const shapeId = props.builder.shapes.limit;
|
||||
console.log('adjust shape', shapeId)
|
||||
setPoints(shapeId, [{time: timestamp(), price:p}])
|
||||
const hi = props.builder.upper
|
||||
if (hi) {
|
||||
props.builder.upper = Math.max(hi,p)
|
||||
props.builder.lower = Math.min(hi,p)
|
||||
}
|
||||
else {
|
||||
props.builder.upper = p
|
||||
props.builder.lower = p
|
||||
}
|
||||
adjustShapes()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const drawingShapeId = ref(null)
|
||||
const upper = computed({
|
||||
get() {
|
||||
return props.builder.upper
|
||||
},
|
||||
set(p) {
|
||||
p = Number(p)
|
||||
const lo = props.builder.lower
|
||||
if (lo) {
|
||||
console.log('max', lo, p, Math.max(lo,p))
|
||||
props.builder.upper = Math.max(lo,p)
|
||||
props.builder.lower = Math.min(lo,p)
|
||||
}
|
||||
else {
|
||||
props.builder.upper = p
|
||||
props.builder.lower = p
|
||||
}
|
||||
adjustShapes()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function del() {
|
||||
function computeRange() {
|
||||
let range = 0
|
||||
const series = chart.getSeries()
|
||||
const bars = series.data().bars();
|
||||
const final = Math.max(bars.size() - 10, 0)
|
||||
let count = 0
|
||||
for (let barIndex = bars.size() - 1; barIndex >= final; barIndex--) {
|
||||
count++
|
||||
const [_time, _open, high, low, _close, _volume, _ms] = bars.valueAt(barIndex)
|
||||
range += (high - low)
|
||||
}
|
||||
if (count > 0)
|
||||
range /= count
|
||||
else
|
||||
range = 1
|
||||
return range
|
||||
}
|
||||
|
||||
const rungs = computed({
|
||||
get() {
|
||||
return props.builder.rungs
|
||||
},
|
||||
set(r) {
|
||||
r = Number(r)
|
||||
props.builder.rungs = r
|
||||
adjustShapes()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const prices = computed(()=>{
|
||||
let lo = props.builder.lower
|
||||
let hi = props.builder.upper
|
||||
const r = props.builder.rungs
|
||||
if ( !lo || !r ) return [] // no data
|
||||
if (r===1) return [(hi+lo)/2] // single line
|
||||
const spacing = (hi-lo)/(r-1)
|
||||
console.log('price spacing', spacing, hi, lo, r)
|
||||
const result = []
|
||||
for( let i=0; i<r; i++ )
|
||||
result.push(lo+i*spacing)
|
||||
console.log('prices', result)
|
||||
return result
|
||||
})
|
||||
|
||||
|
||||
let lineShapeIds = []
|
||||
let priceRangeId = null
|
||||
|
||||
|
||||
const limitLineCallbacks = {
|
||||
onCreate(shapeId, points, properties) {
|
||||
lineShapeIds.push(shapeId)
|
||||
},
|
||||
onPoints(shapeId, points) {
|
||||
console.log('limit onPoints', shapeId, points[0].price, lineShapeIds)
|
||||
if (lineShapeIds.length === 0) return
|
||||
const r = rungs.value;
|
||||
if (r === 1 && lineShapeIds[0] === shapeId ) {
|
||||
const range = computeRange()
|
||||
props.builder.lower = points[0].price - range/2
|
||||
props.builder.upper = points[0].price + range/2
|
||||
}
|
||||
else if ( lineShapeIds[0] === shapeId ) {
|
||||
console.log('setting lower')
|
||||
props.builder.lower = points[0].price
|
||||
}
|
||||
else if ( lineShapeIds[lineShapeIds.length-1] === shapeId ) {
|
||||
console.log('setting upper')
|
||||
props.builder.upper = points[0].price
|
||||
}
|
||||
},
|
||||
onMove(shapeId, points) {
|
||||
console.log('limit onMove')
|
||||
},
|
||||
onProps(shapeId, properties) {
|
||||
props.builder.color = properties.linecolor
|
||||
},
|
||||
onDelete(shapeId) {
|
||||
deleteBuilder()
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
const drawLineCallbacks = prototype(limitLineCallbacks, {
|
||||
})
|
||||
|
||||
|
||||
function adjustShapes() {
|
||||
return
|
||||
const limits = prices.value
|
||||
console.log('adjust shapes', limits)
|
||||
if (limits.length === 1) {
|
||||
//
|
||||
// SINGLE LINE
|
||||
//
|
||||
if (lineShapeIds.length > 1) {
|
||||
deleteShapes()
|
||||
}
|
||||
// remove range shape
|
||||
if (priceRangeId) {
|
||||
chart.removeEntity(priceRangeId)
|
||||
priceRangeId = null
|
||||
}
|
||||
if (lineShapeIds.length === 0) {
|
||||
// create a line
|
||||
const lineId = createShape(ShapeType.HLine, {time:0, price: props.builder.lower}, {}, limitLineCallbacks)
|
||||
lineShapeIds.push(lineId)
|
||||
} else {
|
||||
// adjust the line
|
||||
console.log('adjusting line', lineShapeIds[0])
|
||||
setPoints(lineShapeIds[0], {time:0, price: props.builder.lower})
|
||||
}
|
||||
}
|
||||
else {
|
||||
//
|
||||
// PRICE RANGE
|
||||
//
|
||||
// first set the price range shaded background
|
||||
const rangePoints = [
|
||||
{time: start.value, price: props.builder.lower},
|
||||
{time: end.value, price: props.builder.upper},
|
||||
];
|
||||
if (priceRangeId !== null)
|
||||
setPoints(priceRangeId, rangePoints)
|
||||
else {
|
||||
priceRangeId = createShape(ShapeType.PriceRange, rangePoints, {
|
||||
disableSave: true, disableSelection: true, disableUndo: true, lock: true,
|
||||
// https://www.tradingview.com/charting-library-docs/latest/customization/overrides/Shapes-and-Overrides
|
||||
overrides: {
|
||||
fillLabelBackground: false,
|
||||
lineccolor: props.builder.color,
|
||||
backgroundColor: faintColor.value,
|
||||
},
|
||||
})
|
||||
}
|
||||
while( lineShapeIds.length > limits.length )
|
||||
lineShapeIds.pop()
|
||||
// now adjust the lines
|
||||
for( let i=0; i<limits.length; i++ ) {
|
||||
const limit = limits[i]
|
||||
if (lineShapeIds.length === i) {
|
||||
// push a new line
|
||||
const lineId = createShape(ShapeType.HLine, {time:0, price:limit}, {
|
||||
disableSave: true, disableUndo: true,
|
||||
overrides: {
|
||||
lineccolor: props.builder.color,
|
||||
},
|
||||
limitLineCallbacks
|
||||
})
|
||||
lineShapeIds.push(lineId)
|
||||
}
|
||||
else {
|
||||
// adjust existing line
|
||||
setPoints(lineShapeIds[i], {time: start.value, price: limit})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function deleteShapes() {
|
||||
if (priceRangeId !== null)
|
||||
deleteShape(priceRangeId)
|
||||
for (const id of lineShapeIds)
|
||||
deleteShape(id)
|
||||
}
|
||||
|
||||
|
||||
function deleteBuilder() {
|
||||
co.removeBuilder(props.builder)
|
||||
console.log('remove shape', drawingShapeId.value)
|
||||
if( drawingShapeId.value )
|
||||
chart.removeEntity(drawingShapeId.value)
|
||||
deleteShapes()
|
||||
}
|
||||
|
||||
|
||||
const callbacks = {
|
||||
onUndraw() {console.log('on undraw')},
|
||||
onCreate(shapeId, points, props) {drawingShapeId.value = shapeId},
|
||||
onPoints(shapeId, points) {props.builder.limit = points[0].price; console.log('limit onPoints', points[0].price)},
|
||||
onDelete(shapeId) {drawingShapeId.value=null; del()},
|
||||
function draw() {
|
||||
builderShape(props.builder, 'limit', ShapeType.HLine, drawLineCallbacks)
|
||||
}
|
||||
|
||||
|
||||
if (!props.builder.limit)
|
||||
builderShape(props.builder, 'limit', ShapeType.HLine, callbacks)
|
||||
// if (!props.builder.lower)
|
||||
// draw();
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user