@shardus/monitor-client - npm Package Compare versions

Comparing version 2.5.4 to 2.5.5

package.json

 {
     "name": "@shardus/monitor-client",
-    "version": "2.5.4",
+    "version": "2.5.5",
     "description": "",
@@ -5,0 +5,0 @@ "main": "entry.js",

public/app-versions.js

 const INTERVAL = 10_000
+const colors = ["#36a2eb", "#ff6384", "#4bc0c0", "#ff9f40", "#9966ff", "#ffcd56", "#c9cbcf"]
 
-
-const fetchChanges = async () => {
+const fetchChanges = async (animate = false) => {
     const data = []
@@ -12,4 +12,2 @@ const labels = []
 
-    console.log('appDataList', appDataList)
-
     for(const appVersion in appDataList) {
@@ -24,3 +22,4 @@ const count = appDataList[appVersion].nodeCount
 
-    drawPieChart(data, labels, tooltips)
+    drawPieChart(data, labels, tooltips, animate)
+    writeInfoPanel(data, labels)
 }
@@ -43,3 +42,3 @@
 
-const drawPieChart = (data, labels, tooltips) => {
+const drawPieChart = (data, labels, tooltips, animate) => {
   let chartStatus = Chart.getChart("app-versions-chart"); // <canvas> id
@@ -53,2 +52,20 @@ if (chartStatus != undefined) {
 
+  const chartOptions = {
+    plugins: {
+        tooltip: {
+            callbacks: {
+                afterBody: (context) => {
+                    return tooltips[context[0].dataIndex].split("\n")
+                }
+            }
+
+        }
+    }
+  }
+
+  if(!animate) {
+    chartOptions.animation = false
+  }
+
+
   new Chart(ctx, {
@@ -59,22 +76,28 @@ type: "pie",
         data: data,
+        backgroundColor: colors,
     }],
     labels: labels,
     },
-    options: {
-        animation: false,
-        plugins: {
-            tooltip: {
-                callbacks: {
-                    afterBody: (context) => {
-                        return tooltips[context[0].dataIndex].split("\n")
-                    }
-                }
+    options: chartOptions
+  });
+}
 
-            }
-        }
+const writeInfoPanel = (data, labels) => {
+    // Print total number of nodes for each version along with percentage
+    const total = data.reduce((a, b) => a + b, 0)
+    const infoPanel = document.getElementById("app-versions-info")
+    infoPanel.innerHTML = ""
+    for (let i = 0; i < data.length; i++) {
+        const percentage = Math.round((data[i] / total) * 100)
+        const color = stringToColour(labels[i])
+        infoPanel.innerHTML += `
+        <div>
+            <span style="display: inline-block; width: 12px; height: 12px; background-color: ${colors[i]};"></span>
+            <span style="font-weight: bold;">${labels[i]}:</span> ${data[i]} (${percentage}%)
+        </div>
+        `;
     }
-  });
 }
 
-fetchChanges()
+fetchChanges(true)
 setInterval(fetchChanges, INTERVAL)

public/auth.js

@@ -9,3 +9,3 @@ var request = axios.default
 var monitorServerUrl = server.slice(-1) === '/' ? server + 'api' : server + '/api'
-// var monitorServerUrl = `http://139.144.35.86:3000/api`
+// var monitorServerUrl = `http://54.93.204.116:3000/api`
 
@@ -12,0 +12,0 @@ console.log('monitor server url', monitorServerUrl)

No alert changes

Improved metrics

Total package byte prevSize

2354664

0.06%

Number of package files

46

2.22%

Lines of code

5147

0.76%

No dependency changes