From 6ce6a6afe9357814e8d1a63ce980f1d006ff164f Mon Sep 17 00:00:00 2001 From: Matthias Date: Sat, 16 Dec 2023 15:08:13 +0100 Subject: [PATCH 1/3] Properly type percentage Tool --- 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 c6aeadb3..1e93e6c2 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); +usePercentageTool(candleChart, props.theme, props.dataset.timeframe_ms); function updateChart(initial = false) { if (!hasData.value) { diff --git a/src/composables/percentageTool.ts b/src/composables/percentageTool.ts index ff194ea3..8f350c86 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, props) { +export function usePercentageTool(chartRef, theme: string, timeframe_ms: number) { const inputListener = useKeyModifier('Shift', { events: ['keydown', 'keyup'] }); - const color = computed(() => (props.theme === 'dark' ? 'white' : 'black')); + const color = computed(() => (theme === 'dark' ? 'white' : 'black')); const startPos = ref({ x: 0, y: 0 }); const drawLimitPerSecond = 144; @@ -13,7 +13,7 @@ export function usePercentageTool(chartRef, props) { const active = ref(false); function roundTF(timestamp: number) { - return roundTimeframe(props.dataset.timeframe_ms, timestamp, ROUND_CLOSER); + return roundTimeframe(timeframe_ms, timestamp, ROUND_CLOSER); } function mouseMove(e: ElementEvent) { @@ -110,7 +110,7 @@ export function usePercentageTool(chartRef, props) { x: startPos.value.x + (xr - startPos.value.x) / 2, y: y < startPos.value.y ? y - 30 : y + 9, textAlign: 'center', - text: `${timeDiff / props.dataset.timeframe_ms} bars (${ + text: `${timeDiff / timeframe_ms} bars (${ startPrice < endPrice ? pct : '-' + pct }%) \n ${timeElapsed}`, font: '14px sans-serif', From d4a60df3cc02354a2588ff554a4a3f0a43e2471b Mon Sep 17 00:00:00 2001 From: Matthias Date: Sat, 16 Dec 2023 15:41:24 +0100 Subject: [PATCH 2/3] 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, timeframe_ms: Ref) { 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', From 4004c9d67b7d356612380e39ef127b67c834e0bf Mon Sep 17 00:00:00 2001 From: Matthias Date: Sun, 17 Dec 2023 10:46:49 +0100 Subject: [PATCH 3/3] Use now recommended syntax --- src/components/charts/CandleChart.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue index cd62b38a..435bb971 100644 --- a/src/components/charts/CandleChart.vue +++ b/src/components/charts/CandleChart.vue @@ -135,7 +135,11 @@ const diffCols = computed(() => { return getDiffColumnsFromPlotConfig(props.plotConfig); }); -usePercentageTool(candleChart, toRef(props, 'theme'), toRef(props.dataset, 'timeframe_ms')); +usePercentageTool( + candleChart, + toRef(() => props.theme), + toRef(() => props.dataset.timeframe_ms), +); function updateChart(initial = false) { if (!hasData.value) {