🎨

packages/client/src/components/MkInstanceStats.vue

@@ -103,8 +103,12 @@ const chartSrc = $ref('active-users');
 let subDoughnutEl = $ref<HTMLCanvasElement>();
 let pubDoughnutEl = $ref<HTMLCanvasElement>();
 
-const { handler: externalTooltipHandler1 } = useChartTooltip();
-const { handler: externalTooltipHandler2 } = useChartTooltip();
+const { handler: externalTooltipHandler1 } = useChartTooltip({
+	position: 'middle',
+});
+const { handler: externalTooltipHandler2 } = useChartTooltip({
+	position: 'middle',
+});
 
 function createDoughnut(chartEl, tooltip, data) {
 	const chartInstance = new Chart(chartEl, {

packages/client/src/pages/admin/overview.pie.vue

@@ -53,7 +53,9 @@ const chartEl = ref<HTMLCanvasElement>(null);
 // フォントカラー
 Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
-const { handler: externalTooltipHandler } = useChartTooltip();
+const { handler: externalTooltipHandler } = useChartTooltip({
+	position: 'middle',
+});
 
 let chartInstance: Chart;
 

packages/client/src/scripts/use-chart-tooltip.ts

@@ -2,7 +2,7 @@ import { onUnmounted, ref } from 'vue';
 import * as os from '@/os';
 import MkChartTooltip from '@/components/MkChartTooltip.vue';
 
-export function useChartTooltip() {
+export function useChartTooltip(opts: { position: 'top' | 'middle' } = { position: 'top' }) {
 	const tooltipShowing = ref(false);
 	const tooltipX = ref(0);
 	const tooltipY = ref(0);
@@ -41,7 +41,11 @@ export function useChartTooltip() {
 
 		tooltipShowing.value = true;
 		tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
-		tooltipY.value = rect.top + window.pageYOffset;
+		if (opts.position === 'top') {
+			tooltipY.value = rect.top + window.pageYOffset;
+		} else if (opts.position === 'middle') {
+			tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+		}
 	}
 
 	return {