diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue index 0437e05fad..5f5f64b0c2 100644 --- a/packages/client/src/components/MkInstanceStats.vue +++ b/packages/client/src/components/MkInstanceStats.vue @@ -103,8 +103,12 @@ const chartSrc = $ref('active-users'); let subDoughnutEl = $ref(); let pubDoughnutEl = $ref(); -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, { diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue index d3b2032876..94509cf006 100644 --- a/packages/client/src/pages/admin/overview.pie.vue +++ b/packages/client/src/pages/admin/overview.pie.vue @@ -53,7 +53,9 @@ const chartEl = ref(null); // フォントカラー Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); -const { handler: externalTooltipHandler } = useChartTooltip(); +const { handler: externalTooltipHandler } = useChartTooltip({ + position: 'middle', +}); let chartInstance: Chart; diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts index afdd547245..881e5e9ad5 100644 --- a/packages/client/src/scripts/use-chart-tooltip.ts +++ b/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 {