From 7be4b2145b5eb5db02400ba66366aa682111ffaa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
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 */
</script>
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,
+ };
+}