From 8f11c4b3e19ef35f9f9bc27a9f024ad0a3452e0c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 11 May 2021 14:38:34 +0900
Subject: [PATCH] Improve rendering performance

---
 src/client/pages/instance/instance.vue    | 6 +++---
 src/client/pages/instance/queue.chart.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index f52e5d866..75a24bcb8 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkUsersDialog from '@client/components/users-dialog.vue';
@@ -280,7 +280,7 @@ export default defineComponent({
 			}
 
 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-			this.chartInstance = new Chart(this.canvas, {
+			this.chartInstance = markRaw(new Chart(this.canvas, {
 				type: 'line',
 				data: {
 					labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@@ -331,7 +331,7 @@ export default defineComponent({
 						mode: 'index',
 					}
 				}
-			});
+			}));
 		},
 
 		getDate(ago: number) {
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue
index 446c97920..0cd983127 100644
--- a/src/client/pages/instance/queue.chart.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import number from '../../filters/number';
 
@@ -69,7 +69,7 @@ export default defineComponent({
 
 		Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
-		this.chart = new Chart(this.$refs.chart, {
+		this.chart = markRaw(new Chart(this.$refs.chart, {
 			type: 'line',
 			data: {
 				labels: [],
@@ -152,7 +152,7 @@ export default defineComponent({
 					mode: 'index',
 				}
 			}
-		});
+		}));
 
 		this.connection.on('stats', this.onStats);
 		this.connection.on('statsLog', this.onStatsLog);