From 2d2aa779ad01899b8e8a55c74799f3ab0dfda1b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 22 Jul 2026 10:16:15 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=81=E3=83=A3=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=81=AE=E3=83=9E=E3=82=A6=E3=83=B3=E3=83=88=E8=A7=A3?=
 =?UTF-8?q?=E9=99=A4=E6=99=82=E3=81=ABChart=E3=82=A4=E3=83=B3=E3=82=B9?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=B9=E3=81=8C=E7=A0=B4=E6=A3=84=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20(#17763)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): Chartのマウント解除時にChartインスタンスが破棄されていない問題を修正

* Update Changelog

* fix
---
 CHANGELOG.md                                  |  1 +
 packages/frontend/src/components/MkChart.vue  |  5 ++++-
 .../frontend/src/components/MkHeatmap.vue     |  8 ++++++--
 .../src/components/MkInstanceStats.vue        | 19 ++++++++++++++++---
 .../src/components/MkRetentionHeatmap.vue     |  8 ++++++--
 .../src/components/MkRetentionLineChart.vue   |  6 +++++-
 .../MkVisitorDashboard.ActiveUsersChart.vue   |  8 ++++++--
 .../federation-job-queue.chart.chart.vue      |  6 +++++-
 .../src/pages/admin/job-queue.chart.vue       |  6 +++++-
 .../src/pages/admin/overview.active-users.vue | 12 ++++++++++--
 .../src/pages/admin/overview.ap-requests.vue  | 18 +++++++++++++++---
 .../frontend/src/pages/admin/overview.pie.vue |  6 +++++-
 .../src/pages/admin/overview.queue.chart.vue  |  6 +++++-
 .../src/pages/user/activity.following.vue     | 12 ++++++++++--
 .../src/pages/user/activity.notes.vue         | 12 ++++++++++--
 .../frontend/src/pages/user/activity.pv.vue   | 12 ++++++++++--
 16 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d667cde477..edcf197752 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,6 +37,7 @@
 - Fix: いくつかのイベントリスナーが正しく解除されない問題を修正（メモリ使用量の改善）
 - Fix: 非ログイン時トップページをスクロール操作できないことがある問題を修正
 - Fix: ローカルユーザーへのホスト付きメンションが本文に含まれる指名ノートの作成時、投稿フォームにて、当該ユーザーが宛先に含まれていても正しく認識されない問題を修正
+- Fix: チャートの描画終了後にリソースが解放されない問題を修正
 - Fix: ドライブの「このファイルからノートを作成」やギャラリーの「ノートで共有」、誕生日ウィジェットからのノート作成において、通常投稿の下書きが表示される問題を修正
 
 ### Server
diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
index e418e729ca..2d96cb7572 100644
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@@ -46,7 +46,7 @@ export type ChartSrc =
 
 <script lang="ts" setup>
 
-import { onMounted, ref, useTemplateRef, watch } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import { misskeyApiGet } from '@/utility/misskey-api.js';
@@ -879,6 +879,9 @@ onMounted(() => {
 	fetchAndRender();
 });
 
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkHeatmap.vue b/packages/frontend/src/components/MkHeatmap.vue
index 03780bf3ba..8f5eadf735 100644
--- a/packages/frontend/src/components/MkHeatmap.vue
+++ b/packages/frontend/src/components/MkHeatmap.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, watch, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, nextTick, watch, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -232,7 +232,11 @@ watch(() => props.src, () => {
 	renderChart();
 });
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue
index 721e4e88de..949a2d23b2 100644
--- a/packages/frontend/src/components/MkInstanceStats.vue
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, computed, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, computed, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
 import type { MkSelectItem, ItemOption } from '@/components/MkSelect.vue';
 import type { ChartSrc } from '@/components/MkChart.vue';
@@ -163,9 +163,13 @@ const {
 	]),
 	initialValue: 'active-users',
 });
+
 const subDoughnutEl = useTemplateRef('subDoughnutEl');
 const pubDoughnutEl = useTemplateRef('pubDoughnutEl');
 
+let subDoughnutChartInstance: Chart | null = null;
+let pubDoughnutChartInstance: Chart | null = null;
+
 const { handler: externalTooltipHandler1 } = useChartTooltip({
 	position: 'middle',
 });
@@ -246,7 +250,9 @@ onMounted(() => {
 			value: fedStats.otherFollowersCount,
 		});
 
-		if (subDoughnutEl.value != null) createDoughnut(subDoughnutEl.value, externalTooltipHandler1, subs);
+		if (subDoughnutEl.value != null) {
+			subDoughnutChartInstance = createDoughnut(subDoughnutEl.value, externalTooltipHandler1, subs);
+		}
 
 		const pubs: ChartData = fedStats.topPubInstances.map(x => ({
 			name: x.host,
@@ -263,9 +269,16 @@ onMounted(() => {
 			value: fedStats.otherFollowingCount,
 		});
 
-		if (pubDoughnutEl.value != null) createDoughnut(pubDoughnutEl.value, externalTooltipHandler2, pubs);
+		if (pubDoughnutEl.value != null) {
+			pubDoughnutChartInstance = createDoughnut(pubDoughnutEl.value, externalTooltipHandler2, pubs);
+		}
 	});
 });
+
+onUnmounted(() => {
+	subDoughnutChartInstance?.destroy();
+	pubDoughnutChartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue
index 6ab7a01ce7..ff68c24766 100644
--- a/packages/frontend/src/components/MkRetentionHeatmap.vue
+++ b/packages/frontend/src/components/MkRetentionHeatmap.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, nextTick, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { store } from '@/store.js';
@@ -203,7 +203,11 @@ async function renderChart() {
 	});
 }
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
diff --git a/packages/frontend/src/components/MkRetentionLineChart.vue b/packages/frontend/src/components/MkRetentionLineChart.vue
index e80292c970..779e89733f 100644
--- a/packages/frontend/src/components/MkRetentionLineChart.vue
+++ b/packages/frontend/src/components/MkRetentionLineChart.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
 import type { ScatterDataPoint } from 'chart.js';
 import tinycolor from 'tinycolor2';
@@ -139,4 +139,8 @@ onMounted(async () => {
 		plugins: [chartVLine(vLineColor)],
 	});
 });
+
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
diff --git a/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue b/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
index 9abd228baf..67be8ee55a 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref, nextTick } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref, nextTick } from 'vue';
 import { Chart } from 'chart.js';
 import tinycolor from 'tinycolor2';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -152,9 +152,13 @@ async function renderChart() {
 	});
 }
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/admin/federation-job-queue.chart.chart.vue b/packages/frontend/src/pages/admin/federation-job-queue.chart.chart.vue
index 04de781a28..74b22ff20d 100644
--- a/packages/frontend/src/pages/admin/federation-job-queue.chart.chart.vue
+++ b/packages/frontend/src/pages/admin/federation-job-queue.chart.chart.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
 import { store } from '@/store.js';
 import { useChartTooltip } from '@/composables/use-chart-tooltip.js';
@@ -134,6 +134,10 @@ onMounted(() => {
 	});
 });
 
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
+
 defineExpose({
 	setData,
 	pushData,
diff --git a/packages/frontend/src/pages/admin/job-queue.chart.vue b/packages/frontend/src/pages/admin/job-queue.chart.vue
index a1920e277b..96364a468e 100644
--- a/packages/frontend/src/pages/admin/job-queue.chart.vue
+++ b/packages/frontend/src/pages/admin/job-queue.chart.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, watch } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 import { Chart } from 'chart.js';
 import { store } from '@/store.js';
 import { useChartTooltip } from '@/composables/use-chart-tooltip.js';
@@ -126,4 +126,8 @@ onMounted(() => {
 
 	setData();
 });
+
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue
index 9854ca7fc6..456eb97ded 100644
--- a/packages/frontend/src/pages/admin/overview.active-users.vue
+++ b/packages/frontend/src/pages/admin/overview.active-users.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -27,6 +27,7 @@ initChart();
 const chartEl = useTemplateRef('chartEl');
 const now = new Date();
 let chartInstance: Chart | null = null;
+let disposed = false;
 const chartLimit = 7;
 const fetching = ref(true);
 
@@ -56,6 +57,8 @@ async function renderChart() {
 
 	const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' });
 
+	if (disposed || chartEl.value == null) return;
+
 	const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
 	const colorRead = '#3498db';
@@ -161,9 +164,14 @@ async function renderChart() {
 	fetching.value = false;
 }
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	disposed = true;
+	chartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.vue b/packages/frontend/src/pages/admin/overview.ap-requests.vue
index 75f544c5a9..6d397b92ed 100644
--- a/packages/frontend/src/pages/admin/overview.ap-requests.vue
+++ b/packages/frontend/src/pages/admin/overview.ap-requests.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
 import isChromatic from 'chromatic';
@@ -33,6 +33,10 @@ import { initChart } from '@/utility/init-chart.js';
 
 initChart();
 
+let chartInstance1: Chart | null = null;
+let chartInstance2: Chart | null = null;
+let disposed = false;
+
 const chartLimit = 50;
 const chartEl = useTemplateRef('chartEl');
 const chartEl2 = useTemplateRef('chartEl2');
@@ -71,6 +75,8 @@ onMounted(async () => {
 
 	const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
 
+	if (disposed || chartEl.value == null || chartEl2.value == null) return;
+
 	const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 	const succColor = '#87e000';
 	const failColor = '#ff4400';
@@ -78,7 +84,7 @@ onMounted(async () => {
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
 
-	new Chart(chartEl.value, {
+	chartInstance1 = new Chart(chartEl.value, {
 		type: 'line',
 		data: {
 			datasets: [{
@@ -183,7 +189,7 @@ onMounted(async () => {
 		plugins: [chartVLine(vLineColor)],
 	});
 
-	new Chart(chartEl2.value, {
+	chartInstance2 = new Chart(chartEl2.value, {
 		type: 'bar',
 		data: {
 			datasets: [{
@@ -273,6 +279,12 @@ onMounted(async () => {
 
 	fetching.value = false;
 });
+
+onUnmounted(() => {
+	disposed = true;
+	chartInstance1?.destroy();
+	chartInstance2?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
index d10e3504e6..d9ab11558e 100644
--- a/packages/frontend/src/pages/admin/overview.pie.vue
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
 import { themeManager } from '@/theme.js';
 import { useChartTooltip } from '@/composables/use-chart-tooltip.js';
@@ -82,4 +82,8 @@ onMounted(() => {
 		},
 	});
 });
+
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
 </script>
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue
index 771b35c09f..17b80173a4 100644
--- a/packages/frontend/src/pages/admin/overview.queue.chart.vue
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
 import { store } from '@/store.js';
 import { useChartTooltip } from '@/composables/use-chart-tooltip.js';
@@ -134,6 +134,10 @@ onMounted(() => {
 	});
 });
 
+onUnmounted(() => {
+	chartInstance?.destroy();
+});
+
 defineExpose({
 	setData,
 	pushData,
diff --git a/packages/frontend/src/pages/user/activity.following.vue b/packages/frontend/src/pages/user/activity.following.vue
index f9a2eed6b9..9cf72e3ee1 100644
--- a/packages/frontend/src/pages/user/activity.following.vue
+++ b/packages/frontend/src/pages/user/activity.following.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
@@ -37,6 +37,7 @@ const chartEl = useTemplateRef('chartEl');
 const legendEl = useTemplateRef('legendEl');
 const now = new Date();
 let chartInstance: Chart | null = null;
+let disposed = false;
 const chartLimit = 30;
 const fetching = ref(true);
 
@@ -66,6 +67,8 @@ async function renderChart() {
 
 	const raw = await misskeyApi('charts/user/following', { userId: props.user.id, limit: chartLimit, span: 'day' });
 
+	if (disposed || chartEl.value == null) return;
+
 	const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
 	const colorFollowLocal = '#008FFB';
@@ -172,9 +175,14 @@ async function renderChart() {
 	fetching.value = false;
 }
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	disposed = true;
+	chartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/user/activity.notes.vue b/packages/frontend/src/pages/user/activity.notes.vue
index 00bfe25430..ba0d37d0a0 100644
--- a/packages/frontend/src/pages/user/activity.notes.vue
+++ b/packages/frontend/src/pages/user/activity.notes.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
@@ -37,6 +37,7 @@ const chartEl = useTemplateRef('chartEl');
 const legendEl = useTemplateRef('legendEl');
 const now = new Date();
 let chartInstance: Chart | null = null;
+let disposed = false;
 const chartLimit = 50;
 const fetching = ref(true);
 
@@ -66,6 +67,8 @@ async function renderChart() {
 
 	const raw = await misskeyApi('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
 
+	if (disposed || chartEl.value == null) return;
+
 	const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
 	const colorNormal = '#008FFB';
@@ -171,9 +174,14 @@ async function renderChart() {
 	fetching.value = false;
 }
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	disposed = true;
+	chartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/user/activity.pv.vue b/packages/frontend/src/pages/user/activity.pv.vue
index 451f8ba0f7..a2a7909315 100644
--- a/packages/frontend/src/pages/user/activity.pv.vue
+++ b/packages/frontend/src/pages/user/activity.pv.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
@@ -37,6 +37,7 @@ const chartEl = useTemplateRef('chartEl');
 const legendEl = useTemplateRef('legendEl');
 const now = new Date();
 let chartInstance: Chart | null = null;
+let disposed = false;
 const chartLimit = 30;
 const fetching = ref(true);
 
@@ -66,6 +67,8 @@ async function renderChart() {
 
 	const raw = await misskeyApi('charts/user/pv', { userId: props.user.id, limit: chartLimit, span: 'day' });
 
+	if (disposed || chartEl.value == null) return;
+
 	const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
 	const colorUser = '#3498db';
@@ -180,9 +183,14 @@ async function renderChart() {
 	fetching.value = false;
 }
 
-onMounted(async () => {
+onMounted(() => {
 	renderChart();
 });
+
+onUnmounted(() => {
+	disposed = true;
+	chartInstance?.destroy();
+});
 </script>
 
 <style lang="scss" module>