51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
|
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,
|
||
|
|
};
|
||
|
|
}
|