add hinto to cost estimations

SENERGY-Platform · Nov 30, 2023 · 3a37318 · 3a37318
1 parent 6af7db0
commit 3a37318
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/app/modules/cost/cost-overview/cost-overview.component.css b/src/app/modules/cost/cost-overview/cost-overview.component.css
@@ -18,3 +18,14 @@
     height: calc(100% - 78px);
     overflow-y: auto;
 }
+
+.inline-icon {
+    vertical-align: bottom;
+ }
+
+ .help {
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: end;
+    margin-right: 20px;
+ }
diff --git a/src/app/modules/cost/cost-overview/cost-overview.component.html b/src/app/modules/cost/cost-overview/cost-overview.component.html
@@ -13,10 +13,15 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-  
+
 <div class="container layout-margin">
-    <senergy-spinner [show]="!dataReady"></senergy-spinner>
-    <mat-accordion multi *ngIf="dataReady">
-        <senergy-cost-element *ngFor="let cat of tree | keyvalue: originalOrder" [name]="cat.key" [element]="cat.value"/>
+  <senergy-spinner [show]="!dataReady"></senergy-spinner>
+  <div class="help color-accent">
+    <span matTooltip="Estimations are based on the consumption in the month so far and consumption over the last 24 hours carried forward till the end of the month. Therefore, it takes a day for changes to be accounted for in the estimations.">About estimations <mat-icon class="inline-icon" color="accent">help</mat-icon></span>
+  </div>
+  <div *ngIf="dataReady">
+    <mat-accordion multi>
+      <senergy-cost-element *ngFor="let cat of tree | keyvalue: originalOrder" [name]="cat.key" [element]="cat.value" />
     </mat-accordion>
+  </div>  
 </div>