From 7be4b2145b5eb5db02400ba66366aa682111ffaa Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 25 Jun 2022 18:05:35 +0900 Subject: [PATCH] refactor(client): extract tooltip logic of chart --- packages/client/src/components/chart.vue | 43 +--------------- .../client/src/scripts/use-chart-tooltip.ts | 50 +++++++++++++++++++ 2 files changed, 52 insertions(+), 41 deletions(-) create mode 100644 packages/client/src/scripts/use-chart-tooltip.ts diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue index 5e9c2f03be..d9075dd077 100644 --- a/packages/client/src/components/chart.vue +++ b/packages/client/src/components/chart.vue @@ -39,7 +39,7 @@ import zoomPlugin from 'chartjs-plugin-zoom'; //import gradient from 'chartjs-plugin-gradient'; import * as os from '@/os'; import { defaultStore } from '@/store'; -import MkChartTooltip from '@/components/chart-tooltip.vue'; +import { useChartTooltip } from '@/scripts/use-chart-tooltip'; const props = defineProps({ src: { @@ -160,42 +160,7 @@ const format = (arr) => { })); }; -const tooltipShowing = ref(false); -const tooltipX = ref(0); -const tooltipY = ref(0); -const tooltipTitle = ref(null); -const tooltipSeries = ref(null); -let disposeTooltipComponent; - -os.popup(MkChartTooltip, { - showing: tooltipShowing, - x: tooltipX, - y: tooltipY, - title: tooltipTitle, - series: tooltipSeries, -}, {}).then(({ dispose }) => { - disposeTooltipComponent = dispose; -}); - -function externalTooltipHandler(context) { - if (context.tooltip.opacity === 0) { - tooltipShowing.value = false; - return; - } - - tooltipTitle.value = context.tooltip.title[0]; - tooltipSeries.value = context.tooltip.body.map((b, i) => ({ - backgroundColor: context.tooltip.labelColors[i].backgroundColor, - borderColor: context.tooltip.labelColors[i].borderColor, - text: b.lines[0], - })); - - const rect = context.chart.canvas.getBoundingClientRect(); - - tooltipShowing.value = true; - tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX; - tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY; -} +const { handler: externalTooltipHandler } = useChartTooltip(); const render = () => { if (chartInstance) { @@ -891,10 +856,6 @@ watch(() => [props.src, props.span], fetchAndRender); onMounted(() => { fetchAndRender(); }); - -onUnmounted(() => { - if (disposeTooltipComponent) disposeTooltipComponent(); -}); /* eslint-enable id-denylist */ diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts new file mode 100644 index 0000000000..ab57165694 --- /dev/null +++ b/packages/client/src/scripts/use-chart-tooltip.ts @@ -0,0 +1,50 @@ +import { onUnmounted, ref } from 'vue'; +import * as os from '@/os'; +import MkChartTooltip from '@/components/chart-tooltip.vue'; + +export function useChartTooltip() { + const tooltipShowing = ref(false); + const tooltipX = ref(0); + const tooltipY = ref(0); + const tooltipTitle = ref(null); + const tooltipSeries = ref(null); + let disposeTooltipComponent; + + os.popup(MkChartTooltip, { + showing: tooltipShowing, + x: tooltipX, + y: tooltipY, + title: tooltipTitle, + series: tooltipSeries, + }, {}).then(({ dispose }) => { + disposeTooltipComponent = dispose; + }); + + onUnmounted(() => { + if (disposeTooltipComponent) disposeTooltipComponent(); + }); + + function handler(context) { + if (context.tooltip.opacity === 0) { + tooltipShowing.value = false; + return; + } + + tooltipTitle.value = context.tooltip.title[0]; + tooltipSeries.value = context.tooltip.body.map((b, i) => ({ + backgroundColor: context.tooltip.labelColors[i].backgroundColor, + borderColor: context.tooltip.labelColors[i].borderColor, + text: b.lines[0], + })); + + const rect = context.chart.canvas.getBoundingClientRect(); + + tooltipShowing.value = true; + tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX; + tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY; + } + + return { + handler, + }; +}