チャートの連合グラフで割合を表示

CHANGELOG_YOJO.md

@@ -8,6 +8,7 @@ Cherrypick 4.11.1
 
 ### Client
 - Fix: リアクションが閲覧できる状態でも見れない問題を修正 [#429](https://github.com/yojo-art/cherrypick/pull/429)
+- Enhance: チャートの連合グラフで割合を表示
 
 ### Server
 - 

packages/frontend/src/components/MkInstanceStats.vue

@@ -107,13 +107,6 @@ const heatmapSrc = ref<HeatmapSource>('active-users');
 const subDoughnutEl = shallowRef<HTMLCanvasElement>();
 const pubDoughnutEl = shallowRef<HTMLCanvasElement>();
 
-const { handler: externalTooltipHandler1 } = useChartTooltip({
-	position: 'middle',
-});
-const { handler: externalTooltipHandler2 } = useChartTooltip({
-	position: 'middle',
-});
-
 function createDoughnut(chartEl, tooltip, data) {
 	const chartInstance = new Chart(chartEl, {
 		type: 'doughnut',
@@ -171,7 +164,17 @@ onMounted(() => {
 			value: number,
 			onClick?: () => void,
 		}[];
+		let totalFollowersCount = fedStats.topSubInstances.reduce((partialSum, a) => partialSum + a.followersCount, 0);
+		let totalFollowingCount = fedStats.topPubInstances.reduce((partialSum, a) => partialSum + a.followingCount, 0);
 
+		const { handler: externalTooltipHandler1 } = useChartTooltip({
+			position: 'middle',
+			total: totalFollowersCount,
+		});
+		const { handler: externalTooltipHandler2 } = useChartTooltip({
+			position: 'middle',
+			total: totalFollowingCount,
+		});
 		const subs: ChartData = fedStats.topSubInstances.map(x => ({
 			name: x.host,
 			color: x.themeColor,

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

@@ -7,7 +7,7 @@ import { onUnmounted, onDeactivated, ref } from 'vue';
 import * as os from '@/os.js';
 import MkChartTooltip from '@/components/MkChartTooltip.vue';
 
-export function useChartTooltip(opts: { position: 'top' | 'middle' } = { position: 'top' }) {
+export function useChartTooltip(opts: { position: 'top' | 'middle', total?:number} = { position: 'top' }) {
 	const tooltipShowing = ref(false);
 	const tooltipX = ref(0);
 	const tooltipY = ref(0);
@@ -38,13 +38,18 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio
 			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],
-		}));
+		tooltipSeries.value = context.tooltip.body.map((b, i) => {
+			let ratio = '';
+			if (opts.total !== undefined) {
+				ratio = '(' + String(Math.round(Number(b.lines[0]) / opts.total * 1000) / 10) + '%)';
+			}
+			return ({
+				backgroundColor: context.tooltip.labelColors[i].backgroundColor,
+				borderColor: context.tooltip.labelColors[i].borderColor,
+				text: b.lines[0] + ratio,
+			});
+		});
 
 		const rect = context.chart.canvas.getBoundingClientRect();