Merge pull request #17217 from misskey-dev/develop

Release: 2026.3.0

1 files changed, 16 insertions, 16 deletions

diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue
index 13048a2e1b..368fa5be27 100644
--- a/packages/frontend/src/components/MkInstanceStats.vue
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@@ -57,10 +57,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, computed, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
-import MkSelect from '@/components/MkSelect.vue';
 import type { MkSelectItem, ItemOption } from '@/components/MkSelect.vue';
-import MkChart from '@/components/MkChart.vue';
 import type { ChartSrc } from '@/components/MkChart.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkChart from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/composables/use-chart-tooltip.js';
 import { $i } from '@/i.js';
 import * as os from '@/os.js';
@@ -172,7 +172,14 @@ const { handler: externalTooltipHandler2 } = useChartTooltip({
 	position: 'middle',
 });
 
-function createDoughnut(chartEl, tooltip, data) {
+type ChartData = {
+	name: string,
+	color: string,
+	value: number,
+	onClick?: () => void,
+}[];
+
+function createDoughnut(chartEl: HTMLCanvasElement, tooltip: ReturnType<typeof useChartTooltip>['handler'], data: ChartData) {
 	const chartInstance = new Chart(chartEl, {
 		type: 'doughnut',
 		data: {
@@ -198,8 +205,8 @@ function createDoughnut(chartEl, tooltip, data) {
 			onClick: (ev) => {
 				if (ev.native == null) return;
 				const hit = chartInstance.getElementsAtEventForMode(ev.native, 'nearest', { intersect: true }, false)[0];
-				if (hit && data[hit.index].onClick) {
-					data[hit.index].onClick();
+				if (hit != null) {
+					data[hit.index].onClick?.();
 				}
 			},
 			plugins: {
@@ -223,16 +230,9 @@ function createDoughnut(chartEl, tooltip, data) {
 
 onMounted(() => {
 	misskeyApiGet('federation/stats', { limit: 30 }).then(fedStats => {
-		type ChartData = {
-			name: string,
-			color: string | null,
-			value: number,
-			onClick?: () => void,
-		}[];
-
 		const subs: ChartData = fedStats.topSubInstances.map(x => ({
 			name: x.host,
-			color: x.themeColor,
+			color: x.themeColor ?? '#888888',
 			value: x.followersCount,
 			onClick: () => {
 				os.pageWindow(`/instance-info/${x.host}`);
@@ -245,11 +245,11 @@ onMounted(() => {
 			value: fedStats.otherFollowersCount,
 		});
 
-		createDoughnut(subDoughnutEl.value, externalTooltipHandler1, subs);
+		if (subDoughnutEl.value != null) createDoughnut(subDoughnutEl.value, externalTooltipHandler1, subs);
 
 		const pubs: ChartData = fedStats.topPubInstances.map(x => ({
 			name: x.host,
-			color: x.themeColor,
+			color: x.themeColor ?? '#888888',
 			value: x.followingCount,
 			onClick: () => {
 				os.pageWindow(`/instance-info/${x.host}`);
@@ -262,7 +262,7 @@ onMounted(() => {
 			value: fedStats.otherFollowingCount,
 		});
 
-		createDoughnut(pubDoughnutEl.value, externalTooltipHandler2, pubs);
+		if (pubDoughnutEl.value != null) createDoughnut(pubDoughnutEl.value, externalTooltipHandler2, pubs);
 	});
 });
 </script>