From 2d12f8b49ec0a4963b784d6d146d199d3b525a8f 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 f52e5d866b..75a24bcb80 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 446c979209..0cd983127f 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);