From 83ff7a9c65a24cf26870ca9adfea3f4353107286 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 11 Apr 2024 21:37:05 +0800
Subject: [PATCH 01/48] Replace trends graph js

This commit replace the trends graph generated using javascript.. Created a new function using php instead of calling the javascript function to generated the graph.
Using javscript on generating trends graph causes it not to be rendered when saving the report as pdf.

This is part of MON-13349

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/controllers/reports.php       |   4 +-
 .../reports/views/reports/css/trendgraph.css  |  53 +++++++
 .../reports/views/trends/tgraph_report.php    | 137 ++++++++++++++++++
 3 files changed, 192 insertions(+), 2 deletions(-)
 create mode 100644 modules/reports/views/reports/css/trendgraph.css
 create mode 100644 modules/reports/views/trends/tgraph_report.php

diff --git a/modules/reports/controllers/reports.php b/modules/reports/controllers/reports.php
index 5174e8f94..0a4d1da82 100644
--- a/modules/reports/controllers/reports.php
+++ b/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 */
 
diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
new file mode 100644
index 000000000..b22bb3734
--- /dev/null
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -0,0 +1,53 @@
+.x-item {
+    overflow: hidden; 
+    width: 100%;
+}
+.tgraph-row {
+    position: relative;
+    width: 84%;
+    height: 40px;
+    color: #333;
+    float: left;
+    display: flex;
+    padding-left: 1%;
+    font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
+}
+.tgraph-block-line {
+    margin: 1% 0;
+    position: relative;
+    width: 100%;
+
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    direction: rtl;
+}
+.tgraph-time {
+    float: left;
+    text-align: left;
+    font-size: 7pt;
+}
+.tgraph-time-line {
+    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;
+}
+.bar {
+    height: 20px;
+    background-color: #007bff;
+    margin: 0;
+    color: white;
+    display: flex;
+    align-items: right;
+    justify-content: flex-end;
+}
\ No newline at end of file
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
new file mode 100644
index 000000000..05a54026c
--- /dev/null
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -0,0 +1,137 @@
+<div class="report-block">
+<?php
+    $rawdata = array();
+    $labels = array();
+    $state_names = array();
+    $outputs = array();
+    $outputs_r = array();
+
+    foreach ($graph_pure_data as $service => $statechanges) {
+
+        $labels[] = $service;
+        $servicerow = array();
+
+        for ($i = 0; $i < count($statechanges); $i++) {
+            $cur_out = $statechanges[$i]['output'];
+
+            if( isset( $outputs_r[$cur_out] ) ) {
+                $output_id = $outputs_r[$cur_out];
+            } else {
+                $output_id = count($outputs);
+                $outputs[] = $cur_out;
+                $outputs_r[$cur_out] = $output_id;
+            }
+
+            $servicerow[] = array(
+                $statechanges[$i]['duration'], /* 0: duration */
+                $statechanges[$i]['state'], /* 1: state */
+                $output_id /* 2: short */
+                );
+
+            switch(strtolower($obj_type)) {
+                case 'host':
+                    $state_name = Reports_Model::$host_states[$statechanges[$i]['state']];
+                    break;
+                case 'service':
+                    $state_name = Reports_Model::$service_states[$statechanges[$i]['state']];
+                    break;
+                default:
+                    $state_name = 'N/A';
+            }
+            $state_names[$statechanges[$i]['state']] = ucfirst($state_name);
+
+        }
+        $rawdata[] = $servicerow;
+
+    }
+    $colors = reports::_state_color_table($obj_type);
+
+    $data = array();
+    for ($i = 0; $i < count($rawdata); $i++) {
+        $data[$i] = array();
+        for ($j = 0; $j < count($rawdata[$i]); $j++) {
+            $data[$i][$j] = array(
+                'duration' => $rawdata[$i][$j][0],
+                'label' => $state_names[$rawdata[$i][$j][1]],
+                'short' => $outputs[$rawdata[$i][$j][2]],
+                'color' => $colors[$rawdata[$i][$j][1]]
+            );
+        }
+    }
+
+	$lastHost = '';
+
+	function generateDates($startDate, $endDate) {
+		$dates = array();
+	
+		$start = new DateTime(date("Y-m-d H:i:s",$startDate));
+		$end = new DateTime(date("Y-m-d H:i:s",$endDate));
+		$end->modify('-1 days');
+		$interval = $start->diff($end);
+		$daysDifference = $interval->days;
+	
+		// Calculate the interval depending on the span of days
+		$intervalDays = ($daysDifference <= 7) ? 1 : ceil($daysDifference / 7);
+	
+		// Generate dates based on the calculated interval
+		$currentDate = $start;
+		while ($currentDate <= $end) {
+			$dates[] = $currentDate->format('Y-m-d');
+			$currentDate->modify('+' . $intervalDays . ' days');
+		}
+
+		return $dates;
+	}
+
+	$dateLabel = generateDates($graph_start_date, $graph_end_date);
+    $totalInterval = $graph_end_date-$graph_start_date;
+
+	for ($y = 0; $y < count($labels); $y++) {
+		// graph for Y-labels
+		if (mb_strpos($labels[$y], ';')) {
+			$cHost = explode(';', $labels[$y])[0];
+			$cService = explode(';', $labels[$y])[1];
+
+			if ($cHost === $lastHost) {
+				$rowLabel = $cService;
+			} else {
+				$rowLabel = "<strong>".$cHost."</strong>;".$cService;
+			}
+			$lastHost = $cHost;
+		} else {
+			$rowLabel = "<strong>".$labels[$y]."</strong>";
+		}
+
+		echo "<div class='x-item'>";
+			echo "<label class='y-label'>".$rowLabel."</label>";
+			echo "<div class='tgraph-row'>";
+					echo "<div class='tgraph-block-line'>";
+						$bars = count($data[$y])-1;
+						for($z=$bars; $z>=0; $z--){
+							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
+							echo "<div class='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+						}
+					echo "</div>";
+			echo "</div>";
+		echo "</div>";
+	}
+
+        echo "<div style='clear: both;'></div>";
+		echo "<label class='y-label'></label>
+		<div class='tgraph-row'>";
+			// graph X-labels
+			$i = 0;
+			while ($i < count($dateLabel)) {
+				echo "<div class='tgraph-time' style='width: ".(100/count($dateLabel))."%';'>".
+						"&nbsp;&nbsp;".$dateLabel[$i].
+						"<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
+					"</div>";
+				$i++;
+			}
+		echo "</div>";
+        ?>
+
+	<?php if ($included && $skipped) {
+		printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
+	} ?>
+</div>

From 65bd3e2482e3dcc7f6f4feb2a206df55ac1ff642 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 12 Apr 2024 14:01:23 +0800
Subject: [PATCH 02/48] Add hover on new trends graph report

This commit displays bar details on mouse hover.

This is part of MON-13349

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 .../reports/views/reports/css/trendgraph.css  |  7 ++++++
 .../reports/views/trends/tgraph_report.php    | 24 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index b22bb3734..9819dbc9e 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -50,4 +50,11 @@
     display: flex;
     align-items: right;
     justify-content: flex-end;
+}
+#tooltip {
+    position: absolute;
+    background: #fff;
+    border: 1px solid #aaa;
+    padding: 5px;
+    display: none;
 }
\ No newline at end of file
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 05a54026c..d415cfce8 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -109,7 +109,8 @@ function generateDates($startDate, $endDate) {
 						$bars = count($data[$y])-1;
 						for($z=$bars; $z>=0; $z--){
 							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
-							echo "<div class='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+							$description = str_replace('\'', '', $data[$y][$z]['short']);
+							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $description . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
 						}
 					echo "</div>";
 			echo "</div>";
@@ -135,3 +136,24 @@ function generateDates($startDate, $endDate) {
 		printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
 	} ?>
 </div>
+
+<script>
+    var tooltip = document.getElementById('tooltip');
+    var bars = document.querySelectorAll('.bar');
+    
+    bars.forEach(function(bar) {
+        bar.addEventListener('mouseover', function(e) {
+            var label = e.target.getAttribute('data-label');
+            var value = e.target.getAttribute('data-value');
+            tooltip.style.display = 'block';
+
+            tooltip.style.left = (e.pageX + 10) + 'px';
+            tooltip.style.top = (e.pageY + 10) + 'px';
+            tooltip.innerHTML = label + ': ' + value;
+        });
+
+        bar.addEventListener('mouseout', function(e) {
+            tooltip.style.display = 'none';
+        });
+    });
+</script>
\ No newline at end of file

From 5869d9d4497acd97027409973fc1a65e04c0da5a Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 12 Apr 2024 19:21:35 +0800
Subject: [PATCH 03/48] Fix bar positions

This commit fixes bar positions on the graph when generating a pdf. Added display prefixes for other vendors.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/reports/css/trendgraph.css | 12 ++++++++----
 modules/reports/views/trends/tgraph_report.php   |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index 9819dbc9e..d38620c68 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -8,7 +8,6 @@
     height: 40px;
     color: #333;
     float: left;
-    display: flex;
     padding-left: 1%;
     font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
 }
@@ -16,11 +15,15 @@
     margin: 1% 0;
     position: relative;
     width: 100%;
-
-    display: flex;
     overflow: hidden;
     align-items: center;
     direction: rtl;
+    display: -webkit-box; 
+    display: -moz-box;    
+    display: -ms-flexbox;  
+    display: -webkit-flex; 
+    display: flex;        
+    justify-content: space-around;
 }
 .tgraph-time {
     float: left;
@@ -28,6 +31,7 @@
     font-size: 7pt;
 }
 .tgraph-time-line {
+    position: relative;
     margin: 0 0;
     border-left: 1px solid #000;
     opacity: 0.1;
@@ -47,9 +51,9 @@
     background-color: #007bff;
     margin: 0;
     color: white;
-    display: flex;
     align-items: right;
     justify-content: flex-end;
+    position: unset;
 }
 #tooltip {
     position: absolute;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index d415cfce8..67d5bbe97 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -149,7 +149,7 @@ function generateDates($startDate, $endDate) {
 
             tooltip.style.left = (e.pageX + 10) + 'px';
             tooltip.style.top = (e.pageY + 10) + 'px';
-            tooltip.innerHTML = label + ': ' + value;
+            tooltip.innerHTML = '<b>'+ label +'</b>: '+ value;
         });
 
         bar.addEventListener('mouseout', function(e) {

From 38743425bb41814700355bc4e0aa7a7bac0b93f8 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 12 Apr 2024 19:43:49 +0800
Subject: [PATCH 04/48] Fix date time labels

This commit fixes the positions of lines and y-labels.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/reports/css/trendgraph.css | 3 ---
 modules/reports/views/trends/tgraph_report.php   | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index d38620c68..7e3280100 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -31,7 +31,6 @@
     font-size: 7pt;
 }
 .tgraph-time-line {
-    position: relative;
     margin: 0 0;
     border-left: 1px solid #000;
     opacity: 0.1;
@@ -51,9 +50,7 @@
     background-color: #007bff;
     margin: 0;
     color: white;
-    align-items: right;
     justify-content: flex-end;
-    position: unset;
 }
 #tooltip {
     position: absolute;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 67d5bbe97..6932fc87d 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -124,8 +124,8 @@ function generateDates($startDate, $endDate) {
 			$i = 0;
 			while ($i < count($dateLabel)) {
 				echo "<div class='tgraph-time' style='width: ".(100/count($dateLabel))."%';'>".
+                        "<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
 						"&nbsp;&nbsp;".$dateLabel[$i].
-						"<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
 					"</div>";
 				$i++;
 			}

From 283768c7a35a8c67ee331201395ca0da5d4efa50 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 15 Apr 2024 14:05:38 +0800
Subject: [PATCH 05/48] Update details on hover

Added datetime details on hover. And changed the format used for datetime to remove leading zeroes.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/trends/tgraph_report.php | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 6932fc87d..87106877e 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -64,8 +64,8 @@
 	function generateDates($startDate, $endDate) {
 		$dates = array();
 	
-		$start = new DateTime(date("Y-m-d H:i:s",$startDate));
-		$end = new DateTime(date("Y-m-d H:i:s",$endDate));
+		$start = new DateTime(date("Y-m-d G:i:s",$startDate));
+		$end = new DateTime(date("Y-m-d G:i:s",$endDate));
 		$end->modify('-1 days');
 		$interval = $start->diff($end);
 		$daysDifference = $interval->days;
@@ -107,10 +107,15 @@ function generateDates($startDate, $endDate) {
 			echo "<div class='tgraph-row'>";
 					echo "<div class='tgraph-block-line'>";
 						$bars = count($data[$y])-1;
-						for($z=$bars; $z>=0; $z--){
+						$lastDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
+                        $startDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
+						for($z=$bars; $z>=0; $z--){ 
 							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
-							$description = str_replace('\'', '', $data[$y][$z]['short']);
-							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $description . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+                            $description = str_replace('\'', '', $data[$y][$z]['short']);
+                            $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                            $dataValue = "<br />".$startDateTime->format('M d, Y g:i A')." to ".$lastDateTime->format('M d, Y g:i A') . "<br />" . $description;
+							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $dataValue . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+                            $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
 						}
 					echo "</div>";
 			echo "</div>";

From 0f0305f8c66d78e64cf59915de0534364b2ec679 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Sun, 21 Apr 2024 12:54:07 +0800
Subject: [PATCH 06/48] Update availability test

This commit changes the rgb component to hexadecimal color code.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 features/availability.feature | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 148c2dddc..23e87d589 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -604,6 +604,5 @@ 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"

From 136fb9cfc59be9e4dbc0b98fba11aaf8e52a9623 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 22 Apr 2024 09:57:56 +0800
Subject: [PATCH 07/48] Revert "Update availability test"

This reverts commit 0f0305f8c66d78e64cf59915de0534364b2ec679.
---
 features/availability.feature | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 23e87d589..148c2dddc 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -604,5 +604,6 @@ 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 "#a19e95"
-		And I should see trend graph have background color "#aade53"
+		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)"

From 29d0251d74f66f3967a8fed18cd41cc2a3157f1d Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 22 Apr 2024 09:59:10 +0800
Subject: [PATCH 08/48] Remove checks for transparent object

---
 features/availability.feature | 1 -
 1 file changed, 1 deletion(-)

diff --git a/features/availability.feature b/features/availability.feature
index 148c2dddc..acc103629 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -605,5 +605,4 @@ Feature: Availability reports
 		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)"

From 43e13124c282e6daaa8ddbf435c268e496aaf387 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 22 Apr 2024 11:59:05 +0800
Subject: [PATCH 09/48] Update test to hexadecimal color code

---
 features/availability.feature | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index acc103629..23e87d589 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -604,5 +604,5 @@ 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 "rgb(170, 222, 83)"
+		And I should see trend graph have background color "#a19e95"
+		And I should see trend graph have background color "#aade53"

From b8ed535def2594e7e0fd0192938108c8c6d6ad57 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 25 Apr 2024 16:36:50 +0800
Subject: [PATCH 10/48] Added Scaling function

This commit displays the trend scale for trends bar with a short
duration. When scaling, the short bar is changed to black then
creates a smaller bar above it. Colored bars must display details
when hovered.

Unused css file was removed. Indentions were fixed. And necessary
variables were created.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/reports/css/tgraph.css  | 100 ------------
 .../reports/views/reports/css/trendgraph.css  |  45 ++++--
 .../reports/views/trends/tgraph_report.php    | 149 ++++++++++--------
 3 files changed, 119 insertions(+), 175 deletions(-)
 delete mode 100644 modules/reports/views/reports/css/tgraph.css

diff --git a/modules/reports/views/reports/css/tgraph.css b/modules/reports/views/reports/css/tgraph.css
deleted file mode 100644
index e0fc315cd..000000000
--- a/modules/reports/views/reports/css/tgraph.css
+++ /dev/null
@@ -1,100 +0,0 @@
-
-.tgraph-container {
-}
-
-.tgraph {
-	position: relative;
-	width: 84%;
-	height: 40px;
-	color: #333;
-	float: left;
-	padding-left: 1%;
-	font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
-}
-
-.tgraph-hoverbox {
-	border: 1px solid #999;
-	border-radius: 4px;
-	display: none;
-	z-index: 9999;
-	box-shadow: inset 2px 2px 5px #fff;
-	background: transparent;
-	background: rgba(255, 255, 255, 0.8);
-	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)";
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
-	zoom: 1;
-
-	position: absolute;
-	color: #333;
-	max-width: 180px;
-	font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
-	padding: 5px;
-	text-shadow: 1px 1px 1px #fff;
-}
-
-.tgraph .tgraph-time {
-	float: left;
-	text-align: left;
-	font-size: 7pt;
-}
-
-.tgraph .tgraph-time-line {
-	margin: 0 0;
-	border-left: 1px solid #000;
-	opacity: 0.1;
-	z-index: 0;
-	width: 0;
-}
-
-.tgraph-label {
-	float: left;
-	width: 15%;
-	padding: 10px 0 0 0;
-	min-height: 30px;
-	font-size: 8pt;
-	text-align: right;
-}
-
-.tgraph .tgraph-subline {
-	position: absolute;
-	margin-top: -12px;
-	outline: 1px solid #fff;
-	height: 10px;
-	min-width: 3px;
-}
-
-.tgraph .tgraph-subline .tgraph-block {
-	height: 10px;
-}
-
-.tgraph .tgraph-note:hover {
-	background: #bbb;
-	z-index: 1;
-}
-
-.tgraph .tgraph-block-line {
-	margin: 12px 0;
-	position: relative;
-	width: 100%;
-}
-
-.tgraph .tgraph-block .tgraph-block {
-	height: 8px;
-}
-
-.tgraph .tgraph-block {
-	height: 16px;
-	z-index: 0;
-	position: absolute;
-}
-
-.tgraph-hoverbox b {
-	display: inline-block;
-	margin: 2px 0px;
-}
-
-.tgraph-hoverbox small {
-	display: inline-block;
-	margin: 2px 0px;
-	font-size: 7pt;
-}
diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index 7e3280100..ebe13f908 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -11,8 +11,8 @@
     padding-left: 1%;
     font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
 }
-.tgraph-block-line {
-    margin: 1% 0;
+.tgraph-blockline {
+    margin: 2px 0;
     position: relative;
     width: 100%;
     overflow: hidden;
@@ -25,12 +25,44 @@
     display: flex;        
     justify-content: space-around;
 }
+.tgraph-blockline .bar {
+    height: 20px;
+    margin: 0;
+    color: white;
+}
+.tgraph-sub-blockline {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    align-items: center;
+    direction: rtl;
+    display: -webkit-box; 
+    display: -moz-box;    
+    display: -ms-flexbox;  
+    display: -webkit-flex; 
+    display: flex;        
+    justify-content: space-around;
+}
+.tgraph-sub-blockline .bar {
+	position: relative;
+	margin: 0 auto;
+	height: 10px;
+	min-width: 45px;
+    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-time-line {
+.tgraph-timeline {
     margin: 0 0;
     border-left: 1px solid #000;
     opacity: 0.1;
@@ -45,13 +77,6 @@
     font-size: 8pt;
     text-align: right;
 }
-.bar {
-    height: 20px;
-    background-color: #007bff;
-    margin: 0;
-    color: white;
-    justify-content: flex-end;
-}
 #tooltip {
     position: absolute;
     background: #fff;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 87106877e..0f8748aa3 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -6,15 +6,14 @@
     $outputs = array();
     $outputs_r = array();
 
-    foreach ($graph_pure_data as $service => $statechanges) {
-
+    foreach($graph_pure_data as $service => $statechanges) {
         $labels[] = $service;
         $servicerow = array();
 
-        for ($i = 0; $i < count($statechanges); $i++) {
+        for($i = 0; $i < count($statechanges); $i++) {
             $cur_out = $statechanges[$i]['output'];
 
-            if( isset( $outputs_r[$cur_out] ) ) {
+            if(isset($outputs_r[$cur_out])) {
                 $output_id = $outputs_r[$cur_out];
             } else {
                 $output_id = count($outputs);
@@ -26,7 +25,7 @@
                 $statechanges[$i]['duration'], /* 0: duration */
                 $statechanges[$i]['state'], /* 1: state */
                 $output_id /* 2: short */
-                );
+            );
 
             switch(strtolower($obj_type)) {
                 case 'host':
@@ -39,126 +38,146 @@
                     $state_name = 'N/A';
             }
             $state_names[$statechanges[$i]['state']] = ucfirst($state_name);
-
         }
         $rawdata[] = $servicerow;
-
     }
     $colors = reports::_state_color_table($obj_type);
 
     $data = array();
-    for ($i = 0; $i < count($rawdata); $i++) {
+    for($i = 0; $i < count($rawdata); $i++) {
         $data[$i] = array();
         for ($j = 0; $j < count($rawdata[$i]); $j++) {
             $data[$i][$j] = array(
                 'duration' => $rawdata[$i][$j][0],
                 'label' => $state_names[$rawdata[$i][$j][1]],
-                'short' => $outputs[$rawdata[$i][$j][2]],
+                'short' => str_replace('\'', '', $outputs[$rawdata[$i][$j][2]]),
                 'color' => $colors[$rawdata[$i][$j][1]]
             );
         }
     }
 
 	$lastHost = '';
-
 	function generateDates($startDate, $endDate) {
 		$dates = array();
-	
-		$start = new DateTime(date("Y-m-d G:i:s",$startDate));
-		$end = new DateTime(date("Y-m-d G:i:s",$endDate));
+		$start = new DateTime(date("Y-m-d H:i:s",$startDate));
+		$end = new DateTime(date("Y-m-d H:i:s",$endDate));
 		$end->modify('-1 days');
 		$interval = $start->diff($end);
 		$daysDifference = $interval->days;
-	
+
 		// Calculate the interval depending on the span of days
 		$intervalDays = ($daysDifference <= 7) ? 1 : ceil($daysDifference / 7);
-	
 		// Generate dates based on the calculated interval
-		$currentDate = $start;
-		while ($currentDate <= $end) {
-			$dates[] = $currentDate->format('Y-m-d');
-			$currentDate->modify('+' . $intervalDays . ' days');
+		while($start <= $end) {
+			$dates[] = $start->format('Y-m-d');
+			$start->modify('+' . $intervalDays . ' days');
 		}
-
 		return $dates;
 	}
 
 	$dateLabel = generateDates($graph_start_date, $graph_end_date);
-    $totalInterval = $graph_end_date-$graph_start_date;
+    $totalInterval = $graph_end_date - $graph_start_date;
+    $dateCount = count($dateLabel);
+    $labelCount = count($labels);
 
-	for ($y = 0; $y < count($labels); $y++) {
+	for($y = 0; $y < $labelCount; $y++) {
 		// graph for Y-labels
-		if (mb_strpos($labels[$y], ';')) {
-			$cHost = explode(';', $labels[$y])[0];
-			$cService = explode(';', $labels[$y])[1];
-
-			if ($cHost === $lastHost) {
-				$rowLabel = $cService;
+		if(mb_strpos($labels[$y], ';')) {
+			$Hostname = explode(';', $labels[$y])[0];
+			$Servicename = explode(';', $labels[$y])[1];
+			if ($Hostname === $lastHost) {
+				$rowLabel = $Servicename;
 			} else {
-				$rowLabel = "<strong>".$cHost."</strong>;".$cService;
+				$rowLabel = "<strong>".$Hostname."</strong>;".$Servicename;
 			}
-			$lastHost = $cHost;
+			$lastHost = $Hostname;
 		} else {
 			$rowLabel = "<strong>".$labels[$y]."</strong>";
 		}
 
+        $bars = count($data[$y])-1;
 		echo "<div class='x-item'>";
 			echo "<label class='y-label'>".$rowLabel."</label>";
-			echo "<div class='tgraph-row'>";
-					echo "<div class='tgraph-block-line'>";
-						$bars = count($data[$y])-1;
-						$lastDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
-                        $startDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
-						for($z=$bars; $z>=0; $z--){ 
-							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
-                            $description = str_replace('\'', '', $data[$y][$z]['short']);
-                            $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
-                            $dataValue = "<br />".$startDateTime->format('M d, Y g:i A')." to ".$lastDateTime->format('M d, Y g:i A') . "<br />" . $description;
-							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $dataValue . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
-                            $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
-						}
-					echo "</div>";
+			echo "<div class='tgraph-row'>"; 
+                if($use_scaling) {
+                    $scaleLastDT = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+                    $scaleStartDT =  new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+
+                    echo "<div class='tgraph-sub-blockline'>";
+                        for($z = $bars; $z >= 0; $z--){
+                            $barAve = $data[$y][$z]['duration']/$totalInterval;
+                            $barWidth = round($barAve*100,2);
+                            $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
+                            $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
+
+                            if($barAve < 0.03) {
+                                echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
+
+                                $data[$y][$z]['color'] = "#333";
+                            } else {
+                                echo "<div class='bar-transparent' style='width:".$barWidth."%;'></div>";
+                            }
+                            $scaleLastDT->modify('-'.$data[$y][$z]['duration'].' second');
+                        }
+                    echo "</div>";
+                }
+
+                echo "<div class='tgraph-blockline'>";
+                    $lastDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+                    $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+
+                    for($z = $bars; $z >= 0; $z--){
+                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100, 2);
+                        $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                        $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
+
+                        echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
+                        
+                        $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                    }
+                echo "</div>";
 			echo "</div>";
 		echo "</div>";
 	}
 
+    echo "<div id='tooltip'></div>";
+    echo "<div style='clear: both;'></div>";
+    echo "<label class='y-label'></label>";
+    echo "<div class='tgraph-row'>";
         echo "<div style='clear: both;'></div>";
-		echo "<label class='y-label'></label>
-		<div class='tgraph-row'>";
-			// graph X-labels
-			$i = 0;
-			while ($i < count($dateLabel)) {
-				echo "<div class='tgraph-time' style='width: ".(100/count($dateLabel))."%';'>".
-                        "<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
-						"&nbsp;&nbsp;".$dateLabel[$i].
-					"</div>";
-				$i++;
-			}
-		echo "</div>";
-        ?>
+        // graph X-labels
+        $i = 0;
+        while($i < $dateCount) {
+            echo "<div class='tgraph-time' style='width: ".(100/$dateCount)."%';'>".
+                   "<div class='tgraph-timeline' style='height: ".($labelCount*40)."px; margin-top: -".($labelCount*40)."px;'></div>".
+                   "&nbsp;&nbsp;".$dateLabel[$i].
+                 "</div>";
+            $i++;
+        }
+    echo "</div>";
+?>
 
-	<?php if ($included && $skipped) {
-		printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
-	} ?>
+<?php if($included && $skipped) {
+    printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
+} ?>
 </div>
 
 <script>
+    // JavaScript for hover interaction
     var tooltip = document.getElementById('tooltip');
-    var bars = document.querySelectorAll('.bar');
-    
+    var bars = document.querySelectorAll(".bar");
+
     bars.forEach(function(bar) {
         bar.addEventListener('mouseover', function(e) {
             var label = e.target.getAttribute('data-label');
             var value = e.target.getAttribute('data-value');
             tooltip.style.display = 'block';
-
             tooltip.style.left = (e.pageX + 10) + 'px';
             tooltip.style.top = (e.pageY + 10) + 'px';
             tooltip.innerHTML = '<b>'+ label +'</b>: '+ value;
         });
-
         bar.addEventListener('mouseout', function(e) {
             tooltip.style.display = 'none';
         });
     });
-</script>
\ No newline at end of file
+</script>

From 947b28e2c87cf271d0e2ac6a33dbcfe492abed63 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 26 Apr 2024 10:26:09 +0800
Subject: [PATCH 11/48] Adjusted minimum width of a scaled bar

Adjusted the min-width to 10px to avoid overflow in the scaled row.
---
 modules/reports/views/reports/css/trendgraph.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index ebe13f908..f3d4fe431 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -47,7 +47,7 @@
 	position: relative;
 	margin: 0 auto;
 	height: 10px;
-	min-width: 45px;
+	min-width: 10px;
     color: white;
 }
 .tgraph-sub-blockline .bar-transparent {

From 8ab9d32f8fbee3aa1723ca6ac657fee574c348a1 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 2 May 2024 18:21:07 +0800
Subject: [PATCH 12/48] Added test on re-scalling trends graph

---
 features/availability.feature | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/features/availability.feature b/features/availability.feature
index 23e87d589..a64b5cede 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -606,3 +606,20 @@ Feature: Availability reports
 		And I should see "2013-03-10"
 		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 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"
+		And I check "Include trends graph"
+		And I check "Show trends re-scaling"
+		And I click "Show report"
+		And I should see trend graph have background color "#a19e95"
+		And I should see trend graph have background color "#aade53"
+		And I should see trend graph have background color "transparent"

From 1e2752a63a8fa28ae25717718ab7cfb4a950ffa5 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 10:55:34 +0800
Subject: [PATCH 13/48] Added report data entry on test

---
 features/availability.feature | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/features/availability.feature b/features/availability.feature
index a64b5cede..4d63a7180 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -26,6 +26,7 @@ Feature: Availability reports
 			| System Load         | linux-server2 | check_nrpe!load | 1                     | 1                     |                |
 			| PING                | win-server1   | check_ping      | 1                     | 0                     | pings          |
 			| PING                | win-server2   | check_ping      | 0                     | 1                     | pings          |
+			| PING                | linux-server2 | check_ping      | 1                     | 1                     | pings          |
 		And I have these report data entries:
 			| timestamp           | event_type | flags | attrib | host_name     | service_description | state | hard | retry | downtime_depth | output |
 			| 2013-01-01 12:00:00 |        100 |  NULL |   NULL |               |                     |     0 |    0 |     0 |           NULL | NULL                |
@@ -35,6 +36,10 @@ Feature: Availability reports
 			| 2013-01-01 12:00:03 |        701 |  NULL |   NULL | win-server1   | PING                |     1 |    0 |     1 |           NULL | ERROR - tinky-winky |
 			| 2013-03-09 00:01:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     1 |    0 |     1 |              0 | OK - linux-server1  |
 			| 2013-03-09 00:03:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     0 |    1 |     1 |              0 | OK - linux-server1  |
+			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | ERROR - cannot find linux-server2  |
+			| 2013-03-05 00:03:20 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -617,6 +622,11 @@ Feature: Availability reports
 		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"
 		And I check "Show trends re-scaling"
 		And I click "Show report"

From f2916cfccc77921564bbfe873307cfa9164dd33b Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 11:13:30 +0800
Subject: [PATCH 14/48] Replace to check scaled color instead

Objects with white color automatically disregards style set to transparent.
---
 features/availability.feature | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 4d63a7180..c11748372 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -39,7 +39,7 @@ Feature: Availability reports
 			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
 			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
 			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | ERROR - cannot find linux-server2  |
-			| 2013-03-05 00:03:20 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -632,4 +632,4 @@ Feature: Availability reports
 		And I click "Show report"
 		And I should see trend graph have background color "#a19e95"
 		And I should see trend graph have background color "#aade53"
-		And I should see trend graph have background color "transparent"
+		And I should see trend graph have background color "#333"

From ceb8a61d54834e014eb071cecac1e5b8ad3d02fa Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 13:25:28 +0800
Subject: [PATCH 15/48] Change Service Description for test host

---
 features/availability.feature | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index c11748372..d700d6dcb 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -26,7 +26,6 @@ Feature: Availability reports
 			| System Load         | linux-server2 | check_nrpe!load | 1                     | 1                     |                |
 			| PING                | win-server1   | check_ping      | 1                     | 0                     | pings          |
 			| PING                | win-server2   | check_ping      | 0                     | 1                     | pings          |
-			| PING                | linux-server2 | check_ping      | 1                     | 1                     | pings          |
 		And I have these report data entries:
 			| timestamp           | event_type | flags | attrib | host_name     | service_description | state | hard | retry | downtime_depth | output |
 			| 2013-01-01 12:00:00 |        100 |  NULL |   NULL |               |                     |     0 |    0 |     0 |           NULL | NULL                |
@@ -36,10 +35,10 @@ Feature: Availability reports
 			| 2013-01-01 12:00:03 |        701 |  NULL |   NULL | win-server1   | PING                |     1 |    0 |     1 |           NULL | ERROR - tinky-winky |
 			| 2013-03-09 00:01:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     1 |    0 |     1 |              0 | OK - linux-server1  |
 			| 2013-03-09 00:03:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     0 |    1 |     1 |              0 | OK - linux-server1  |
-			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | ERROR - cannot find linux-server2  |
-			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
+			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -628,8 +627,10 @@ Feature: Availability reports
 		And I enter "2013-04-01" into "End date"
 		And I enter "22:32" into "time_end"
 		And I check "Include trends graph"
-		And I check "Show trends re-scaling"
+		Then I check "Show trends re-scaling"
 		And I click "Show report"
+		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 "#a19e95"
 		And I should see trend graph have background color "#aade53"
-		And I should see trend graph have background color "#333"

From dcee7e4670a303508f0e56c5618ab6196750fa8a Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 13:57:07 +0800
Subject: [PATCH 16/48] Updated rescalling test

---
 features/availability.feature | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index d700d6dcb..573bd8b67 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -35,10 +35,6 @@ Feature: Availability reports
 			| 2013-01-01 12:00:03 |        701 |  NULL |   NULL | win-server1   | PING                |     1 |    0 |     1 |           NULL | ERROR - tinky-winky |
 			| 2013-03-09 00:01:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     1 |    0 |     1 |              0 | OK - linux-server1  |
 			| 2013-03-09 00:03:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     0 |    1 |     1 |              0 | OK - linux-server1  |
-			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
-			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -613,6 +609,12 @@ Feature: Availability reports
 
 	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 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+		| 2013-03-03 00:01:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+		| 2013-03-05 00:03:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
+		| 2013-03-05 00:08:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     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"
@@ -634,3 +636,4 @@ Feature: Availability reports
 		And I should see "2013-03-21"
 		And I should see trend graph have background color "#a19e95"
 		And I should see trend graph have background color "#aade53"
+		And I should see trend graph have background color "#333"

From e26ee591a5293351e1a23b87489b7a03bbf6ea98 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 11 Apr 2024 21:37:05 +0800
Subject: [PATCH 17/48] Replace trends graph js

This commit replace the trends graph generated using javascript.. Created a new function using php instead of calling the javascript function to generated the graph.
Using javscript on generating trends graph causes it not to be rendered when saving the report as pdf.

This is part of MON-13349

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/controllers/reports.php       |   4 +-
 .../reports/views/reports/css/trendgraph.css  |  53 +++++++
 .../reports/views/trends/tgraph_report.php    | 137 ++++++++++++++++++
 3 files changed, 192 insertions(+), 2 deletions(-)
 create mode 100644 modules/reports/views/reports/css/trendgraph.css
 create mode 100644 modules/reports/views/trends/tgraph_report.php

diff --git a/modules/reports/controllers/reports.php b/modules/reports/controllers/reports.php
index 5174e8f94..0a4d1da82 100644
--- a/modules/reports/controllers/reports.php
+++ b/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 */
 
diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
new file mode 100644
index 000000000..b22bb3734
--- /dev/null
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -0,0 +1,53 @@
+.x-item {
+    overflow: hidden; 
+    width: 100%;
+}
+.tgraph-row {
+    position: relative;
+    width: 84%;
+    height: 40px;
+    color: #333;
+    float: left;
+    display: flex;
+    padding-left: 1%;
+    font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
+}
+.tgraph-block-line {
+    margin: 1% 0;
+    position: relative;
+    width: 100%;
+
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    direction: rtl;
+}
+.tgraph-time {
+    float: left;
+    text-align: left;
+    font-size: 7pt;
+}
+.tgraph-time-line {
+    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;
+}
+.bar {
+    height: 20px;
+    background-color: #007bff;
+    margin: 0;
+    color: white;
+    display: flex;
+    align-items: right;
+    justify-content: flex-end;
+}
\ No newline at end of file
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
new file mode 100644
index 000000000..05a54026c
--- /dev/null
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -0,0 +1,137 @@
+<div class="report-block">
+<?php
+    $rawdata = array();
+    $labels = array();
+    $state_names = array();
+    $outputs = array();
+    $outputs_r = array();
+
+    foreach ($graph_pure_data as $service => $statechanges) {
+
+        $labels[] = $service;
+        $servicerow = array();
+
+        for ($i = 0; $i < count($statechanges); $i++) {
+            $cur_out = $statechanges[$i]['output'];
+
+            if( isset( $outputs_r[$cur_out] ) ) {
+                $output_id = $outputs_r[$cur_out];
+            } else {
+                $output_id = count($outputs);
+                $outputs[] = $cur_out;
+                $outputs_r[$cur_out] = $output_id;
+            }
+
+            $servicerow[] = array(
+                $statechanges[$i]['duration'], /* 0: duration */
+                $statechanges[$i]['state'], /* 1: state */
+                $output_id /* 2: short */
+                );
+
+            switch(strtolower($obj_type)) {
+                case 'host':
+                    $state_name = Reports_Model::$host_states[$statechanges[$i]['state']];
+                    break;
+                case 'service':
+                    $state_name = Reports_Model::$service_states[$statechanges[$i]['state']];
+                    break;
+                default:
+                    $state_name = 'N/A';
+            }
+            $state_names[$statechanges[$i]['state']] = ucfirst($state_name);
+
+        }
+        $rawdata[] = $servicerow;
+
+    }
+    $colors = reports::_state_color_table($obj_type);
+
+    $data = array();
+    for ($i = 0; $i < count($rawdata); $i++) {
+        $data[$i] = array();
+        for ($j = 0; $j < count($rawdata[$i]); $j++) {
+            $data[$i][$j] = array(
+                'duration' => $rawdata[$i][$j][0],
+                'label' => $state_names[$rawdata[$i][$j][1]],
+                'short' => $outputs[$rawdata[$i][$j][2]],
+                'color' => $colors[$rawdata[$i][$j][1]]
+            );
+        }
+    }
+
+	$lastHost = '';
+
+	function generateDates($startDate, $endDate) {
+		$dates = array();
+	
+		$start = new DateTime(date("Y-m-d H:i:s",$startDate));
+		$end = new DateTime(date("Y-m-d H:i:s",$endDate));
+		$end->modify('-1 days');
+		$interval = $start->diff($end);
+		$daysDifference = $interval->days;
+	
+		// Calculate the interval depending on the span of days
+		$intervalDays = ($daysDifference <= 7) ? 1 : ceil($daysDifference / 7);
+	
+		// Generate dates based on the calculated interval
+		$currentDate = $start;
+		while ($currentDate <= $end) {
+			$dates[] = $currentDate->format('Y-m-d');
+			$currentDate->modify('+' . $intervalDays . ' days');
+		}
+
+		return $dates;
+	}
+
+	$dateLabel = generateDates($graph_start_date, $graph_end_date);
+    $totalInterval = $graph_end_date-$graph_start_date;
+
+	for ($y = 0; $y < count($labels); $y++) {
+		// graph for Y-labels
+		if (mb_strpos($labels[$y], ';')) {
+			$cHost = explode(';', $labels[$y])[0];
+			$cService = explode(';', $labels[$y])[1];
+
+			if ($cHost === $lastHost) {
+				$rowLabel = $cService;
+			} else {
+				$rowLabel = "<strong>".$cHost."</strong>;".$cService;
+			}
+			$lastHost = $cHost;
+		} else {
+			$rowLabel = "<strong>".$labels[$y]."</strong>";
+		}
+
+		echo "<div class='x-item'>";
+			echo "<label class='y-label'>".$rowLabel."</label>";
+			echo "<div class='tgraph-row'>";
+					echo "<div class='tgraph-block-line'>";
+						$bars = count($data[$y])-1;
+						for($z=$bars; $z>=0; $z--){
+							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
+							echo "<div class='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+						}
+					echo "</div>";
+			echo "</div>";
+		echo "</div>";
+	}
+
+        echo "<div style='clear: both;'></div>";
+		echo "<label class='y-label'></label>
+		<div class='tgraph-row'>";
+			// graph X-labels
+			$i = 0;
+			while ($i < count($dateLabel)) {
+				echo "<div class='tgraph-time' style='width: ".(100/count($dateLabel))."%';'>".
+						"&nbsp;&nbsp;".$dateLabel[$i].
+						"<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
+					"</div>";
+				$i++;
+			}
+		echo "</div>";
+        ?>
+
+	<?php if ($included && $skipped) {
+		printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
+	} ?>
+</div>

From 8d427563403a524d249c8a6f6527ea1a2dbb0bfb Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 12 Apr 2024 14:01:23 +0800
Subject: [PATCH 18/48] Add hover on new trends graph report

This commit displays bar details on mouse hover.

This is part of MON-13349

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 .../reports/views/reports/css/trendgraph.css  |  7 ++++++
 .../reports/views/trends/tgraph_report.php    | 24 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index b22bb3734..9819dbc9e 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -50,4 +50,11 @@
     display: flex;
     align-items: right;
     justify-content: flex-end;
+}
+#tooltip {
+    position: absolute;
+    background: #fff;
+    border: 1px solid #aaa;
+    padding: 5px;
+    display: none;
 }
\ No newline at end of file
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 05a54026c..d415cfce8 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -109,7 +109,8 @@ function generateDates($startDate, $endDate) {
 						$bars = count($data[$y])-1;
 						for($z=$bars; $z>=0; $z--){
 							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
-							echo "<div class='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+							$description = str_replace('\'', '', $data[$y][$z]['short']);
+							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $description . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
 						}
 					echo "</div>";
 			echo "</div>";
@@ -135,3 +136,24 @@ function generateDates($startDate, $endDate) {
 		printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
 	} ?>
 </div>
+
+<script>
+    var tooltip = document.getElementById('tooltip');
+    var bars = document.querySelectorAll('.bar');
+    
+    bars.forEach(function(bar) {
+        bar.addEventListener('mouseover', function(e) {
+            var label = e.target.getAttribute('data-label');
+            var value = e.target.getAttribute('data-value');
+            tooltip.style.display = 'block';
+
+            tooltip.style.left = (e.pageX + 10) + 'px';
+            tooltip.style.top = (e.pageY + 10) + 'px';
+            tooltip.innerHTML = label + ': ' + value;
+        });
+
+        bar.addEventListener('mouseout', function(e) {
+            tooltip.style.display = 'none';
+        });
+    });
+</script>
\ No newline at end of file

From 28307cd804bfb8f769323f37c2b054d936ab54f4 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 12 Apr 2024 19:21:35 +0800
Subject: [PATCH 19/48] Fix bar positions

This commit fixes bar positions on the graph when generating a pdf. Added display prefixes for other vendors.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/reports/css/trendgraph.css | 12 ++++++++----
 modules/reports/views/trends/tgraph_report.php   |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index 9819dbc9e..d38620c68 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -8,7 +8,6 @@
     height: 40px;
     color: #333;
     float: left;
-    display: flex;
     padding-left: 1%;
     font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
 }
@@ -16,11 +15,15 @@
     margin: 1% 0;
     position: relative;
     width: 100%;
-
-    display: flex;
     overflow: hidden;
     align-items: center;
     direction: rtl;
+    display: -webkit-box; 
+    display: -moz-box;    
+    display: -ms-flexbox;  
+    display: -webkit-flex; 
+    display: flex;        
+    justify-content: space-around;
 }
 .tgraph-time {
     float: left;
@@ -28,6 +31,7 @@
     font-size: 7pt;
 }
 .tgraph-time-line {
+    position: relative;
     margin: 0 0;
     border-left: 1px solid #000;
     opacity: 0.1;
@@ -47,9 +51,9 @@
     background-color: #007bff;
     margin: 0;
     color: white;
-    display: flex;
     align-items: right;
     justify-content: flex-end;
+    position: unset;
 }
 #tooltip {
     position: absolute;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index d415cfce8..67d5bbe97 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -149,7 +149,7 @@ function generateDates($startDate, $endDate) {
 
             tooltip.style.left = (e.pageX + 10) + 'px';
             tooltip.style.top = (e.pageY + 10) + 'px';
-            tooltip.innerHTML = label + ': ' + value;
+            tooltip.innerHTML = '<b>'+ label +'</b>: '+ value;
         });
 
         bar.addEventListener('mouseout', function(e) {

From c4707d48c18ddfc57f960c6f59b38b24fd9e47ce Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 12 Apr 2024 19:43:49 +0800
Subject: [PATCH 20/48] Fix date time labels

This commit fixes the positions of lines and y-labels.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/reports/css/trendgraph.css | 3 ---
 modules/reports/views/trends/tgraph_report.php   | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index d38620c68..7e3280100 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -31,7 +31,6 @@
     font-size: 7pt;
 }
 .tgraph-time-line {
-    position: relative;
     margin: 0 0;
     border-left: 1px solid #000;
     opacity: 0.1;
@@ -51,9 +50,7 @@
     background-color: #007bff;
     margin: 0;
     color: white;
-    align-items: right;
     justify-content: flex-end;
-    position: unset;
 }
 #tooltip {
     position: absolute;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 67d5bbe97..6932fc87d 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -124,8 +124,8 @@ function generateDates($startDate, $endDate) {
 			$i = 0;
 			while ($i < count($dateLabel)) {
 				echo "<div class='tgraph-time' style='width: ".(100/count($dateLabel))."%';'>".
+                        "<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
 						"&nbsp;&nbsp;".$dateLabel[$i].
-						"<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
 					"</div>";
 				$i++;
 			}

From cfa6b2a58ec24b4a7a1fe6ba63f4e053b87c41f8 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 15 Apr 2024 14:05:38 +0800
Subject: [PATCH 21/48] Update details on hover

Added datetime details on hover. And changed the format used for datetime to remove leading zeroes.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/trends/tgraph_report.php | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 6932fc87d..87106877e 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -64,8 +64,8 @@
 	function generateDates($startDate, $endDate) {
 		$dates = array();
 	
-		$start = new DateTime(date("Y-m-d H:i:s",$startDate));
-		$end = new DateTime(date("Y-m-d H:i:s",$endDate));
+		$start = new DateTime(date("Y-m-d G:i:s",$startDate));
+		$end = new DateTime(date("Y-m-d G:i:s",$endDate));
 		$end->modify('-1 days');
 		$interval = $start->diff($end);
 		$daysDifference = $interval->days;
@@ -107,10 +107,15 @@ function generateDates($startDate, $endDate) {
 			echo "<div class='tgraph-row'>";
 					echo "<div class='tgraph-block-line'>";
 						$bars = count($data[$y])-1;
-						for($z=$bars; $z>=0; $z--){
+						$lastDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
+                        $startDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
+						for($z=$bars; $z>=0; $z--){ 
 							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
-							$description = str_replace('\'', '', $data[$y][$z]['short']);
-							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $description . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+                            $description = str_replace('\'', '', $data[$y][$z]['short']);
+                            $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                            $dataValue = "<br />".$startDateTime->format('M d, Y g:i A')." to ".$lastDateTime->format('M d, Y g:i A') . "<br />" . $description;
+							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $dataValue . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
+                            $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
 						}
 					echo "</div>";
 			echo "</div>";

From f5324608b99b9d4c11509bbef22f0ef84a588216 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Sun, 21 Apr 2024 12:54:07 +0800
Subject: [PATCH 22/48] Update availability test

This commit changes the rgb component to hexadecimal color code.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 features/availability.feature | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 148c2dddc..23e87d589 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -604,6 +604,5 @@ 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"

From dfe3b584b7ad9932f45c5349f8fb8718e17d623c Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 22 Apr 2024 09:57:56 +0800
Subject: [PATCH 23/48] Revert "Update availability test"

This reverts commit 0f0305f8c66d78e64cf59915de0534364b2ec679.
---
 features/availability.feature | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 23e87d589..148c2dddc 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -604,5 +604,6 @@ 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 "#a19e95"
-		And I should see trend graph have background color "#aade53"
+		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)"

From a783c547079f67ba1e7526f19af5fa6acda116da Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 22 Apr 2024 09:59:10 +0800
Subject: [PATCH 24/48] Remove checks for transparent object

---
 features/availability.feature | 1 -
 1 file changed, 1 deletion(-)

diff --git a/features/availability.feature b/features/availability.feature
index 148c2dddc..acc103629 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -605,5 +605,4 @@ Feature: Availability reports
 		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)"

From 9085178c440635d7ae6818c9f9a137e45f6c7bf0 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 22 Apr 2024 11:59:05 +0800
Subject: [PATCH 25/48] Update test to hexadecimal color code

---
 features/availability.feature | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index acc103629..23e87d589 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -604,5 +604,5 @@ 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 "rgb(170, 222, 83)"
+		And I should see trend graph have background color "#a19e95"
+		And I should see trend graph have background color "#aade53"

From f63917b0d2a746039a2777a8e8be0f8c0d7998e1 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 25 Apr 2024 16:36:50 +0800
Subject: [PATCH 26/48] Added Scaling function

This commit displays the trend scale for trends bar with a short
duration. When scaling, the short bar is changed to black then
creates a smaller bar above it. Colored bars must display details
when hovered.

Unused css file was removed. Indentions were fixed. And necessary
variables were created.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/reports/css/tgraph.css  | 100 ------------
 .../reports/views/reports/css/trendgraph.css  |  45 ++++--
 .../reports/views/trends/tgraph_report.php    | 149 ++++++++++--------
 3 files changed, 119 insertions(+), 175 deletions(-)
 delete mode 100644 modules/reports/views/reports/css/tgraph.css

diff --git a/modules/reports/views/reports/css/tgraph.css b/modules/reports/views/reports/css/tgraph.css
deleted file mode 100644
index e0fc315cd..000000000
--- a/modules/reports/views/reports/css/tgraph.css
+++ /dev/null
@@ -1,100 +0,0 @@
-
-.tgraph-container {
-}
-
-.tgraph {
-	position: relative;
-	width: 84%;
-	height: 40px;
-	color: #333;
-	float: left;
-	padding-left: 1%;
-	font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
-}
-
-.tgraph-hoverbox {
-	border: 1px solid #999;
-	border-radius: 4px;
-	display: none;
-	z-index: 9999;
-	box-shadow: inset 2px 2px 5px #fff;
-	background: transparent;
-	background: rgba(255, 255, 255, 0.8);
-	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)";
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
-	zoom: 1;
-
-	position: absolute;
-	color: #333;
-	max-width: 180px;
-	font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
-	padding: 5px;
-	text-shadow: 1px 1px 1px #fff;
-}
-
-.tgraph .tgraph-time {
-	float: left;
-	text-align: left;
-	font-size: 7pt;
-}
-
-.tgraph .tgraph-time-line {
-	margin: 0 0;
-	border-left: 1px solid #000;
-	opacity: 0.1;
-	z-index: 0;
-	width: 0;
-}
-
-.tgraph-label {
-	float: left;
-	width: 15%;
-	padding: 10px 0 0 0;
-	min-height: 30px;
-	font-size: 8pt;
-	text-align: right;
-}
-
-.tgraph .tgraph-subline {
-	position: absolute;
-	margin-top: -12px;
-	outline: 1px solid #fff;
-	height: 10px;
-	min-width: 3px;
-}
-
-.tgraph .tgraph-subline .tgraph-block {
-	height: 10px;
-}
-
-.tgraph .tgraph-note:hover {
-	background: #bbb;
-	z-index: 1;
-}
-
-.tgraph .tgraph-block-line {
-	margin: 12px 0;
-	position: relative;
-	width: 100%;
-}
-
-.tgraph .tgraph-block .tgraph-block {
-	height: 8px;
-}
-
-.tgraph .tgraph-block {
-	height: 16px;
-	z-index: 0;
-	position: absolute;
-}
-
-.tgraph-hoverbox b {
-	display: inline-block;
-	margin: 2px 0px;
-}
-
-.tgraph-hoverbox small {
-	display: inline-block;
-	margin: 2px 0px;
-	font-size: 7pt;
-}
diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index 7e3280100..ebe13f908 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -11,8 +11,8 @@
     padding-left: 1%;
     font: normal normal 8pt Helvetica, Arial, Verdana, sans-serif;
 }
-.tgraph-block-line {
-    margin: 1% 0;
+.tgraph-blockline {
+    margin: 2px 0;
     position: relative;
     width: 100%;
     overflow: hidden;
@@ -25,12 +25,44 @@
     display: flex;        
     justify-content: space-around;
 }
+.tgraph-blockline .bar {
+    height: 20px;
+    margin: 0;
+    color: white;
+}
+.tgraph-sub-blockline {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    align-items: center;
+    direction: rtl;
+    display: -webkit-box; 
+    display: -moz-box;    
+    display: -ms-flexbox;  
+    display: -webkit-flex; 
+    display: flex;        
+    justify-content: space-around;
+}
+.tgraph-sub-blockline .bar {
+	position: relative;
+	margin: 0 auto;
+	height: 10px;
+	min-width: 45px;
+    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-time-line {
+.tgraph-timeline {
     margin: 0 0;
     border-left: 1px solid #000;
     opacity: 0.1;
@@ -45,13 +77,6 @@
     font-size: 8pt;
     text-align: right;
 }
-.bar {
-    height: 20px;
-    background-color: #007bff;
-    margin: 0;
-    color: white;
-    justify-content: flex-end;
-}
 #tooltip {
     position: absolute;
     background: #fff;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 87106877e..0f8748aa3 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -6,15 +6,14 @@
     $outputs = array();
     $outputs_r = array();
 
-    foreach ($graph_pure_data as $service => $statechanges) {
-
+    foreach($graph_pure_data as $service => $statechanges) {
         $labels[] = $service;
         $servicerow = array();
 
-        for ($i = 0; $i < count($statechanges); $i++) {
+        for($i = 0; $i < count($statechanges); $i++) {
             $cur_out = $statechanges[$i]['output'];
 
-            if( isset( $outputs_r[$cur_out] ) ) {
+            if(isset($outputs_r[$cur_out])) {
                 $output_id = $outputs_r[$cur_out];
             } else {
                 $output_id = count($outputs);
@@ -26,7 +25,7 @@
                 $statechanges[$i]['duration'], /* 0: duration */
                 $statechanges[$i]['state'], /* 1: state */
                 $output_id /* 2: short */
-                );
+            );
 
             switch(strtolower($obj_type)) {
                 case 'host':
@@ -39,126 +38,146 @@
                     $state_name = 'N/A';
             }
             $state_names[$statechanges[$i]['state']] = ucfirst($state_name);
-
         }
         $rawdata[] = $servicerow;
-
     }
     $colors = reports::_state_color_table($obj_type);
 
     $data = array();
-    for ($i = 0; $i < count($rawdata); $i++) {
+    for($i = 0; $i < count($rawdata); $i++) {
         $data[$i] = array();
         for ($j = 0; $j < count($rawdata[$i]); $j++) {
             $data[$i][$j] = array(
                 'duration' => $rawdata[$i][$j][0],
                 'label' => $state_names[$rawdata[$i][$j][1]],
-                'short' => $outputs[$rawdata[$i][$j][2]],
+                'short' => str_replace('\'', '', $outputs[$rawdata[$i][$j][2]]),
                 'color' => $colors[$rawdata[$i][$j][1]]
             );
         }
     }
 
 	$lastHost = '';
-
 	function generateDates($startDate, $endDate) {
 		$dates = array();
-	
-		$start = new DateTime(date("Y-m-d G:i:s",$startDate));
-		$end = new DateTime(date("Y-m-d G:i:s",$endDate));
+		$start = new DateTime(date("Y-m-d H:i:s",$startDate));
+		$end = new DateTime(date("Y-m-d H:i:s",$endDate));
 		$end->modify('-1 days');
 		$interval = $start->diff($end);
 		$daysDifference = $interval->days;
-	
+
 		// Calculate the interval depending on the span of days
 		$intervalDays = ($daysDifference <= 7) ? 1 : ceil($daysDifference / 7);
-	
 		// Generate dates based on the calculated interval
-		$currentDate = $start;
-		while ($currentDate <= $end) {
-			$dates[] = $currentDate->format('Y-m-d');
-			$currentDate->modify('+' . $intervalDays . ' days');
+		while($start <= $end) {
+			$dates[] = $start->format('Y-m-d');
+			$start->modify('+' . $intervalDays . ' days');
 		}
-
 		return $dates;
 	}
 
 	$dateLabel = generateDates($graph_start_date, $graph_end_date);
-    $totalInterval = $graph_end_date-$graph_start_date;
+    $totalInterval = $graph_end_date - $graph_start_date;
+    $dateCount = count($dateLabel);
+    $labelCount = count($labels);
 
-	for ($y = 0; $y < count($labels); $y++) {
+	for($y = 0; $y < $labelCount; $y++) {
 		// graph for Y-labels
-		if (mb_strpos($labels[$y], ';')) {
-			$cHost = explode(';', $labels[$y])[0];
-			$cService = explode(';', $labels[$y])[1];
-
-			if ($cHost === $lastHost) {
-				$rowLabel = $cService;
+		if(mb_strpos($labels[$y], ';')) {
+			$Hostname = explode(';', $labels[$y])[0];
+			$Servicename = explode(';', $labels[$y])[1];
+			if ($Hostname === $lastHost) {
+				$rowLabel = $Servicename;
 			} else {
-				$rowLabel = "<strong>".$cHost."</strong>;".$cService;
+				$rowLabel = "<strong>".$Hostname."</strong>;".$Servicename;
 			}
-			$lastHost = $cHost;
+			$lastHost = $Hostname;
 		} else {
 			$rowLabel = "<strong>".$labels[$y]."</strong>";
 		}
 
+        $bars = count($data[$y])-1;
 		echo "<div class='x-item'>";
 			echo "<label class='y-label'>".$rowLabel."</label>";
-			echo "<div class='tgraph-row'>";
-					echo "<div class='tgraph-block-line'>";
-						$bars = count($data[$y])-1;
-						$lastDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
-                        $startDateTime = new DateTime(date("Y-m-d G:i:s", $graph_end_date));
-						for($z=$bars; $z>=0; $z--){ 
-							$barW = ($data[$y][$z]['duration'] / $totalInterval)*100;
-                            $description = str_replace('\'', '', $data[$y][$z]['short']);
-                            $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
-                            $dataValue = "<br />".$startDateTime->format('M d, Y g:i A')." to ".$lastDateTime->format('M d, Y g:i A') . "<br />" . $description;
-							echo "<div class='bar' data-label='" . $data[$y][$z]['label'] . "' data-value='" . $dataValue . "' id='bar' style='width:".round($barW,2)."%; background: ".$data[$y][$z]['color'].";'></div>";
-                            $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
-						}
-					echo "</div>";
+			echo "<div class='tgraph-row'>"; 
+                if($use_scaling) {
+                    $scaleLastDT = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+                    $scaleStartDT =  new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+
+                    echo "<div class='tgraph-sub-blockline'>";
+                        for($z = $bars; $z >= 0; $z--){
+                            $barAve = $data[$y][$z]['duration']/$totalInterval;
+                            $barWidth = round($barAve*100,2);
+                            $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
+                            $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
+
+                            if($barAve < 0.03) {
+                                echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
+
+                                $data[$y][$z]['color'] = "#333";
+                            } else {
+                                echo "<div class='bar-transparent' style='width:".$barWidth."%;'></div>";
+                            }
+                            $scaleLastDT->modify('-'.$data[$y][$z]['duration'].' second');
+                        }
+                    echo "</div>";
+                }
+
+                echo "<div class='tgraph-blockline'>";
+                    $lastDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+                    $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+
+                    for($z = $bars; $z >= 0; $z--){
+                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100, 2);
+                        $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                        $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
+
+                        echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
+                        
+                        $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                    }
+                echo "</div>";
 			echo "</div>";
 		echo "</div>";
 	}
 
+    echo "<div id='tooltip'></div>";
+    echo "<div style='clear: both;'></div>";
+    echo "<label class='y-label'></label>";
+    echo "<div class='tgraph-row'>";
         echo "<div style='clear: both;'></div>";
-		echo "<label class='y-label'></label>
-		<div class='tgraph-row'>";
-			// graph X-labels
-			$i = 0;
-			while ($i < count($dateLabel)) {
-				echo "<div class='tgraph-time' style='width: ".(100/count($dateLabel))."%';'>".
-                        "<div class='tgraph-time-line' style='height: ".(count($labels)*40)."px; margin-top: -".(count($labels)*40)."px;'></div>".
-						"&nbsp;&nbsp;".$dateLabel[$i].
-					"</div>";
-				$i++;
-			}
-		echo "</div>";
-        ?>
+        // graph X-labels
+        $i = 0;
+        while($i < $dateCount) {
+            echo "<div class='tgraph-time' style='width: ".(100/$dateCount)."%';'>".
+                   "<div class='tgraph-timeline' style='height: ".($labelCount*40)."px; margin-top: -".($labelCount*40)."px;'></div>".
+                   "&nbsp;&nbsp;".$dateLabel[$i].
+                 "</div>";
+            $i++;
+        }
+    echo "</div>";
+?>
 
-	<?php if ($included && $skipped) {
-		printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
-	} ?>
+<?php if($included && $skipped) {
+    printf(_("<p>Not showing %d graphs due to being 100%% OK</p>"), $skipped);
+} ?>
 </div>
 
 <script>
+    // JavaScript for hover interaction
     var tooltip = document.getElementById('tooltip');
-    var bars = document.querySelectorAll('.bar');
-    
+    var bars = document.querySelectorAll(".bar");
+
     bars.forEach(function(bar) {
         bar.addEventListener('mouseover', function(e) {
             var label = e.target.getAttribute('data-label');
             var value = e.target.getAttribute('data-value');
             tooltip.style.display = 'block';
-
             tooltip.style.left = (e.pageX + 10) + 'px';
             tooltip.style.top = (e.pageY + 10) + 'px';
             tooltip.innerHTML = '<b>'+ label +'</b>: '+ value;
         });
-
         bar.addEventListener('mouseout', function(e) {
             tooltip.style.display = 'none';
         });
     });
-</script>
\ No newline at end of file
+</script>

From 32e4b62cdcefe9f4bbad32b074ad6be4fae18aa8 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 26 Apr 2024 10:26:09 +0800
Subject: [PATCH 27/48] Adjusted minimum width of a scaled bar

Adjusted the min-width to 10px to avoid overflow in the scaled row.
---
 modules/reports/views/reports/css/trendgraph.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index ebe13f908..f3d4fe431 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -47,7 +47,7 @@
 	position: relative;
 	margin: 0 auto;
 	height: 10px;
-	min-width: 45px;
+	min-width: 10px;
     color: white;
 }
 .tgraph-sub-blockline .bar-transparent {

From 09a5cc539294d36d06ade5251eea96293ef775a8 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 2 May 2024 18:21:07 +0800
Subject: [PATCH 28/48] Added test on re-scalling trends graph

---
 features/availability.feature | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/features/availability.feature b/features/availability.feature
index 23e87d589..a64b5cede 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -606,3 +606,20 @@ Feature: Availability reports
 		And I should see "2013-03-10"
 		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 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"
+		And I check "Include trends graph"
+		And I check "Show trends re-scaling"
+		And I click "Show report"
+		And I should see trend graph have background color "#a19e95"
+		And I should see trend graph have background color "#aade53"
+		And I should see trend graph have background color "transparent"

From 159dafca89432647bd5a4b2ba12a39a2f649dda3 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 10:55:34 +0800
Subject: [PATCH 29/48] Added report data entry on test

---
 features/availability.feature | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/features/availability.feature b/features/availability.feature
index a64b5cede..4d63a7180 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -26,6 +26,7 @@ Feature: Availability reports
 			| System Load         | linux-server2 | check_nrpe!load | 1                     | 1                     |                |
 			| PING                | win-server1   | check_ping      | 1                     | 0                     | pings          |
 			| PING                | win-server2   | check_ping      | 0                     | 1                     | pings          |
+			| PING                | linux-server2 | check_ping      | 1                     | 1                     | pings          |
 		And I have these report data entries:
 			| timestamp           | event_type | flags | attrib | host_name     | service_description | state | hard | retry | downtime_depth | output |
 			| 2013-01-01 12:00:00 |        100 |  NULL |   NULL |               |                     |     0 |    0 |     0 |           NULL | NULL                |
@@ -35,6 +36,10 @@ Feature: Availability reports
 			| 2013-01-01 12:00:03 |        701 |  NULL |   NULL | win-server1   | PING                |     1 |    0 |     1 |           NULL | ERROR - tinky-winky |
 			| 2013-03-09 00:01:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     1 |    0 |     1 |              0 | OK - linux-server1  |
 			| 2013-03-09 00:03:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     0 |    1 |     1 |              0 | OK - linux-server1  |
+			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | ERROR - cannot find linux-server2  |
+			| 2013-03-05 00:03:20 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -617,6 +622,11 @@ Feature: Availability reports
 		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"
 		And I check "Show trends re-scaling"
 		And I click "Show report"

From bde8d39017fa44bfd0e8a303e86000ce188031cc Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 11:13:30 +0800
Subject: [PATCH 30/48] Replace to check scaled color instead

Objects with white color automatically disregards style set to transparent.
---
 features/availability.feature | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 4d63a7180..c11748372 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -39,7 +39,7 @@ Feature: Availability reports
 			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
 			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
 			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | ERROR - cannot find linux-server2  |
-			| 2013-03-05 00:03:20 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -632,4 +632,4 @@ Feature: Availability reports
 		And I click "Show report"
 		And I should see trend graph have background color "#a19e95"
 		And I should see trend graph have background color "#aade53"
-		And I should see trend graph have background color "transparent"
+		And I should see trend graph have background color "#333"

From be1051b6e8431d952fb77be6be91624fb315f42d Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 13:25:28 +0800
Subject: [PATCH 31/48] Change Service Description for test host

---
 features/availability.feature | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index c11748372..d700d6dcb 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -26,7 +26,6 @@ Feature: Availability reports
 			| System Load         | linux-server2 | check_nrpe!load | 1                     | 1                     |                |
 			| PING                | win-server1   | check_ping      | 1                     | 0                     | pings          |
 			| PING                | win-server2   | check_ping      | 0                     | 1                     | pings          |
-			| PING                | linux-server2 | check_ping      | 1                     | 1                     | pings          |
 		And I have these report data entries:
 			| timestamp           | event_type | flags | attrib | host_name     | service_description | state | hard | retry | downtime_depth | output |
 			| 2013-01-01 12:00:00 |        100 |  NULL |   NULL |               |                     |     0 |    0 |     0 |           NULL | NULL                |
@@ -36,10 +35,10 @@ Feature: Availability reports
 			| 2013-01-01 12:00:03 |        701 |  NULL |   NULL | win-server1   | PING                |     1 |    0 |     1 |           NULL | ERROR - tinky-winky |
 			| 2013-03-09 00:01:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     1 |    0 |     1 |              0 | OK - linux-server1  |
 			| 2013-03-09 00:03:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     0 |    1 |     1 |              0 | OK - linux-server1  |
-			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | ERROR - cannot find linux-server2  |
-			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | PING                |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
+			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -628,8 +627,10 @@ Feature: Availability reports
 		And I enter "2013-04-01" into "End date"
 		And I enter "22:32" into "time_end"
 		And I check "Include trends graph"
-		And I check "Show trends re-scaling"
+		Then I check "Show trends re-scaling"
 		And I click "Show report"
+		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 "#a19e95"
 		And I should see trend graph have background color "#aade53"
-		And I should see trend graph have background color "#333"

From 31e523a060466d6871e50399167147aa6a0de147 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 13:57:07 +0800
Subject: [PATCH 32/48] Updated rescalling test

---
 features/availability.feature | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index d700d6dcb..573bd8b67 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -35,10 +35,6 @@ Feature: Availability reports
 			| 2013-01-01 12:00:03 |        701 |  NULL |   NULL | win-server1   | PING                |     1 |    0 |     1 |           NULL | ERROR - tinky-winky |
 			| 2013-03-09 00:01:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     1 |    0 |     1 |              0 | OK - linux-server1  |
 			| 2013-03-09 00:03:00 |        701 |  NULL |   NULL | linux-server1 | PING                |     0 |    1 |     1 |              0 | OK - linux-server1  |
-			| 2013-03-01 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-03 00:01:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
-			| 2013-03-05 00:03:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
-			| 2013-03-05 00:08:00 |        701 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |	
 		And I have activated the configuration
 		And I am logged in as administrator
 
@@ -613,6 +609,12 @@ Feature: Availability reports
 
 	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 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+		| 2013-03-03 00:01:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
+		| 2013-03-05 00:03:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
+		| 2013-03-05 00:08:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     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"
@@ -634,3 +636,4 @@ Feature: Availability reports
 		And I should see "2013-03-21"
 		And I should see trend graph have background color "#a19e95"
 		And I should see trend graph have background color "#aade53"
+		And I should see trend graph have background color "#333"

From 43b4d7a582e031acefa546bb649bd6ac492d1225 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 18:01:59 +0800
Subject: [PATCH 33/48] Updated report data

---
 features/availability.feature | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/features/availability.feature b/features/availability.feature
index 573bd8b67..6c498d64e 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -611,10 +611,11 @@ Feature: Availability reports
 		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 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
-		| 2013-03-03 00:01:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |
-		| 2013-03-05 00:03:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |           NULL | ERROR - cannot find linux-server2  |
-		| 2013-03-05 00:08:00 |        801 |  NULL |   NULL | linux-server2 | System Load         |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+		| 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 00:08: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"

From bac047d9881499baabd173a46e875ae05b56b84c Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 3 May 2024 19:25:30 +0800
Subject: [PATCH 34/48] Removed gray object on test

---
 features/availability.feature | 1 -
 1 file changed, 1 deletion(-)

diff --git a/features/availability.feature b/features/availability.feature
index 6c498d64e..2a2ba8064 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -635,6 +635,5 @@ Feature: Availability reports
 		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 "#a19e95"
 		And I should see trend graph have background color "#aade53"
 		And I should see trend graph have background color "#333"

From ee650474c6f58eab7d5187768b76b4e5f63f7e46 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Sat, 18 May 2024 00:26:27 +0800
Subject: [PATCH 35/48] Adjusted block size

Adjusted the size of displayed block so it captures the whole trend block line.
---
 modules/reports/views/trends/tgraph_report.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 0f8748aa3..c98171b34 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -127,7 +127,7 @@ function generateDates($startDate, $endDate) {
                     $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
 
                     for($z = $bars; $z >= 0; $z--){
-                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100, 2);
+                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*120, 2);
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 

From 7dc6df7931b7df4ab927f0eafbaa42db9f39ec09 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Mon, 20 May 2024 13:53:31 +0800
Subject: [PATCH 36/48] Added check host and hover

This commit added checks on listed host from the generated graph. This also checks if there will be a displayed information upon hovering a bar from the graph.
---
 features/availability.feature | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/features/availability.feature b/features/availability.feature
index 2a2ba8064..0363c0bc2 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -632,8 +632,12 @@ Feature: Availability reports
 		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"

From 94c30fb0177b552712ac0f80ff253020d8e90ed1 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Wed, 22 May 2024 15:29:45 +0800
Subject: [PATCH 37/48] Revert "Adjusted block size"

This reverts commit ee650474c6f58eab7d5187768b76b4e5f63f7e46.
---
 modules/reports/views/trends/tgraph_report.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index c98171b34..0f8748aa3 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -127,7 +127,7 @@ function generateDates($startDate, $endDate) {
                     $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
 
                     for($z = $bars; $z >= 0; $z--){
-                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*120, 2);
+                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100, 2);
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 

From bc1199578477111f4d624fef7cb2ddb0de27725d Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Wed, 22 May 2024 16:24:38 +0800
Subject: [PATCH 38/48] Improve tgraph readability

This commit improves graph readability for short bars.
---
 modules/reports/views/reports/css/trendgraph.css | 1 +
 modules/reports/views/trends/tgraph_report.php   | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index f3d4fe431..ad5e67647 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -27,6 +27,7 @@
 }
 .tgraph-blockline .bar {
     height: 20px;
+    min-width: 3px;
     margin: 0;
     color: white;
 }
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 0f8748aa3..c90a1a253 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -106,7 +106,7 @@ function generateDates($startDate, $endDate) {
                     echo "<div class='tgraph-sub-blockline'>";
                         for($z = $bars; $z >= 0; $z--){
                             $barAve = $data[$y][$z]['duration']/$totalInterval;
-                            $barWidth = round($barAve*100,2);
+                            $barWidth = $barAve*100;
                             $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
                             $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
@@ -127,7 +127,7 @@ function generateDates($startDate, $endDate) {
                     $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
 
                     for($z = $bars; $z >= 0; $z--){
-                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100, 2);
+                        $barWidth = ($data[$y][$z]['duration'] / $totalInterval)*100;
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 

From 71f4150506e38ae3c896b3efa31c94b4410d0beb Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Tue, 28 May 2024 11:52:20 +0800
Subject: [PATCH 39/48] Bar length adjustment

This commit fixes the accuracy of calculated bar length.
---
 modules/reports/views/trends/tgraph_report.php | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index c90a1a253..08033f265 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -105,8 +105,8 @@ function generateDates($startDate, $endDate) {
 
                     echo "<div class='tgraph-sub-blockline'>";
                         for($z = $bars; $z >= 0; $z--){
-                            $barAve = $data[$y][$z]['duration']/$totalInterval;
-                            $barWidth = $barAve*100;
+                            $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
+                            $barWidth = round($barAve*100);
                             $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
                             $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
@@ -127,7 +127,8 @@ function generateDates($startDate, $endDate) {
                     $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
 
                     for($z = $bars; $z >= 0; $z--){
-                        $barWidth = ($data[$y][$z]['duration'] / $totalInterval)*100;
+                        $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
+                        $barWidth = round($barAve*100);
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 

From b72ae467351ea8579692aa78c334eb2e28e4a1f3 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 30 May 2024 12:48:43 +0800
Subject: [PATCH 40/48] Handling number of allowable display limit

This commit handles the number of allowable items to display on the graph. Since displaying graphs should be displayed per percentage, displaying a hundred of items would be the threshold.

Signed-off-by: Eunice Remoquillo <eremoquillo@itrsgroup.com>
---
 modules/reports/views/trends/tgraph_report.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 08033f265..d14b52f58 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -99,6 +99,9 @@ function generateDates($startDate, $endDate) {
 		echo "<div class='x-item'>";
 			echo "<label class='y-label'>".$rowLabel."</label>";
 			echo "<div class='tgraph-row'>"; 
+            if ($bars > 100) {
+                echo "<div> The number of items exceeds the allowable display limit. </div>";
+            } else {
                 if($use_scaling) {
                     $scaleLastDT = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
                     $scaleStartDT =  new DateTime(date("Y-m-d H:i:s", $graph_end_date));
@@ -137,6 +140,7 @@ function generateDates($startDate, $endDate) {
                         $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                     }
                 echo "</div>";
+            }
 			echo "</div>";
 		echo "</div>";
 	}

From cd5fddba9ebed978eebb66e0f5dd65b0c7d8d8b6 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 30 May 2024 17:35:28 +0800
Subject: [PATCH 41/48] Revert "Handling number of allowable display limit"

This reverts commit b72ae467351ea8579692aa78c334eb2e28e4a1f3.
---
 modules/reports/views/trends/tgraph_report.php | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index d14b52f58..08033f265 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -99,9 +99,6 @@ function generateDates($startDate, $endDate) {
 		echo "<div class='x-item'>";
 			echo "<label class='y-label'>".$rowLabel."</label>";
 			echo "<div class='tgraph-row'>"; 
-            if ($bars > 100) {
-                echo "<div> The number of items exceeds the allowable display limit. </div>";
-            } else {
                 if($use_scaling) {
                     $scaleLastDT = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
                     $scaleStartDT =  new DateTime(date("Y-m-d H:i:s", $graph_end_date));
@@ -140,7 +137,6 @@ function generateDates($startDate, $endDate) {
                         $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                     }
                 echo "</div>";
-            }
 			echo "</div>";
 		echo "</div>";
 	}

From d65f2f227a03af36e4e309e43a27faad10d02525 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 30 May 2024 17:37:03 +0800
Subject: [PATCH 42/48] Style adjustments

---
 modules/reports/views/reports/css/trendgraph.css | 3 +--
 modules/reports/views/trends/tgraph_report.php   | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index ad5e67647..7cc377107 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -27,7 +27,6 @@
 }
 .tgraph-blockline .bar {
     height: 20px;
-    min-width: 3px;
     margin: 0;
     color: white;
 }
@@ -48,7 +47,7 @@
 	position: relative;
 	margin: 0 auto;
 	height: 10px;
-	min-width: 10px;
+	min-width: 3px;
     color: white;
 }
 .tgraph-sub-blockline .bar-transparent {
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 08033f265..40a64ff5d 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -106,7 +106,7 @@ function generateDates($startDate, $endDate) {
                     echo "<div class='tgraph-sub-blockline'>";
                         for($z = $bars; $z >= 0; $z--){
                             $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
-                            $barWidth = round($barAve*100);
+                            $barWidth = round($barAve*100,3);
                             $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
                             $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
@@ -128,7 +128,7 @@ function generateDates($startDate, $endDate) {
 
                     for($z = $bars; $z >= 0; $z--){
                         $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
-                        $barWidth = round($barAve*100);
+                        $barWidth = round($barAve*100,3);
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 

From f075fdf726bae673f27c0aac61f53a3ebc50bade Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 30 May 2024 20:48:20 +0800
Subject: [PATCH 43/48] Update trendgraph.css

---
 modules/reports/views/reports/css/trendgraph.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index 7cc377107..f3d4fe431 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -47,7 +47,7 @@
 	position: relative;
 	margin: 0 auto;
 	height: 10px;
-	min-width: 3px;
+	min-width: 10px;
     color: white;
 }
 .tgraph-sub-blockline .bar-transparent {

From 14bd2a6161a5a47e0779d3f2643b50f8ad00c9cb Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 30 May 2024 21:56:04 +0800
Subject: [PATCH 44/48] Update availability.feature

---
 features/availability.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/features/availability.feature b/features/availability.feature
index 0363c0bc2..d3005fa7c 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -615,7 +615,7 @@ Feature: Availability reports
 		| 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 00:08:00 |        801 |  NULL |   NULL | linux-server2 |       		      |     0 |    1 |     1 |              0 | OK - linux-server2  |	
+		| 2013-03-05 00: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"

From a1bfc3b38087fb500ec7d8a7b3dc9add9b16411e Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Thu, 30 May 2024 23:13:50 +0800
Subject: [PATCH 45/48] Update availability.feature

---
 features/availability.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/features/availability.feature b/features/availability.feature
index d3005fa7c..f55e8e62b 100644
--- a/features/availability.feature
+++ b/features/availability.feature
@@ -615,7 +615,7 @@ Feature: Availability reports
 		| 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 00:20:00 |        801 |  NULL |   NULL | linux-server2 |       		      |     0 |    1 |     1 |              0 | OK - 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"

From 82a82e30a7d45ef51dd310e836a528eb28c13054 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 31 May 2024 08:00:02 +0800
Subject: [PATCH 46/48] Updated rounding precision

---
 modules/reports/views/trends/tgraph_report.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 40a64ff5d..1ea892515 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -106,7 +106,7 @@ function generateDates($startDate, $endDate) {
                     echo "<div class='tgraph-sub-blockline'>";
                         for($z = $bars; $z >= 0; $z--){
                             $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
-                            $barWidth = round($barAve*100,3);
+                            $barWidth = round($barAve*100);
                             $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
                             $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
@@ -127,8 +127,8 @@ function generateDates($startDate, $endDate) {
                     $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
 
                     for($z = $bars; $z >= 0; $z--){
-                        $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
-                        $barWidth = round($barAve*100,3);
+                        $barAve = round($data[$y][$z]['duration'] / $totalInterval,5);
+                        $barWidth = round($barAve*100,5);
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 

From 4a857a19a46ec6b326861f2511c878db0a882d47 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 31 May 2024 16:00:33 +0800
Subject: [PATCH 47/48] Displaying slice adjustments

---
 modules/reports/views/reports/css/trendgraph.css |  2 --
 modules/reports/views/trends/tgraph_report.php   | 11 ++++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index f3d4fe431..03485affb 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -16,7 +16,6 @@
     position: relative;
     width: 100%;
     overflow: hidden;
-    align-items: center;
     direction: rtl;
     display: -webkit-box; 
     display: -moz-box;    
@@ -41,7 +40,6 @@
     display: -ms-flexbox;  
     display: -webkit-flex; 
     display: flex;        
-    justify-content: space-around;
 }
 .tgraph-sub-blockline .bar {
 	position: relative;
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 1ea892515..6996df32f 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -106,7 +106,7 @@ function generateDates($startDate, $endDate) {
                     echo "<div class='tgraph-sub-blockline'>";
                         for($z = $bars; $z >= 0; $z--){
                             $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
-                            $barWidth = round($barAve*100);
+                            $barWidth = round($barAve*100,3);
                             $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
                             $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
@@ -125,16 +125,21 @@ function generateDates($startDate, $endDate) {
                 echo "<div class='tgraph-blockline'>";
                     $lastDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
                     $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+                    $totalBar = 0;
 
                     for($z = $bars; $z >= 0; $z--){
-                        $barAve = round($data[$y][$z]['duration'] / $totalInterval,5);
-                        $barWidth = round($barAve*100,5);
+                        $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100,3);
+                        
+                        if($z == 0 && $totalBar < 100) {
+                            $barWidth = round(100 - $totalBar,3);
+                        }
                         $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
                         echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
                         
                         $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                        $totalBar += $barWidth;
                     }
                 echo "</div>";
 			echo "</div>";

From 6a21113ca67e634427a36c88eab67f85d4c298d8 Mon Sep 17 00:00:00 2001
From: Eunice Remoquillo <eremoquillo@itrsgroup.com>
Date: Fri, 31 May 2024 19:16:12 +0800
Subject: [PATCH 48/48] Adjust display items from left to right

---
 .../reports/views/reports/css/trendgraph.css  |  5 +--
 .../reports/views/trends/tgraph_report.php    | 42 +++++++++----------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/modules/reports/views/reports/css/trendgraph.css b/modules/reports/views/reports/css/trendgraph.css
index 03485affb..847f84867 100644
--- a/modules/reports/views/reports/css/trendgraph.css
+++ b/modules/reports/views/reports/css/trendgraph.css
@@ -16,13 +16,12 @@
     position: relative;
     width: 100%;
     overflow: hidden;
-    direction: rtl;
+    direction: ltr;
     display: -webkit-box; 
     display: -moz-box;    
     display: -ms-flexbox;  
     display: -webkit-flex; 
     display: flex;        
-    justify-content: space-around;
 }
 .tgraph-blockline .bar {
     height: 20px;
@@ -34,7 +33,7 @@
     width: 100%;
     overflow: hidden;
     align-items: center;
-    direction: rtl;
+    direction: ltr;
     display: -webkit-box; 
     display: -moz-box;    
     display: -ms-flexbox;  
diff --git a/modules/reports/views/trends/tgraph_report.php b/modules/reports/views/trends/tgraph_report.php
index 6996df32f..6cbd4e130 100644
--- a/modules/reports/views/trends/tgraph_report.php
+++ b/modules/reports/views/trends/tgraph_report.php
@@ -104,41 +104,41 @@ function generateDates($startDate, $endDate) {
                     $scaleStartDT =  new DateTime(date("Y-m-d H:i:s", $graph_end_date));
 
                     echo "<div class='tgraph-sub-blockline'>";
-                        for($z = $bars; $z >= 0; $z--){
-                            $barAve = round($data[$y][$z]['duration'] / $totalInterval,3);
-                            $barWidth = round($barAve*100,3);
-                            $scaleStartDT->modify('-'.$data[$y][$z]['duration'].' second');
-                            $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
-
-                            if($barAve < 0.03) {
-                                echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
-
-                                $data[$y][$z]['color'] = "#333";
-                            } else {
-                                echo "<div class='bar-transparent' style='width:".$barWidth."%;'></div>";
-                            }
-                            $scaleLastDT->modify('-'.$data[$y][$z]['duration'].' second');
+                    for($z = 0; $z <= $bars; $z++){
+                        $barAve = $data[$y][$z]['duration'] / $totalInterval;
+                        $barWidth = round($barAve*100,3);
+                        $scaleLastDT->modify('+'.$data[$y][$z]['duration'].' second');
+                        $dataValue = "<br />".$scaleStartDT->format('M d, Y h:i a')." to ".$scaleLastDT->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
+
+                        if($barAve < 0.03) {
+                            echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
+
+                            $data[$y][$z]['color'] = "#333";
+                        } else {
+                            echo "<div class='bar-transparent' style='width:".$barWidth."%;'></div>";
                         }
+                        $scaleStartDT->modify('+'.$data[$y][$z]['duration'].' second');
+                    }
                     echo "</div>";
                 }
 
                 echo "<div class='tgraph-blockline'>";
-                    $lastDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
-                    $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_end_date));
+                    $lastDateTime = new DateTime(date("Y-m-d H:i:s", $graph_start_date));
+                    $startDateTime = new DateTime(date("Y-m-d H:i:s", $graph_start_date));
                     $totalBar = 0;
 
-                    for($z = $bars; $z >= 0; $z--){
+                    
+                    for($z=0; $z<=$bars; $z++){
                         $barWidth = round(($data[$y][$z]['duration'] / $totalInterval)*100,3);
-                        
-                        if($z == 0 && $totalBar < 100) {
+                        if($z==$bars && $totalBar > 0) {
                             $barWidth = round(100 - $totalBar,3);
                         }
-                        $startDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                        $lastDateTime->modify('+'.$data[$y][$z]['duration'].' second');
                         $dataValue = "<br />".$startDateTime->format('M d, Y h:i a')." to ".$lastDateTime->format('M d, Y h:i a')."<br />".$data[$y][$z]['short'];
 
                         echo "<div class='bar' data-label='".$data[$y][$z]['label']."' data-value='".$dataValue."' id='bar' style='width:".$barWidth."%; background: ".$data[$y][$z]['color'].";'></div>";
                         
-                        $lastDateTime->modify('-'.$data[$y][$z]['duration'].' second');
+                        $startDateTime->modify('+'.$data[$y][$z]['duration'].' second');
                         $totalBar += $barWidth;
                     }
                 echo "</div>";