Module graph paint direct

pandora_console/include/rest-api/models/VisualConsole/Items/ModuleGraph.php

@@ -356,6 +356,8 @@ final class ModuleGraph extends Item
                 throw new \InvalidArgumentException('missing module Id');
             }
 
+            $imageOnly = false;
+
             $params = [
                 'agent_module_id'    => $moduleId,
                 'period'             => $period,
@@ -376,7 +378,10 @@ final class ModuleGraph extends Item
                 'show_title'         => false,
             ];
 
-            $imgbase64 = 'data:image/jpg;base64,';
+            if ($imageOnly !== false) {
+                $imgbase64 = 'data:image/jpg;base64,';
+            }
+
             $imgbase64 .= \grafico_modulo_sparse($params);
         }
 

visual_console_client/src/items/ModuleGraph.ts

@@ -88,21 +88,71 @@ export function moduleGraphPropsDecoder(
 export default class ModuleGraph extends Item<ModuleGraphProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
-    element.className = "module-graph";
-    element.style.backgroundImage = `url(${this.props.html})`;
-    element.style.backgroundRepeat = "no-repeat";
-    element.style.backgroundSize = `${this.props.width}px ${
-      this.props.height
-    }px`;
+    //element.className = "module-graph";
+    //element.style.backgroundImage = `url(${this.props.html})`;
+    //element.style.backgroundRepeat = "no-repeat";
+    //element.style.backgroundSize = `${this.props.width}px ${
+    //  this.props.height
+    //}px`;
+
+    element.innerHTML = this.props.html;
+
+    // Remove the overview graph.
+    const legendP = element.getElementsByTagName("p");
+    for (let i = 0; i < legendP.length; i++) {
+      legendP[i].style.margin = "0px";
+    }
+
+    // Remove the overview graph.
+    const overviewGraphs = element.getElementsByClassName("overview_graph");
+    for (let i = 0; i < overviewGraphs.length; i++) {
+      overviewGraphs[i].remove();
+    }
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const scripts = element.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        setTimeout(() => {
+          try {
+            eval(scripts[i].innerHTML.trim());
+          } catch (ignored) {} // eslint-disable-line no-empty
+        }, 0);
+      }
+    }
+
+    // element.innerHTML = this.props.html;
 
     return element;
   }
 
   protected updateDomElement(element: HTMLElement): void {
-    element.style.backgroundImage = `url(${this.props.html})`;
-    element.style.backgroundRepeat = "no-repeat";
-    element.style.backgroundSize = `${this.props.width}px ${
-      this.props.height
-    }px`;
+    //element.style.backgroundImage = `url(${this.props.html})`;
+    //element.style.backgroundRepeat = "no-repeat";
+    //element.style.backgroundSize = `${this.props.width}px ${
+    //  this.props.height
+    //}px`;
+
+    element.innerHTML = this.props.html;
+
+    // Remove the overview graph.
+    const legendP = element.getElementsByTagName("p");
+    for (let i = 0; i < legendP.length; i++) {
+      legendP[i].style.margin = "0px";
+    }
+
+    // Remove the overview graph.
+    const overviewGraphs = element.getElementsByClassName("overview_graph");
+    for (let i = 0; i < overviewGraphs.length; i++) {
+      overviewGraphs[i].remove();
+    }
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const scripts = element.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        eval(scripts[i].innerHTML.trim());
+      }
+    }
   }
 }