From 9a3d0425b32e26c28369ecccb334a6c60da0e8b4 Mon Sep 17 00:00:00 2001
From: Lars Saalbach <lars.saalbach@googlemail.com>
Date: Sun, 10 Nov 2024 13:19:42 +0100
Subject: [PATCH] #837 - We changed to more filter pipes and reduced get
 preparation calls for change detection

---
 .../brew-detail/brew-detail.component.html    | 256 +++++++++---------
 .../brew/brew-detail/brew-detail.component.ts |  20 +-
 .../brew/brew-flow/brew-flow.component.html   |  17 +-
 src/app/brew/brew-flow/brew-flow.component.ts |  16 ++
 .../brew-information.component.html           |   2 +-
 .../brew-brewing-graph.component.html         |  18 +-
 .../brew-brewing-graph.component.ts           |   7 +
 .../brew-brewing/brew-brewing.component.html  |   6 +-
 .../brew-brewing/brew-brewing.component.ts    |   3 +
 src/enums/brews/brewFunctionPipe.ts           |   5 +
 src/pipes/brew/brewFunction.ts                |  23 +-
 11 files changed, 220 insertions(+), 153 deletions(-)

diff --git a/src/app/brew/brew-detail/brew-detail.component.html b/src/app/brew/brew-detail/brew-detail.component.html
index f1b0c63a..80314135 100644
--- a/src/app/brew/brew-detail/brew-detail.component.html
+++ b/src/app/brew/brew-detail/brew-detail.component.html
@@ -19,146 +19,146 @@
 <!--We need to set editActive here aswell, because this will destroy 'everything' else we sometimes have the issue on android that plotly does not render the lines on the first time -->
 <ion-content *ngIf="loaded && editActive === false">
 
-  <ion-card *ngIf=" showSectionBeforeBrew()" class="popover"
+  <ion-card *ngIf="showSectionBeforeBrew()" class="popover"
     style="display:flex; flex-direction: column;">
 
     <ion-item lines="none">
       <span class="ion-title ion-padding-top">{{"BREW_HEADER_BEFORE_BREW" | translate }}</span>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.grind_size,
-                      data.getPreparation().manage_parameters.grind_size,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.grind_size,
-                      data.getPreparation().brew_order.before.grind_size,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.grind_size,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.grind_size,
+                      choosenPreparation.brew_order.before.grind_size,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_GRIND_SIZE" | translate}}:</h2>
         <h3>{{data.grind_size}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.grind_weight,
-                      data.getPreparation().manage_parameters.grind_weight,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.grind_weight,
-                      data.getPreparation().brew_order.before.grind_weight,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.grind_weight,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.grind_weight,
+                      choosenPreparation.brew_order.before.grind_weight,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_GRIND_WEIGHT" | translate}}:</h2>
         <h3>{{data.grind_weight}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.brew_temperature,
-                      data.getPreparation().manage_parameters.brew_temperature,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.brew_temperature,
-                      data.getPreparation().brew_order.before.brew_temperature,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.brew_temperature,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.brew_temperature,
+                      choosenPreparation.brew_order.before.brew_temperature,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_BREW_TEMPERATURE" | translate}}:</h2>
         <h3>{{data.brew_temperature}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.method_of_preparation,
-                      data.getPreparation().manage_parameters.method_of_preparation,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.method_of_preparation,
-                      data.getPreparation().brew_order.before.method_of_preparation,
-                      data.getPreparation().use_custom_parameters])" detail="true" (click)="detailPreparation()">
+                      choosenPreparation.manage_parameters.method_of_preparation,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.method_of_preparation,
+                      choosenPreparation.brew_order.before.method_of_preparation,
+                      choosenPreparation.use_custom_parameters])" detail="true" (click)="detailPreparation()">
       <ion-label>
         <h2>{{"BREW_DATA_PREPARATION_METHOD" | translate}}:</h2>
-        <h3>{{data.getPreparation().name}}</h3>
+        <h3>{{choosenPreparation.name}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.bean_type,
-                      data.getPreparation().manage_parameters.bean_type,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.bean_type,
-                      data.getPreparation().brew_order.before.bean_type,
-                      data.getPreparation().use_custom_parameters])" detail="true" (click)="detailBean()">
+                      choosenPreparation.manage_parameters.bean_type,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.bean_type,
+                      choosenPreparation.brew_order.before.bean_type,
+                      choosenPreparation.use_custom_parameters])" detail="true" (click)="detailBean()">
       <ion-label>
         <h2>{{"BREW_DATA_BEAN_TYPE" | translate}}:</h2>
         <h3>{{data.getBean().name}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="data.getCalculatedBeanAge()>-1" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.bean_type,
-                      data.getPreparation().brew_order.before.bean_type,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.brew_order.before.bean_type,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_INFORMATION_BEAN_AGE" | translate}}:</h2>
-        <h3>{{data.getCalculatedBeanAge()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_CALCULATED_BEAN_AGE}}</h3>
       </ion-label>
     </ion-item>
     <ion-item [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.bean_type,
-                      data.getPreparation().brew_order.before.bean_type,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.brew_order.before.bean_type,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_INFORMATION_BREW_RATIO" | translate}}:</h2>
-        <h3>{{data.getBrewRatio()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.mill,
-                      data.getPreparation().manage_parameters.mill,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.mill,
-                      data.getPreparation().brew_order.before.mill,
-                      data.getPreparation().use_custom_parameters])" detail="true" (click)="detailMill()">
+                      choosenPreparation.manage_parameters.mill,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.mill,
+                      choosenPreparation.brew_order.before.mill,
+                      choosenPreparation.use_custom_parameters])" detail="true" (click)="detailMill()">
       <ion-label>
         <h2>{{"BREW_DATA_MILL" | translate}}:</h2>
         <h3>{{data.getMill().name}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.mill_speed,
-                      data.getPreparation().manage_parameters.mill_speed,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.mill_speed,
-                      data.getPreparation().brew_order.before.mill_speed,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.mill_speed,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.mill_speed,
+                      choosenPreparation.brew_order.before.mill_speed,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_MILL_SPEED" | translate}}:</h2>
         <h3>{{data.mill_speed}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.mill_timer,
-                      data.getPreparation().manage_parameters.mill_timer,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.mill_timer,
-                      data.getPreparation().brew_order.before.mill_timer,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.mill_timer,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.mill_timer,
+                      choosenPreparation.brew_order.before.mill_timer,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_MILL_TIMER" | translate}}:</h2>
-        <h3>{{data?.getFormattedTotalMillTimerTime()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_MILL_TIME}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.pressure_profile,
-                      data.getPreparation().manage_parameters.pressure_profile,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.pressure_profile,
-                      data.getPreparation().brew_order.before.pressure_profile,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.pressure_profile,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.pressure_profile,
+                      choosenPreparation.brew_order.before.pressure_profile,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_PRESSURE_PROFILE" | translate}}:</h2>
         <h3>{{data.pressure_profile}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.method_of_preparation_tool,
-                      data.getPreparation().manage_parameters.method_of_preparation_tool,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.method_of_preparation_tool,
-                      data.getPreparation().brew_order.before.method_of_preparation_tool,
-                      data.getPreparation().use_custom_parameters])" lines="inset">
+                      choosenPreparation.manage_parameters.method_of_preparation_tool,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.method_of_preparation_tool,
+                      choosenPreparation.brew_order.before.method_of_preparation_tool,
+                      choosenPreparation.use_custom_parameters])" lines="inset">
       <ion-label>
         <h2>{{"BREW_DATA_PREPARATION_METHOD_TOOL" | translate}}:</h2>
         <div class="break-whitespaces"><ion-chip
-            *ngFor="let uuid of data.method_of_preparation_tools">{{data.getPreparationToolName(uuid)}}</ion-chip></div>
+            *ngFor="let uuid of data.method_of_preparation_tools">{{data | brewFunctionPipe: [BREW_FUNCTION_PIPE_ENUM.GET_PREPARATION_TOOL_NAME,uuid] }}</ion-chip></div>
       </ion-label>
 
     </ion-item>
 
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.bean_weight_in,
-                      data.getPreparation().manage_parameters.bean_weight_in,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.bean_weight_in,
-                      data.getPreparation().brew_order.before.bean_weight_in,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.bean_weight_in,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.bean_weight_in,
+                      choosenPreparation.brew_order.before.bean_weight_in,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_BEAN_WEIGHT_IN" | translate}}:</h2>
         <h3>{{data.bean_weight_in}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.vessel,
-                      data.getPreparation().manage_parameters.vessel,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.vessel,
-                      data.getPreparation().brew_order.before.vessel,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.vessel,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.vessel,
+                      choosenPreparation.brew_order.before.vessel,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_VESSEL_NAME" | translate}}:</h2>
         <h3 *ngIf="data.vessel_name !== ''">{{data.vessel_name}}</h3>
@@ -170,10 +170,10 @@ <h3>{{data.vessel_weight}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.water,
-                      data.getPreparation().manage_parameters.water,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.water,
-                      data.getPreparation().brew_order.before.water,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.water,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.before.water,
+                      choosenPreparation.brew_order.before.water,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_WATER" | translate}}:</h2>
         <h3>{{data.getWater().name}}</h3>
@@ -190,18 +190,18 @@ <h3>{{data.getWater().name}}</h3>
     </ion-item>
 
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.brew_temperature_time,
-                      data.getPreparation().manage_parameters.brew_temperature_time,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_temperature_time,
-                      data.getPreparation().brew_order.while.brew_temperature_time,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.brew_temperature_time,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_temperature_time,
+                      choosenPreparation.brew_order.while.brew_temperature_time,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{'BREW_DATA_TEMPERATURE_TIME' | translate}} / {{'BREW_DATA_SURF_TIME' | translate}}:</h2>
-        <h3>{{data?.getFormattedTotalCoffeeTemperatureTime()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_TEMPERATURE_TIME}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="data.flow_profile" lines="none" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
-                      data.getPreparation().brew_order.while.brew_time,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.brew_order.while.brew_time,
+                      choosenPreparation.use_custom_parameters])">
 
       <ion-grid class="ion-text-center" style="padding-left: 0px; padding-right: 0px; padding-top: 0px;">
         <ion-row class="ion-no-padding">
@@ -252,51 +252,51 @@ <h3>{{data?.getFormattedTotalCoffeeTemperatureTime()}}</h3>
 
     </ion-item>
     <brew-brewing-graph *ngIf='editActive===false && data.flow_profile' [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
-                      data.getPreparation().brew_order.while.brew_time,
-                      data.getPreparation().use_custom_parameters])" #brewBrewingGraphEl [isDetail]='true' [brewComponent]='this' [(data)]='data'></brew-brewing-graph>
+                      choosenPreparation.brew_order.while.brew_time,
+                      choosenPreparation.use_custom_parameters])" #brewBrewingGraphEl [isDetail]='true' [brewComponent]='this' [(data)]='data'></brew-brewing-graph>
 
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.brew_time,
-                      data.getPreparation().manage_parameters.brew_time,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
-                      data.getPreparation().brew_order.while.brew_time,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.brew_time,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
+                      choosenPreparation.brew_order.while.brew_time,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{'BREW_DATA_TIME' | translate}}:</h2>
-        <h3>{{data.getFormattedBrewTime()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_BREW_TIME}}</h3>
       </ion-label>
     </ion-item>
     <ion-item
       *ngIf="((settings | brewFieldVisiblePipe: [settings.manage_parameters.brew_time && settings.manage_parameters.coffee_first_drip_time,
-                      data.getPreparation().manage_parameters.brew_time && data.getPreparation().manage_parameters.coffee_first_drip_time,
-                      data.getPreparation().use_custom_parameters]) &&  data.getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO) || (data.getPreparation().use_custom_parameters &&  data.getPreparation().manage_parameters.coffee_first_drip_time)"
+                      choosenPreparation.manage_parameters.brew_time && choosenPreparation.manage_parameters.coffee_first_drip_time,
+                      choosenPreparation.use_custom_parameters]) &&  choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO) || (choosenPreparation.use_custom_parameters &&  choosenPreparation.manage_parameters.coffee_first_drip_time)"
       [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
-                      data.getPreparation().brew_order.while.brew_time,
-                      data.getPreparation().use_custom_parameters])" lines="full">
+                      choosenPreparation.brew_order.while.brew_time,
+                      choosenPreparation.use_custom_parameters])" lines="full">
       <ion-label>
         <h2>{{'BREW_DATA_CALCULATED_COFFEE_BREW_TIME' | translate}}:</h2>
-        <h3>{{data.getFormattedCoffeeBrewTime()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_COFFEE_BREW_TIME}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.coffee_blooming_time,
-                      data.getPreparation().manage_parameters.coffee_blooming_time,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.coffee_blooming_time,
-                      data.getPreparation().brew_order.while.coffee_blooming_time,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.coffee_blooming_time,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.coffee_blooming_time,
+                      choosenPreparation.brew_order.while.coffee_blooming_time,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_COFFEE_BLOOMING_TIME" | translate}}:</h2>
-        <h3>{{data?.getFormattedTotalCoffeeBloomingTime()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_BLOOMING_TIME}}</h3>
       </ion-label>
     </ion-item>
     <ion-item
       *ngIf="((settings | brewFieldVisiblePipe: [settings.manage_parameters.coffee_first_drip_time,
-                      data.getPreparation().manage_parameters.coffee_first_drip_time,
-                      data.getPreparation().use_custom_parameters]) && data.getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO) || (data.getPreparation().use_custom_parameters &&  data.getPreparation().manage_parameters.coffee_first_drip_time)"
+                      choosenPreparation.manage_parameters.coffee_first_drip_time,
+                      choosenPreparation.use_custom_parameters]) && choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO) || (choosenPreparation.use_custom_parameters &&  choosenPreparation.manage_parameters.coffee_first_drip_time)"
       [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.coffee_first_drip_time,
-                      data.getPreparation().brew_order.while.coffee_first_drip_time,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.brew_order.while.coffee_first_drip_time,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_COFFEE_FIRST_DRIP_TIME" | translate}}:</h2>
-        <h3>{{data?.getFormattedTotalCoffeeFirstDripTime()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_COFFEE_FIRST_DRIP_TIME}}</h3>
       </ion-label>
     </ion-item>
     <div class="last-item"></div>
@@ -308,21 +308,21 @@ <h3>{{data?.getFormattedTotalCoffeeFirstDripTime()}}</h3>
     </ion-item>
     <ion-item
       *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.brew_quantity,
-                      data.getPreparation().manage_parameters.brew_quantity,
-                      data.getPreparation().use_custom_parameters]) && data.getPreparation().style_type !== PREPARATION_STYLE_TYPE.ESPRESSO"
+                      choosenPreparation.manage_parameters.brew_quantity,
+                      choosenPreparation.use_custom_parameters]) && choosenPreparation.style_type !== PREPARATION_STYLE_TYPE.ESPRESSO"
       [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.brew_quantity,
-                      data.getPreparation().brew_order.after.brew_quantity,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.brew_order.after.brew_quantity,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_BREW_QUANTITY" | translate}}:</h2>
         <h3>{{data.brew_quantity}} ({{data.getBrewQuantityTypeName()}})</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.coffee_type,
-                      data.getPreparation().manage_parameters.coffee_type,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.coffee_type,
-                      data.getPreparation().brew_order.after.coffee_type,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.coffee_type,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.coffee_type,
+                      choosenPreparation.brew_order.after.coffee_type,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_COFFEE_TYPE" | translate}}
         </h2>
@@ -330,20 +330,20 @@ <h3>{{data.coffee_type}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.coffee_concentration,
-                      data.getPreparation().manage_parameters.coffee_concentration,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.coffee_concentration,
-                      data.getPreparation().brew_order.after.coffee_concentration,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.coffee_concentration,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.coffee_concentration,
+                      choosenPreparation.brew_order.after.coffee_concentration,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_COFFEE_CONCENTRATION" | translate}}:</h2>
         <h3>{{data.coffee_concentration}}</h3>
       </ion-label>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.rating,
-                      data.getPreparation().manage_parameters.rating,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.rating,
-                      data.getPreparation().brew_order.after.rating,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.rating,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.rating,
+                      choosenPreparation.brew_order.after.rating,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_RATING" | translate }}:</h2>
         <h3>{{data.rating | number : '.0-2'}}</h3>
@@ -351,10 +351,10 @@ <h3>{{data.rating | number : '.0-2'}}</h3>
 
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.brew_beverage_quantity,
-                      data.getPreparation().manage_parameters.brew_beverage_quantity,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.brew_beverage_quantity,
-                      data.getPreparation().brew_order.after.brew_beverage_quantity,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.brew_beverage_quantity,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.brew_beverage_quantity,
+                      choosenPreparation.brew_order.after.brew_beverage_quantity,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_BREW_BEVERAGE_QUANTITY" | translate }}:</h2>
         <h3>{{data.brew_beverage_quantity}}&nbsp;({{data.getBrewBeverageQuantityTypeName()}})</h3>
@@ -362,10 +362,10 @@ <h3>{{data.brew_beverage_quantity}}&nbsp;({{data.getBrewBeverageQuantityTypeName
 
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.tds,
-                      data.getPreparation().manage_parameters.tds,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.tds,
-                      data.getPreparation().brew_order.after.tds,
-                      data.getPreparation().use_custom_parameters])">
+                      choosenPreparation.manage_parameters.tds,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.tds,
+                      choosenPreparation.brew_order.after.tds,
+                      choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_TDS" | translate }}:</h2>
         <h3>{{data.tds}}</h3>
@@ -374,13 +374,13 @@ <h3>{{data.tds}}</h3>
     </ion-item>
 
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.grind_weight && settings.manage_parameters.brew_beverage_quantity && settings.manage_parameters.tds,
-                      data.getPreparation().manage_parameters.grind_weight && data.getPreparation().manage_parameters.brew_beverage_quantity && data.getPreparation().manage_parameters.tds,
-                      data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.tds,
-                      data.getPreparation().brew_order.after.tds,
-                      data.getPreparation().use_custom_parameters])" lines="inset">
+                      choosenPreparation.manage_parameters.grind_weight && choosenPreparation.manage_parameters.brew_beverage_quantity && choosenPreparation.manage_parameters.tds,
+                      choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.tds,
+                      choosenPreparation.brew_order.after.tds,
+                      choosenPreparation.use_custom_parameters])" lines="inset">
       <ion-label>
         <h2>{{"BREW_DATA_CALCULATED_EXTRACTION_YIELD" | translate }}:</h2>
-        <h3>{{data.getExtractionYield()}}</h3>
+        <h3>{{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_EXTRACTION_YIELD}}</h3>
       </ion-label>
       <ion-button *ngIf="data.tds && data.getExtractionYield()" style="margin-left:0px;"
       (click)="showExtractionChart($event)" tabIndex="1" class="big-icon-only" fill="clear" slot="end"
@@ -389,10 +389,10 @@ <h3>{{data.getExtractionYield()}}</h3>
     </ion-button>
     </ion-item>
     <ion-item *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.note,
-                    data.getPreparation().manage_parameters.note,
-                    data.getPreparation().use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.note,
-                    data.getPreparation().brew_order.after.note,
-                    data.getPreparation().use_custom_parameters])">
+                    choosenPreparation.manage_parameters.note,
+                    choosenPreparation.use_custom_parameters])" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.note,
+                    choosenPreparation.brew_order.after.note,
+                    choosenPreparation.use_custom_parameters])">
       <ion-label>
         <h2>{{"BREW_DATA_NOTES" | translate }}:</h2>
         <pre>{{data.note}}</pre>
@@ -405,10 +405,10 @@ <h2>{{"BREW_DATA_NOTES" | translate }}:</h2>
     </ion-item>
 
     <div *ngIf="(settings | brewFieldVisiblePipe: [settings.manage_parameters.attachments,
-                  data.getPreparation().manage_parameters.attachments,
-                  data.getPreparation().use_custom_parameters]) && data?.attachments?.length>0" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.attachments,
-                  data.getPreparation().brew_order.after.attachments,
-                  data.getPreparation().use_custom_parameters])">
+                  choosenPreparation.manage_parameters.attachments,
+                  choosenPreparation.use_custom_parameters]) && data?.attachments?.length>0" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.after.attachments,
+                  choosenPreparation.brew_order.after.attachments,
+                  choosenPreparation.use_custom_parameters])">
       <photo-view [(data)]="data"></photo-view>
     </div>
     <div class="last-item"></div>
diff --git a/src/app/brew/brew-detail/brew-detail.component.ts b/src/app/brew/brew-detail/brew-detail.component.ts
index db41c36e..6d85e3c2 100644
--- a/src/app/brew/brew-detail/brew-detail.component.ts
+++ b/src/app/brew/brew-detail/brew-detail.component.ts
@@ -28,6 +28,9 @@ import { BrewPopoverExtractionComponent } from '../brew-popover-extraction/brew-
 import { BrewBrewingGraphComponent } from '../../../components/brews/brew-brewing-graph/brew-brewing-graph.component';
 import { sleep } from '../../../classes/devices';
 import { ShareService } from '../../../services/shareService/share-service.service';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
+import { Bean } from '../../../classes/bean/bean';
+import { Mill } from '../../../classes/mill/mill';
 
 declare var Plotly;
 @Component({
@@ -51,6 +54,10 @@ export class BrewDetailComponent {
   @ViewChild('brewBrewingGraphEl', { static: false })
   public brewBrewingGraphEl: BrewBrewingGraphComponent;
 
+  public bean: Bean;
+  /**We named it that way, because the graph-componeneted access it aswell **/
+  public choosenPreparation: Preparation;
+  public mill: Mill;
   constructor(
     private readonly modalController: ModalController,
     public uiHelper: UIHelper,
@@ -80,6 +87,10 @@ export class BrewDetailComponent {
     if (this.brew) {
       const copy: IBrew = this.uiHelper.copyData(this.brew);
       this.data.initializeByObject(copy);
+
+      this.bean = this.data.getBean();
+      this.choosenPreparation = this.data.getPreparation();
+      this.mill = this.data.getMill();
     }
     if (this.showCupping()) {
       // Set timeout else element wont be visible
@@ -118,7 +129,7 @@ export class BrewDetailComponent {
   }
 
   public getPreparation(): Preparation {
-    return this.data.getPreparation();
+    return this.choosenPreparation;
   }
   public showSectionAfterBrew(): boolean {
     return this.uiBrewHelper.showSectionAfterBrew(this.getPreparation());
@@ -172,6 +183,9 @@ export class BrewDetailComponent {
     this.editActive = false;
     if (returningBrew) {
       this.data = returningBrew;
+      this.bean = this.data.getBean();
+      this.choosenPreparation = this.data.getPreparation();
+      this.mill = this.data.getMill();
       this.initializeFlowChartOnGraphEl();
     }
   }
@@ -188,7 +202,7 @@ export class BrewDetailComponent {
       .format(formattingStr);
     return formatted;
   }
-  private showCupping(): boolean {
+  public showCupping(): boolean {
     return this.uiBrewHelper.showCupping(this.data);
   }
 
@@ -365,4 +379,6 @@ export class BrewDetailComponent {
     await popover.present();
     await popover.onWillDismiss();
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }
diff --git a/src/app/brew/brew-flow/brew-flow.component.html b/src/app/brew/brew-flow/brew-flow.component.html
index 8718c351..cdc4b5fa 100644
--- a/src/app/brew/brew-flow/brew-flow.component.html
+++ b/src/app/brew/brew-flow/brew-flow.component.html
@@ -12,7 +12,7 @@
           <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('realtime_flow')" *ngIf="smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() && brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS)"
             [outline]="!brewComponent.brewBrewingGraphEl.traces.realtimeFlowTrace?.visible" class="flowreal">{{'BREW_FLOW_WEIGHT_REALTIME' |
             translate}}</ion-chip>
-          <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && this.brew.getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
+          <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
             [outline]="!brewComponent.brewBrewingGraphEl.traces.pressureTrace?.visible" class="pressure">{{'BREW_PRESSURE_FLOW' |
             translate}}</ion-chip>
           <ion-chip (click)="brewComponent.brewBrewingGraphEl.toggleChartLines('temperature')" *ngIf="temperatureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()"
@@ -62,12 +62,13 @@
       <ion-grid class="ion-text-center ion-no-padding brew-information-panel">
         <ion-row style="padding-bottom:5px;">
           <ion-col  *ngIf="smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() && brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS)"
-            size="{{this.getGraphIonColSize()}}" style="padding-right:5px;">
+            size="{{graphIconColSize}}" style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center weight-card" style="height: 100%;">
               <ion-card-header>
                 <div #smartScaleWeightDetail>? g</div>
                 <div #smartScaleWeightSecondDetail *ngIf="smartScaleSupportsTwoWeight()">?g</div>
-                <span style='font-size:16px;'>({{brewComponent.brewBrewingGraphEl.data.getBrewRatio()}})</span>
+                <span style='font-size:16px;'>({{brewComponent.brewBrewingGraphEl.data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}})</span>
+
               </ion-card-header>
               <ion-card-content>
                 <ion-icon name="beanconqueror-scale-outline"></ion-icon>
@@ -75,7 +76,7 @@
             </ion-card>
           </ion-col>
           <ion-col  *ngIf="smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() && brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS)"
-            size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+            size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center flow-card" style="height: 100%;">
               <ion-card-header>
                 <div class='information-tile-no-overflow'><span #smartScaleWeightPerSecondDetail>?</span> g/s</div>
@@ -87,8 +88,8 @@
               </ion-card-content>
             </ion-card>
           </ion-col>
-          <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && this.brew.getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
-            size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+          <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO"
+            size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center pressure-card" style="height: 100%;">
               <ion-card-header>
                 <div #pressureDetail>? bar</div>
@@ -99,7 +100,7 @@
             </ion-card>
           </ion-col>
           <ion-col *ngIf="temperatureDeviceConnected() || brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()"
-                   size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+                   size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center temperature-card" style="height: 100%;">
               <ion-card-header>
                 <div #temperatureDetail>? °C</div>
@@ -110,7 +111,7 @@
             </ion-card>
           </ion-col>
           <ion-col
-            size="{{this.getGraphIonColSize()}}"   style="padding-right:5px;">
+            size="{{graphIconColSize}}"   style="padding-right:5px;">
             <ion-card class="flow-profile ion-text-center timer-card" style="height: 100%;">
               <ion-card-header>
                 <span class='information-tile-no-overflow' #timerElement></span>
diff --git a/src/app/brew/brew-flow/brew-flow.component.ts b/src/app/brew/brew-flow/brew-flow.component.ts
index b6b1fb0d..04e8d2d1 100644
--- a/src/app/brew/brew-flow/brew-flow.component.ts
+++ b/src/app/brew/brew-flow/brew-flow.component.ts
@@ -25,6 +25,7 @@ import { UIAlert } from '../../../services/uiAlert';
 
 import { PreparationDeviceType } from '../../../classes/preparationDevice';
 import { UIHelper } from 'src/services/uiHelper';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
 
 declare var Plotly;
 
@@ -90,6 +91,8 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
   protected readonly PREPARATION_STYLE_TYPE = PREPARATION_STYLE_TYPE;
   protected heightInformationBlock: number = 50;
 
+  public graphIconColSize: number = 2.4;
+  public bluetoothSubscription: Subscription = undefined;
   constructor(
     private readonly modalController: ModalController,
     public readonly uiHelper: UIHelper,
@@ -235,6 +238,13 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
         ) &&
         this.brew.getPreparation().style_type ===
           PREPARATION_STYLE_TYPE.ESPRESSO;
+
+      this.graphIconColSize = this.getGraphIonColSize();
+      this.bluetoothSubscription = this.bleManager
+        .attachOnEvent()
+        .subscribe((_type) => {
+          this.graphIconColSize = this.getGraphIonColSize();
+        });
     }
     setTimeout(() => {
       if (!this.isDetail) {
@@ -444,6 +454,10 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
   }
 
   public async ngOnDestroy() {
+    if (this.bluetoothSubscription) {
+      this.bluetoothSubscription.unsubscribe();
+      this.bluetoothSubscription = undefined;
+    }
     if (this.brewFlowGraphSubscription) {
       this.brewFlowGraphSubscription.unsubscribe();
       this.brewFlowGraphSubscription = undefined;
@@ -492,4 +506,6 @@ export class BrewFlowComponent implements OnDestroy, OnInit {
       BrewFlowComponent.COMPONENT_ID
     );
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }
diff --git a/src/components/brew-information/brew-information.component.html b/src/components/brew-information/brew-information.component.html
index a4d3fd08..16ad8c6d 100644
--- a/src/components/brew-information/brew-information.component.html
+++ b/src/components/brew-information/brew-information.component.html
@@ -219,7 +219,7 @@
                 <ion-label class='card-headline'>{{ "BREW_DATA_PREPARATION_METHOD_TOOL" | translate }}</ion-label>
                 <div>
                   <ion-chip
-                    *ngFor='let uuid of brew?.method_of_preparation_tools;let i=index;'>{{ brew?.getPreparationToolName(uuid) }}
+                    *ngFor='let uuid of brew?.method_of_preparation_tools;let i=index;'>{{brew | brewFunctionPipe: [BREW_FUNCTION_PIPE_ENUM.GET_PREPARATION_TOOL_NAME,uuid] }}
                   </ion-chip>
                 </div>
               </ion-col>
diff --git a/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.html b/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.html
index 86e8e0d7..203bbdc4 100644
--- a/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.html
+++ b/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.html
@@ -1,7 +1,7 @@
 
 <ion-item [hidden]="shallFlowProfileBeHidden()" [style.order]="(settings | brewFieldOrderPipe: [settings.brew_order.while.brew_time,
-                      data.getPreparation().brew_order.while.brew_time,
-                      data.getPreparation().use_custom_parameters])" class="ion-padding-bottom-half" lines="none">
+                      brewComponent.choosenPreparation.brew_order.while.brew_time,
+                      brewComponent.choosenPreparation.use_custom_parameters])" class="ion-padding-bottom-half" lines="none">
   <div class="ion-text-center" style="width:100%">
     <ion-chip (click)="toggleChartLines('weight')" *ngIf="
     smartScaleConnected() ||
@@ -18,7 +18,7 @@
     || (isDetail === true && this.traces.weightTrace?.x?.length >0)"
               [outline]="!this.traces.realtimeFlowTrace?.visible" class="flowreal">{{'BREW_FLOW_WEIGHT_REALTIME' |
       translate}}</ion-chip>
-    <ion-chip (click)="toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() && getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO) ||
+    <ion-chip (click)="toggleChartLines('pressure')" *ngIf="(pressureDeviceConnected() && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO) ||
     ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected())
     || (isDetail === true && this.traces.pressureTrace?.x?.length >0)"
               [outline]="!this.traces.pressureTrace?.visible" class="pressure">{{'BREW_PRESSURE_FLOW' | translate}}</ion-chip>
@@ -40,20 +40,20 @@
 <ion-item [hidden]="shallFlowProfileBeHidden()" *ngIf='isDetail ===false' lines="none">
   <ion-grid class="ion-text-center ion-no-padding brew-information-panel">
     <ion-row style="padding-bottom:5px;">
-      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{this.getGraphIonColSize()}}"
+      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{graphIconColSize}}"
                style="padding-right:5px;">
         <ion-card class="flow-profile ion-text-center weight-card" style="height: 100%;">
           <ion-card-header>
             <div #smartScaleWeight>? g</div>
             <div #smartScaleSecondWeight *ngIf="smartScaleSupportsTwoWeight()">?g</div>
-            <div class='information-tile-no-overflow'>({{data.getBrewRatio()}})</div>
+            <div class='information-tile-no-overflow'>({{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}})</div>
           </ion-card-header>
           <ion-card-content>
             <ion-icon name="beanconqueror-scale-outline"></ion-icon>
           </ion-card-content>
         </ion-card>
       </ion-col>
-      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{this.getGraphIonColSize()}}"
+      <ion-col *ngIf='(smartScaleConnected() || ( brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected() &&  brewComponent?.brewBrewingPreparationDeviceEl?.getPreparationDeviceType() === PREPARATION_DEVICE_TYPE_ENUM.METICULOUS))' size="{{graphIconColSize}}"
                style="padding-right:5px;">
         <ion-card class="flow-profile ion-text-center flow-card" style="height: 100%;">
           <ion-card-header>
@@ -66,8 +66,8 @@
           </ion-card-content>
         </ion-card>
       </ion-col>
-      <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() ||  brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && getPreparation().style_type === PREPARATION_STYLE_TYPE.ESPRESSO" style="padding-right:5px;"
-               size="{{this.getGraphIonColSize()}}">
+      <ion-col (click)="resetPressure()" *ngIf="(pressureDeviceConnected() ||  brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()) && brewComponent.choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO" style="padding-right:5px;"
+               size="{{graphIconColSize}}">
         <ion-card class="flow-profile ion-text-center pressure-card" style="height: 100%;">
           <ion-card-header>
             <div #pressure>? bar</div>
@@ -78,7 +78,7 @@
         </ion-card>
       </ion-col>
       <ion-col *ngIf="temperatureDeviceConnected() ||  brewComponent?.brewBrewingPreparationDeviceEl?.preparationDeviceConnected()"
-               size="{{this.getGraphIonColSize()}}">
+               size="{{graphIconColSize}}">
         <ion-card class="flow-profile ion-text-center temperature-card" style="height: 100%;">
           <ion-card-header>
             <div #temperature>? °C</div>
diff --git a/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.ts b/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.ts
index 1eef60de..bde89cfd 100644
--- a/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.ts
+++ b/src/components/brews/brew-brewing-graph/brew-brewing-graph.component.ts
@@ -65,6 +65,7 @@ import { TextToSpeechService } from '../../../services/textToSpeech/text-to-spee
 import { SanremoYOUDevice } from '../../../classes/preparationDevice/sanremo/sanremoYOUDevice';
 import { SanremoYOUMode } from '../../../enums/preparationDevice/sanremo/sanremoYOUMode';
 import { GraphHelperService } from '../../../services/graphHelper/graph-helper.service';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
 
 declare var Plotly;
 
@@ -162,6 +163,8 @@ export class BrewBrewingGraphComponent implements OnInit {
   public textToSpeechWeightInterval: any = undefined;
   public textToSpeechTimerInterval: any = undefined;
 
+  public graphIconColSize: number = 2;
+
   constructor(
     private readonly platform: Platform,
     private readonly bleManager: CoffeeBluetoothDevicesService,
@@ -287,6 +290,7 @@ export class BrewBrewingGraphComponent implements OnInit {
           }
           // If scale disconnected, sometimes the timer run but the screen was not refreshed, so maybe it helpes to detect the change.
           setTimeout(() => {
+            this.graphIconColSize = this.getGraphIonColSize();
             this.checkChanges();
           }, 200);
           this.brewComponent?.brewBrewingPreparationDeviceEl?.checkChanges();
@@ -532,6 +536,7 @@ export class BrewBrewingGraphComponent implements OnInit {
       timeout = 1000;
     }
     setTimeout(() => {
+      this.graphIconColSize = this.getGraphIonColSize();
       try {
         Plotly.purge(this.profileDiv.nativeElement);
       } catch (ex) {}
@@ -3863,4 +3868,6 @@ export class BrewBrewingGraphComponent implements OnInit {
     }
     return false;
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }
diff --git a/src/components/brews/brew-brewing/brew-brewing.component.html b/src/components/brews/brew-brewing/brew-brewing.component.html
index 107e3469..5d78e597 100644
--- a/src/components/brews/brew-brewing/brew-brewing.component.html
+++ b/src/components/brews/brew-brewing/brew-brewing.component.html
@@ -298,7 +298,7 @@
         <ion-item class="ion-no-margin-important" lines='none'>
           <ion-label id='brew_quantity' position="stacked">
             <h2>{{"BREW_DATA_BREW_QUANTITY" | translate}}</h2>
-            <p style="top: -7px; position: relative;">({{data.getBrewRatio()}} , {{data.getGramsPerLiter()}})</p>
+            <p style="top: -7px; position: relative;">({{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}} , {{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_GRAMS_PER_LITER}})</p>
           </ion-label>
           <ion-input aria-labelledby='brew_quantity' [(ngModel)]="data.brew_quantity" inputmode="decimal"
                      placeholder="{{'BREW.PLACE_HOLDER.BREW_DATA_BREW_QUANTITY' | translate}}" prevent-characters
@@ -403,7 +403,7 @@ <h2>{{"BREW_DATA_BREW_QUANTITY" | translate}}</h2>
               <h2>{{"BREW_DATA_BREW_BEVERAGE_QUANTITY" | translate}}</h2>
               <p style="top: -7px; position: relative;"
                  *ngIf="choosenPreparation.style_type === PREPARATION_STYLE_TYPE.ESPRESSO || (data.brew_quantity <=0 && data.brew_beverage_quantity >0)">
-                ({{data.getBrewRatio()}} , {{data.getGramsPerLiter()}})</p>
+                ({{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO}} , {{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_GRAMS_PER_LITER}})</p>
             </ion-label>
             <ion-input aria-labelledby='brew_beverage_quantity' [(ngModel)]="data.brew_beverage_quantity" inputmode="decimal"
                        placeholder="{{'BREW.PLACE_HOLDER.BREW_DATA_BREW_BEVERAGE_QUANTITY' | translate}}" prevent-characters
@@ -456,7 +456,7 @@ <h2>{{"BREW_DATA_BREW_BEVERAGE_QUANTITY" | translate}}</h2>
                       choosenPreparation.brew_order.after.tds,
                       choosenPreparation.use_custom_parameters])" lines="inset">
     <ion-label>
-      {{'BREW_DATA_CALCULATED_EXTRACTION_YIELD' | translate}}: {{data.getExtractionYield()}}
+      {{'BREW_DATA_CALCULATED_EXTRACTION_YIELD' | translate}}: {{data | brewFunctionPipe: BREW_FUNCTION_PIPE_ENUM.GET_EXTRACTION_YIELD}}
     </ion-label>
     <ion-button *ngIf="data.tds && data.getExtractionYield()" style="margin-left:0px;"
                 (click)="showExtractionChart($event)" tabIndex="1" class="big-icon-only" fill="clear" slot="end"
diff --git a/src/components/brews/brew-brewing/brew-brewing.component.ts b/src/components/brews/brew-brewing/brew-brewing.component.ts
index 39499288..5a90279d 100644
--- a/src/components/brews/brew-brewing/brew-brewing.component.ts
+++ b/src/components/brews/brew-brewing/brew-brewing.component.ts
@@ -76,6 +76,7 @@ import { BrewBrewingPreparationDeviceComponent } from '../brew-brewing-preparati
 import { HapticService } from '../../../services/hapticService/haptic.service';
 import { BrewFlow } from '../../../classes/brew/brewFlow';
 import { Bean } from '../../../classes/bean/bean';
+import { BREW_FUNCTION_PIPE_ENUM } from '../../../enums/brews/brewFunctionPipe';
 
 declare var cordova;
 
@@ -1455,4 +1456,6 @@ export class BrewBrewingComponent implements OnInit, AfterViewInit {
     await popover.present();
     const data = await popover.onWillDismiss();
   }
+
+  protected readonly BREW_FUNCTION_PIPE_ENUM = BREW_FUNCTION_PIPE_ENUM;
 }
diff --git a/src/enums/brews/brewFunctionPipe.ts b/src/enums/brews/brewFunctionPipe.ts
index 5786175e..9e6c1af7 100755
--- a/src/enums/brews/brewFunctionPipe.ts
+++ b/src/enums/brews/brewFunctionPipe.ts
@@ -4,6 +4,11 @@ export enum BREW_FUNCTION_PIPE_ENUM {
   FORMATTED_TOTAL_COFFEE_TEMPERATURE_TIME = 'FORMATTED_TOTAL_COFFEE_TEMPERATURE_TIME',
   FORMATTED_TOTAL_COFFEE_BLOOMING_TIME = 'FORMATTED_TOTAL_COFFEE_BLOOMING_TIME',
   FORMATTED_TOTAL_COFFEE_FIRST_DRIP_TIME = 'FORMATTED_TOTAL_COFFEE_FIRST_DRIP_TIME',
+  FORMATTED_TOTAL_MILL_TIME = 'FORMATTED_TOTAL_MILL_TIME',
+  FORMATTED_COFFEE_BREW_TIME = 'FORMATTED_COFFEE_BREW_TIME',
+  FORMATTED_BREW_TIME = 'FORMATTED_BREW_TIME',
   GET_CALCULATED_BEAN_AGE = 'GET_CALCULATED_BEAN_AGE',
   IS_ARCHIVED = 'IS_ARCHIVED',
+  GET_GRAMS_PER_LITER = 'GET_GRAMS_PER_LITER',
+  GET_PREPARATION_TOOL_NAME = 'GET_PREPARATION_TOOL_NAME',
 }
diff --git a/src/pipes/brew/brewFunction.ts b/src/pipes/brew/brewFunction.ts
index 16b6a04e..da904030 100755
--- a/src/pipes/brew/brewFunction.ts
+++ b/src/pipes/brew/brewFunction.ts
@@ -5,9 +5,18 @@ import { BREW_FUNCTION_PIPE_ENUM } from '../../enums/brews/brewFunctionPipe';
 
 @Pipe({ name: 'brewFunctionPipe' })
 export class BrewFunction implements PipeTransform {
-  public transform(value: Brew, arg: BREW_FUNCTION_PIPE_ENUM): any {
+  public transform(
+    value: Brew,
+    arg: BREW_FUNCTION_PIPE_ENUM | Array<BREW_FUNCTION_PIPE_ENUM | any>
+  ): any {
     try {
-      switch (arg) {
+      let action;
+      if (typeof arg !== 'object') {
+        action = arg;
+      } else {
+        action = arg[0];
+      }
+      switch (action) {
         case BREW_FUNCTION_PIPE_ENUM.GET_EXTRACTION_YIELD:
           return value.getExtractionYield();
         case BREW_FUNCTION_PIPE_ENUM.GET_BREW_RATIO:
@@ -22,6 +31,16 @@ export class BrewFunction implements PipeTransform {
           return value.getCalculatedBeanAge();
         case BREW_FUNCTION_PIPE_ENUM.IS_ARCHIVED:
           return value.isArchived();
+        case BREW_FUNCTION_PIPE_ENUM.GET_GRAMS_PER_LITER:
+          return value.getGramsPerLiter();
+        case BREW_FUNCTION_PIPE_ENUM.FORMATTED_TOTAL_MILL_TIME:
+          return value.getFormattedTotalMillTimerTime();
+        case BREW_FUNCTION_PIPE_ENUM.FORMATTED_BREW_TIME:
+          return value.getFormattedBrewTime();
+        case BREW_FUNCTION_PIPE_ENUM.FORMATTED_COFFEE_BREW_TIME:
+          return value.getFormattedCoffeeBrewTime();
+        case BREW_FUNCTION_PIPE_ENUM.GET_PREPARATION_TOOL_NAME:
+          return value.getPreparationToolName(arg[1]);
       }
     } catch (ex) {}
   }