mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-05 10:18:38 +09:00
refactor(client): extract tooltip logic of chart
This commit is contained in:
parent
36f09b6cdc
commit
7be4b2145b
@ -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
50
packages/client/src/scripts/use-chart-tooltip.ts
Normal 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,
|
||||||
|
};
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user