reduce title of longer module name odometer VC

pandora_console/include/javascript/pandora_visual_console.js

@@ -1825,13 +1825,13 @@ function getTimeZoneVisualConsole(baseUrl, vcId, zone, callback) {
  * Draw a line between two elements in a div
  * 
  * @param line Line to draw. JavaScript object with the following properties:
-	- x1 X coordinate of the first point. If not set, it will get the coord from node_begin position
-	- y1 Y coordinate of the first point. If not set, it will get the coord from node_begin position
-	- x2 X coordinate of the second point. If not set, it will get the coord from node_end position
-	- y2 Y coordinate of the second point. If not set, it will get the coord from node_end position
-	- color Color of the line to draw
-	- node_begin Id of the beginning node
-	- node_end Id of the finishing node
+  - x1 X coordinate of the first point. If not set, it will get the coord from node_begin position
+  - y1 Y coordinate of the first point. If not set, it will get the coord from node_begin position
+  - x2 X coordinate of the second point. If not set, it will get the coord from node_end position
+  - y2 Y coordinate of the second point. If not set, it will get the coord from node_end position
+  - color Color of the line to draw
+  - node_begin Id of the beginning node
+  - node_end Id of the finishing node
  * @param id_div Div to draw the lines in
  * @param editor Boolean variable to set other css selector in editor (when true).
  */

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

@@ -53,16 +53,13 @@ final class Odometer extends Item
         $return['thresholds'] = $this->extractThresholds($data);
         $return['titleColor'] = $this->extractTitleColor($data);
         $return['title'] = $this->extractTitle($data);
-        $module_text = $return['moduleName'];
 
-        $string_length = strlen($return['moduleName']);
-        if ($string_length >= 25) {
-            $module_text = substr($return['moduleName'], 0, 9);
-            $module_text .= ' ... ';
-            $module_text .= substr($return['moduleName'], -9);
+        $return['titleModule'] = $return['moduleName'];
+
+        if (strlen($return['moduleName']) >= 25) {
+            $return['moduleName'] = substr($return['moduleName'], 0, 9).' ... '.substr($return['moduleName'], -9);
         }
 
-        $return['moduleName'] = $module_text;
         $return['minMaxValue'] = $this->extractMinMaxValue($data);
 
         return $return;

visual_console_client/package.json

@@ -39,6 +39,7 @@
     "file-loader": "^3.0.1",
     "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.5.0",
+    "npm-watch": "^0.11.0",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.19.1",
     "ts-jest": "^24.3.0",

visual_console_client/src/items/Odometer.ts

@@ -8,6 +8,7 @@ export type OdometerProps = {
   value: number;
   status: string;
   title: string | null;
+  titleModule: string;
   titleColor: string;
   odometerType: string;
   thresholds: string | any;
@@ -32,6 +33,7 @@ export function odometerPropsDecoder(data: AnyObject): OdometerProps | never {
     status: stringIsEmpty(data.status) ? "#B2B2B2" : data.status,
     titleColor: stringIsEmpty(data.titleColor) ? "#3f3f3f" : data.titleColor,
     title: stringIsEmpty(data.title) ? "" : data.title,
+    titleModule: stringIsEmpty(data.titleModule) ? "" : data.titleModule,
     thresholds: stringIsEmpty(data.thresholds) ? "" : data.thresholds,
     minMaxValue: stringIsEmpty(data.minMaxValue) ? "" : data.minMaxValue,
     odometerType: stringIsEmpty(data.odometerType)
@@ -208,10 +210,13 @@ export default class Odometer extends Item<OdometerProps> {
 
     const h2 = document.createElement("h2");
     if (this.props.title == "") {
-      h2.textContent = this.props.moduleName;
+      h2.textContent = this.truncateTitle(this.props.moduleName);
     } else {
       h2.textContent = this.truncateTitle(this.props.title);
     }
+    h2.title = this.props.titleModule;
+    h2.setAttribute("title", this.props.titleModule);
+
     h2.style.fontSize = `${anchoB * 0.06}px`;
     h2.style.color = `${this.props.titleColor}`;
     h2.style.lineHeight = "0";