Fix explorer dashboard (#590)

* Redesign the metric polling and aggregation on the dashboard

* Fix aggregation 

* Improve UI

* Stream metrics collection

.tool-versions

@@ -1,3 +1,3 @@
 elixir 1.12.3
-erlang 24.2
+erlang 24.3.4.5
 nodejs 16.5.0

assets/js/app.js

@@ -3,7 +3,12 @@
 // its own CSS file.
 import {} from "../css/app.scss";
 import {} from "./ui";
-import * as metric_config_obj from "./metric_config.js";
+import {
+  initializeNbTransactionGraph,
+  updateNbTransactionGraph,
+  initializeValidationDurationGraph,
+  updateValidationDurationGraph
+} from "./metric_config.js";
 import { createWorldmap, updateWorldmap } from "./worldmap";
 
 // webpack automatically bundles all modules in your
@@ -83,28 +88,15 @@ Hooks.Logs = {
 //metric dashboard hook /metrics/dashboard
 Hooks.network_charts = {
   mounted() {
-    var network_metric_obj = metric_config_obj.create_network_live_visuals();
-    this.handleEvent("network_points", ({ points }) => {
-      points = metric_config_obj.structure_metric_points(points);
-
-      network_metric_obj = metric_config_obj.update_network_live_visuals(
-        network_metric_obj,
-        points
-      );
-    });
-  },
-};
-
-Hooks.explorer_charts = {
-  mounted() {
-    var explorer_metric_obj = metric_config_obj.create_explorer_live_visuals();
-
-    this.handleEvent("explorer_stats_points", ({ points }) => {
-      points = metric_config_obj.structure_metric_points(points);
-      explorer_metric_obj = metric_config_obj.update_explorer_live_visuals(
-        explorer_metric_obj,
-        points
-      );
+    const nbTransactionEl = this.el.querySelector("#nb_transactions")
+    const validationDurationEl = this.el.querySelector("#validation_duration")
+
+    const txGraph = initializeNbTransactionGraph(nbTransactionEl);
+    const validationDurationGraph = initializeValidationDurationGraph(validationDurationEl);
+
+    this.handleEvent("network_updates", ({ nb_transactions, validation_duration }) => {
+      updateNbTransactionGraph(txGraph, nb_transactions);
+      updateValidationDurationGraph(validationDurationGraph, validation_duration);
     });
   },
 };