From d4a60df3cc02354a2588ff554a4a3f0a43e2471b Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 16 Dec 2023 15:41:24 +0100
Subject: [PATCH] Use to-refs to keep reactivity

---
 src/components/charts/CandleChart.vue | 2 +-
 src/composables/percentageTool.ts     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index 1e93e6c2..cd62b38a 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -135,7 +135,7 @@ const diffCols = computed(() => {
   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) {
   if (!hasData.value) {
diff --git a/src/composables/percentageTool.ts b/src/composables/percentageTool.ts
index 8f350c86..74b1e7c5 100644
--- a/src/composables/percentageTool.ts
+++ b/src/composables/percentageTool.ts
@@ -2,10 +2,10 @@ import { ElementEvent } from 'echarts';
 import { ROUND_CLOSER, roundTimeframe } from '@/shared/timemath';
 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 color = computed(() => (theme === 'dark' ? 'white' : 'black'));
+  const color = computed(() => (theme.value === 'dark' ? 'white' : 'black'));
 
   const startPos = ref({ x: 0, y: 0 });
   const drawLimitPerSecond = 144;
@@ -13,7 +13,7 @@ export function usePercentageTool(chartRef, theme: string, timeframe_ms: number)
   const active = ref(false);
 
   function roundTF(timestamp: number) {
-    return roundTimeframe(timeframe_ms, timestamp, ROUND_CLOSER);
+    return roundTimeframe(timeframe_ms.value, timestamp, ROUND_CLOSER);
   }
 
   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,
             y: y < startPos.value.y ? y - 30 : y + 9,
             textAlign: 'center',
-            text: `${timeDiff / timeframe_ms} bars (${
+            text: `${timeDiff / timeframe_ms.value} bars (${
               startPrice < endPrice ? pct : '-' + pct
             }%) \n ${timeElapsed}`,
             font: '14px sans-serif',