From 3b0e3865ca49773fcc9bf4f38191c8b9e9c44b3e Mon Sep 17 00:00:00 2001
From: xonx <119700621+xonx4l@users.noreply.github.com>
Date: Fri, 1 Dec 2023 09:45:47 +0530
Subject: [PATCH 1/2] Update view.component.html

issue-:#30
---
 src/common/trajectories/view/view.component.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common/trajectories/view/view.component.html b/src/common/trajectories/view/view.component.html
index f76a3dd8..dbb47526 100644
--- a/src/common/trajectories/view/view.component.html
+++ b/src/common/trajectories/view/view.component.html
@@ -86,6 +86,8 @@ <h4 class="modal-title">{{'trajectories.view.change-color-header' | translate}}<
             tooltip="{{'trajectories.view.graph-ticks-tooltip' | translate}}" (onToggled)="onAxisTypeChanged($event)">
           </n52-string-toggler>
         </div>
+        <button type="button" class="btn btn-light" (click)="zoomOut()">Zoom Out
+        </button>
         <hr>
         <div class="chart-control">
           <n52-bool-toggler [value]="graphOptions.dotted" icon="line-chart"

From 7e1358ae33be89a75c489355a5c4d08a2c4b468c Mon Sep 17 00:00:00 2001
From: xonx <119700621+xonx4l@users.noreply.github.com>
Date: Fri, 1 Dec 2023 10:03:03 +0530
Subject: [PATCH 2/2] Update view.component.ts

ISSUE:#30
---
 src/common/trajectories/view/view.component.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/common/trajectories/view/view.component.ts b/src/common/trajectories/view/view.component.ts
index 8b57d1c2..9aae62b2 100644
--- a/src/common/trajectories/view/view.component.ts
+++ b/src/common/trajectories/view/view.component.ts
@@ -28,6 +28,23 @@ export class TrajectoriesViewComponent implements OnInit {
 
     public zoomToGeometry: GeoJSON.LineString;
 
+    public zoomOut() {
+       // Calculate the new timespan by reducing the current timespan
+       const newTimespan = new Timespan(
+         this.timespan.from - (this.timespan.to - this.timespan.from) / 2,
+           this.timespan.to + (this.timespan.to - this.timespan.from) / 2
+    );
+
+       // Fetch new data based on the updated timespan
+        this.servicesConnector.getDatasetData(this.trajectory, newTimespan).subscribe(
+          data => {
+        this.graphData = data.values;
+        this.timespan = new Timespan(newTimespan.from, newTimespan.to);
+        this.selectedTimespan = new Timespan(newTimespan.from, newTimespan.to);
+        }
+      );
+   }
+
     public timespan: Timespan;
 
     public datasetIds: Array<string>;