Replace the node charts by 2 other charts

- boxplot of avg duration - dispersion of tx count per node of the last hour
archethic-foundation · Dec 21, 2023 · 1b98f39 · 1b98f39
1 parent fefd048
commit 1b98f39
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 164 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -3,14 +3,14 @@
 // its own CSS file.
 import { } from "./ui";
 import {
+  initBoxPlotTransactionsAvgDurationChart,
   initNetworkTransactionsCountChart,
   initNetworkTransactionsAvgDurationChart,
   initNodeTransactionsCountChart,
-  initNodeTransactionsAvgDurationChart,
+  updateBoxPlotTransactionsAvgDurationChart,
   updateNetworkTransactionsCountChart,
   updateNetworkTransactionsAvgDurationChart,
-  updateNodeTransactionsCountChart,
-  updateNodeTransactionsAvgDurationChart
+  updateNodeTransactionsCountChart
 } from "./metric_config.js";
 import { createWorldmap, updateWorldmap } from "./worldmap";
 
@@ -116,11 +116,12 @@ Hooks.node_transactions_count_chart = {
   }
 };
 
-Hooks.node_transactions_avg_duration_chart = {
+
+Hooks.boxplot_transactions_avg_duration = {
   mounted() {
-    const chart = initNodeTransactionsAvgDurationChart(this.el.querySelector(".chart"));
-    this.handleEvent("node_transactions_avg_duration", (stats) => {
-      updateNodeTransactionsAvgDurationChart(chart, stats);
+    const chart = initBoxPlotTransactionsAvgDurationChart(this.el.querySelector(".chart"));
+    this.handleEvent("boxplot_transactions_avg_duration", (stats) => {
+      updateBoxPlotTransactionsAvgDurationChart(chart, stats);
     });
   }
 };

diff --git a/assets/js/metric_config.js b/assets/js/metric_config.js
@@ -1,6 +1,6 @@
 import * as echarts from "echarts";
 
-export function initNetworkTransactionsCountChart(el) {
+export function initBoxPlotTransactionsAvgDurationChart(el) {
   let chart = echarts.init(el);
   chart.setOption({
     grid: {
@@ -11,7 +11,7 @@ export function initNetworkTransactionsCountChart(el) {
     },
     title: {
       left: "center",
-      text: "Transactions count",
+      text: "Average validation time",
       textStyle: {
         fontSize: 14,
       },
@@ -25,25 +25,23 @@ export function initNetworkTransactionsCountChart(el) {
     yAxis: {
       type: "value",
       axisLabel: {
+        formatter: '{value} ms',
         textStyle: {
           fontSize: 14,
         },
       },
     },
     series: [
       {
-        type: "line",
-        areaStyle: {},
-        data: [],
-        smooth: 0.2,
+        type: 'boxplot',
         tooltip: {
           valueFormatter: value => {
-            const plural = value > 1 ? "s" : ""
-            return value + ' transaction' + plural
+            if (value == 0) return "-"
+
+            return Number.parseFloat(value).toFixed(1) + ' ms'
           }
         },
-        showSymbol: false
-      },
+      }
     ],
   });
 
@@ -54,13 +52,11 @@ export function initNetworkTransactionsCountChart(el) {
   return chart;
 }
 
-export function initNetworkTransactionsAvgDurationChart(el) {
+
+
+export function initNetworkTransactionsCountChart(el) {
   let chart = echarts.init(el);
   chart.setOption({
-    legend: {
-      bottom: 0,
-      type: 'scroll',
-    },
     grid: {
       left: "10%",
       right: "5%",
@@ -69,7 +65,7 @@ export function initNetworkTransactionsAvgDurationChart(el) {
     },
     title: {
       left: "center",
-      text: "Average validation time",
+      text: "Transactions count",
       textStyle: {
         fontSize: 14,
       },
@@ -83,26 +79,26 @@ export function initNetworkTransactionsAvgDurationChart(el) {
     yAxis: {
       type: "value",
       axisLabel: {
-        formatter: '{value} ms',
         textStyle: {
           fontSize: 14,
         },
       },
     },
-    series: [{
-      type: "line",
-      areaStyle: {},
-      data: [],
-      smooth: 0.2,
-      showSymbol: false,
-      tooltip: {
-        valueFormatter: value => {
-          if (value == 0) return "-"
-
-          return Number.parseFloat(value).toFixed(1) + ' ms'
-        }
+    series: [
+      {
+        type: "line",
+        areaStyle: {},
+        data: [],
+        smooth: 0.2,
+        tooltip: {
+          valueFormatter: value => {
+            const plural = value > 1 ? "s" : ""
+            return value + ' transaction' + plural
+          }
+        },
+        showSymbol: false
       },
-    },],
+    ],
   });
 
   window.addEventListener("resize", function () {
@@ -112,7 +108,7 @@ export function initNetworkTransactionsAvgDurationChart(el) {
   return chart;
 }
 
-export function initNodeTransactionsCountChart(el) {
+export function initNetworkTransactionsAvgDurationChart(el) {
   let chart = echarts.init(el);
   chart.setOption({
     legend: {
@@ -127,7 +123,7 @@ export function initNodeTransactionsCountChart(el) {
     },
     title: {
       left: "center",
-      text: "Transactions count by node",
+      text: "Average validation time",
       textStyle: {
         fontSize: 14,
       },
@@ -141,12 +137,26 @@ export function initNodeTransactionsCountChart(el) {
     yAxis: {
       type: "value",
       axisLabel: {
+        formatter: '{value} ms',
         textStyle: {
           fontSize: 14,
         },
       },
     },
-    series: [],
+    series: [{
+      type: "line",
+      areaStyle: {},
+      data: [],
+      smooth: 0.2,
+      showSymbol: false,
+      tooltip: {
+        valueFormatter: value => {
+          if (value == 0) return "-"
+
+          return Number.parseFloat(value).toFixed(1) + ' ms'
+        }
+      },
+    },],
   });
 
   window.addEventListener("resize", function () {
@@ -155,7 +165,8 @@ export function initNodeTransactionsCountChart(el) {
 
   return chart;
 }
-export function initNodeTransactionsAvgDurationChart(el) {
+
+export function initNodeTransactionsCountChart(el) {
   let chart = echarts.init(el);
   chart.setOption({
     legend: {
@@ -170,7 +181,7 @@ export function initNodeTransactionsAvgDurationChart(el) {
     },
     title: {
       left: "center",
-      text: "Average validation time by node",
+      text: "Transactions count by node (last 60min)",
       textStyle: {
         fontSize: 14,
       },
@@ -179,18 +190,26 @@ export function initNodeTransactionsAvgDurationChart(el) {
       trigger: 'axis'
     },
     xAxis: {
+      show: false,
       type: "category"
     },
     yAxis: {
       type: "value",
       axisLabel: {
-        formatter: '{value} ms',
         textStyle: {
           fontSize: 14,
         },
       },
     },
-    series: [],
+    series: [{
+      type: "bar",
+      tooltip: {
+        valueFormatter: value => {
+          const plural = value > 1 ? "s" : ""
+          return value + ' transaction' + plural
+        }
+      }
+    }]
   });
 
   window.addEventListener("resize", function () {
@@ -200,11 +219,24 @@ export function initNodeTransactionsAvgDurationChart(el) {
   return chart;
 }
 
+export function updateBoxPlotTransactionsAvgDurationChart(chart, stats) {
+  chart.setOption({
+    xAxis: {
+      data: Object.keys(stats)
+        .map(timestampToString)
+    },
+    series: [{
+      data: Object.values(stats)
+        .map((durationsBucket) => durationsBucket.map((duration) => duration / 1000000))
+    }],
+  });
+}
+
 export function updateNetworkTransactionsCountChart(chart, stats) {
   chart.setOption({
     xAxis: {
       data: Object.keys(stats)
-        .map((timestamp) => timestampToString(timestamp))
+        .map(timestampToString)
     },
     series: [{
       data: Object.values(stats)
@@ -216,7 +248,7 @@ export function updateNetworkTransactionsAvgDurationChart(chart, stats) {
   chart.setOption({
     xAxis: {
       data: Object.keys(stats)
-        .map((timestamp) => timestampToString(timestamp))
+        .map(timestampToString)
     },
     series: [{
       data: Object.values(stats)
@@ -227,62 +259,17 @@ export function updateNetworkTransactionsAvgDurationChart(chart, stats) {
 
 export function updateNodeTransactionsCountChart(chart, stats) {
   chart.setOption({
-    series: Object.entries(stats)
-      .map(([node_public_key, data]) => {
-        let seriesData = [];
-        for (let i = 0; i < data.timestamps.length; i++) {
-          seriesData.push([
-            timestampToString(data.timestamps[i]),
-            data.counts[i]
-          ]);
-        }
-
-        return {
-          type: "line",
-          name: format_public_key(node_public_key),
-          smooth: 0.2,
-          tooltip: {
-            valueFormatter: value => {
-              const plural = value > 1 ? "s" : ""
-              return value + ' transaction' + plural
-            }
-          },
-          showSymbol: false,
-          data: seriesData
-        };
-      })
+    xAxis: {
+      data: Object.keys(stats)
+        .map(format_public_key)
+    },
+    series: [{
+      data: Object.values(stats)
+    }],
   });
 }
 
-export function updateNodeTransactionsAvgDurationChart(chart, stats) {
-  chart.setOption({
-    series: Object.entries(stats)
-      .map(([node_public_key, data]) => {
-        let seriesData = [];
-        for (let i = 0; i < data.timestamps.length; i++) {
-          seriesData.push([
-            timestampToString(data.timestamps[i]),
-            data.average_durations[i] / 1_000_000
-          ]);
-        }
-
-        return {
-          type: "line",
-          name: format_public_key(node_public_key),
-          smooth: 0.2,
-          tooltip: {
-            valueFormatter: value => {
-              if (value == 0) return "-"
 
-              return Number.parseFloat(value).toFixed(1) + ' ms'
-            }
-          },
-          showSymbol: false,
-          data: seriesData
-        };
-      })
-  });
-}
 
 function timestampToString(timestamp) {
   return dateToString(new Date(timestamp * 1000));