From e10b072df890b4ed404d995a0fde03eb760308cc Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Tue, 4 Apr 2023 14:30:43 +0200
Subject: [PATCH] 10755-Horizontal graph legend

---
 pandora_console/include/functions.php             | 10 +++++-----
 pandora_console/include/graphs/functions_flot.php | 11 ++++++-----
 pandora_console/include/styles/dashboards.css     |  4 ++++
 pandora_console/include/styles/pandora.css        | 10 ++++++++++
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/pandora_console/include/functions.php b/pandora_console/include/functions.php
index 3de5a2c36c..183c2ab6ae 100644
--- a/pandora_console/include/functions.php
+++ b/pandora_console/include/functions.php
@@ -4050,7 +4050,7 @@ function series_type_graph_array($data, $show_elements_graph)
                     $name_legend .= ' * '.$value['weight'].') ';
                 }
 
-                $data_return['legend'][$key] = $name_legend;
+                $data_return['legend'][$key] = '<span style="font-size: 9pt; font-weight: bolder;">'.$name_legend.'</span>';
                 if ((int) $value['min'] === PHP_INT_MAX) {
                     $value['min'] = 0;
                 }
@@ -4059,28 +4059,28 @@ function series_type_graph_array($data, $show_elements_graph)
                     $value['max'] = 0;
                 }
 
-                $data_return['legend'][$key] .= __('Min:').remove_right_zeros(
+                $data_return['legend'][$key] .= '<span style="font-size: 9px;">'.__('Min').'</span><span style="font-weight: 600;">'.remove_right_zeros(
                     number_format(
                         $value['min'],
                         $config['graph_precision'],
                         $config['csv_decimal_separator'],
                         $config['csv_decimal_separator'] == ',' ? '.' : ','
                     )
-                ).' '.__('Max:').remove_right_zeros(
+                ).'</span>&nbsp;<span style="font-size: 9px;">'.__('Max').'</span><span style="font-weight: 600;">'.remove_right_zeros(
                     number_format(
                         $value['max'],
                         $config['graph_precision'],
                         $config['csv_decimal_separator'],
                         $config['csv_decimal_separator'] == ',' ? '.' : ','
                     )
-                ).' '._('Avg:').remove_right_zeros(
+                ).'</span>&nbsp;<span style="font-size: 9px;">'._('Avg').'</span><span style="font-weight: 600;">'.remove_right_zeros(
                     number_format(
                         $value['avg'],
                         $config['graph_precision'],
                         $config['csv_decimal_separator'],
                         $config['csv_decimal_separator'] == ',' ? '.' : ','
                     )
-                ).' '.$str;
+                ).'</span>&nbsp;'.$str;
 
                 if ($show_elements_graph['compare'] == 'overlapped'
                     && $key == 'sum2'
diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php
index 9ea3abda95..1ee377f290 100644
--- a/pandora_console/include/graphs/functions_flot.php
+++ b/pandora_console/include/graphs/functions_flot.php
@@ -272,6 +272,11 @@ function flot_area_graph(
 				style='	width: ".$params['width'].'px;
 				height: '.$params['height']."px;'></div>";
 
+    $legend_top = 10;
+    if (empty($params['show_legend']) === false) {
+        $legend_top = (int) $params['height'];
+    }
+
     if ($params['menu']) {
         $params['height'] = 100;
     } else {
@@ -280,13 +285,9 @@ function flot_area_graph(
 
     if ((bool) $params['vconsole'] === false) {
         $return .= '<div id="overview_'.$graph_id.'" class="overview_graph" style="margin:0px; margin-top:30px; margin-bottom:50px; width:'.$params['width'].'px; height: 200px;"></div>';
-        $legend_top = 10;
-        if (empty($params['show_legend']) === false) {
-            $legend_top = (20 + (count($legend) * 18));
-        }
 
         if ($water_mark != '' && (bool) $params['dashboard'] === false) {
-            $return .= '<div id="watermark_'.$graph_id.'" style="position:absolute; top: '.$legend_top.'px; left: calc(100% - 100px);">';
+            $return .= '<div id="watermark_'.$graph_id.'" style="position:absolute; bottom: '.$legend_top.'px; left: calc(100% - 100px);">';
             $return .= '<img id="watermark_image_'.$graph_id.'" src="'.$water_mark['url'].'">';
             $return .= '</div>';
         }
diff --git a/pandora_console/include/styles/dashboards.css b/pandora_console/include/styles/dashboards.css
index 1a276fcdfd..2c46dc2d33 100644
--- a/pandora_console/include/styles/dashboards.css
+++ b/pandora_console/include/styles/dashboards.css
@@ -273,6 +273,10 @@ li#div-textarea label {
   width: 100%;
 }
 
+.container-center:has(div.parent_graph) {
+  display: initial;
+}
+
 .widget-groups-status {
   display: flex;
   flex-direction: row;
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 96d2d09780..426542987b 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -11895,3 +11895,13 @@ td[id^="table_info_box"] a {
 .info_table.events > tbody > tr > td {
   border-bottom: 1px solid #dedede !important;
 }
+
+div.parent_graph > p.legend_background > table > tbody {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+div.parent_graph > p.legend_background > table > tbody > tr {
+  margin-right: 20px;
+}