diff --git a/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.html b/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.html
index b71eb16f..a246da9c 100644
--- a/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.html
+++ b/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.html
@@ -16,7 +16,7 @@
             <small>
                 <fa-icon *ngIf="gasRemainingDifference > 0" [icon]="faArrowLeft" class="text-success"/>
                 <strong *ngIf="gasRemainingDifference != 0">
-                    {{Math.abs(gasRemainingDifference) | number:'1.0-0' }}
+                    {{ absoluteRemainingDifference | number:'1.0-0' }}
                 </strong>
                 <fa-icon *ngIf="gasRemainingDifference < 0" [icon]="faArrowRight" class="text-success"/>
                 <fa-icon *ngIf="gasRemainingDifference === 0" [icon]="faMinus"/>
@@ -41,7 +41,7 @@
             <small>
                 <fa-icon *ngIf="gasReserveDifference > 0" [icon]="faArrowLeft" class="text-success"/>
                 <strong *ngIf="gasReserveDifference != 0">
-                    {{Math.abs(gasReserveDifference) | number:'1.0-0' }}
+                    {{ absoluteReserveDifference | number:'1.0-0' }}
                 </strong>
                 <fa-icon *ngIf="gasReserveDifference < 0" [icon]="faArrowRight" class="text-success"/>
                 <fa-icon *ngIf="gasReserveDifference === 0" [icon]="faMinus"/>
@@ -63,17 +63,17 @@
     </div>
     <div class="progress gas-bar mt-1 mb-2">
         <div class="reserve-bar rounded-progress"></div>
-        <div class="combined_wrapper" [ngClass]="{'flip': gasRemainingDifference > 0}" >
+        <div class="combined_wrapper" [ngClass]="{'flip': remainingRight }" >
             <div role="progressbar"
                  class="progress-bar rounded-progress bg-primary"
                  [style.width]="gasRemainingPercentageDifference + '%'">
-                {{Math.abs(gasRemainingDifference) | number:'1.0-0' }}</div>
+                {{ absoluteRemainingDifference | number:'1.0-0' }}</div>
         </div>
-        <div class="combined_wrapper" [ngClass]="{'flip': gasReserveDifference > 0}" >
+        <div class="combined_wrapper" [ngClass]="{'flip': reserveRight }" >
             <div role="progressbar"
                  class="progress-bar rounded-progress bg-warning "
                  [style.width]="gasReservePercentageDifference + '%'">
-                {{Math.abs(gasReserveDifference) | number:'1.0-0' }}</div>
+                {{ absoluteReserveDifference | number:'1.0-0' }}</div>
         </div>
     </div>
 </div>
diff --git a/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.ts b/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.ts
index 5f4fff1c..0982a3ea 100644
--- a/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.ts
+++ b/projects/planner/src/app/diff/gasconsumed/diff-gas-consumed/tank-chart/diff-gas-consumed-tank-chart.component.ts
@@ -66,10 +66,26 @@ export class GasConsumedDifferenceTankComponent implements OnChanges{
     public get gasRemainingDifference(): number {
         return this.units.fromLiter(this.profileAGasRemaining - this.profileBGasRemaining);
     }
+
+    public get absoluteRemainingDifference(): number {
+        return Math.abs(this.gasRemainingDifference);
+    }
     public get gasReserveDifference(): number {
         return this.units.fromLiter(this.profileACombinedGas.reserve - this.profileBCombinedGas.reserve);
     }
 
+    public get absoluteReserveDifference(): number {
+        return Math.abs(this.gasReserveDifference);
+    }
+
+    public get reserveRight(): boolean {
+        return this.gasReserveDifference > 0;
+    }
+
+    public get remainingRight(): boolean {
+        return this.gasRemainingDifference > 0;
+    }
+
     public get gasRemainingPercentageDifference(): number {
         const totalGasRemaining = this.profileAGasRemaining + this.profileBGasRemaining;
 
@@ -102,14 +118,10 @@ export class GasConsumedDifferenceTankComponent implements OnChanges{
         return this.profileComparatorService.profileB.title;
     }
 
-
-    ngOnChanges(changes: SimpleChanges) {
+    public ngOnChanges(changes: SimpleChanges) {
         if (changes.profileACombinedGas || changes.profileBCombinedGas) {
             this.profileAGasRemaining = this.profileACombinedGas.total - this.profileACombinedGas.consumed;
             this.profileBGasRemaining = this.profileBCombinedGas.total - this.profileBCombinedGas.consumed;
         }
     }
-
-    // TODO why Math?
-    protected readonly Math = Math;
 }