Use to-refs to keep reactivity

This commit is contained in:
Matthias 2023-12-16 15:41:24 +01:00
parent 6ce6a6afe9
commit d4a60df3cc
2 changed files with 5 additions and 5 deletions

View File

@ -135,7 +135,7 @@ const diffCols = computed(() => {
return getDiffColumnsFromPlotConfig(props.plotConfig); return getDiffColumnsFromPlotConfig(props.plotConfig);
}); });
usePercentageTool(candleChart, props.theme, props.dataset.timeframe_ms); usePercentageTool(candleChart, toRef(props, 'theme'), toRef(props.dataset, 'timeframe_ms'));
function updateChart(initial = false) { function updateChart(initial = false) {
if (!hasData.value) { if (!hasData.value) {

View File

@ -2,10 +2,10 @@ import { ElementEvent } from 'echarts';
import { ROUND_CLOSER, roundTimeframe } from '@/shared/timemath'; import { ROUND_CLOSER, roundTimeframe } from '@/shared/timemath';
import humanizeDuration from 'humanize-duration'; import humanizeDuration from 'humanize-duration';
export function usePercentageTool(chartRef, theme: string, timeframe_ms: number) { export function usePercentageTool(chartRef, theme: Ref<string>, timeframe_ms: Ref<number>) {
const inputListener = useKeyModifier('Shift', { events: ['keydown', 'keyup'] }); const inputListener = useKeyModifier('Shift', { events: ['keydown', 'keyup'] });
const color = computed(() => (theme === 'dark' ? 'white' : 'black')); const color = computed(() => (theme.value === 'dark' ? 'white' : 'black'));
const startPos = ref({ x: 0, y: 0 }); const startPos = ref({ x: 0, y: 0 });
const drawLimitPerSecond = 144; const drawLimitPerSecond = 144;
@ -13,7 +13,7 @@ export function usePercentageTool(chartRef, theme: string, timeframe_ms: number)
const active = ref(false); const active = ref(false);
function roundTF(timestamp: number) { function roundTF(timestamp: number) {
return roundTimeframe(timeframe_ms, timestamp, ROUND_CLOSER); return roundTimeframe(timeframe_ms.value, timestamp, ROUND_CLOSER);
} }
function mouseMove(e: ElementEvent) { function mouseMove(e: ElementEvent) {
@ -110,7 +110,7 @@ export function usePercentageTool(chartRef, theme: string, timeframe_ms: number)
x: startPos.value.x + (xr - startPos.value.x) / 2, x: startPos.value.x + (xr - startPos.value.x) / 2,
y: y < startPos.value.y ? y - 30 : y + 9, y: y < startPos.value.y ? y - 30 : y + 9,
textAlign: 'center', textAlign: 'center',
text: `${timeDiff / timeframe_ms} bars (${ text: `${timeDiff / timeframe_ms.value} bars (${
startPrice < endPrice ? pct : '-' + pct startPrice < endPrice ? pct : '-' + pct
}%) \n ${timeElapsed}`, }%) \n ${timeElapsed}`,
font: '14px sans-serif', font: '14px sans-serif',