I have a problem with vue-chartjs. I have updated vuejs v2 to v3 and vue-chartjs v3 to v5
Error is: InternalError: too much recursion
I have tried to add computed, modify many line of code, i don't remember all my modify, but that don't work. I have found this topic: Adding data to line chart (chart.js with Vue.js) results in 'too much recursion' error but, He used composition api and me option api, but I have to make ref and shallowRef that make no difference.
My component actual code:
<template>
<div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="d-new-flex m-b-10 no-block">
<h5 class="card-title m-b-0 align-self-center text-uppercase">Statistiques</h5>
</div>
<ul class="list-inline m-b-10 text-uppercase lp-5 font-medium font-12">
<li @click="hide('CPU')" id="cpu-stats" :style="'text-decoration: ' + this.style['CPU']"><i class="fa fa-square m-r-5 text-warning"></i> CPU (en %)</li>
<li @click="hide('RAM')" id="ram-stats" :style="'text-decoration: ' + this.style['RAM']"><i class="fa fa-square m-r-5 text-danger"></i> RAM (en Mo)</li>
<li @click="hide('DISK')" id="disk-stats" :style="'text-decoration: ' + this.style['DISK']"><i class="fa fa-square m-r-5"
style="color: #03e5fa;"></i> Disque (en Mo)
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div style="height: 400px; width: 100%">
<Line :data="chartData"
:options="options" ref="stats"/>
<div class="clearfix"></div>
</div>
</div>
</template>
<script>
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
LineElement,
PointElement,
Title,
Tooltip,
Legend,
TimeSeriesScale
} from 'chart.js';
import { Line } from 'vue-chartjs';
import 'chartjs-adapter-moment';
ChartJS.register(
CategoryScale,
LinearScale,
TimeSeriesScale,
LineElement,
PointElement,
Title,
Tooltip,
Legend
);
export default {
name: 'Chart',
props: ["optionsAdd"],
components: { Line },
data() {
return {
style: {
RAM: "none",
DISK: "none",
CPU: "none"
},
options: {
responsive: true,
maintainAspectRatio: false,
hoverMode: 'index',
plugins: {
legend: {
display: false
}
},
scales: {
x: {
display: true,
type: 'timeseries',
bounds: 'data',
time: {
unit: 'second',
displayFormats: {
second: "hh:mm:ss"
}
},
grid: {
display: false,
drawTicks: false,
},
ticks: {
source: "labels"
}
},
yRD: {
type: 'linear',
ticks: {
beginAtZero: true
},
position: 'left',
min: 0,
title: {
display: true,
labelString: 'RAM (en Mo) et Disque (Mo)'
}
},
yCPU: {
type: 'linear',
ticks: {
beginAtZero: true
},
max: 100,
min: 0,
position: 'right',
grid: {
drawOnChartArea: false
},
title: {
display: true,
labelString: 'CPU (en %)'
}
}
}
},
cData: {
labels: [new Date(Date.now() - 30000), new Date(Date.now() - 60000), new Date(Date.now() - 90000)],
datasets: [
{
backgroundColor: "#FF484C",
borderColor: "#FF484C",
fill: false,
label: "RAM",
data: [0,0,0],
yAxisID: "yRD"
},
{
backgroundColor: "#FA7D03",
borderColor: "#FA7D03",
fill: false,
label: "CPU",
data: [0,0,0
],
yAxisID: "yCPU"
},
{
backgroundColor: "#03e5fa",
borderColor: "#03e5fa",
fill: false,
label: "Disque",
yAxisID: "yRD",
data: [0,0,0]
}
]
}
}
},
computed: {
chartData: {
// getter
get() {
return this.cData;
},
// setter
set(newValue) {
console.log(newValue);
//this.cData.datasets = newValue.datasets;
}
}
},
mounted() {
const instance = this;
this.chartData.datasets.push({
data: [0, 1, 3]
})
this.chartData.datasets[0].data.push(0)
console.log(this.chartData);
if(this.optionsAdd != null) console.log("not null");
this.$socket.emit("stats", this.$parent.$parent.hash);
this.sockets.subscribe('stats', (data) => {
if (data != null) {
var cpu = parseInt(data.cpu / 20);
var memory = parseInt(data.memory / 1048576);
const unit = data.unit;
var disk = parseInt(data.size);
switch (unit) {
case "Go":
disk *= 1024;
break;
case "Ko":
disk /= 1024;
break;
}
//var oldStas = instance.data;
//instance.dataValue.labels.push(new Date(Date.now()));
//On insére les valeur de la ram avec la date dans le tableau
/*instance.dataValue.datasets[0].data.push(memory);
//On insére les valeur du cpu avec la date dans le tableau
instance.dataValue.datasets[1].data.push(cpu);
instance.dataValue.datasets[2].data.push(disk);
if (instance.dataValue.datasets[0].data.length > 30)
instance.dataValue.datasets[0].data.splice(0, 1);
if (instance.dataValue.datasets[1].data.length > 30)
instance.dataValue.datasets[1].data.splice(0, 1);
if (instance.dataValue.datasets[2].data.length > 30)
instance.dataValue.datasets[2].data.splice(0, 1);*/
//instance.data = oldStas;
//instance.$refs.stats.chart.update()
}
//dara players nodejs
if (this.$parent.is_start)
fetch("/api/service/" + this.$parent.id_server + "/minecraft/list").then(response => response.json())
.then(json => {
this.players = json.counts;
if (this.$parent.list === "online")
this.$parent.playersList = json.players;
});
});
},
methods: {
hide: function(type) {
let obj = {RAM: 0, CPU: 1, DISK: 2};
if(this.$refs.stats.chart.getDataVisibility(obj[type])) {
this.$refs.stats.chart.hide(obj[type]);
this.style[type] = "line-through";
} else {
this.$refs.stats.chart.show(obj[type]);
this.style[type] = "none";
}
this.$refs.stats.chart.toggleDataVisibility(obj[type]);
this.$refs.stats.chart.update();
},
}
}
</script>
How to solve the recursion problem ? It is because the object is so complex ?
I use vue-js 3.2.45 and vue-chartjs 5.1.0 Thanks for your help !
