Bugfix/mon 13349 Trendsgraph on wkhtmltopdf

features/availability.feature

@@ -604,6 +604,40 @@ Feature: Availability reports
 		Then I should see "workhours"
 		And I should see "2013-03-04"
 		And I should see "2013-03-10"
-		And I should see trend graph have background color "rgb(161, 158, 149)"
-		And I should see trend graph have background color "transparent"
-		And I should see trend graph have background color "rgb(170, 222, 83)"
+		And I should see trend graph have background color "#a19e95"
+		And I should see trend graph have background color "#aade53"
+
+	Scenario: Create availability report with re-scalling
+		Given I am on the Host details page
+		And I have these report data entries:
+		| timestamp           | event_type | flags | attrib | host_name     | service_description | state | hard | retry | downtime_depth | output |
+		| 2013-03-01 00:01:00 |        801 |  NULL |   NULL | linux-server2 |          			  |     0 |    1 |     1 |              0 | OK - linux-server2  |
+		| 2013-03-01 12:00:00 |        801 |  NULL |   NULL | linux-server1 |                     |     0 |    1 |     1 |           NULL | OK - Sven Melander |
+		| 2013-03-03 00:01:00 |        801 |  NULL |   NULL | linux-server2 |         			  |     0 |    1 |     1 |              0 | OK - linux-server2  |
+		| 2013-03-05 00:03:00 |        801 |  NULL |   NULL | linux-server2 |        			  |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
+		| 2013-03-05 10:20:00 |        801 |  NULL |   NULL | linux-server2 |       		      |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+		And I hover over the "Report" menu
+		And I hover over the "Availability" menu
+		When I click "Create Availability Report"
+		And I select "Hosts" from "Report type"
+		And I select "linux-server1" from the multiselect "objects_tmp"
+		And I select "linux-server2" from the multiselect "objects_tmp"
+		Then "objects" should have option "linux-server1"
+		Then "objects" should have option "linux-server2"
+		When I select "Custom" from "Reporting period"
+		And I enter "2013-03-01" into "Start date"
+		And I enter "23:31" into "time_start"
+		And I enter "2013-04-01" into "End date"
+		And I enter "22:32" into "time_end"
+		And I check "Include trends graph"
+		Then I check "Show trends re-scaling"
+		And I click "Show report"
+		And I should see "linux-server1"
+		And I should see "linux-server2"
+		And I should see "2013-03-01"
+		And I should see "2013-03-11"
+		And I should see "2013-03-21"
+		And I should see trend graph have background color "#aade53"
+		And I should see trend graph have background color "#333"
+		When I hover over "bar"
+		Then I should see css "#tooltip"

modules/reports/controllers/reports.php

@@ -136,7 +136,7 @@ public function generate($input=false) {
 			$this->template->current_skin = $this->options['skin'];
 		}
 
-		$this->template->css[] = $this->add_path('reports/css/tgraph.css');
+		$this->template->css[] = $this->add_path('reports/css/trendgraph.css');
 		$this->template->css[] = $this->add_path('reports/css/datePicker.css');
 
 		$this->template->content = $this->add_view('reports/index'); # base template with placeholders for all parts
@@ -346,7 +346,7 @@ public function generate($input=false) {
 				}
 			}
 
-			$template->trends_graph = $this->add_view('trends/new_report');
+			$template->trends_graph = $this->add_view('trends/tgraph_report');
 
 			/* New JS trend graph */
 

modules/reports/views/reports/css/trendgraph.css

@@ -0,0 +1,83 @@
+.x-item {
+    overflow: hidden; 
+    width: 100%;
+}
+.tgraph-row {
+    position: relative;
+    width: 84%;
+    height: 40px;
+    color: #333;
+    float: left;
+    padding-left: 1%;
+    font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
+}
+.tgraph-blockline {
+    margin: 2px 0;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    direction: ltr;
+    display: -webkit-box; 
+    display: -moz-box;    
+    display: -ms-flexbox;  
+    display: -webkit-flex; 
+    display: flex;        
+}
+.tgraph-blockline .bar {
+    height: 20px;
+    margin: 0;
+    color: white;
+}
+.tgraph-sub-blockline {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    align-items: center;
+    direction: ltr;
+    display: -webkit-box; 
+    display: -moz-box;    
+    display: -ms-flexbox;  
+    display: -webkit-flex; 
+    display: flex;        
+}
+.tgraph-sub-blockline .bar {
+	position: relative;
+	margin: 0 auto;
+	height: 10px;
+	min-width: 10px;
+    color: white;
+}
+.tgraph-sub-blockline .bar-transparent {
+	position: relative;
+	margin: 0;
+	height: 10px;
+    color: white;
+    background: 'transparent';
+}
+.tgraph-time {
+    float: left;
+    text-align: left;
+    font-size: 7pt;
+}
+.tgraph-timeline {
+    margin: 0 0;
+    border-left: 1px solid #000;
+    opacity: 0.1;
+    z-index: 0;
+    width: 0;
+}
+.y-label {
+    float: left;
+    width: 15%;
+    padding: 10px 0 0 0;
+    min-height: 30px;
+    font-size: 8pt;
+    text-align: right;
+}
+#tooltip {
+    position: absolute;
+    background: #fff;
+    border: 1px solid #aaa;
+    padding: 5px;
+    display: none;
+}