fixed visual error sql graph pandora_enterprise#8970

pandora_console/include/graphs/flot/pandora.flot.js

@@ -15,6 +15,8 @@ function pandoraFlotPie(
   colors,
   hide_labels
 ) {
+  height = parseInt(height);
+
   labels = labels.split(separator);
   var data = values.split(separator);
 
@@ -79,11 +81,22 @@ function pandoraFlotPie(
       break;
   }
 
+  var discount = 20;
+  if (water_mark) {
+    discount = 40;
+  }
+
   var plot = $.plot($("#" + graph_id), data, conf_pie);
 
   var legends = $("#" + graph_id + " .legendLabel");
   legends.css("font-size", font_size + "pt");
 
+  var tableDiv = $("#" + graph_id + " .legend > div");
+  tableDiv.css("max-height", height - discount + "px");
+
+  var tableLegend = $("#" + graph_id + " .legend table");
+  tableLegend.css("max-height", height - discount + "px");
+
   // Events
   $("#" + graph_id).bind("plothover", pieHover);
   //$("#" + graph_id).bind("plotclick", pieClick);
@@ -443,14 +456,15 @@ function pandoraFlotHBars(
         "pt !important;" +
         "margin: 0; max-width: 200px;" +
         "margin-right:5px;" +
-        "margin-left: -1.5em" +
-        "text-align: right" +
+        "margin-left: -1.5em;" +
+        "text-align: right;" +
         "text-overflow: ellipsis;" +
         "overflow: hidden;" +
         "white-space: pre;";
 
       if (label.indexOf("<br>") != -1) {
-        div_attributes += "min-height: 2.5em;";
+        var label_array = label.split("<br>");
+        label = label_array[0] + label_array[1];
       }
 
       div_attributes += '" title="' + label + '" style="overflow: hidden;"';

pandora_console/include/styles/pandora.css

@@ -6048,9 +6048,9 @@ table.table_modal_alternate tr td:first-child {
   font-family: "lato" !important;
 }
 
-.flot-text {
-  width: 100%;
-  font-family: inherit !important;
+.flot-text .flot-x-axis div {
+  white-space: normal;
+  word-break: break-all;
 }
 
 /*Font header feedback*/
@@ -6226,6 +6226,9 @@ div.graph td.legendLabel {
 div.graph div.legend div,
 div.graph div.legend table {
   top: 25px !important;
+  display: block;
+  overflow: auto;
+  text-align: left;
 }
 
 .rotate_text_module {