Added basic chart 4

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

@@ -232,14 +232,15 @@ final class BasicChart extends Item
         $imgbase64 .= \grafico_modulo_sparse($params);
 
         $data['html'] = $imgbase64;
+
+        $data['value'] = \modules_get_last_value($moduleId);
+        $data['status'] = \modules_get_color_status(modules_get_agentmodule_last_status($moduleId));
+
         // Restore connection.
         if ($nodeConnected === true) {
             \metaconsole_restore_db();
         }
 
-        $data['value'] = \modules_get_last_value($moduleId);
-        $data['status'] = \modules_get_color_status(modules_get_agentmodule_last_status($moduleId));
-
         return $data;
     }
 

pandora_console/include/styles/visual_maps.css

@@ -427,16 +427,16 @@ input.odometer_min_white[disabled] {
 }
 
 input.basic_chart_min {
-  background: url(../../images/odometer.png) no-repeat center;
+  background: url(../../images/basic_chart.png) no-repeat center;
 }
 input.basic_chart_min[disabled] {
-  background: url(../../images/odometer.disabled.png) no-repeat center;
+  background: url(../../images/basic_chart.disabled.png) no-repeat center;
 }
 input.basic_chart_min_white {
-  background: url(../../images/odometer.disabled.png) no-repeat center;
+  background: url(../../images/basic_chart.disabled.png) no-repeat center;
 }
 input.basic_chart_min_white[disabled] {
-  background: url(../../images/odometer.png) no-repeat center;
+  background: url(../../images/basic_chart.png) no-repeat center;
 }
 
 div#cont {

pandora_console/include/visual-console-client/vc.main.css

@@ -557,6 +557,34 @@ div.basic-chart {
   justify-content: center;
 }
 
+.basic-chart-header {
+  height: 40%;
+  width: 100%;
+  display: flex;
+}
+
+.basic-chart-header-name {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 80%;
+  display: flex;
+  align-items: center;
+  font-size: 2.5vmin;
+  margin-left: 3%;
+}
+
+.basic-chart-header-value {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5vmin;
+}
+
 div.module-graph .gauge_d3_class {
   flex: 1 1 100px;
   float: none !important;

visual_console_client/src/items/BasicChart.ts

@@ -59,37 +59,20 @@ export function basicChartPropsDecoder(
 export default class BasicChart extends Item<BasicChartProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
-    const header = document.createElement("div");
 
-    header.style.height = "40%";
-    header.style.width = "100%";
-    header.style.display = "flex";
+    const header = document.createElement("div");
+    header.className = "basic-chart-header";
 
     const moduleName = document.createElement("h2");
+    moduleName.className = "basic-chart-header-name";
     moduleName.textContent = this.props.moduleName;
-    moduleName.style.margin = "0";
-    moduleName.style.padding = "0";
-    moduleName.style.height = "100%";
-    moduleName.style.width = "80%";
-    moduleName.style.display = "flex";
-    moduleName.style.alignItems = "center";
-    moduleName.style.fontSize = `2.5vmin`;
-    moduleName.style.marginLeft = "3%";
     moduleName.style.color = `${this.props.moduleNameColor}`;
     header.appendChild(moduleName);
 
     const moduleValue = document.createElement("h2");
+    moduleValue.className = "basic-chart-header-value";
     moduleValue.textContent = `${this.props.value}`;
-    moduleValue.style.margin = "0";
-    moduleValue.style.padding = "0";
-    moduleValue.style.height = "100%";
-    moduleValue.style.width = "20%";
-    moduleValue.style.display = "flex";
-    moduleValue.style.alignItems = "center";
-    moduleValue.style.justifyContent = "center";
-    moduleValue.style.fontSize = `2.5vmin`;
     moduleValue.style.color = this.props.status;
-    moduleValue.style.textDecoration = "none !important";
     header.appendChild(moduleValue);
 
     element.innerHTML = this.props.html;
@@ -133,33 +116,17 @@ export default class BasicChart extends Item<BasicChartProps> {
 
   protected updateDomElement(element: HTMLElement): void {
     const header = document.createElement("div");
-    header.style.height = "40%";
-    header.style.width = "100%";
-    header.style.display = "flex";
+    header.className = "basic-chart-header";
 
     const moduleName = document.createElement("h2");
+    moduleName.className = "basic-chart-header-name";
     moduleName.textContent = this.props.moduleName;
-    moduleName.style.margin = "0";
-    moduleName.style.padding = "0";
-    moduleName.style.height = "100%";
-    moduleName.style.width = "80%";
-    moduleName.style.display = "flex";
-    moduleName.style.alignItems = "center";
-    moduleName.style.fontSize = `2.5vmin`;
-    moduleName.style.marginLeft = "3%";
     moduleName.style.color = `${this.props.moduleNameColor}`;
     header.appendChild(moduleName);
 
     const moduleValue = document.createElement("h2");
+    moduleValue.className = "basic-chart-header-value";
     moduleValue.textContent = `${this.props.value}`;
-    moduleValue.style.margin = "0";
-    moduleValue.style.padding = "0";
-    moduleValue.style.height = "100%";
-    moduleValue.style.width = "20%";
-    moduleValue.style.display = "flex";
-    moduleValue.style.alignItems = "center";
-    moduleValue.style.justifyContent = "center";
-    moduleValue.style.fontSize = `2.5vmin`;
     moduleValue.style.color = this.props.status;
     header.appendChild(moduleValue);
 

visual_console_client/src/main.css

@@ -557,6 +557,34 @@ div.basic-chart {
   justify-content: center;
 }
 
+.basic-chart-header {
+  height: 40%;
+  width: 100%;
+  display: flex;
+}
+
+.basic-chart-header-name {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 80%;
+  display: flex;
+  align-items: center;
+  font-size: 2.5vmin;
+  margin-left: 3%;
+}
+
+.basic-chart-header-value {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5vmin;
+}
+
 div.module-graph .gauge_d3_class {
   flex: 1 1 100px;
   float: none !important;