[Feature] Metric Dashboard

assets/js/app.js

@@ -3,6 +3,7 @@
 // its own CSS file.
 import { } from "../css/app.scss"
 import { } from './ui'
+import * as metric_config_obj from  './metric_config.js';
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -72,7 +73,67 @@ Hooks.Logs = {
   }
 }
 
+Hooks.node_charts = {
+  mounted() {
+      var node_metric_obj = metric_config_obj.create_node_live_visuals();
+
+    this.handleEvent("node_points", ({
+      points
+    }) => {
+      console.log(points);
+      console.log("------------------");
+      points = metric_config_obj.structure_metric_points(points)
+      console.log("=================");
+      console.log(points);
+      node_metric_obj = metric_config_obj.update_node_live_visuals(node_metric_obj , points);
+    });
+  }
+}
+
+Hooks.network_charts = {
+  mounted() {
+    var network_metric_obj = metric_config_obj.create_network_live_visuals();
+    this.handleEvent("network_points", ({
+      points
+    }) => {
+      console.log("---------------")
+      console.log(points);
+      console.log("------------------")
+      points = metric_config_obj.structure_metric_points(points)
+      console.log("=================")
+      console.log(points);
+      console.log("=================")
+      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
+      }) => {
+        console.log(points);
+        console.log("------------------")
+        points = metric_config_obj.structure_metric_points(points)
+        console.log("=================")
+        console.log(points);
+        console.log("=================")
+        explorer_metric_obj = metric_config_obj.update_explorer_live_visuals(explorer_metric_obj , points);    
+      });
+  }
+}
+
+
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+
 let liveSocket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
   params: { _csrf_token: csrfToken },