From 6083356a3e0fc1e70cc15f84ef0d041f34cce444 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 26 Dec 2022 13:26:21 +0900 Subject: [PATCH] :art: --- packages/client/src/components/MkInstanceStats.vue | 8 ++++++-- packages/client/src/pages/admin/overview.pie.vue | 4 +++- packages/client/src/scripts/use-chart-tooltip.ts | 8 ++++++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue index 0437e05fa..5f5f64b0c 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 d3b203287..94509cf00 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 afdd54724..881e5e9ad 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 {