added screenshot

README.md

 # system-load
 
-A web application that displays the current Linux system load in real time.
-- percentage of processor usage;
-- the total amount of RAM and the amount of free RAM;
-- average load.
+ the path to the folder.A web application that displays the current Linux system load in real time.
+                                                                                                                      - percentage of processor usage;
+                                                                                                                      - the total amount of RAM and the amount of free RAM;
+                                                                                                                      - average load.
                                                                                                                       
-## Deployment
-The shared folder from the repository is hosted on the server. In the server settings, specify the path to the folder.
+                                                                                                                      ## Deployment
+                                                                                                                      The shared folder from the repository is hosted on the server. In the server settings, specify
\ No newline at end of file

public/core/data.php

@@ -14,7 +14,7 @@ if(trim(shell_exec("uptime |  awk '{ print $10 }' ")) == 'average:') {
 }
 
 header('Access-Control-Allow-Origin: *');
-$arr = array('CPU' => trim($cpu),
+$arr = array('CPU' => ((int)trim($cpu) > 100 ? 100 : trim($cpu)),
     'TotalMemory' => trim($total_mem),
     'FreeMemory' => trim($free_mem),
     "oneMinute" => substr(trim($average1), 0, -1),

public/css/main.css

-table{width:100%;font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;font-size:14px;border-collapse:collapse;text-align:center}td:first-child,th{background:#AFCDE7;color:#fff;padding:10px 20px}td,th{border-style:solid;border-width:0 1px 1px 0;border-color:#fff}td{background:#D8E6F3}.canvasCpu-block,.canvasMemory-block{height:200px;width:500px}.canvas-block{margin-top:100px}.cpu-and-memory-charts{display:flex;justify-content:space-around}.loadAver{margin:100px auto;height:100%;width:50%}@media screen and (max-width:640px){.canvasCpu-block,.canvasMemory-block{height:150px;width:300px}table{font-size:11px}td:first-child,th{padding:4px}.canvas-block{margin-top:30px}.cpu-and-memory-charts{display:block}.canvasMemory-block{margin-top:10px}.loadAver{margin-top:20px;height:300px;width:300px}}
+table{width:100%;font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;font-size:14px;border-collapse:collapse;text-align:center}td:first-child,th{background:#AFCDE7;color:#fff;padding:10px 20px}td,th{border-style:solid;border-width:0 1px 1px 0;border-color:#fff}td{background:#D8E6F3}.canvasCpu-block,.canvasMemory-block{height:200px;width:500px}.canvas-block{margin-top:50px}.cpu-and-memory-charts{display:flex;justify-content:space-around}.loadAver{margin:100px auto;height:100%;width:50%}@media screen and (max-width:640px){.canvasCpu-block,.canvasMemory-block{height:150px;width:300px}table{font-size:11px}td:first-child,th{padding:4px}.canvas-block{margin-top:30px}.cpu-and-memory-charts{display:block}.canvasMemory-block{margin-top:10px}.loadAver{margin-top:20px;height:300px;width:300px}}
\ No newline at end of file

public/js/main.js

-const cpuCtx=document.getElementById("cpuChart").getContext("2d"),memoryCtx=document.getElementById("memoryChart").getContext("2d"),loadAverageCtx=document.getElementById("loadAverageChart").getContext("2d"),cpuData=[],memoryData=[],timeData=[],oneMinuteData=[],fiveMinutesData=[],fifteenMinutesData=[],cpuChart=new Chart(cpuCtx,{type:"line",data:{labels:timeData,datasets:[{label:"CPU",backgroundColor:"rgb(255, 99, 132)",borderColor:"rgb(255, 99, 132)",data:cpuData}]},options:{scales:{yAxes:[{ticks:{min:0,max:100,stepSize:20},scaleLabel:{display:!0,labelString:"PERCENTAGES",fontColor:"#c0c0c0"}}]}}}),memoryChart=new Chart(memoryCtx,{type:"line",data:{labels:timeData,datasets:[{label:"Free memory",backgroundColor:"rgb(16, 115, 181)",borderColor:"rgb(16, 115, 181)",data:memoryData}]},options:{scales:{yAxes:[{ticks:{min:0,max:getData().TotalMemory/1024,stepSize:getData().TotalMemory/4096},scaleLabel:{display:!0,labelString:"MEGABYTES",fontColor:"#c0c0c0"}}]}}}),loadAverageChart=new Chart(loadAverageCtx,{type:"line",data:{labels:timeData,datasets:[{label:"1 minute",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(255, 99, 132)",data:oneMinuteData},{label:"5 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(65, 99, 222)",data:fiveMinutesData},{label:"15 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(145, 44, 132)",data:fifteenMinutesData}]},options:{scales:{yAxes:[{ticks:{min:0,stepSize:.5}}]}}});function renderCharts(e){timeData.length>=10&&(timeData.shift(),cpuData.shift(),memoryData.shift(),oneMinuteData.shift(),fiveMinutesData.shift(),fifteenMinutesData.shift()),cpuData.push(e.CPU/1),memoryData.push((e.FreeMemory/1024).toFixed(2)),timeData.push((new Date).toLocaleTimeString()),oneMinuteData.push(e.oneMinute),fiveMinutesData.push(e.fiveMinutes),fifteenMinutesData.push(e.fifteenMinutes),cpuChart.update(),memoryChart.update(),loadAverageChart.update()}function getData(){let e=new XMLHttpRequest;if(e.open("GET","core/data.php",!1),e.send(),200!=e.status)console.log(e.status);else var t=JSON.parse(e.responseText);return t}function App(){return React.createElement(Table,{data:getData()})}function Table(e){return React.createElement("table",{className:"system-load-table"},React.createElement("tbody",null,React.createElement("tr",{className:"first_row"},React.createElement("th",null,"CPU"),React.createElement("th",null,"Total memory"),React.createElement("th",null,"Free memory"),React.createElement("th",null,"1 minute"),React.createElement("th",null,"5 minutes"),React.createElement("th",null,"15 minutes")),React.createElement("tr",{className:"second-row"},React.createElement("th",null,e.data.CPU,"%"),React.createElement("th",null,(e.data.TotalMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,(e.data.FreeMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,e.data.oneMinute),React.createElement("th",null,e.data.fiveMinutes),React.createElement("th",null,e.data.fifteenMinutes))))}setInterval(function e(){return renderCharts(getData()),ReactDOM.render(React.createElement(App,null),document.getElementById("root")),e}(),2e3);
+const cpuCtx=document.getElementById("cpuChart").getContext("2d"),memoryCtx=document.getElementById("memoryChart").getContext("2d"),loadAverageCtx=document.getElementById("loadAverageChart").getContext("2d"),cpuData=[],memoryData=[],timeData=[],oneMinuteData=[],fiveMinutesData=[],fifteenMinutesData=[],cpuChart=new Chart(cpuCtx,{type:"line",data:{labels:timeData,datasets:[{label:"CPU",backgroundColor:"rgb(255, 99, 132)",borderColor:"rgb(255, 99, 132)",data:cpuData}]},options:{scales:{yAxes:[{ticks:{min:0,max:100,stepSize:20},scaleLabel:{display:!0,labelString:"PERCENTAGES",fontColor:"#c0c0c0"}}]}}}),memoryChart=new Chart(memoryCtx,{type:"line",data:{labels:timeData,datasets:[{label:"Free memory",backgroundColor:"rgb(16, 115, 181)",borderColor:"rgb(16, 115, 181)",data:memoryData}]},options:{scales:{yAxes:[{ticks:{min:0,max:getData().TotalMemory/1024,stepSize:getData().TotalMemory/4096},scaleLabel:{display:!0,labelString:"MEGABYTES",fontColor:"#c0c0c0"}}]}}}),loadAverageChart=new Chart(loadAverageCtx,{type:"line",data:{labels:timeData,datasets:[{label:"1 minute",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(255, 99, 132)",data:oneMinuteData},{label:"5 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(65, 99, 222)",data:fiveMinutesData},{label:"15 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(145, 44, 132)",data:fifteenMinutesData}]},options:{scales:{yAxes:[{ticks:{min:0,stepSize:.5}}]}}});function renderCharts(e){timeData.length>=10&&(timeData.shift(),cpuData.shift(),memoryData.shift(),oneMinuteData.shift(),fiveMinutesData.shift(),fifteenMinutesData.shift()),cpuData.push(e.CPU/1),memoryData.push((e.FreeMemory/1024).toFixed(2)),timeData.push((new Date).toLocaleTimeString()),oneMinuteData.push(e.oneMinute),fiveMinutesData.push(e.fiveMinutes),fifteenMinutesData.push(e.fifteenMinutes),cpuChart.update(),memoryChart.update(),loadAverageChart.update()}function getData(){let e=new XMLHttpRequest;if(e.open("GET","core/data.php",!1),e.send(),200==e.status)return JSON.parse(e.responseText);console.log(e.status)}function App(){return React.createElement(Table,{data:getData()})}function Table(e){return React.createElement("table",{className:"system-load-table"},React.createElement("tbody",null,React.createElement("tr",{className:"first_row"},React.createElement("th",null,"CPU"),React.createElement("th",null,"Total memory"),React.createElement("th",null,"Free memory"),React.createElement("th",null,"1 minute"),React.createElement("th",null,"5 minutes"),React.createElement("th",null,"15 minutes")),React.createElement("tr",{className:"second-row"},React.createElement("th",null,e.data.CPU,"%"),React.createElement("th",null,(e.data.TotalMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,(e.data.FreeMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,e.data.oneMinute),React.createElement("th",null,e.data.fiveMinutes),React.createElement("th",null,e.data.fifteenMinutes))))}setInterval(function e(){return renderCharts(getData()),ReactDOM.render(React.createElement(App,null),document.getElementById("root")),e}(),2e3);
\ No newline at end of file

src/core/data.php

@@ -14,7 +14,7 @@ if(trim(shell_exec("uptime |  awk '{ print $10 }' ")) == 'average:') {
 }
 
 header('Access-Control-Allow-Origin: *');
-$arr = array('CPU' => trim($cpu),
+$arr = array('CPU' => ((int)trim($cpu) > 100 ? 100 : trim($cpu)),
     'TotalMemory' => trim($total_mem),
     'FreeMemory' => trim($free_mem),
     "oneMinute" => substr(trim($average1), 0, -1),

src/css/index.css

@@ -28,7 +28,7 @@ td {
 }
 
 .canvas-block {
-  margin-top: 100px;
+  margin-top: 50px;
 }
 
 .cpu-and-memory-charts {

src/js/httpReq.js

@@ -5,7 +5,6 @@ function getData() {
   if (xhr.status != 200) {
     console.log(xhr.status);
   } else {
-    var Data = JSON.parse(xhr.responseText);
+    return (JSON.parse(xhr.responseText));
   }
-  return Data;
 }
\ No newline at end of file