Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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 * 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>

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