Battery view updated

typescript/frontend-marios2/src/Resources/routes.json

@@ -1,24 +1,19 @@
 {
-  "installation": "installation/",
-  "live": "live",
   "users": "/users/",
-  "log": "log/",
   "installations": "/installations/",
-  "groups": "/groups/",
+  "installation": "installation/",
-  "group": "group/",
+  "login": "/login/",
+  "forgotPassword": "/forgotPassword/",
   "folder": "folder/",
-  "manageAccess": "manageAccess/",
-  "user": "user/",
   "tree": "tree/",
   "list": "list/",
   "overview": "overview",
   "manage": "manage",
   "batteryview": "batteryview",
   "log": "log",
+  "live": "live",
   "information": "information",
   "configuration": "configuration",
-  "login": "/login/",
-  "forgotPassword": "/forgotPassword/",
   "mainstats": "mainstats",
-  "general": "general"
+  "detailed_view": "detailed_view/"
 }

typescript/frontend-marios2/src/content/dashboards/BatteryView/BatteryView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   Container,
   Grid,
@@ -23,6 +23,7 @@ import { FormattedMessage } from 'react-intl';
 import { I_S3Credentials } from '../../../interfaces/S3Types';
 import routes from '../../../Resources/routes.json';
 import MainStats from './MainStats';
+import DetailedBatteryView from './DetailedBatteryView';
 
 interface BatteryViewProps {
   values: TopologyValues;
@@ -33,68 +34,30 @@ function BatteryView(props: BatteryViewProps) {
   if (props.values === null) {
     return null;
   }
-  const currentPath = useLocation();
+  const currentLocation = useLocation();
   const navigate = useNavigate();
-  const [currentTab, setCurrentTab] = useState<string>(undefined);
+  const numOfBatteries = props.values.batteryView.length;
-  const numOfBatteries = props.values.batteryView.values[0].value
-    .toString()
-    .split(',').length;
-
-  const batteryData = [];
-  let batteryId = 1;
-  // Use a for loop to generate battery data
-  for (let index = 1; index <= numOfBatteries * 7; index += 7) {
-    const battery = {
-      BatteryId: 'Battery ' + batteryId.toString(),
-      FwVersion: props.values.batteryView.values[index].value,
-      Power:
-        Number(props.values.batteryView.values[index + 1].value).toFixed(2) +
-        ' ' +
-        props.values.batteryView.values[index + 1].unit,
-      Voltage:
-        Number(props.values.batteryView.values[index + 2].value).toFixed(2) +
-        ' ' +
-        props.values.batteryView.values[index + 2].unit,
-      Soc:
-        props.values.batteryView.values[index + 3].value +
-        ' ' +
-        props.values.batteryView.values[index + 3].unit,
-      AverageTemperature:
-        props.values.batteryView.values[index + 4].value +
-        ' ' +
-        props.values.batteryView.values[index + 4].unit,
-
-      Warnings: props.values.batteryView.values[index + 5].value,
-      Alarms: props.values.batteryView.values[index + 6].value
-    };
-    batteryId++;
-    batteryData.push(battery);
-  }
 
   const handleMainStatsButton = () => {
     navigate(routes.mainstats);
   };
 
-  useEffect(() => {
-    let path = currentPath.pathname.split('/');
-
-    setCurrentTab(path[path.length - 1]);
-  }, [currentPath]);
-
   return (
     <>
       <Container maxWidth="xl">
         <Grid container>
-          <Routes>
+          <Grid
-            <Route
+            item
-              path={routes.mainstats}
+            xs={6}
-              element={
+            md={6}
-                <MainStats s3Credentials={props.s3Credentials}></MainStats>
+            sx={{
-              }
+              display:
-            />
+                !currentLocation.pathname.includes('detailed_view') &&
-          </Routes>
+                !currentLocation.pathname.includes('mainstats')
-          {currentTab === 'batteryview' && (
+                  ? 'block'
-            <Grid item xs={6} md={6}>
+                  : 'none'
+            }}
+          >
             <Button
               variant="contained"
               sx={{
@@ -105,7 +68,7 @@ function BatteryView(props: BatteryViewProps) {
               }}
             >
               <FormattedMessage
-                  id="main_stats"
+                id="battery_view"
                 defaultMessage="Battery View"
               />
             </Button>
@@ -116,7 +79,6 @@ function BatteryView(props: BatteryViewProps) {
               sx={{
                 marginTop: '20px',
                 marginLeft: '20px',
-                  // backgroundColor: mainStatsData ? '#808080' : '#ffc04d',
                 backgroundColor: '#ffc04d',
                 color: '#000000',
                 '&:hover': { bgcolor: '#f7b34d' }
@@ -125,13 +87,42 @@ function BatteryView(props: BatteryViewProps) {
               <FormattedMessage id="main_stats" defaultMessage="Main Stats" />
             </Button>
           </Grid>
-          )}
         </Grid>
 
-        {currentTab === 'batteryview' && (
+        <Grid container>
+          <Routes>
+            <Route
+              path={routes.mainstats + '*'}
+              element={
+                <MainStats s3Credentials={props.s3Credentials}></MainStats>
+              }
+            />
+            {Array.from({ length: numOfBatteries }).map((_, i) => (
+              <Route
+                key={routes.detailed_view + i}
+                path={routes.detailed_view + i}
+                element={
+                  <DetailedBatteryView
+                    s3Credentials={props.s3Credentials}
+                    batteryData={props.values.batteryView[i]}
+                  ></DetailedBatteryView>
+                }
+              />
+            ))}
+          </Routes>
+        </Grid>
+
         <TableContainer
           component={Paper}
-            sx={{ marginTop: '20px', marginBottom: '20px' }}
+          sx={{
+            marginTop: '20px',
+            marginBottom: '20px',
+            display:
+              !currentLocation.pathname.includes('detailed_view') &&
+              !currentLocation.pathname.includes('mainstats')
+                ? 'block'
+                : 'none'
+          }}
         >
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
             <TableHead>
@@ -147,7 +138,7 @@ function BatteryView(props: BatteryViewProps) {
               </TableRow>
             </TableHead>
             <TableBody>
-                {batteryData.map((battery) => (
+              {props.values.batteryView.map((battery) => (
                 <TableRow
                   key={battery.BatteryId}
                   style={{
@@ -160,7 +151,15 @@ function BatteryView(props: BatteryViewProps) {
                     align="center"
                     sx={{ fontWeight: 'bold' }}
                   >
-                      {battery.BatteryId}
+                    <Link
+                      style={{ color: 'black' }}
+                      to={
+                        routes.detailed_view +
+                        (battery.BatteryId - 1).toString()
+                      }
+                    >
+                      {'Battery ' + battery.BatteryId}
+                    </Link>
                   </TableCell>
                   <TableCell
                     sx={{
@@ -168,7 +167,7 @@ function BatteryView(props: BatteryViewProps) {
                       textAlign: 'center'
                     }}
                   >
-                      {battery.FwVersion}
+                    {battery.FwVersion.value}
                   </TableCell>
                   <TableCell
                     sx={{
@@ -176,7 +175,7 @@ function BatteryView(props: BatteryViewProps) {
                       textAlign: 'center'
                     }}
                   >
-                      {battery.Power}
+                    {battery.Power.value + ' ' + battery.Power.unit}
                   </TableCell>
                   <TableCell
                     sx={{
@@ -184,40 +183,42 @@ function BatteryView(props: BatteryViewProps) {
                       textAlign: 'center',
 
                       backgroundColor:
-                          battery.Voltage < 44 || battery.Voltage > 57
+                        battery.Voltage.value < 44 || battery.Voltage.value > 57
                           ? '#FF033E'
                           : '#32CD32',
-                        color: battery.Voltage === '' ? 'white' : 'inherit'
+                      color: battery.Voltage.value === '' ? 'white' : 'inherit'
                     }}
                   >
-                      {battery.Voltage}
+                    {battery.Voltage.value + ' ' + battery.Voltage.unit}
                   </TableCell>
                   <TableCell
                     sx={{
                       width: '10%',
                       textAlign: 'center',
                       backgroundColor:
-                          battery.Soc < 20
+                        battery.Soc.value < 20
                           ? '#FF033E'
-                            : battery.Soc < 50
+                          : battery.Soc.value < 50
-                            ? '#ffbf00 '
+                          ? '#ffbf00'
                           : '#32CD32',
-                        color: battery.Soc === '' ? 'white' : 'inherit'
+                      color: battery.Soc.value === '' ? 'white' : 'inherit'
                     }}
                   >
-                      {battery.Soc}
+                    {battery.Soc.value + ' ' + battery.Soc.unit}
                   </TableCell>
                   <TableCell
                     sx={{
                       width: '10%',
                       textAlign: 'center',
                       backgroundColor:
-                          battery.AverageTemperature > 270
+                        battery.AverageTemperature.value > 270
                           ? '#FF033E'
                           : '#32CD32 '
                     }}
                   >
-                      {battery.AverageTemperature}
+                    {battery.AverageTemperature.value +
+                      ' ' +
+                      battery.AverageTemperature.unit}
                   </TableCell>
 
                   <TableCell
@@ -226,21 +227,22 @@ function BatteryView(props: BatteryViewProps) {
                       textAlign: 'center',
                       padding: '8px',
                       fontWeight:
-                          battery.Warnings !== '' ? 'bold' : 'inherit',
+                        battery.Warnings.value !== '' ? 'bold' : 'inherit',
                       backgroundColor:
-                          battery.Warnings === '' ? 'inherit' : '#ff9900',
+                        battery.Warnings.value === '' ? 'inherit' : '#ff9900',
-                        color: battery.Warnings != '' ? 'black' : 'inherit'
+                      color: battery.Warnings.value != '' ? 'black' : 'inherit'
                     }}
                   >
-                      {battery.Warnings === '' ? (
+                    {battery.Warnings.value === '' ? (
                       'None'
-                      ) : battery.Warnings.split(';').length > 1 ? (
+                    ) : battery.Warnings.value.toString().split(';').length >
+                      1 ? (
                       <Link
                         style={{ color: 'black' }}
                         to={
-                            currentPath.pathname.substring(
+                          currentLocation.pathname.substring(
                             0,
-                              currentPath.pathname.lastIndexOf('/') + 1
+                            currentLocation.pathname.lastIndexOf('/') + 1
                           ) +
                           routes.log +
                           '?open=warning'
@@ -249,28 +251,30 @@ function BatteryView(props: BatteryViewProps) {
                         Multiple Warnings
                       </Link>
                     ) : (
-                        battery.Warnings
+                      battery.Warnings.value
                     )}
                   </TableCell>
                   <TableCell
                     sx={{
                       width: '20%',
                       textAlign: 'center',
-                        fontWeight: battery.Alarms !== '' ? 'bold' : 'inherit',
+                      fontWeight:
+                        battery.Alarms.value !== '' ? 'bold' : 'inherit',
                       backgroundColor:
-                          battery.Alarms === '' ? 'inherit' : '#FF033E',
+                        battery.Alarms.value === '' ? 'inherit' : '#FF033E',
-                        color: battery.Alarms != '' ? 'black' : 'inherit'
+                      color: battery.Alarms.value != '' ? 'black' : 'inherit'
                     }}
                   >
-                      {battery.Alarms === '' ? (
+                    {battery.Alarms.value === '' ? (
                       'None'
-                      ) : battery.Alarms.split(';').length > 1 ? (
+                    ) : battery.Alarms.value.toString().split(';').length >
+                      1 ? (
                       <Link
                         style={{ color: 'black' }}
                         to={
-                            currentPath.pathname.substring(
+                          currentLocation.pathname.substring(
                             0,
-                              currentPath.pathname.lastIndexOf('/') + 1
+                            currentLocation.pathname.lastIndexOf('/') + 1
                           ) +
                           routes.log +
                           '?open=error'
@@ -279,7 +283,7 @@ function BatteryView(props: BatteryViewProps) {
                         Multiple Alarms
                       </Link>
                     ) : (
-                        battery.Alarms
+                      battery.Alarms.value
                     )}
                   </TableCell>
                 </TableRow>
@@ -287,7 +291,6 @@ function BatteryView(props: BatteryViewProps) {
             </TableBody>
           </Table>
         </TableContainer>
-        )}
       </Container>
     </>
   );

typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx

@@ -0,0 +1,971 @@
+import React from 'react';
+import { I_S3Credentials } from '../../../interfaces/S3Types';
+import {
+  Card,
+  Grid,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow
+} from '@mui/material';
+import { Battery } from '../Log/graph.util';
+import Button from '@mui/material/Button';
+import { FormattedMessage } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+import routes from '../../../Resources/routes.json';
+
+interface DetailedBatteryViewProps {
+  s3Credentials: I_S3Credentials;
+  batteryData: Battery;
+}
+
+function DetailedBatteryView(props: DetailedBatteryViewProps) {
+  if (props.batteryData === null) {
+    return null;
+  }
+  const navigate = useNavigate();
+
+  const handleBatteryViewButton = () => {
+    navigate(location.pathname.split('/').slice(0, -2).join('/'));
+  };
+  const handleMainStatsButton = () => {
+    navigate(
+      location.pathname.split('/').slice(0, -2).join('/') +
+        '/' +
+        routes.mainstats
+    );
+  };
+
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={6} md={6}>
+          <Button
+            variant="contained"
+            onClick={handleBatteryViewButton}
+            sx={{
+              marginTop: '20px',
+              backgroundColor: '#ffc04d',
+              color: '#000000',
+              '&:hover': { bgcolor: '#f7b34d' }
+            }}
+          >
+            <FormattedMessage id="main_stats" defaultMessage="Battery View" />
+          </Button>
+
+          <Button
+            variant="contained"
+            onClick={handleMainStatsButton}
+            sx={{
+              marginTop: '20px',
+              marginLeft: '20px',
+              backgroundColor: '#ffc04d',
+              color: '#000000',
+              '&:hover': { bgcolor: '#f7b34d' }
+            }}
+          >
+            <FormattedMessage id="main_stats" defaultMessage="Main Stats" />
+          </Button>
+        </Grid>
+      </Grid>
+      <Grid item md={2} xs={2}>
+        <Card
+          sx={{
+            overflow: 'visible',
+            marginTop: '30px',
+            marginBottom: '30px',
+            backgroundColor: 'red'
+          }}
+        >
+          <TableContainer
+            component={Paper}
+            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+          >
+            <Table size="medium" aria-label="a dense table">
+              <TableBody>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Voltage
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.Voltage.value +
+                      ' ' +
+                      props.batteryData.Voltage.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Current
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.Current.value +
+                      ' ' +
+                      props.batteryData.Current.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Power
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.Power.value +
+                      ' ' +
+                      props.batteryData.Power.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Bus Current
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.BusCurrent.value +
+                      ' ' +
+                      props.batteryData.BusCurrent.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Cells Current
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.CellsCurrent.value +
+                      ' ' +
+                      props.batteryData.CellsCurrent.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Heating Current
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.HeatingCurrent.value +
+                      ' ' +
+                      props.batteryData.HeatingCurrent.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Heating Power
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.HeatingPower.value +
+                      ' ' +
+                      props.batteryData.HeatingPower.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Soc
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.Soc.value +
+                      ' ' +
+                      props.batteryData.Soc.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    SOCAh
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.SOCAh.value +
+                      ' ' +
+                      props.batteryData.SOCAh.unit}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      </Grid>
+      {/*----------------------------------------------------------------------------------------------------------------------------------*/}
+      <Grid item md={2.9} xs={2.9}>
+        <Card
+          sx={{
+            overflow: 'visible',
+            marginTop: '30px',
+            marginLeft: '20px',
+            marginBottom: '30px',
+            backgroundColor: 'red'
+          }}
+        >
+          <TableContainer
+            component={Paper}
+            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+          >
+            <Table size="medium" aria-label="a dense table">
+              <TableBody>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Heating
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.HeatingTemperature.value +
+                      ' ' +
+                      props.batteryData.HeatingTemperature.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Board Temperature
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.BoardTemperature.value +
+                      ' ' +
+                      props.batteryData.BoardTemperature.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Center Cells Temperature
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.AverageTemperature.value +
+                      ' ' +
+                      props.batteryData.AverageTemperature.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Left Cells Temperature
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.LeftCellsTemperature.value +
+                      ' ' +
+                      props.batteryData.LeftCellsTemperature.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Right Cells Temperature
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.RightCellsTemperature.value +
+                      ' ' +
+                      props.batteryData.RightCellsTemperature.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Average Temperature
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.AverageTemperature.value +
+                      ' ' +
+                      props.batteryData.AverageTemperature.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    State
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.StateTemperature.value +
+                      ' ' +
+                      props.batteryData.StateTemperature.unit}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      </Grid>
+
+      {/*----------------------------------------------------------------------------------------------------------------------------------*/}
+      <Grid item md={2.7} xs={2.7}>
+        <Card
+          sx={{
+            overflow: 'visible',
+            marginTop: '30px',
+            marginLeft: '20px',
+            marginBottom: '30px',
+            backgroundColor: 'red'
+          }}
+        >
+          <TableContainer
+            component={Paper}
+            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+          >
+            <Table size="medium" aria-label="a dense table">
+              <TableBody>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Connected To Dc Bus
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.ConnectedToDcBus.value +
+                      ' ' +
+                      props.batteryData.ConnectedToDcBus.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Alarm Out Active
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.AlarmOutActive.value +
+                      ' ' +
+                      props.batteryData.AlarmOutActive.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Internal Fan Active
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.InternalFanActive.value +
+                      ' ' +
+                      props.batteryData.InternalFanActive.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Volt Measurement Allowed
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.VoltMeasurementAllowed.value +
+                      ' ' +
+                      props.batteryData.VoltMeasurementAllowed.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Aux Relay Bus
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.AuxRelayBus.value +
+                      ' ' +
+                      props.batteryData.AuxRelayBus.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Remote State Active
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.RemoteStateActive.value +
+                      ' ' +
+                      props.batteryData.RemoteStateActive.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    RiscActive
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.RiscActive.value +
+                      ' ' +
+                      props.batteryData.RiscActive.unit}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      </Grid>
+
+      {/*----------------------------------------------------------------------------------------------------------------------------------*/}
+      <Grid item md={2.9} xs={2.9}>
+        <Card
+          sx={{
+            overflow: 'visible',
+            marginTop: '30px',
+            marginLeft: '20px',
+            marginBottom: '30px',
+            backgroundColor: 'red'
+          }}
+        >
+          <TableContainer
+            component={Paper}
+            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+          >
+            <Table size="medium" aria-label="a dense table">
+              <TableBody>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Eoc
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.Eoc.value +
+                      ' ' +
+                      props.batteryData.Eoc.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Serial Number
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.SerialNumber.value +
+                      ' ' +
+                      props.batteryData.SerialNumber.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Firmware Version
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.FwVersion.value +
+                      ' ' +
+                      props.batteryData.FwVersion.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Time Since TOC
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.TimeSinceTOC.value +
+                      ' ' +
+                      props.batteryData.TimeSinceTOC.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Calibration Charge Requested
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.CalibrationChargeRequested.value +
+                      ' ' +
+                      props.batteryData.CalibrationChargeRequested.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Max Charge Power
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.MaxChargePower.value +
+                      ' ' +
+                      props.batteryData.MaxChargePower.unit}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Max Discharge Power
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    {props.batteryData.MaxDischargePower.value +
+                      ' ' +
+                      props.batteryData.MaxDischargePower.unit}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      </Grid>
+      {/*----------------------------------------------------------------------------------------------------------------------------------*/}
+      <Grid item md={1.5} xs={1.5}>
+        <Card
+          sx={{
+            overflow: 'visible',
+            marginTop: '30px',
+            marginLeft: '20px',
+            marginBottom: '30px',
+            backgroundColor: 'red'
+          }}
+        >
+          <TableContainer
+            component={Paper}
+            sx={{ marginTop: '20px', marginBottom: '20px', width: '100%' }}
+          >
+            <Table size="medium" aria-label="a dense table">
+              <TableBody>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Blue Led
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '20px',
+                        height: '20px',
+                        marginLeft: '2px',
+                        borderRadius: '50%',
+                        backgroundColor:
+                          props.batteryData.BlueLeds.value === 'On'
+                            ? '#00ccff'
+                            : 'transparent'
+                      }}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Green Led
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '20px',
+                        height: '20px',
+                        marginLeft: '2px',
+                        borderRadius: '50%',
+                        backgroundColor:
+                          props.batteryData.GreenLeds.value === 'On'
+                            ? 'green'
+                            : 'transparent'
+                      }}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Red Led
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '20px',
+                        height: '20px',
+                        marginLeft: '2px',
+                        borderRadius: '50%',
+                        backgroundColor:
+                          props.batteryData.RedLeds.value === 'On'
+                            ? 'red'
+                            : 'transparent'
+                      }}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    align="left"
+                    sx={{ fontWeight: 'bold' }}
+                  >
+                    Amber Led
+                  </TableCell>
+                  <TableCell
+                    align="right"
+                    sx={{
+                      width: '6ch',
+                      whiteSpace: 'nowrap',
+                      paddingRight: '12px'
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '20px',
+                        height: '20px',
+                        marginLeft: '2px',
+                        borderRadius: '50%',
+                        backgroundColor:
+                          props.batteryData.AmberLeds.value === 'On'
+                            ? 'orange'
+                            : 'transparent'
+                      }}
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      </Grid>
+    </>
+  );
+}
+
+export default DetailedBatteryView;

typescript/frontend-marios2/src/content/dashboards/BatteryView/MainStats.tsx

@@ -384,7 +384,6 @@ function MainStats(props: MainStatsProps) {
 
       {!loading && (
         <>
-          {' '}
           <Grid item xs={6} md={6}>
             <Button
               variant="contained"

typescript/frontend-marios2/src/content/dashboards/Configuration/Configuration.tsx

@@ -33,10 +33,10 @@ function Configuration(props: ConfigurationProps) {
   const forcedCalibrationChargeOptions = ['No', 'UntilEoc', 'Yes'];
 
   const [formValues, setFormValues] = useState<ConfigurationValues>({
-    minimumSoC: props.values.minimumSoC.values[0].value,
+    minimumSoC: props.values.minimumSoC[0].value,
-    gridSetPoint: (props.values.gridSetPoint.values[0].value as number) / 1000,
+    gridSetPoint: (props.values.gridSetPoint[0].value as number) / 1000,
     forceCalibrationCharge: forcedCalibrationChargeOptions.indexOf(
-      props.values.calibrationChargeForced.values[0].value.toString()
+      props.values.calibrationChargeForced[0].value.toString()
     )
   });
 
@@ -78,7 +78,7 @@ function Configuration(props: ConfigurationProps) {
     selectedForcedCalibrationChargeOption,
     setSelectedForcedCalibrationChargeOption
   ] = useState<string>(
-    props.values.calibrationChargeForced.values[0].value.toString()
+    props.values.calibrationChargeForced[0].value.toString()
   );
   //const forcedCalibrationChargeOptions = ['No', 'UntilEoc', 'Yes'];
 
@@ -242,8 +242,7 @@ function Configuration(props: ConfigurationProps) {
                     />
                   }
                   value={
-                    (props.values.installedDcDcPower.values[0]
+                    (props.values.installedDcDcPower[0].value as number) * 10
-                      .value as number) * 10
                   }
                   fullWidth
                 />
@@ -257,10 +256,9 @@ function Configuration(props: ConfigurationProps) {
                     />
                   }
                   value={
-                    (props.values.maximumDischargePower.values[0]
+                    (props.values.maximumDischargePower[0].value as number) *
-                      .value as number) *
                     48 *
-                    (props.values.DcDcNum.values[0].value as number)
+                    (props.values.DcDcNum[0].value as number)
                   }
                   fullWidth
                 />
@@ -273,7 +271,7 @@ function Configuration(props: ConfigurationProps) {
                       defaultMessage="Number of Batteries"
                     />
                   }
-                  value={props.values.battery.values.length - 4}
+                  value={props.values.battery.length - 4}
                   fullWidth
                 />
               </div>

typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx

@@ -18,10 +18,10 @@ import Overview from '../Overview/overview';
 import Configuration from '../Configuration/Configuration';
 import { fetchData } from 'src/content/dashboards/Installations/fetchData';
 import CancelIcon from '@mui/icons-material/Cancel';
-import BatteryView from '../BatteryView/BatteryView';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import routes from '../../../Resources/routes.json';
 import Information from '../Information/Information';
+import BatteryView from '../BatteryView/BatteryView';
 
 interface singleInstallationProps {
   current_installation?: I_Installation;
@@ -31,7 +31,7 @@ interface singleInstallationProps {
 function Installation(props: singleInstallationProps) {
   const context = useContext(UserContext);
   const { currentUser } = context;
-  const location = useLocation();
+  const location = useLocation().pathname;
   const [errorLoadingS3Data, setErrorLoadingS3Data] = useState(false);
   const webSocketsContext = useContext(WebSocketContext);
   const { getStatus } = webSocketsContext;
@@ -90,7 +90,7 @@ function Installation(props: singleInstallationProps) {
   };
 
   useEffect(() => {
-    let path = location.pathname.split('/');
+    let path = location.split('/');
 
     setCurrentTab(path[path.length - 1]);
   }, [location]);
@@ -99,26 +99,32 @@ function Installation(props: singleInstallationProps) {
     if (
       currentTab == 'live' ||
       currentTab == 'configuration' ||
-      currentTab == 'batteryview'
+      location.includes('batteryview')
     ) {
-      var interval;
+      let interval;
 
-      if (currentTab == 'live' || currentTab == 'batteryview') {
+      if (
+        currentTab == 'live' ||
+        (location.includes('batteryview') && !location.includes('mainstats'))
+      ) {
         fetchDataPeriodically();
         interval = setInterval(fetchDataPeriodically, 2000);
       }
-      if (currentTab == 'configuration') {
+      if (currentTab == 'configuration' || location.includes('mainstats')) {
         fetchDataOnlyOneTime();
       }
 
       // Cleanup function to cancel interval and update isMounted when unmounted
       return () => {
-        if (currentTab == 'live' || currentTab == 'batteryview') {
+        if (
+          currentTab == 'live' ||
+          (location.includes('batteryview') && !location.includes('mainstats'))
+        ) {
           clearInterval(interval);
         }
       };
     }
-  }, [currentTab, location.pathname]);
+  }, [currentTab, location]);
 
   return (
     <>
@@ -178,7 +184,7 @@ function Installation(props: singleInstallationProps) {
                 fontSize: '14px'
               }}
             >
-              {values.mode.values[0].value}
+              {values.mode[0].value}
             </Typography>
           </div>
         )}
@@ -274,8 +280,7 @@ function Installation(props: singleInstallationProps) {
                     s3Credentials={s3Credentials}
                   ></BatteryView>
                 }
-              />
+              ></Route>
-
               <Route
                 path={routes.overview}
                 element={<Overview s3Credentials={s3Credentials}></Overview>}

typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx

@@ -43,11 +43,8 @@ function InstallationTabs() {
     } else if (path[path.length - 2] === 'tree') {
       setCurrentTab('tree');
     } else {
-      setCurrentTab(
+      //Even if we are located at path: /batteryview/mainstats, we want the BatteryView tab to be bold
-        tabList.includes(path[path.length - 1])
+      setCurrentTab(path.find((pathElement) => tabList.includes(pathElement)));
-          ? path[path.length - 1]
-          : undefined
-      );
     }
   }, [location]);
 
@@ -140,10 +137,6 @@ function InstallationTabs() {
           label: <FormattedMessage id="overview" defaultMessage="Overview" />
         },
 
-        {
-          value: 'log',
-          label: <FormattedMessage id="log" defaultMessage="Log" />
-        },
         {
           value: 'information',
           label: (
@@ -247,10 +240,7 @@ function InstallationTabs() {
                 />
               )
             },
-            {
+
-              value: 'log',
-              label: <FormattedMessage id="log" defaultMessage="Log" />
-            },
             {
               value: 'information',
               label: (

typescript/frontend-marios2/src/content/dashboards/Log/graph.util.tsx

@@ -28,59 +28,192 @@ export interface I_BoxDataValue {
   value: string | number;
 }
 
-export type BoxData = {
-  label: string;
-  values: I_BoxDataValue[];
-};
-
 export type ConfigurationValues = {
   minimumSoC: string | number;
   gridSetPoint: number;
   forceCalibrationCharge: number;
 };
 
+export interface Battery {
+  BatteryId: number;
+  FwVersion: I_BoxDataValue;
+  Power: I_BoxDataValue;
+  Voltage: I_BoxDataValue;
+  Soc: I_BoxDataValue;
+  AverageTemperature: I_BoxDataValue;
+  Warnings: I_BoxDataValue;
+  Alarms: I_BoxDataValue;
+  Current: I_BoxDataValue;
+  BusCurrent: I_BoxDataValue;
+  CellsCurrent: I_BoxDataValue;
+  HeatingCurrent: I_BoxDataValue;
+  HeatingPower: I_BoxDataValue;
+  SOCAh: I_BoxDataValue;
+  BlueLeds: I_BoxDataValue;
+  RedLeds: I_BoxDataValue;
+  GreenLeds: I_BoxDataValue;
+  AmberLeds: I_BoxDataValue;
+  HeatingTemperature: I_BoxDataValue;
+  BoardTemperature: I_BoxDataValue;
+  LeftCellsTemperature: I_BoxDataValue;
+  RightCellsTemperature: I_BoxDataValue;
+  StateTemperature: I_BoxDataValue;
+  String1Active: I_BoxDataValue;
+  String2Active: I_BoxDataValue;
+  String3Active: I_BoxDataValue;
+  String4Active: I_BoxDataValue;
+  String5Active: I_BoxDataValue;
+  ConnectedToDcBus: I_BoxDataValue;
+  AlarmOutActive: I_BoxDataValue;
+  InternalFanActive: I_BoxDataValue;
+  VoltMeasurementAllowed: I_BoxDataValue;
+  AuxRelayBus: I_BoxDataValue;
+  RemoteStateActive: I_BoxDataValue;
+  RiscActive: I_BoxDataValue;
+  Eoc: I_BoxDataValue;
+  SerialNumber: I_BoxDataValue;
+  TimeSinceTOC: I_BoxDataValue;
+  CalibrationChargeRequested: I_BoxDataValue;
+  MaxChargePower: I_BoxDataValue;
+  MaxDischargePower: I_BoxDataValue;
+}
+
+const BatteryKeys = [
+  'BatteryId',
+  'FwVersion',
+  'Power',
+  'Voltage',
+  'Soc',
+  'AverageTemperature',
+  'Warnings',
+  'Alarms',
+  'Current',
+  'BusCurrent',
+  'CellsCurrent',
+  'HeatingCurrent',
+  'HeatingPower',
+  'SOCAh',
+  'BlueLeds',
+  'RedLeds',
+  'GreenLeds',
+  'AmberLeds',
+  'HeatingTemperature',
+  'BoardTemperature',
+  'LeftCellsTemperature',
+  'RightCellsTemperature',
+  'StateTemperature',
+  'String1Active',
+  'String2Active',
+  'String3Active',
+  'String4Active',
+  'String5Active',
+  'ConnectedToDcBus',
+  'AlarmOutActive',
+  'InternalFanActive',
+  'VoltMeasurementAllowed',
+  'AuxRelayBus',
+  'RemoteStateActive',
+  'RiscActive',
+  'Eoc',
+  'SerialNumber',
+  'TimeSinceTOC',
+  'CalibrationChargeRequested',
+  'MaxChargePower',
+  'MaxDischargePower'
+];
+
 export type TopologyValues = {
-  gridBox: BoxData;
+  gridBox: I_BoxDataValue[];
-  pvOnAcGridBox: BoxData;
+  pvOnAcGridBox: I_BoxDataValue[];
-  loadOnAcGridBox: BoxData;
+  loadOnAcGridBox: I_BoxDataValue[];
-  pvOnIslandBusBox: BoxData;
+  pvOnIslandBusBox: I_BoxDataValue[];
-  loadOnIslandBusBox: BoxData;
+  loadOnIslandBusBox: I_BoxDataValue[];
-  pvOnDcBox: BoxData;
+  pvOnDcBox: I_BoxDataValue[];
-  loadOnDcBox: BoxData;
+  loadOnDcBox: I_BoxDataValue[];
-  batteryBox: BoxData;
+  batteryBox: I_BoxDataValue[];
 
-  grid: BoxData;
+  grid: I_BoxDataValue[];
-  gridToAcInConnection: BoxData;
+  gridToAcInConnection: I_BoxDataValue[];
-  gridBus: BoxData;
+  gridBus: I_BoxDataValue[];
-  islandBus: BoxData;
+  islandBus: I_BoxDataValue[];
-  dcBus: BoxData;
+  dcBus: I_BoxDataValue[];
-  dcBusToDcDcConnection: BoxData;
+  dcBusToDcDcConnection: I_BoxDataValue[];
-  dcDCToBatteryConnection: BoxData;
+  dcDCToBatteryConnection: I_BoxDataValue[];
-  battery: BoxData;
+  battery: I_BoxDataValue[];
-  dcBusToLoadOnDcConnection: BoxData;
+  dcBusToLoadOnDcConnection: I_BoxDataValue[];
-  islandBusToLoadOnIslandBusConnection: BoxData;
+  islandBusToLoadOnIslandBusConnection: I_BoxDataValue[];
-  gridBusToPvOnGridbusConnection: BoxData;
+  gridBusToPvOnGridbusConnection: I_BoxDataValue[];
-  gridBusToLoadOnGridBusConnection: BoxData;
+  gridBusToLoadOnGridBusConnection: I_BoxDataValue[];
-  inverter: BoxData;
+  inverter: I_BoxDataValue[];
-  dcDc: BoxData;
+  dcDc: I_BoxDataValue[];
-  islandBusToInverter: BoxData;
+  islandBusToInverter: I_BoxDataValue[];
-  inverterToDcBus: BoxData;
+  inverterToDcBus: I_BoxDataValue[];
-  gridBusToIslandBusConnection: BoxData;
+  gridBusToIslandBusConnection: I_BoxDataValue[];
-  pvOnDcBusToDcBusConnection: BoxData;
+  pvOnDcBusToDcBusConnection: I_BoxDataValue[];
-  pvOnIslandBusToIslandBusConnection: BoxData;
+  pvOnIslandBusToIslandBusConnection: I_BoxDataValue[];
-  minimumSoC: BoxData;
+  minimumSoC: I_BoxDataValue[];
-  installedDcDcPower: BoxData;
+  installedDcDcPower: I_BoxDataValue[];
-  gridSetPoint: BoxData;
+  gridSetPoint: I_BoxDataValue[];
-  maximumDischargePower: BoxData;
+  maximumDischargePower: I_BoxDataValue[];
-  DcDcNum: BoxData;
+  DcDcNum: I_BoxDataValue[];
-  calibrationChargeForced: BoxData;
+  calibrationChargeForced: I_BoxDataValue[];
-  mode: BoxData;
+  mode: I_BoxDataValue[];
 
-  batteryView: BoxData;
+  batteryView: Battery[];
 };
-
 type TopologyPaths = { [key in keyof TopologyValues]: string[] };
 
+const batteryIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+const batteryPaths = [
+  '/Battery/Devices/%id%/FwVersion',
+  '/Battery/Devices/%id%/Dc/Power',
+  '/Battery/Devices/%id%/Dc/Voltage',
+  '/Battery/Devices/%id%/Soc',
+  '/Battery/Devices/%id%/Temperatures/Cells/Average',
+  '/Battery/Devices/%id%/Warnings',
+  '/Battery/Devices/%id%/Alarms',
+
+  '/Battery/Devices/%id%/Dc/Current',
+  '/Battery/Devices/%id%/BusCurrent',
+  '/Battery/Devices/%id%/CellsCurrent',
+  '/Battery/Devices/%id%/HeatingCurrent',
+  '/Battery/Devices/%id%/HeatingPower',
+  '/Battery/Devices/%id%/SOCAh',
+
+  '/Battery/Devices/%id%/Leds/Blue',
+  '/Battery/Devices/%id%/Leds/Red',
+  '/Battery/Devices/%id%/Leds/Green',
+  '/Battery/Devices/%id%/Leds/Amber',
+
+  '/Battery/Devices/%id%/Temperatures/Heating',
+  '/Battery/Devices/%id%/Temperatures/Board',
+  '/Battery/Devices/%id%/Temperatures/Cells/Left',
+  '/Battery/Devices/%id%/Temperatures/Cells/Right',
+  '/Battery/Devices/%id%/Temperatures/State',
+
+  '/Battery/Devices/%id%/BatteryStrings/String1Active',
+  '/Battery/Devices/%id%/BatteryStrings/String2Active',
+  '/Battery/Devices/%id%/BatteryStrings/String3Active',
+  '/Battery/Devices/%id%/BatteryStrings/String4Active',
+  '/Battery/Devices/%id%/BatteryStrings/String5Active',
+
+  '/Battery/Devices/%id%/IoStatus/ConnectedToDcBus',
+  '/Battery/Devices/%id%/IoStatus/AlarmOutActive',
+  '/Battery/Devices/%id%/IoStatus/InternalFanActive',
+  '/Battery/Devices/%id%/IoStatus/VoltMeasurementAllowed',
+  '/Battery/Devices/%id%/IoStatus/AuxRelayBus',
+  '/Battery/Devices/%id%/IoStatus/RemoteStateActive',
+  '/Battery/Devices/%id%/IoStatus/RiscActive',
+
+  '/Battery/Devices/%id%/Eoc',
+  '/Battery/Devices/%id%/SerialNumber',
+  '/Battery/Devices/%id%/TimeSinceTOC',
+  '/Battery/Devices/%id%/CalibrationChargeRequested',
+  '/Battery/Devices/%id%/MaxChargePower',
+  '/Battery/Devices/%id%/MaxDischargePower'
+];
+
 export const topologyPaths: TopologyPaths = {
   gridBox: ['/Config/Devices/GridMeterIp/DeviceState'],
   pvOnAcGridBox: ['/Config/Devices/PvOnAcGrid/DeviceState'],
@@ -150,88 +283,9 @@ export const topologyPaths: TopologyPaths = {
     '/Battery/Devices/10/Dc/Voltage'
   ],
 
-  batteryView: [
+  batteryView: batteryIds.flatMap((id) =>
-    '/Config/Devices/BatteryNodes',
+    batteryPaths.map((path) => path.replace('%id%', id.toString()))
-    '/Battery/Devices/1/FwVersion',
+  ),
-    '/Battery/Devices/1/Dc/Power',
-    '/Battery/Devices/1/Dc/Voltage',
-    '/Battery/Devices/1/Soc',
-    '/Battery/Devices/1/Temperatures/Cells/Average',
-    '/Battery/Devices/1/Warnings',
-    '/Battery/Devices/1/Alarms',
-
-    '/Battery/Devices/2/FwVersion',
-    '/Battery/Devices/2/Dc/Power',
-    '/Battery/Devices/2/Dc/Voltage',
-    '/Battery/Devices/2/Soc',
-    '/Battery/Devices/2/Temperatures/Cells/Average',
-    '/Battery/Devices/2/Warnings',
-    '/Battery/Devices/2/Alarms',
-
-    '/Battery/Devices/3/FwVersion',
-    '/Battery/Devices/3/Dc/Power',
-    '/Battery/Devices/3/Dc/Voltage',
-    '/Battery/Devices/3/Soc',
-    '/Battery/Devices/3/Temperatures/Cells/Average',
-    '/Battery/Devices/3/Warnings',
-    '/Battery/Devices/3/Alarms',
-
-    '/Battery/Devices/4/FwVersion',
-    '/Battery/Devices/4/Dc/Power',
-    '/Battery/Devices/4/Dc/Voltage',
-    '/Battery/Devices/4/Soc',
-    '/Battery/Devices/4/Temperatures/Cells/Average',
-    '/Battery/Devices/4/Warnings',
-    '/Battery/Devices/4/Alarms',
-
-    '/Battery/Devices/5/FwVersion',
-    '/Battery/Devices/5/Dc/Power',
-    '/Battery/Devices/5/Dc/Voltage',
-    '/Battery/Devices/5/Soc',
-    '/Battery/Devices/5/Temperatures/Cells/Average',
-    '/Battery/Devices/5/Warnings',
-    '/Battery/Devices/5/Alarms',
-
-    '/Battery/Devices/6/FwVersion',
-    '/Battery/Devices/6/Dc/Power',
-    '/Battery/Devices/6/Dc/Voltage',
-    '/Battery/Devices/6/Soc',
-    '/Battery/Devices/6/Temperatures/Cells/Average',
-    '/Battery/Devices/6/Warnings',
-    '/Battery/Devices/6/Alarms',
-
-    '/Battery/Devices/7/FwVersion',
-    '/Battery/Devices/7/Dc/Power',
-    '/Battery/Devices/7/Dc/Voltage',
-    '/Battery/Devices/7/Soc',
-    '/Battery/Devices/7/Temperatures/Cells/Average',
-    '/Battery/Devices/7/Warnings',
-    '/Battery/Devices/7/Alarms',
-
-    '/Battery/Devices/8/FwVersion',
-    '/Battery/Devices/8/Dc/Power',
-    '/Battery/Devices/8/Dc/Voltage',
-    '/Battery/Devices/8/Soc',
-    '/Battery/Devices/8/Temperatures/Cells/Average',
-    '/Battery/Devices/8/Warnings',
-    '/Battery/Devices/8/Alarms',
-
-    '/Battery/Devices/9/FwVersion',
-    '/Battery/Devices/9/Dc/Power',
-    '/Battery/Devices/9/Dc/Voltage',
-    '/Battery/Devices/9/Soc',
-    '/Battery/Devices/9/Temperatures/Cells/Average',
-    '/Battery/Devices/9/Warnings',
-    '/Battery/Devices/9/Alarms',
-
-    '/Battery/Devices/10/FwVersion',
-    '/Battery/Devices/10/Dc/Power',
-    '/Battery/Devices/10/Dc/Voltage',
-    '/Battery/Devices/10/Soc',
-    '/Battery/Devices/10/Temperatures/Cells/Average',
-    '/Battery/Devices/10/Warnings',
-    '/Battery/Devices/10/Alarms'
-  ],
 
   minimumSoC: ['/Config/MinSoc'],
   installedDcDcPower: ['/DcDc/SystemControl/NumberOfConnectedSlaves'],
@@ -251,6 +305,44 @@ export const extractValues = (
     const paths = topologyPaths[topologyKey];
     let topologyValues: { unit: string; value: string | number }[] = [];
 
+    if (topologyKey === 'batteryView') {
+      extractedValues[topologyKey] = [];
+      const numOfBatteries = timeSeriesData.value[
+        '/Config/Devices/BatteryNodes'
+      ].value
+        .toString()
+        .split(',').length;
+
+      let battery_id = 1;
+      let pathIndex = 0;
+
+      while (pathIndex < paths.length) {
+        let battery = {};
+        let existingKeys = 0;
+        battery[BatteryKeys[0]] = battery_id;
+        for (let i = 1; i < BatteryKeys.length; i++) {
+          const path = paths[pathIndex];
+          if (timeSeriesData.value.hasOwnProperty(path)) {
+            existingKeys++;
+
+            battery[BatteryKeys[i]] = {
+              unit: timeSeriesData.value[path].unit.includes('~')
+                ? timeSeriesData.value[path].unit.replace('~', '')
+                : timeSeriesData.value[path].unit,
+              value:
+                typeof timeSeriesData.value[path].value === 'string'
+                  ? timeSeriesData.value[path].value
+                  : Number(timeSeriesData.value[path].value).toFixed(1)
+            };
+          }
+          pathIndex++;
+        }
+        battery_id++;
+        if (existingKeys > 0) {
+          extractedValues[topologyKey].push(battery as Battery);
+        }
+      }
+    } else {
       // Check if any of the specified paths exist in the dataRecord
       for (const path of paths) {
         if (timeSeriesData.value.hasOwnProperty(path)) {
@@ -263,27 +355,26 @@ export const extractValues = (
         }
       }
       if (topologyValues.length > 0) {
-      extractedValues[topologyKey] = {
+        extractedValues[topologyKey] = topologyValues;
-        label: topologyPaths[topologyKey as keyof TopologyValues][0]
+      }
-          .split('/')
-          .pop(),
-        values: topologyValues
-      };
     }
   }
 
   return extractedValues;
 };
 
-export const getHighestConnectionValue = (values: TopologyValues) =>
+export const getHighestConnectionValue = (values: TopologyValues) => {
-  Object.keys(values)
+  return Object.keys(values)
     .filter((value) => value.includes('Connection'))
     .reduce((acc, curr) => {
-      const value = Math.abs(
+      let topologyValue = values[
-        values[curr as keyof TopologyValues].values[0].value as number
+        curr as keyof TopologyValues
-      );
+      ][0] as I_BoxDataValue;
+
+      const value = Math.abs(topologyValue.value as number);
       return value > acc ? value : acc;
     }, 0);
+};
 
 export const getAmount = (
   highestConnectionValue: number,

typescript/frontend-marios2/src/content/dashboards/Topology/Topology.tsx

@@ -75,8 +75,7 @@ function Topology(props: TopologyProps) {
             centerBox={{
               title: 'Grid',
               data: props.values.grid,
-              connected:
+              connected: props.values.gridBox[0].value.toString() != 'Disabled'
-                props.values.gridBox.values[0].value.toString() != 'Disabled'
             }}
             centerConnection={{
               orientation: 'horizontal',
@@ -84,7 +83,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.gridToAcInConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.gridToAcInConnection.values
+                    props.values.gridToAcInConnection
                   )
                 : 0,
               showValues: showValues
@@ -97,8 +96,7 @@ function Topology(props: TopologyProps) {
               title: 'Pv Inverter',
               data: props.values.gridBusToPvOnGridbusConnection,
               connected:
-                props.values.pvOnAcGridBox.values[0].value.toString() !=
+                props.values.pvOnAcGridBox[0].value.toString() != 'Disabled'
-                'Disabled'
             }}
             topConnection={{
               orientation: 'vertical',
@@ -107,7 +105,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.gridBusToPvOnGridbusConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.gridBusToPvOnGridbusConnection.values
+                    props.values.gridBusToPvOnGridbusConnection
                   )
                 : 0,
               showValues: showValues
@@ -123,7 +121,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.gridBusToIslandBusConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.gridBusToIslandBusConnection.values
+                    props.values.gridBusToIslandBusConnection
                   )
                 : 0,
               data: props.values.gridBusToIslandBusConnection,
@@ -133,8 +131,7 @@ function Topology(props: TopologyProps) {
               title: 'AC Loads',
               data: props.values.gridBusToLoadOnGridBusConnection,
               connected:
-                props.values.loadOnAcGridBox.values[0].value.toString() !=
+                props.values.loadOnAcGridBox[0].value.toString() != 'Disabled'
-                'Disabled'
             }}
             bottomConnection={{
               orientation: 'vertical',
@@ -143,7 +140,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.gridBusToLoadOnGridBusConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.gridBusToLoadOnGridBusConnection.values
+                    props.values.gridBusToLoadOnGridBusConnection
                   )
                 : 0,
               showValues: showValues
@@ -156,8 +153,7 @@ function Topology(props: TopologyProps) {
               title: 'Pv Inverter',
               data: props.values.pvOnIslandBusToIslandBusConnection,
               connected:
-                props.values.pvOnIslandBusBox.values[0].value.toString() !=
+                props.values.pvOnIslandBusBox[0].value.toString() != 'Disabled'
-                'Disabled'
             }}
             topConnection={{
               orientation: 'vertical',
@@ -166,7 +162,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.pvOnIslandBusToIslandBusConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.pvOnIslandBusToIslandBusConnection.values
+                    props.values.pvOnIslandBusToIslandBusConnection
                   )
                 : 0,
               showValues: showValues
@@ -182,7 +178,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.islandBusToInverter
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.islandBusToInverter.values
+                    props.values.islandBusToInverter
                   )
                 : 0,
               showValues: showValues
@@ -191,7 +187,7 @@ function Topology(props: TopologyProps) {
               title: 'AC Loads',
               data: props.values.islandBusToLoadOnIslandBusConnection,
               connected:
-                props.values.loadOnIslandBusBox.values[0].value.toString() !=
+                props.values.loadOnIslandBusBox[0].value.toString() !=
                 'Disabled'
             }}
             bottomConnection={{
@@ -201,7 +197,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.islandBusToLoadOnIslandBusConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.islandBusToLoadOnIslandBusConnection.values
+                    props.values.islandBusToLoadOnIslandBusConnection
                   )
                 : 0,
               showValues: showValues
@@ -221,7 +217,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.inverterToDcBus
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.inverterToDcBus.values
+                    props.values.inverterToDcBus
                   )
                 : 0,
               showValues: showValues
@@ -234,7 +230,7 @@ function Topology(props: TopologyProps) {
               title: 'Pv DC-DC',
               data: props.values.pvOnDcBusToDcBusConnection,
               connected:
-                props.values.pvOnDcBox.values[0].value.toString() != 'Disabled'
+                props.values.pvOnDcBox[0].value.toString() != 'Disabled'
             }}
             topConnection={{
               orientation: 'vertical',
@@ -243,7 +239,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.pvOnDcBusToDcBusConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.pvOnDcBusToDcBusConnection.values
+                    props.values.pvOnDcBusToDcBusConnection
                   )
                 : 0,
               showValues: showValues
@@ -259,7 +255,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.dcBusToDcDcConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.dcBusToDcDcConnection.values
+                    props.values.dcBusToDcDcConnection
                   )
                 : 0,
               showValues: showValues
@@ -268,8 +264,7 @@ function Topology(props: TopologyProps) {
               title: 'DC Loads',
               data: props.values.dcBusToLoadOnDcConnection,
               connected:
-                props.values.loadOnDcBox.values[0].value.toString() !=
+                props.values.loadOnDcBox[0].value.toString() != 'Disabled'
-                'Disabled'
             }}
             bottomConnection={{
               orientation: 'vertical',
@@ -278,7 +273,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.dcBusToLoadOnDcConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.dcBusToLoadOnDcConnection.values
+                    props.values.dcBusToLoadOnDcConnection
                   )
                 : 0,
               showValues: showValues
@@ -298,7 +293,7 @@ function Topology(props: TopologyProps) {
               amount: props.values.dcDCToBatteryConnection
                 ? getAmount(
                     highestConnectionValue,
-                    props.values.dcDCToBatteryConnection.values
+                    props.values.dcDCToBatteryConnection
                   )
                 : 0,
               showValues: showValues
@@ -311,7 +306,7 @@ function Topology(props: TopologyProps) {
               title: 'Battery',
               data: props.values.battery,
               connected:
-                props.values.batteryBox.values[0].value.toString() != 'Disabled'
+                props.values.batteryBox[0].value.toString() != 'Disabled'
             }}
             isLast={true}
             isFirst={false}

typescript/frontend-marios2/src/content/dashboards/Topology/topologyBox.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
+import { Box, Card, CardContent, Divider, Typography } from '@mui/material';
-  Box,
-  Card,
-  CardContent,
-  Divider,
-  Typography,
-  useTheme
-} from '@mui/material';
 import { AvatarWrapper } from 'src/layouts/TabsContainerWrapper';
 import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60';
 import OutletIcon from '@mui/icons-material/Outlet';
@@ -14,21 +7,17 @@ import SolarPowerIcon from '@mui/icons-material/SolarPower';
 import PowerInputIcon from '@mui/icons-material/PowerInput';
 import SignalWifiConnectedNoInternet4Icon from '@mui/icons-material/SignalWifiConnectedNoInternet4';
 import BoltIcon from '@mui/icons-material/Bolt';
-import { BoxData } from '../Log/graph.util';
+import { I_BoxDataValue } from '../Log/graph.util';
 import inverterImage from 'src/Resources/images/inverter.png';
 import acCurrentImage from 'src/Resources/images/ac-current.png';
 import converterImage from 'src/Resources/images/converter.png';
 
 export interface TopologyBoxProps {
   title: string;
-  data?: BoxData;
+  data?: I_BoxDataValue[];
   connected?: boolean;
 }
 
-const isInt = (value: number) => {
-  return value % 1 === 0;
-};
-
 function formatPower(value, unit) {
   if (isNaN(value)) {
     return 'Invalid';
@@ -60,7 +49,6 @@ function formatPower(value, unit) {
 }
 
 function TopologyBox(props: TopologyBoxProps) {
-  const theme = useTheme();
   const isMobile = window.innerWidth <= 1490;
 
   return (
@@ -106,7 +94,7 @@ function TopologyBox(props: TopologyBoxProps) {
         >
           {props.data && props.title === 'Battery' && (
             <Typography variant="h5" noWrap>
-              {props.title} (x{props.data.values.length - 4})
+              {props.title} (x{props.data.length - 4})
             </Typography>
           )}
           {props.title != 'Battery' && (
@@ -245,7 +233,7 @@ function TopologyBox(props: TopologyBoxProps) {
                 pt: 1
               }}
             >
-              {props.data.values.map((boxData, index) => {
+              {props.data.map((boxData, index) => {
                 return (
                   <Typography key={index}>
                     {formatPower(boxData.value, boxData.unit) === 0

typescript/frontend-marios2/src/content/dashboards/Topology/topologyFlow.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import './dotsAnimation.css';
-import { BoxData } from '../Log/graph.util';
 import { Box, Typography } from '@mui/material';
+import { I_BoxDataValue } from '../Log/graph.util';
 
 export interface TopologyFlowProps {
   orientation: string;
   position?: string;
-  data?: BoxData;
+  data?: I_BoxDataValue[];
   amount?: number;
   showValues: boolean;
 }
@@ -23,10 +23,6 @@ function getRandomStyleVertical() {
   return { animationDelay, left };
 }
 
-const isInt = (value: number) => {
-  return value % 1 === 0;
-};
-
 function formatPower(value) {
   if (isNaN(value)) {
     return 'Invalid';
@@ -107,7 +103,7 @@ function TopologyFlow(props: TopologyFlowProps) {
             zIndex: 1
           }}
         >
-          {props.showValues && props.data.values[0].value != 0 && (
+          {props.showValues && props.data[0].value != 0 && (
             <Typography
               sx={{
                 marginTop: '1px',
@@ -118,12 +114,12 @@ function TopologyFlow(props: TopologyFlowProps) {
                 zIndex: 1
               }}
             >
-              {formatPower(props.data.values[0].value) === 0
+              {formatPower(props.data[0].value) === 0
                 ? null
-                : formatPower(props.data.values[0].value)}
+                : formatPower(props.data[0].value)}
-              {formatPower(props.data.values[0].value) === 0
+              {formatPower(props.data[0].value) === 0
                 ? null
-                : props.data.values[0].unit}
+                : props.data[0].unit}
             </Typography>
           )}
         </Box>
@@ -158,13 +154,13 @@ function TopologyFlow(props: TopologyFlowProps) {
       >
         {props.orientation === 'horizontal' &&
           props.data &&
-          props.data.values[0].value != 0 && (
+          props.data[0].value != 0 && (
             <>
               <div className="container">
                 {dotStyles.map((style, index) => (
                   <div
                     className={
-                      (props.data.values[0].value as number) >= 0
+                      (props.data[0].value as number) >= 0
                         ? 'dotRight'
                         : 'dotLeft'
                     }
@@ -181,7 +177,7 @@ function TopologyFlow(props: TopologyFlowProps) {
 
         {props.orientation === 'vertical' &&
           props.data &&
-          props.data.values[0].value != 0 && (
+          props.data[0].value != 0 && (
             <div className="dot-container">
               {dotStylesVertical.map((style, index) => (
                 <div