mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-05 02:08:56 +09:00
Code

refactor(client): extract tooltip logic of chart

Browse Source
This commit is contained in:
syuilo 2022-06-25 18:05:35 +09:00
parent 36f09b6cdc
commit 7be4b2145b
2 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/client/src/components/chart.vue
View File

@ -39,7 +39,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
//import gradient from 'chartjs-plugin-gradient'; //import gradient from 'chartjs-plugin-gradient';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import MkChartTooltip from '@/components/chart-tooltip.vue'; import { useChartTooltip } from '@/scripts/use-chart-tooltip';
const props = defineProps({ const props = defineProps({
src: { src: {
@ -160,42 +160,7 @@ const format = (arr) => {
})); }));
}; };
const tooltipShowing = ref(false); const { handler: externalTooltipHandler } = useChartTooltip();
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 render = () => { const render = () => {
if (chartInstance) { if (chartInstance) {
@ -891,10 +856,6 @@ watch(() => [props.src, props.span], fetchAndRender);
onMounted(() => { onMounted(() => {
fetchAndRender(); fetchAndRender();
}); });
onUnmounted(() => {
if (disposeTooltipComponent) disposeTooltipComponent();
});
/* eslint-enable id-denylist */ /* eslint-enable id-denylist */
</script> </script>

50
packages/client/src/scripts/use-chart-tooltip.ts Normal file
View File

@ -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,
};
}