phpchartjs pandora_enterprise#9554

pandora_console/include/functions_graph.php

@@ -4815,6 +4815,13 @@ function graph_nodata_image($options)
         $height = $options['height'];
     }
 
+    $width_style = '';
+    if (isset($options['width']) === true
+        && empty($options['width']) === false
+    ) {
+        $width_style = 'width:'.$options['width'].'px';
+    }
+
     if ($options['base64'] === true) {
         $dataImg = file_get_contents(
             $config['homedir'].'/images/image_problem_area_150.png'
@@ -4827,7 +4834,7 @@ function graph_nodata_image($options)
         true,
         [
             'title' => __('No data'),
-            'style' => 'height:'.$height.'px;',
+            'style' => 'height:'.$height.'px;'.$width_style,
         ]
     );
 }

pandora_console/include/functions_visual_map.php

@@ -2371,6 +2371,11 @@ function get_bars_module_data($id_module, $typeGraph='horizontal')
     $values_to_return = [];
     foreach ($values as $val) {
         $data = explode(',', $val);
+
+        if ($data[0] === $val) {
+            continue;
+        }
+
         $values_to_return['labels'][] = io_safe_output($data[0]);
         if ($typeGraph === 'horizontal') {
             $values_to_return['data'][] = [
@@ -2839,73 +2844,22 @@ function get_donut_module_data($id_module)
         $no_data_to_show = true;
     }
 
-    $colors = [];
-    $colors[] = '#aa3333';
-    $colors[] = '#045FB4';
-    $colors[] = '#8181F7';
-    $colors[] = '#F78181';
-    $colors[] = '#D0A9F5';
-    $colors[] = '#BDBDBD';
-    $colors[] = '#6AB277';
-
-    $max_elements = 6;
     $values_to_return = [];
-    $index = 0;
-    $total = 0;
     foreach ($values as $val) {
-        if ($index < $max_elements) {
         $data = explode(',', $val);
 
+        if ($data[0] === $val) {
+            continue;
+        }
+
         if ($no_data_to_show) {
-                $values_to_return[$index]['tag_name'] = $data[0];
+            $values_to_return['labels'][] = $data[0];
         } else {
-                $values_to_return[$index]['tag_name'] = $data[0].': '.$data[1];
+            $values_to_return['labels'][] = $data[0].': '.$data[1];
         }
 
-            $values_to_return[$index]['color'] = $colors[$index];
+        $values_to_return['data'][] = (int) $data[1];
-            $values_to_return[$index]['value'] = (int) $data[1];
-            $total += (int) $data[1];
-            $index++;
-        } else {
-            $data = explode(',', $val);
-            $values_to_return[$index]['tag_name'] = __('Others').': '.$data[1];
-            $values_to_return[$index]['color'] = $colors[$index];
-            $values_to_return[$index]['value'] += (int) $data[1];
-            $total += (int) $data[1];
     }
-    }
-
-    foreach ($values_to_return as $ind => $donut_data) {
-        $values_to_return[$ind]['percent'] = (($donut_data['value'] * 100) / $total);
-    }
-
-    // sort array
-    $new_values_to_return = [];
-    while (!empty($values_to_return)) {
-        $first = true;
-        $max_elem = 0;
-        $max_elem_array = [];
-        $index_to_del = 0;
-        foreach ($values_to_return as $i => $val) {
-            if ($first) {
-                $max_elem = $val['value'];
-                $max_elem_array = $val;
-                $index_to_del = $i;
-                $first = false;
-            } else {
-                if ($val['value'] > $max_elem) {
-                    $max_elem = $val['value'];
-                    $max_elem_array = $val;
-                    $index_to_del = $i;
-                }
-            }
-        }
-
-        $new_values_to_return[] = $max_elem_array;
-        unset($values_to_return[$index_to_del]);
-    }
-
-    $values_to_return = $new_values_to_return;
 
     return $values_to_return;
 }

pandora_console/include/graphs/fgraph.php

@@ -461,6 +461,12 @@ function ring_graph(
     global $config;
 
     if (empty($chart_data) === true) {
+        if (isset($options['ttl']) === true
+            && (int) $options['ttl'] === 2
+        ) {
+            $options['base64'] = true;
+        }
+
         return graph_nodata_image($options);
     }
 

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

@@ -241,11 +241,15 @@ final class BarsGraph extends Item
             }
         }
 
+        $width = (int) $data['width'];
+        $height = (int) $data['height'];
         $moduleData = \get_bars_module_data($moduleId, $typeGraph);
-        if ($moduleData !== false && is_array($moduleData) === true) {
+
+        if (empty($moduleData) === true) {
+            $graph = graph_nodata_image(['width' => $width, 'height' => $height]);
+        } else {
             array_pop($moduleData['labels']);
             array_pop($moduleData['data']);
-        }
 
             $waterMark = [
                 'file' => $config['homedir'].'/images/logo_vertical_water.png',
@@ -316,7 +320,10 @@ final class BarsGraph extends Item
                     $options['axis'] = 'y';
                 }
 
-            $graph = vbar_graph($moduleData['data'], $options);
+                $graph = '<div style="background-color:'.$backGroundColor.'">';
+                $graph .= vbar_graph($moduleData['data'], $options);
+                $graph .= '</div>';
+            }
         }
 
         // Restore connection.

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

@@ -72,7 +72,7 @@ final class DonutGraph extends Item
                     'border_color',
                 ]
             ),
-            '#000000'
+            '#ffffff'
         );
     }
 
@@ -103,13 +103,11 @@ final class DonutGraph extends Item
         // Load side libraries.
         global $config;
         include_once $config['homedir'].'/include/functions_visual_map.php';
-        include_once $config['homedir'].'/include/graphs/functions_d3.php';
         if (is_metaconsole()) {
             \enterprise_include_once('include/functions_metaconsole.php');
         }
 
         // Extract needed properties.
-        $legendBackGroundColor = static::extractLegendBackgroundColor($data);
         // Get the linked agent and module Ids.
         $linkedModule = static::extractLinkedModule($data);
         $agentId = $linkedModule['agentId'];
@@ -158,32 +156,27 @@ final class DonutGraph extends Item
 
         if ($isString === true) {
             $graphData = \get_donut_module_data($moduleId);
-            if (empty($graphData) || $graphData === null) {
-                $aux = [];
-                $aux[0]['tag_name'] = 'No data to show';
-                $aux[0]['color'] = '#aa3333';
-                $aux[0]['value'] = 1;
-                $aux[0]['percent'] = 100;
-                $graphData = $aux;
-            }
 
-            $data['html'] = \d3_donut_graph(
+            if (empty($graphData) === true) {
-                (int) $data['id'],
+                $data['html'] = graph_nodata_image(['width' => $width, 'height' => $height]);
-                $width,
-                $height,
-                $graphData,
-                $legendBackGroundColor
-            );
             } else {
-            $src = 'images/console/signes/wrong_donut_graph.png';
+                array_pop($graphData['labels']);
-            if (\is_metaconsole() === true) {
+                array_pop($graphData['data']);
-                $src = '../../'.$src;
+
+                $options = [
+                    'waterMark' => false,
+                    'legend'    => [
+                        'display'  => true,
+                        'position' => 'right',
+                        'align'    => 'center',
+                    ],
+                    'labels'    => $graphData['labels'],
+                ];
+
+                $data['html'] = \ring_graph($graphData['data'], $options);
             }
-
+        } else {
-            $src = ui_get_full_url($src);
+            $data['html'] = graph_nodata_image(['width' => $width, 'height' => $height]);
-
-            $style = 'width:'.$width.'px; height:'.$height.'px;';
-            $data['html'] = '<img src="'.$src.'" style="'.$style.'">';
         }
 
         // Restore connection.
@@ -255,12 +248,12 @@ final class DonutGraph extends Item
 
             // Resume data color.
             $inputs[] = [
-                'label'     => __('Resume data color'),
+                'label'     => __('Background color'),
                 'arguments' => [
                     'wrapper' => 'div',
                     'name'    => 'legendBackgroundColor',
                     'type'    => 'color',
-                    'value'   => $values['legendBackgroundColor'],
+                    'value'   => (($values['legendBackgroundColor']) ?? '#ffffff'),
                     'return'  => true,
                 ],
             ];

pandora_console/include/rest-api/models/VisualConsole/View.php

@@ -450,7 +450,8 @@ class View extends \HTML
                 $data['metaconsoleId'] = \get_parameter('metaconsoleId');
                 $data['moduleId'] = \get_parameter('moduleId');
                 $data['legendBackgroundColor'] = \get_parameter(
-                    'legendBackgroundColor'
+                    'legendBackgroundColor',
+                    '#ffffff'
                 );
             break;
 

visual_console_client/src/items/DonutGraph.ts

@@ -43,7 +43,7 @@ export function donutGraphPropsDecoder(
       ? data.html
       : decodeBase64(data.encodedHtml),
     legendBackgroundColor: stringIsEmpty(data.legendBackgroundColor)
-      ? "#000000"
+      ? "#ffffff"
       : data.legendBackgroundColor,
     ...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
     ...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
@@ -55,6 +55,7 @@ export default class DonutGraph extends Item<DonutGraphProps> {
     const element = document.createElement("div");
     element.className = "donut-graph";
     element.innerHTML = this.props.html;
+    element.style.backgroundColor = this.props.legendBackgroundColor;
 
     if (
       this.props.agentDisabled === true ||
@@ -66,21 +67,31 @@ export default class DonutGraph extends Item<DonutGraphProps> {
     // 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(() => {
-        if (scripts[i].src.length === 0) eval(scripts[i].innerHTML.trim());
+          try {
+            eval(scripts[i].innerHTML.trim());
+          } catch (ignored) {} // eslint-disable-line no-empty
         }, 0);
       }
+    }
 
     return element;
   }
 
   protected updateDomElement(element: HTMLElement): void {
     element.innerHTML = this.props.html;
+    element.style.backgroundColor = this.props.legendBackgroundColor;
+
+    if (
+      this.props.agentDisabled === true ||
+      this.props.moduleDisabled === true
+    ) {
+      element.style.opacity = "0.2";
+    }
 
     // Hack to execute the JS after the HTML is added to the DOM.
-    const aux = document.createElement("div");
+    const scripts = element.getElementsByTagName("script");
-    aux.innerHTML = this.props.html;
-    const scripts = aux.getElementsByTagName("script");
     for (let i = 0; i < scripts.length; i++) {
       if (scripts[i].src.length === 0) {
         eval(scripts[i].innerHTML.trim());