Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2022-12-26 13:26:21 +09:00
parent 78ee06985e
commit 6083356a3e
3 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/client/src/components/MkInstanceStats.vue
View file

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

4
packages/client/src/pages/admin/overview.pie.vue
View file

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

6
packages/client/src/scripts/use-chart-tooltip.ts
View file

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