linkkf 로직수정중

lib/system/templates/system_home.html

@@ -8,7 +8,7 @@
 <div>
   <div class="row">
   <div class="col-sm-12">
- 
+  <canvas id="mycanvas" height="100vh"></canvas>
   <h3>시스템</h3>
   <hr>
   {{ macros.info_text_and_buttons('python_version', 'Python', [['globalLinkBtn', '패키지 관리', [('url','/system/tool/python')]]], info['python_version']) }}
@@ -45,21 +45,102 @@
 
   <h3>스케쥴</h3>
   <div id="scheduler_list_div"></div>
-</div> <!--전체-->
+</div>
+<!--전체-->
+<script src="{{ url_for('static', filename='js/chartjs-utils.js') }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
+<script>
+  const Utils = ChartUtils.init()
+</script>
 
+<script src="https://cdn.jsdelivr.net/npm/luxon@3.0.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0"></script>
 <script type="text/javascript">
-$(document).ready(function(){
-  var socket = io.connect(window.location.href);
+  Chart.defaults.set("plugins.streaming", {
+    duration: 20000,
+  })
 
-  socket.on('start', function(data){
-  });
+  // used for example purposes
+  function getRandomIntInclusive(min, max) {
+    min = Math.ceil(min)
+    max = Math.floor(max)
+    return Math.floor(Math.random() * (max - min + 1)) + min
+  }
 
-  socket.on('status', function(data) {
-    make_system(data.system);
-    make_scheduler_list(data.scheduler);
-  });
-});
+  $(document).ready(function () {
+    var socket = io.connect(window.location.href)
+    var postId = 1
+    socket.on("start", function (data) {})
 
+    socket.on("status", function (data) {
+      console.log(data.system.cpu_percent)
+      const now = Date.now()
+      //myChart.data.labels.push("T " + postId++)
+      /* */
+      myChart.data.datasets[0].data.push({ x: now, y: data.system.cpu_percent.replace(/.%/g, "") })
+      /* */
+      myChart.update()
+      make_system(data.system)
+      make_scheduler_list(data.scheduler)
+    })
+
+    /*    const onRefresh = (chart) => {
+        const now = Date.now()
+        chart.data.datasets.forEach((dataset) => {
+          dataset.data.push({
+            x: now,
+            y: Utils.rand(0, 100),
+          })
+        })
+      }
+  */
+
+    var ctx_live = document.getElementById("mycanvas")
+    var myChart = new Chart(ctx_live, {
+      type: "line",
+      data: {
+        labels: [],
+        datasets: [
+          {
+            label: "CPU",
+            backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
+            borderColor: Utils.CHART_COLORS.blue,
+            cubicInterpolationMode: "monotone",
+            data: [],
+          },
+        ],
+      },
+      options: {
+        plugins: {
+          // Change options for ALL axes of THIS CHART
+          streaming: {
+            duration: 20000,
+          },
+        },
+        scales: {
+          x: {
+            type: "realtime",
+            realtime: {
+              duration: 60000,
+              refresh: 1000,
+              delay: 1000,
+              //onRefresh: onRefresh,
+            },
+          },
+          y: {
+            title: {
+              display: true,
+              //text: "Value",
+            },
+          },
+        },
+        interaction: {
+          intersect: false,
+        },
+      },
+    })
+  })
 
 $("body").on('click', '#recent_version_btn', function(e){
   e.preventDefault();
@@ -70,7 +151,7 @@ $("body").on('click', '#recent_version_btn', function(e){
 
 $("body").on('click', '#config_show_btn', function(e){
   e.preventDefault();
-  globalSendCommand('get_config', null, null, null, 'Config');
+  globalSendCommand('get_config');
 });
 
 
@@ -184,4 +265,4 @@ function make_scheduler_list(data) {
 
 
 </script>    
-{% endblock %}
+{% endblock %}