Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop

CHANGELOG.md

@@ -37,6 +37,7 @@
 - Fix: いくつかのイベントリスナーが正しく解除されない問題を修正（メモリ使用量の改善）
 - Fix: 非ログイン時トップページをスクロール操作できないことがある問題を修正
 - Fix: ローカルユーザーへのホスト付きメンションが本文に含まれる指名ノートの作成時、投稿フォームにて、当該ユーザーが宛先に含まれていても正しく認識されない問題を修正
+- Fix: チャートの描画終了後にリソースが解放されない問題を修正
 - Fix: ドライブの「このファイルからノートを作成」やギャラリーの「ノートで共有」、誕生日ウィジェットからのノート作成において、通常投稿の下書きが表示される問題を修正
 
 ### Server

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>

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>

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>

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>

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>

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>

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,

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>

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>

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>

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>

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,

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>

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>

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>