Improve rendering performance

This commit is contained in:
syuilo 2021-05-11 14:38:34 +09:00
parent d6b078bdc7
commit 8f11c4b3e1
2 changed files with 6 additions and 6 deletions

View file

@ -123,7 +123,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import Chart from 'chart.js'; import Chart from 'chart.js';
import XModalWindow from '@client/components/ui/modal-window.vue'; import XModalWindow from '@client/components/ui/modal-window.vue';
import MkUsersDialog from '@client/components/users-dialog.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'); Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
this.chartInstance = new Chart(this.canvas, { this.chartInstance = markRaw(new Chart(this.canvas, {
type: 'line', type: 'line',
data: { data: {
labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(), labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@ -331,7 +331,7 @@ export default defineComponent({
mode: 'index', mode: 'index',
} }
} }
}); }));
}, },
getDate(ago: number) { getDate(ago: number) {

View file

@ -27,7 +27,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, markRaw } from 'vue';
import Chart from 'chart.js'; import Chart from 'chart.js';
import number from '../../filters/number'; import number from '../../filters/number';
@ -69,7 +69,7 @@ export default defineComponent({
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg'); 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', type: 'line',
data: { data: {
labels: [], labels: [],
@ -152,7 +152,7 @@ export default defineComponent({
mode: 'index', mode: 'index',
} }
} }
}); }));
this.connection.on('stats', this.onStats); this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog); this.connection.on('statsLog', this.onStatsLog);