Improve rendering performance
This commit is contained in:
parent
3461f0ffc9
commit
2d12f8b49e
@ -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) {
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user