Merge pull request #364 from Northeastern-Electric-Racing/Reversing-Cells

Reversing heat-map, 3 digit precision for voltages on cell view

Author: Peyton-McKee

angular-client/src/components/info-value-dispaly/info-value-display.component.html

@@ -1,10 +1,15 @@
 <vstack spacing="0px" [style]="containerStyle()">
   <hstack spacing="5px" [style]="valueUnitContainerStyle()">
     @if (this.boolValue() !== undefined) {
-      <typography variant="info-value" [content]="this.boolValue() ? 'YES' : 'NO'" />
+      <typography variant="info-value" [content]="this.boolValue() ? 'YES' : 'NO'" [additionalStyles]="this.valueStyle()" />
       <typography variant="info-unit" [content]="this.unit()" />
     } @else {
-      <typography variant="info-value" [content]="this.formattedValue" style="margin-bottom: -10px" />
+      <typography
+        variant="info-value"
+        [content]="this.formattedValue"
+        style="margin-bottom: -10px"
+        [additionalStyles]="this.valueStyle()"
+      />
       <typography variant="info-unit" [content]="this.unit()" />
     }
 

angular-client/src/components/info-value-dispaly/info-value-display.component.ts

@@ -34,6 +34,7 @@ export class InfoValueDisplayComponent implements OnInit, OnChanges {
   containerStyle = input<string>('');
   valueUnitContainerStyle = input<string>('');
   value = input<number>();
+  valueStyle = input<string>('');
   boolValue = input<boolean>();
   precision = input<number>(1);
   subtitle = input<string>('');

angular-client/src/pages/bms-debug-page/components/cell-by-cell-heat-map/cell-by-cell-heat-map.component.html

@@ -7,7 +7,7 @@
   <div style="padding-top: 20px"></div>
   @if (this.view.toString() === 'Temperature') {
     <hstack alignItems="end" justifyContent="end" spacing="1vw">
-      @for (cell of betaCells; track cell) {
+      @for (cell of betaCells.slice().reverse(); track cell) {
         <cell-tile
           [value]="cell.temp"
           [color]="this.getTempColor(cell.temp)"
@@ -31,7 +31,7 @@
     </hstack>
   } @else if (this.view.toString() === 'Voltage') {
     <hstack alignItems="end" justifyContent="end" spacing="1vw">
-      @for (cell of betaCells; track cell) {
+      @for (cell of betaCells.slice().reverse(); track cell) {
         <cell-tile
           [value]="this.averageVoltCellPair(cell)"
           [color]="this.getVoltColor(this.averageVoltCellPair(cell))"

angular-client/src/pages/bms-debug-page/components/cell-by-cell-heat-map/cell-by-cell-heat-map.component.ts

@@ -1,4 +1,4 @@
-import { Component, effect, inject, input } from '@angular/core';
+import { Component, effect, inject, input, OnInit } from '@angular/core';
 import { Segment } from 'src/utils/bms.utils';
 import { Subscription } from 'rxjs';
 import { HeatMapService, HeatMapView } from 'src/services/heat-map.service';
@@ -10,7 +10,7 @@ import { DropdownOption, SelectorConfig } from 'src/components/select-dropdown/s
   templateUrl: './cell-by-cell-heat-map.component.html',
   styleUrl: './cell-by-cell-heat-map.component.css'
 })
-export class CellByCellHeatMapComponent {
+export class CellByCellHeatMapComponent implements OnInit {
   private cellService = inject(CellService);
   private heatMapService = inject(HeatMapService);
   currentSegment = input.required<Segment>();
@@ -48,6 +48,10 @@ export class CellByCellHeatMapComponent {
     });
   }
 
+  ngOnInit(): void {
+    this.alphaCells = this.cellService.getAlphaCellsBySegment(this.currentSegment());
+    this.betaCells = this.cellService.getBetaCellsBySegment(this.currentSegment());
+  }
   getTempColor = (value: number | undefined) => {
     if (value === undefined) {
       return 'grey';

angular-client/src/pages/bms-debug-page/components/cell-view/cell-view.component.html

@@ -3,38 +3,46 @@
     <hstack style="margin-top: -2vh" spacing="5vw">
       <info-value-display
         [value]="this.cellViewData?.cellNumbers?.[0]"
+        valueStyle="fontSize: 30px;"
         [subtitle]="this.getCellNumTitle()"
         [precision]="0"
         style="padding-top: 25px"
       ></info-value-display>
       <info-value-display
         [value]="this.cellViewData?.volt1"
+        [precision]="3"
+        valueStyle="fontSize: 30px;"
         unit="V"
         [subtitle]="this.getCellVoltageTitle()"
         style="margin-top: 0.8vh"
       ></info-value-display>
       <info-value-display
         [boolValue]="this.cellViewData?.balancing1"
         [subtitle]="this.getBalancingTitle()"
+        valueStyle="fontSize: 30px;"
         style="padding-top: 25px"
       ></info-value-display>
     </hstack>
     <divider style="width: 25vw; margin-top: 3vh" />
     <hstack spacing="20px" spacing="5vw" style="margin-top: -1vh">
       <info-value-display
         [value]="this.cellViewData?.cellNumbers?.[1]"
+        valueStyle="fontSize: 30px;"
         [subtitle]="this.getCellNumTitle()"
         style="padding-top: 25px"
         [precision]="0"
       ></info-value-display>
       <info-value-display
         [value]="this.cellViewData?.volt2"
+        valueStyle="fontSize: 30px;"
         unit="V"
         [subtitle]="this.getCellVoltageTitle()"
         style="margin-top: 0.5vh"
+        [precision]="3"
       ></info-value-display>
       <info-value-display
         [boolValue]="this.cellViewData?.balancing2"
+        valueStyle="fontSize: 30px;"
         [subtitle]="this.getBalancingTitle()"
         style="padding-top: 25px"
       ></info-value-display>