Implement "snapping" to candles

This commit is contained in:
Matthias 2023-12-12 20:56:56 +01:00
parent 3f1314677c
commit 051de2827f

View File

@ -1,5 +1,5 @@
import { ElementEvent } from 'echarts'; import { ElementEvent } from 'echarts';
import { roundTimeframe } from '@/shared/timemath'; import { ROUND_CLOSER, roundTimeframe } from '@/shared/timemath';
export function usePercentageTool(chartRef, props) { export function usePercentageTool(chartRef, props) {
const inputListener = useKeyModifier('Shift', { events: ['keydown', 'keyup'] }); const inputListener = useKeyModifier('Shift', { events: ['keydown', 'keyup'] });
@ -11,13 +11,25 @@ export function usePercentageTool(chartRef, props) {
const canDraw = ref(true); const canDraw = ref(true);
const active = ref(false); const active = ref(false);
function roundTF(timestamp: number) {
return roundTimeframe(props.dataset.timeframe_ms, timestamp, ROUND_CLOSER);
}
function mouseMove(e: ElementEvent) { function mouseMove(e: ElementEvent) {
if (canDraw.value) draw(e.offsetX, e.offsetY); if (canDraw.value) draw(e.offsetX, e.offsetY);
} }
function mouseDown(e: ElementEvent) { function mouseDown(e: ElementEvent) {
if (!active.value) { if (!active.value) {
startPos.value = { x: e.offsetX, y: e.offsetY }; const startValues = chartRef.value?.convertFromPixel({ seriesIndex: 0 }, [
e.offsetX,
e.offsetY,
]);
startValues[0] = roundTF(Number(startValues[0]));
const startnew = chartRef.value?.convertToPixel({ seriesIndex: 0 }, startValues);
startPos.value = { x: startnew[0], y: startnew[1] };
chartRef.value?.chart.getZr().on('mousemove', mouseMove); chartRef.value?.chart.getZr().on('mousemove', mouseMove);
drawStart(); drawStart();
} else { } else {
@ -77,22 +89,24 @@ export function usePercentageTool(chartRef, props) {
const endValues = chartRef.value?.convertFromPixel({ seriesIndex: 0 }, [x, y]); const endValues = chartRef.value?.convertFromPixel({ seriesIndex: 0 }, [x, y]);
const startPrice = Number(startValues[1]); const startPrice = Number(startValues[1]);
const endPrice = Number(endValues[1]); const endPrice = Number(endValues[1]);
const startTime = roundTimeframe(props.dataset.timeframe_ms, Number(startValues[0])); const startTime = roundTF(Number(startValues[0]));
const endTime = roundTimeframe(props.dataset.timeframe_ms, Number(endValues[0])); const endTime = roundTF(Number(endValues[0]));
const timeDiff = Math.abs(startTime - endTime) / props.dataset.timeframe_ms; const timeDiff = Math.abs(startTime - endTime) / props.dataset.timeframe_ms;
const xr = chartRef.value?.convertToPixel({ seriesIndex: 0 }, [endTime, 0])[0];
const pct = Math.abs(((startPrice - endPrice) / startPrice) * 100).toFixed(2); const pct = Math.abs(((startPrice - endPrice) / startPrice) * 100).toFixed(2);
chartRef.value?.setOption({ chartRef.value?.setOption({
graphic: [ graphic: [
{ {
shape: { shape: {
width: x > startPos.value.x ? -1 * (startPos.value.x - x) : x - startPos.value.x, width: xr > startPos.value.x ? -1 * (startPos.value.x - xr) : xr - startPos.value.x,
height: y > startPos.value.y ? -1 * (startPos.value.y - y) : y - startPos.value.y, height: y > startPos.value.y ? -1 * (startPos.value.y - y) : y - startPos.value.y,
}, },
}, },
{ {
style: { style: {
x: x, x: xr,
y: y - 20, y: y - 20,
text: `${timeDiff} bars - ${startPrice < endPrice ? pct : '-' + pct}%`, text: `${timeDiff} bars - ${startPrice < endPrice ? pct : '-' + pct}%`,
font: '14px sans-serif', font: '14px sans-serif',