Merge branch 'ent-7264-custom-graphs-en-black-theme' into 'develop'

set black theme custom graph colors

See merge request artica/pandorafms!3999

pandora_console/include/functions_graph.php

@@ -1530,6 +1530,11 @@ function graphic_combined_module(
     }
 
     $long_index = '';
+    if ($config['style'] === 'pandora_black') {
+        $background_color = '#222';
+        $params['legend_color'] = '#fff';
+    }
+
     switch ($params_combined['stacked']) {
         default:
         case CUSTOM_GRAPH_STACKED_LINE:

pandora_console/include/graphs/fgraph.php

@@ -218,6 +218,9 @@ function vbar_graph(
 
     if (isset($options['x']['font']['color']) === false) {
         $options['x']['font']['color'] = '#545454';
+        if ($config['style'] === 'pandora_black') {
+            $options['x']['font']['color'] = '#fff';
+        }
     }
 
     // Show ticks.
@@ -295,6 +298,10 @@ function vbar_graph(
 
     if (isset($options['y']['font']['color']) === false) {
         $options['y']['font']['color'] = '#545454';
+
+        if ($config['style'] === 'pandora_black') {
+            $options['y']['font']['color'] = '#fff';
+        }
     }
 
     // Show ticks.
@@ -692,6 +699,7 @@ function hbar_graph(
     $val_max=null,
     $base64=false
 ) {
+    global $config;
     if ($water_mark !== false) {
         setup_watermark($water_mark, $water_mark_file, $water_mark_url);
     }
@@ -717,6 +725,10 @@ function hbar_graph(
         return generator_chart_to_pdf('hbar', $params);
     }
 
+    if ($config['style'] === 'pandora_black') {
+        $tick_color = '#fff';
+    }
+
     return flot_hcolumn_chart(
         $chart_data,
         $width,

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

@@ -114,7 +114,7 @@ function pandoraFlotPie(
 
   // Reset styles
   function resetInteractivity() {
-    legends.css("color", "#3F3F3D");
+    legends.css("color", "#fff");
   }
 
   if (water_mark) {
@@ -241,6 +241,10 @@ function pandoraFlotPieCustom(
   } else if (background_color == "black") {
     $(".legend>table").css("background-color", "black");
     $(".legend>table").css("color", "#aaa");
+  } else if (background_color == "black_theme") {
+    $(".legend>table").css("background-color", "#222");
+    $(".legend>div").css("background-color", "#222");
+    $(".legend>table").css("color", "#fff !important");
   }
 
   $(".legend").hover(function() {
@@ -258,7 +262,11 @@ function pandoraFlotPieCustom(
     if (!obj) return;
 
     var index = obj.seriesIndex;
-    legends.css("color", "#3F3F3D");
+    if (background_color == "black_theme") {
+      legends.css("color", "#fff");
+    } else {
+      legends.css("color", "#3F3F3D");
+    }
     legends.eq(index).css("color", "");
   }
 
@@ -285,6 +293,7 @@ function pandoraFlotPieCustom(
   function resetInteractivity() {
     legends.each(function() {
       // fix the widths so they don't jump around
+      console.log($(this));
       $(this).css("color", "#3F3F3D");
     });
   }
@@ -349,6 +358,11 @@ function pandoraFlotHBars(
     labels_total.push([i, labels[i]]);
   }
 
+  var ycolor = "rgb(84, 84, 84)";
+
+  if (background_color == "#222") {
+    var ycolor = "#fff";
+  }
   var options = {
     series: {
       bars: {
@@ -377,7 +391,7 @@ function pandoraFlotHBars(
     yaxis: {
       font: {
         size: font_size + 2,
-        color: "rgb(84, 84, 84)",
+        color: ycolor,
         family: font + "Font"
       },
       ticks: yFormatter
@@ -2364,7 +2378,7 @@ function pandoraFlotArea(
         $("#legend_" + graph_id).height()
     );
 
-    $("#timestamp_" + graph_id).css("color", legend_color);
+    $("#timestamp_" + graph_id).css("color", "#000");
     $("#timestamp_" + graph_id).css("font-size", font_size + 2 + "px");
     $("#timestamp_" + graph_id).css("font-family", font + "Font");
 

pandora_console/include/graphs/functions_d3.php

@@ -201,6 +201,11 @@ function d3_bullet_chart(
     $id_bullet = uniqid();
     $font = array_shift(explode('.', array_pop(explode('/', $font))));
 
+    $invert_color = '';
+    if ($config['style'] === 'pandora_black') {
+        $invert_color = 'filter: invert(100%);';
+    }
+
     $output .= '<div id="bullet_graph_'.$id_bullet.'" class="bullet" style="overflow: hidden; width: '.$width.'px; margin-left: auto; margin-right: auto;"></div>
 		<style>
 			.bullet_graph {
@@ -216,14 +221,14 @@ function d3_bullet_chart(
 			.bullet .marker.s1 { stroke: #f3b200; stroke-width: 2px; }
 			.bullet .marker.s2 { stroke: steelblue; stroke-width: 2px; }
 			.bullet .tick line { stroke: #666; stroke-width: .5px; }
-			.bullet .range.s0 { fill: #ddd; }
+			.bullet .range.s0 { fill: #fff; }
 			.bullet .range.s1 { fill: #ddd; }
 			.bullet .range.s2 { fill: #ccc; }
 			.bullet .measure.s0 { fill: steelblue; }
 			.bullet .measure.s1 { fill: steelblue; }
 			.bullet .title { font-size: 7pt; font-weight: bold; text-align:left; }
-			.bullet .subtitle { fill: #999; font-size: 7pt;}
+            .bullet .subtitle { fill: #999; font-size: 7pt;}
-			.bullet g text { font-size:'.$font_size.'pt;}
+			.bullet g text { font-size:'.$font_size.'pt; '.$invert_color.' }
 
 		</style>
 		<script language="javascript" type="text/javascript">
@@ -276,7 +281,7 @@ function d3_bullet_chart(
 			.attr("transform", "translate(-10, 15)");
 
 		title.append("text")
-			.attr("class", "'.$font.'")
+			.attr("class", "'.$font.' invert_filter")
 			.text(function(d) { return d.title; });
 
 		title.append("text")
@@ -293,9 +298,9 @@ function d3_bullet_chart(
 			else if (label >= 100000)
 				text = text.substring(0,3) + "K";
 			else if (label >= 1000)
-				text = text.substring(0,2) + "K";
+                text = text.substring(0,2) + "K";
 			$(this).text(text);
-		});
+        });
 		</script>';
 
     return $output;

pandora_console/include/graphs/functions_flot.php

@@ -145,6 +145,13 @@ function flot_area_graph(
         break;
     }
 
+    if ($config['style'] === 'pandora_black') {
+        $background_style = '#222';
+        $params['grid_color'] = '#fff';
+        $params['backgroundColor'] = '#222';
+        $params['legend_color'] = '#fff';
+    }
+
     // Parent layer.
     if (strpos($params['width'], '%') === false) {
         $width = 'width: '.$params['width'].'px;';
@@ -244,7 +251,7 @@ function flot_area_graph(
                      style='font-size:".$params['font_size']."pt;
                         display:none; position:absolute;
                         background:#fff; border: solid 1px #aaa;
-                        padding: 2px; z-index:1000;
+                        padding: 2px; z-index:1000; color: #000;
                 '></div>";
     $return .= "<div id='$graph_id' class='";
 
@@ -478,6 +485,10 @@ function flot_custom_pie_chart(
     $legend_position
 ) {
     global $config;
+    if ($config['style'] === 'pandora_black') {
+        $background_color = 'black_theme';
+    }
+
     // TODO
     // include_javascript_dependencies_flot_graph();
     $total_modules = $graph_values['total_modules'];

pandora_console/include/styles/pandora.css

@@ -3352,6 +3352,7 @@ div#stat-win-module-graph div.nodata_container {
 .menu_graph,
 .timestamp_graph {
   position: absolute;
+  color: #000;
 }
 
 .menu_graph {

pandora_console/include/styles/pandora_black.css

@@ -659,13 +659,14 @@ form ul.form_flex {
   padding: 10px 0px 10px 0px;
 }
 
-.bullet {
+.bullet .range.s0 {
-  background-color: #ddd;
+  background-color: #222;
+  fill: #222 !important;
   border-radius: 4px;
 }
 
 .legendLabel {
-  color: black;
+  color: #fff;
 }
 
 .incident_table {
@@ -871,3 +872,7 @@ div#dashboard-controls {
   fill: #fff;
   font-family: Verdana;
 }
+
+.tickLabel {
+  color: #fff;
+}