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);