Merge remote-tracking branch 'origin/main'

csharp/App/Backend/Websockets/RabbitMQManager.cs

@@ -57,9 +57,9 @@ public static class RabbitMqManager
                 if (receivedStatusMessage != null)
                 {
                     Console.WriteLine("----------------------------------------------");
-                    Console.WriteLine("Received a message from installation: " + receivedStatusMessage.InstallationId + " and status is: " + receivedStatusMessage.Status);
-                    int installationId = (int)Db.Installations.Where(f => f.Product == 0 && f.S3BucketId == receivedStatusMessage.InstallationId).Select(f => f.Id).FirstOrDefault();
                     
+                    int installationId = (int)Db.Installations.Where(f => f.Product == receivedStatusMessage.Product && f.S3BucketId == receivedStatusMessage.InstallationId).Select(f => f.Id).FirstOrDefault();
+                    Console.WriteLine("Received a message from installation: " + installationId + " , product is: "+receivedStatusMessage.Product+ " and status is: " + receivedStatusMessage.Status);
 
                     //This is a heartbit message, just update the timestamp for this installation.
                     //There is no need to notify the corresponding front-ends.
@@ -77,7 +77,7 @@ public static class RabbitMqManager
                             {
                                 Warning newWarning = new Warning
                                 {
-                                    InstallationId = receivedStatusMessage.InstallationId,
+                                    InstallationId = installationId,
                                     Description = warning.Description,
                                     Date = warning.Date,
                                     Time = warning.Time,
@@ -85,7 +85,7 @@ public static class RabbitMqManager
                                     Seen = false
                                 };
                                 //Create a new warning and add it to the database
-                                Db.HandleWarning(newWarning, receivedStatusMessage.InstallationId);
+                                Db.HandleWarning(newWarning, installationId);
                             }
                         }
 
@@ -93,12 +93,12 @@ public static class RabbitMqManager
                         //Traverse the Alarm list, and store each of them to the database
                         if (receivedStatusMessage.Alarms != null)
                         {
-                            Console.WriteLine("Add an alarm for installation "+receivedStatusMessage.InstallationId);
+                            Console.WriteLine("Add an alarm for installation "+installationId);
                             foreach (var alarm in receivedStatusMessage.Alarms)
                             {
                                 Error newError = new Error
                                 {
-                                    InstallationId = receivedStatusMessage.InstallationId,
+                                    InstallationId = installationId,
                                     Description = alarm.Description,
                                     Date = alarm.Date,
                                     Time = alarm.Time,
@@ -106,7 +106,7 @@ public static class RabbitMqManager
                                     Seen = false
                                 };
                                 //Create a new error and add it to the database
-                                Db.HandleError(newError, receivedStatusMessage.InstallationId);
+                                Db.HandleError(newError, installationId);
                             }
                         }
                     }

csharp/App/SaliMax/deploy_all_installations.sh

@@ -16,7 +16,11 @@ dotnet publish  \
        -r linux-x64 
 
 echo -e "\n============================ Deploy ============================\n" 
-ip_addresses=("10.2.3.115" "10.2.3.104" "10.2.4.33" "10.2.4.32" "10.2.4.36" "10.2.4.35" "10.2.4.154" "10.2.4.113" "10.2.4.29")
+#ip_addresses=("10.2.3.115" "10.2.3.104" "10.2.4.33" "10.2.4.32" "10.2.4.36" "10.2.4.35" "10.2.4.154" "10.2.4.113" "10.2.4.29")
+#ip_addresses=("10.2.4.154" "10.2.4.29")
+ip_addresses=("10.2.3.115" "10.2.3.104" "10.2.4.33" "10.2.4.32" "10.2.4.36" "10.2.4.35" "10.2.4.154" "10.2.4.29")
+
+
 
 for ip_address in "${ip_addresses[@]}"; do
     rsync -v \

csharp/App/SaliMax/src/AggregationService/HourlyData.cs

@@ -1,3 +1,5 @@
+using System.IO.Compression;
+using System.Text;
 using System.Text.Json;
 using Flurl.Http;
 using InnovEnergy.App.SaliMax.Devices;
@@ -68,7 +70,37 @@ public class AggregatedData
 
         var s3Path   = DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd") + ".csv";
         var request  = _S3Config.CreatePutRequest(s3Path);
-        var response = await request.PutAsync(new StringContent(csv));
+        
+        // Compress CSV data to a byte array
+        byte[] compressedBytes;
+        using (var memoryStream = new MemoryStream())
+        {
+            //Create a zip directory and put the compressed file inside
+            using (var archive = new ZipArchive(memoryStream, ZipArchiveMode.Create, true))
+            {
+                var entry = archive.CreateEntry("data.csv", CompressionLevel.SmallestSize); // Add CSV data to the ZIP archive
+                using (var entryStream = entry.Open())
+                using (var writer = new StreamWriter(entryStream))
+                {
+                    writer.Write(csv);
+                }
+            }
+
+            compressedBytes = memoryStream.ToArray();
+        }
+
+        // Encode the compressed byte array as a Base64 string
+        string base64String = Convert.ToBase64String(compressedBytes);
+
+        // Create StringContent from Base64 string
+        var stringContent = new StringContent(base64String, Encoding.UTF8, "application/base64");
+
+        // Upload the compressed data (ZIP archive) to S3
+        var response = await request.PutAsync(stringContent);
+        
+        //
+        // var request  = _S3Config.CreatePutRequest(s3Path);
+        // var response = await request.PutAsync(new StringContent(csv));
 
         if (response.StatusCode != 200)
         {

csharp/App/SaliMax/src/Program.cs

@@ -1,4 +1,4 @@
-#define Amax
+#undef Amax
 #undef GridLimit
 
 using System.IO.Compression;
@@ -486,6 +486,7 @@ internal static class Program
         var returnedStatus = new StatusMessage
         {
             InstallationId = installationId,
+            Product        = 0,
             Status         = salimaxAlarmsState,
             Type           = MessageType.AlarmOrWarning,
             Alarms         = alarmList,

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

@@ -31,6 +31,21 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
   const [selectedInstallation, setSelectedInstallation] = useState<number>(-1);
   const currentLocation = useLocation();
 
+  const sortedInstallations = [...props.installations].sort((a, b) => {
+    // Compare the status field of each installation and sort them based on the status.
+    //Installations with alarms go first
+    let a_status = getStatus(a.id);
+    let b_status = getStatus(b.id);
+
+    if (a_status > b_status) {
+      return -1;
+    }
+    if (a_status < b_status) {
+      return 1;
+    }
+    return 0;
+  });
+
   const handleSelectOneInstallation = (installationID: number): void => {
     if (selectedInstallation != installationID) {
       setSelectedInstallation(installationID);
@@ -100,7 +115,7 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
                 </TableRow>
               </TableHead>
               <TableBody>
-                {props.installations.map((installation) => {
+                {sortedInstallations.map((installation) => {
                   const isInstallationSelected =
                     installation.s3BucketId === selectedInstallation;
 

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

@@ -25,9 +25,29 @@ export const fetchDailyData = (
         if (r.status === 404) {
           return Promise.resolve(FetchResult.notAvailable);
         } else if (r.status === 200) {
-          const text = await r.text();
+          // const text = await r.text();
+          const csvtext = await r.text(); // Assuming the server returns the Base64 encoded ZIP file as text
+
+          //const response = await fetch(url); // Fetch the resource from the server
+          const contentEncoding = r.headers.get('content-type');
+
+          if (contentEncoding != 'application/base64; charset=utf-8') {
+            return parseCsv(csvtext);
+          }
+
+          const byteArray = Uint8Array.from(atob(csvtext), (c) =>
+            c.charCodeAt(0)
+          );
+
+          //Decompress the byte array using JSZip
+          const zip = await JSZip.loadAsync(byteArray);
+          // Assuming the CSV file is named "data.csv" inside the ZIP archive
+          const csvContent = await zip.file('data.csv').async('text');
+
+          return parseCsv(csvContent);
+
           //console.log(parseCsv(text));
-          return parseCsv(text);
+          //return parseCsv(text);
         } else {
           return Promise.resolve(FetchResult.notAvailable);
         }
@@ -58,15 +78,24 @@ export const fetchData = (
         if (r.status === 404) {
           return Promise.resolve(FetchResult.notAvailable);
         } else if (r.status === 200) {
-          const base64String = await r.text(); // Assuming the server returns the Base64 encoded ZIP file as text
+          const csvtext = await r.text(); // Assuming the server returns the Base64 encoded ZIP file as text
-          const byteArray = Uint8Array.from(atob(base64String), (c) =>
+
+          //const response = await fetch(url); // Fetch the resource from the server
+          const contentEncoding = r.headers.get('content-type');
+
+          if (contentEncoding != 'application/base64; charset=utf-8') {
+            return parseCsv(csvtext);
+          }
+
+          const byteArray = Uint8Array.from(atob(csvtext), (c) =>
             c.charCodeAt(0)
           );
 
-          // Decompress the byte array using JSZip
+          //Decompress the byte array using JSZip
           const zip = await JSZip.loadAsync(byteArray);
           // Assuming the CSV file is named "data.csv" inside the ZIP archive
           const csvContent = await zip.file('data.csv').async('text');
+
           return parseCsv(csvContent);
         } else {
           return Promise.resolve(FetchResult.notAvailable);

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

@@ -135,6 +135,33 @@ function InstallationTabs() {
             )
           }
         ]
+      : currentUser.userType == UserType.partner
+      ? [
+          {
+            value: 'live',
+            label: <FormattedMessage id="live" defaultMessage="Live" />
+          },
+          {
+            value: 'overview',
+            label: <FormattedMessage id="overview" defaultMessage="Overview" />
+          },
+          {
+            value: 'batteryview',
+            label: (
+              <FormattedMessage
+                id="batteryview"
+                defaultMessage="Battery View"
+              />
+            )
+          },
+
+          {
+            value: 'information',
+            label: (
+              <FormattedMessage id="information" defaultMessage="Information" />
+            )
+          }
+        ]
       : [
           {
             value: 'live',
@@ -219,7 +246,8 @@ function InstallationTabs() {
               )
             }
           ]
-        : [
+        : currentUser.userType == UserType.partner
+        ? [
             {
               value: 'list',
               icon: <ListIcon id="mode-toggle-button-list-icon" />
@@ -249,6 +277,37 @@ function InstallationTabs() {
               )
             },
 
+            {
+              value: 'information',
+              label: (
+                <FormattedMessage
+                  id="information"
+                  defaultMessage="Information"
+                />
+              )
+            }
+          ]
+        : [
+            {
+              value: 'list',
+              icon: <ListIcon id="mode-toggle-button-list-icon" />
+            },
+            {
+              value: 'tree',
+              icon: <AccountTreeIcon id="mode-toggle-button-tree-icon" />
+            },
+
+            {
+              value: 'live',
+              label: <FormattedMessage id="live" defaultMessage="Live" />
+            },
+            {
+              value: 'overview',
+              label: (
+                <FormattedMessage id="overview" defaultMessage="Overview" />
+              )
+            },
+
             {
               value: 'information',
               label: (

typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx

@@ -45,14 +45,10 @@ function Overview(props: OverviewProps) {
   const { currentUser } = context;
 
   const [dailyData, setDailyData] = useState(true);
-  const [weeklyData, setWeeklyData] = useState(false);
+  const [aggregatedData, setAggregatedData] = useState(false);
-  const [weeklybalance, setWeeklyBalance] = useState([]);
-  const [monthlybalance, setMonthlyBalance] = useState([]);
-  const [monthlyData, setMonthlyData] = useState(false);
   const [loading, setLoading] = useState(true);
   const [chartState, setChartState] = useState(0);
-  const [monthlyDateList, setMonthlyDateList] = useState([]);
+  const [aggregatedChartState, setAggregatedChartState] = useState(0);
-  const [weeklyDateList, setWeeklyDateList] = useState([]);
   const [isDateModalOpen, setIsDateModalOpen] = useState(false);
   const [isErrorDateModalOpen, setErrorDateModalOpen] = useState(false);
   const [dateSelectionError, setDateSelectionError] = useState('');
@@ -64,19 +60,18 @@ function Overview(props: OverviewProps) {
     }[]
   >([]);
 
+  const [aggregatedDataArray, setAggregatedDataArray] = useState<
+    {
+      chartData: chartAggregatedDataInterface;
+      chartOverview: overviewInterface;
+      datelist: any[];
+      netbalance: any[];
+    }[]
+  >([]);
+
   const [startDate, setStartDate] = useState(dayjs().add(-1, 'day'));
   const [endDate, setEndDate] = useState(dayjs());
 
-  const [weeklyDataArray, setWeeklyDataArray] = useState<{
-    chartData: chartAggregatedDataInterface;
-    chartOverview: overviewInterface;
-  }>({ chartData: null, chartOverview: null });
-
-  const [monthlyDataArray, setMonthlyDataArray] = useState<{
-    chartData: chartAggregatedDataInterface;
-    chartOverview: overviewInterface;
-  }>({ chartData: null, chartOverview: null });
-
   useEffect(() => {
     const resultPromise: Promise<{
       chartData: chartDataInterface;
@@ -135,17 +130,19 @@ function Overview(props: OverviewProps) {
 
   const handle24HourData = () => {
     setDailyData(true);
-    setWeeklyData(false);
+    setAggregatedData(false);
-    setMonthlyData(false);
     setChartState(0);
   };
 
   const handleWeekData = () => {
     setDailyData(false);
-    setWeeklyData(true);
+    setAggregatedData(true);
-    setMonthlyData(false);
+    setAggregatedChartState(0);
 
-    if (weeklyDataArray.chartData != null) {
+    if (
+      aggregatedDataArray[aggregatedChartState] &&
+      aggregatedDataArray[aggregatedChartState].chartData != null
+    ) {
       return;
     }
     setLoading(true);
@@ -153,15 +150,15 @@ function Overview(props: OverviewProps) {
     const resultPromise: Promise<{
       chartAggregatedData: chartAggregatedDataInterface;
       chartOverview: overviewInterface;
-    }> = transformInputToAggregatedData(props.s3Credentials, 'weekly');
+    }> = transformInputToAggregatedData(
+      props.s3Credentials,
+
+      dayjs().subtract(1, 'week'),
+      dayjs()
+    );
 
     resultPromise
       .then((result) => {
-        setWeeklyDataArray({
-          chartData: result.chartAggregatedData,
-          chartOverview: result.chartOverview
-        });
-
         const powerDifference = [];
         for (
           let i = 0;
@@ -174,8 +171,16 @@ function Overview(props: OverviewProps) {
           );
         }
 
-        setWeeklyBalance(powerDifference);
+        setAggregatedDataArray((prevData) =>
-        setWeeklyDateList(computeLast7Days());
+          prevData.concat({
+            chartData: result.chartAggregatedData,
+            chartOverview: result.chartOverview,
+            datelist: computeLast7Days(),
+            netbalance: powerDifference
+          })
+        );
+
+        setAggregatedChartState(aggregatedDataArray.length);
         setLoading(false);
       })
       .catch((error) => {
@@ -212,88 +217,100 @@ function Overview(props: OverviewProps) {
     }
 
     setLoading(true);
-    const resultPromise: Promise<{
-      chartData: chartDataInterface;
-      chartOverview: overviewInterface;
-    }> = transformInputToDailyData(
-      props.s3Credentials,
-      UnixTime.fromTicks(startDate.unix()),
-      UnixTime.fromTicks(endDate.unix())
-    );
 
-    resultPromise
+    if (dailyData) {
-      .then((result) => {
+      const resultPromise: Promise<{
-        setDailyDataArray((prevData) =>
+        chartData: chartDataInterface;
-          prevData.concat({
+        chartOverview: overviewInterface;
-            chartData: result.chartData,
+      }> = transformInputToDailyData(
-            chartOverview: result.chartOverview
+        props.s3Credentials,
-          })
+        UnixTime.fromTicks(startDate.unix()),
-        );
+        UnixTime.fromTicks(endDate.unix())
+      );
 
-        setLoading(false);
+      resultPromise
-        setChartState(dailyDataArray.length);
+        .then((result) => {
-      })
+          setDailyDataArray((prevData) =>
-      .catch((error) => {
+            prevData.concat({
-        console.error('Error:', error);
+              chartData: result.chartData,
-      });
+              chartOverview: result.chartOverview
+            })
+          );
+
+          setLoading(false);
+          setChartState(dailyDataArray.length);
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+        });
+    } else {
+      setDailyData(false);
+      setAggregatedData(true);
+
+      setLoading(true);
+
+      const resultPromise: Promise<{
+        chartAggregatedData: chartAggregatedDataInterface;
+        chartOverview: overviewInterface;
+        dateList: string[];
+      }> = transformInputToAggregatedData(
+        props.s3Credentials,
+        startDate,
+        endDate
+      );
+
+      resultPromise
+        .then((result) => {
+          const powerDifference = [];
+
+          for (
+            let i = 0;
+            i < result.chartAggregatedData.gridImportPower.data.length;
+            i++
+          ) {
+            powerDifference.push(
+              result.chartAggregatedData.gridImportPower.data[i] -
+                Math.abs(result.chartAggregatedData.gridExportPower.data[i])
+            );
+          }
+
+          setAggregatedDataArray((prevData) =>
+            prevData.concat({
+              chartData: result.chartAggregatedData,
+              chartOverview: result.chartOverview,
+              datelist: result.dateList,
+              netbalance: powerDifference
+            })
+          );
+
+          setAggregatedChartState(aggregatedDataArray.length);
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+        });
+    }
   };
 
   const handleGoBack = () => {
-    if (chartState > 0) {
+    if (dailyData && chartState > 0) {
       setChartState(chartState - 1);
     }
+    if (aggregatedData && aggregatedChartState > 0) {
+      setAggregatedChartState(aggregatedChartState - 1);
+    }
   };
 
   const handleGoForward = () => {
-    if (chartState + 1 < dailyDataArray.length) {
+    if (dailyData && chartState + 1 < dailyDataArray.length) {
       setChartState(chartState + 1);
     }
-  };
+    if (
-
+      aggregatedData &&
-  const handleMonthData = () => {
+      aggregatedChartState + 1 < aggregatedDataArray.length
-    setDailyData(false);
+    ) {
-    setWeeklyData(false);
+      setAggregatedChartState(aggregatedChartState + 1);
-    setMonthlyData(true);
-
-    if (monthlyDataArray.chartData != null) {
-      return;
     }
-    setLoading(true);
-
-    const resultPromise: Promise<{
-      chartAggregatedData: chartAggregatedDataInterface;
-      chartOverview: overviewInterface;
-      dateList: string[];
-    }> = transformInputToAggregatedData(props.s3Credentials, 'monthly');
-
-    resultPromise
-      .then((result) => {
-        setMonthlyDataArray({
-          chartData: result.chartAggregatedData,
-          chartOverview: result.chartOverview
-        });
-
-        const powerDifference = [];
-
-        for (
-          let i = 0;
-          i < result.chartAggregatedData.gridImportPower.data.length;
-          i++
-        ) {
-          powerDifference.push(
-            result.chartAggregatedData.gridImportPower.data[i] -
-              Math.abs(result.chartAggregatedData.gridExportPower.data[i])
-          );
-        }
-
-        setMonthlyBalance(powerDifference);
-
-        setMonthlyDateList(result.dateList);
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.error('Error:', error);
-      });
   };
 
   const renderGraphs = () => {
@@ -438,86 +455,74 @@ function Overview(props: OverviewProps) {
               sx={{
                 marginTop: '20px',
                 marginLeft: '10px',
-                backgroundColor: weeklyData ? '#808080' : '#ffc04d',
+                backgroundColor: aggregatedData ? '#808080' : '#ffc04d',
                 color: '#000000',
                 '&:hover': { bgcolor: '#f7b34d' }
               }}
             >
               <FormattedMessage id="lastweek" defaultMessage="Last week" />
             </Button>
-            {/*<Button*/}
-            {/*  variant="contained"*/}
-            {/*  onClick={handleMonthData}*/}
-            {/*  disabled={loading}*/}
-            {/*  sx={{*/}
-            {/*    marginTop: '20px',*/}
-            {/*    marginLeft: '10px',*/}
-            {/*    backgroundColor: monthlyData ? '#808080' : '#ffc04d',*/}
-            {/*    color: '#000000',*/}
-            {/*    '&:hover': { bgcolor: '#f7b34d' }*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <FormattedMessage id="lastmonth" defaultMessage="Last Month" />*/}
-            {/*</Button>*/}
-            {dailyData && (
-              <>
-                <Button
-                  variant="contained"
-                  onClick={handleSetDate}
-                  disabled={loading}
-                  sx={{
-                    marginTop: '20px',
-                    marginLeft: '10px',
-                    backgroundColor: dateOpen ? '#808080' : '#ffc04d',
-                    color: '#000000',
-                    '&:hover': { bgcolor: '#f7b34d' }
-                  }}
-                >
-                  <FormattedMessage id="lastmonth" defaultMessage="Set Date" />
-                </Button>
-              </>
-            )}
-          </Grid>
-          {dailyData && (
-            <Grid
-              container
-              justifyContent="flex-end"
-              alignItems="center"
-              item
-              xs={6}
-              md={6}
-            >
-              <Button
-                variant="contained"
-                disabled={!(chartState > 0)}
-                onClick={handleGoBack}
-                sx={{
-                  marginTop: '20px',
-                  marginLeft: '10px',
-                  backgroundColor: '#ffc04d',
-                  color: '#000000',
-                  '&:hover': { bgcolor: '#f7b34d' }
-                }}
-              >
-                <FormattedMessage id="goback" defaultMessage="Zoom out" />
-              </Button>
 
-              <Button
+            <Button
-                variant="contained"
+              variant="contained"
-                disabled={!(chartState < dailyDataArray.length - 1)}
+              onClick={handleSetDate}
-                onClick={handleGoForward}
+              disabled={loading}
-                sx={{
+              sx={{
-                  marginTop: '20px',
+                marginTop: '20px',
-                  marginLeft: '10px',
+                marginLeft: '10px',
-                  backgroundColor: '#ffc04d',
+                backgroundColor: dateOpen ? '#808080' : '#ffc04d',
-                  color: '#000000',
+                color: '#000000',
-                  '&:hover': { bgcolor: '#f7b34d' }
+                '&:hover': { bgcolor: '#f7b34d' }
-                }}
+              }}
-              >
+            >
-                <FormattedMessage id="goback" defaultMessage="Zoom in" />
+              <FormattedMessage id="lastmonth" defaultMessage="Set Date" />
-              </Button>
+            </Button>
-            </Grid>
+          </Grid>
-          )}
+
+          <Grid
+            container
+            justifyContent="flex-end"
+            alignItems="center"
+            item
+            xs={6}
+            md={6}
+          >
+            <Button
+              variant="contained"
+              disabled={
+                dailyData ? !(chartState > 0) : !(aggregatedChartState > 0)
+              }
+              onClick={handleGoBack}
+              sx={{
+                marginTop: '20px',
+                marginLeft: '10px',
+                backgroundColor: '#ffc04d',
+                color: '#000000',
+                '&:hover': { bgcolor: '#f7b34d' }
+              }}
+            >
+              <FormattedMessage id="goback" defaultMessage="Zoom out" />
+            </Button>
+
+            <Button
+              variant="contained"
+              disabled={
+                dailyData
+                  ? !(chartState < dailyDataArray.length - 1)
+                  : !(aggregatedChartState < aggregatedDataArray.length - 1)
+              }
+              onClick={handleGoForward}
+              sx={{
+                marginTop: '20px',
+                marginLeft: '10px',
+                backgroundColor: '#ffc04d',
+                color: '#000000',
+                '&:hover': { bgcolor: '#f7b34d' }
+              }}
+            >
+              <FormattedMessage id="goback" defaultMessage="Zoom in" />
+            </Button>
+          </Grid>
 
           {loading && (
             <Container
@@ -619,7 +624,7 @@ function Overview(props: OverviewProps) {
                 </Grid>
               )}
 
-              {(weeklyData || monthlyData) && (
+              {aggregatedData && (
                 <Grid
                   container
                   direction="row"
@@ -660,81 +665,46 @@ function Overview(props: OverviewProps) {
                         ></Box>
                       </Box>
 
-                      {weeklyData && (
+                      <ReactApexChart
-                        <ReactApexChart
+                        options={{
-                          options={{
+                          ...getChartOptions(
-                            ...getChartOptions(
+                            aggregatedDataArray[aggregatedChartState]
-                              weeklyDataArray.chartOverview.overview,
+                              .chartOverview.overview,
-                              'overview',
+                            'overview',
-                              weeklyDateList,
+                            aggregatedDataArray[aggregatedChartState].datelist,
-                              true
+                            true
-                            )
+                          )
-                          }}
+                        }}
-                          series={[
+                        series={[
-                            {
+                          {
-                              ...weeklyDataArray.chartData.gridImportPower,
+                            ...aggregatedDataArray[aggregatedChartState]
-                              color: '#b30000',
+                              .chartData.gridImportPower,
-                              type: 'bar'
+                            color: '#b30000',
-                            },
+                            type: 'bar'
-                            {
+                          },
-                              ...weeklyDataArray.chartData.gridExportPower,
+                          {
-                              color: '#ff3333',
+                            ...aggregatedDataArray[aggregatedChartState]
-                              type: 'bar'
+                              .chartData.gridExportPower,
-                            },
+                            color: '#ff3333',
-                            {
+                            type: 'bar'
-                              ...weeklyDataArray.chartData.pvProduction,
+                          },
-                              type: 'bar',
+                          {
-                              color: '#ff9900'
+                            ...aggregatedDataArray[aggregatedChartState]
-                            },
+                              .chartData.pvProduction,
-                            {
+                            type: 'bar',
-                              name: 'Net Energy',
+                            color: '#ff9900'
-                              color: '#ff3333',
+                          },
-                              type: 'line',
+                          {
-                              data: weeklybalance
+                            name: 'Net Energy',
-                            }
+                            color: '#ff3333',
-                          ]}
+                            type: 'line',
-                          height={400}
+                            data: aggregatedDataArray[aggregatedChartState]
-                          type={'bar'}
+                              .netbalance
-                        />
+                          }
-                      )}
+                        ]}
-
+                        height={400}
-                      {monthlyData && (
+                        type={'bar'}
-                        <ReactApexChart
+                      />
-                          options={{
-                            ...getChartOptions(
-                              monthlyDataArray.chartOverview.overview,
-                              'overview',
-                              monthlyDateList,
-                              true
-                            )
-                          }}
-                          series={[
-                            {
-                              ...monthlyDataArray.chartData.gridImportPower,
-                              color: '#b30000',
-                              type: 'bar'
-                            },
-                            {
-                              ...monthlyDataArray.chartData.gridExportPower,
-                              color: '#ff3333',
-                              type: 'bar'
-                            },
-                            {
-                              ...monthlyDataArray.chartData.pvProduction,
-                              color: '#ff9900',
-                              type: 'bar'
-                            },
-                            {
-                              name: 'Net Energy',
-                              type: 'line',
-                              data: monthlybalance,
-                              color: '#666666'
-                            }
-                          ]}
-                          height={400}
-                          type={'bar'}
-                        />
-                      )}
                     </Card>
                   </Grid>
                 </Grid>
@@ -806,48 +776,26 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {weeklyData && (
+                    {aggregatedData && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
-                            weeklyDataArray.chartOverview.soc,
+                            aggregatedDataArray[aggregatedChartState]
+                              .chartOverview.soc,
                             'weekly',
-                            weeklyDateList,
+                            aggregatedDataArray[aggregatedChartState].datelist,
                             true
                           )
                         }}
                         series={[
                           {
-                            ...weeklyDataArray.chartData.minsoc,
+                            ...aggregatedDataArray[aggregatedChartState]
+                              .chartData.minsoc,
                             color: '#69d2e7'
                           },
                           {
-                            ...weeklyDataArray.chartData.maxsoc,
+                            ...aggregatedDataArray[aggregatedChartState]
-                            color: '#008FFB'
+                              .chartData.maxsoc,
-                          }
-                        ]}
-                        type="bar"
-                        height={400}
-                      />
-                    )}
-
-                    {monthlyData && (
-                      <ReactApexChart
-                        options={{
-                          ...getChartOptions(
-                            monthlyDataArray.chartOverview.soc,
-                            'monthly',
-                            monthlyDateList,
-                            true
-                          )
-                        }}
-                        series={[
-                          {
-                            ...monthlyDataArray.chartData.minsoc,
-                            color: '#69d2e7'
-                          },
-                          {
-                            ...monthlyDataArray.chartData.maxsoc,
                             color: '#008FFB'
                           }
                         ]}
@@ -918,27 +866,31 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {weeklyData && currentUser.userType == UserType.admin && (
+                    {aggregatedData && currentUser.userType == UserType.admin && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
-                            weeklyDataArray.chartOverview.dcPower,
+                            aggregatedDataArray[aggregatedChartState]
+                              .chartOverview.dcPower,
                             'weekly',
-                            weeklyDateList,
+                            aggregatedDataArray[aggregatedChartState].datelist,
                             false
                           )
                         }}
                         series={[
                           {
-                            ...weeklyDataArray.chartData.dcChargingPower,
+                            ...aggregatedDataArray[aggregatedChartState]
+                              .chartData.dcChargingPower,
                             color: '#008FFB'
                           },
                           {
-                            ...weeklyDataArray.chartData.heatingPower,
+                            ...aggregatedDataArray[aggregatedChartState]
+                              .chartData.heatingPower,
                             color: '#ff9900'
                           },
                           {
-                            ...weeklyDataArray.chartData.dcDischargingPower,
+                            ...aggregatedDataArray[aggregatedChartState]
+                              .chartData.dcDischargingPower,
                             color: '#69d2e7'
                           }
                         ]}
@@ -947,80 +899,27 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {weeklyData && currentUser.userType == UserType.client && (
+                    {aggregatedData && currentUser.userType == UserType.client && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
-                            weeklyDataArray.chartOverview.dcPowerWithoutHeating,
+                            aggregatedDataArray[aggregatedChartState]
+                              .chartOverview.dcPowerWithoutHeating,
                             'weekly',
-                            weeklyDateList,
+                            aggregatedDataArray[aggregatedChartState].datelist,
                             true
                           )
                         }}
                         series={[
                           {
-                            ...weeklyDataArray.chartData.dcChargingPower,
+                            ...aggregatedDataArray[aggregatedChartState]
+                              .chartData.dcChargingPower,
                             color: '#008FFB'
                           },
 
                           {
-                            ...weeklyDataArray.chartData.dcDischargingPower,
+                            ...aggregatedDataArray[aggregatedChartState]
-                            color: '#69d2e7'
+                              .chartData.dcDischargingPower,
-                          }
-                        ]}
-                        type="bar"
-                        height={400}
-                      />
-                    )}
-
-                    {monthlyData && currentUser.userType == UserType.admin && (
-                      <ReactApexChart
-                        options={{
-                          ...getChartOptions(
-                            monthlyDataArray.chartOverview.dcPower,
-                            'monthly',
-                            monthlyDateList,
-                            false
-                          )
-                        }}
-                        series={[
-                          {
-                            ...monthlyDataArray.chartData.dcChargingPower,
-                            color: '#008FFB'
-                          },
-                          {
-                            ...weeklyDataArray.chartData.heatingPower,
-                            color: '#ff9900'
-                          },
-                          {
-                            ...monthlyDataArray.chartData.dcDischargingPower,
-                            color: '#69d2e7'
-                          }
-                        ]}
-                        type="bar"
-                        height={400}
-                      />
-                    )}
-
-                    {monthlyData && currentUser.userType == UserType.client && (
-                      <ReactApexChart
-                        options={{
-                          ...getChartOptions(
-                            monthlyDataArray.chartOverview
-                              .dcPowerWithoutHeating,
-                            'monthly',
-                            monthlyDateList,
-                            true
-                          )
-                        }}
-                        series={[
-                          {
-                            ...monthlyDataArray.chartData.dcChargingPower,
-                            color: '#008FFB'
-                          },
-
-                          {
-                            ...monthlyDataArray.chartData.dcDischargingPower,
                             color: '#69d2e7'
                           }
                         ]}
@@ -1228,40 +1127,21 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {weeklyData && (
+                    {aggregatedData && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
-                            weeklyDataArray.chartOverview.pvProduction,
+                            aggregatedDataArray[aggregatedChartState]
+                              .chartOverview.pvProduction,
                             'weekly',
-                            weeklyDateList,
+                            aggregatedDataArray[aggregatedChartState].datelist,
                             true
                           )
                         }}
                         series={[
                           {
-                            ...weeklyDataArray.chartData.pvProduction,
+                            ...aggregatedDataArray[aggregatedChartState]
-                            color: '#ff9900'
+                              .chartData.pvProduction,
-                          }
-                        ]}
-                        type="bar"
-                        height={400}
-                      />
-                    )}
-
-                    {monthlyData && (
-                      <ReactApexChart
-                        options={{
-                          ...getChartOptions(
-                            monthlyDataArray.chartOverview.pvProduction,
-                            'monthly',
-                            monthlyDateList,
-                            true
-                          )
-                        }}
-                        series={[
-                          {
-                            ...monthlyDataArray.chartData.pvProduction,
                             color: '#ff9900'
                           }
                         ]}
@@ -1330,49 +1210,27 @@ function Overview(props: OverviewProps) {
                         height={400}
                       />
                     )}
-                    {weeklyData && (
+                    {aggregatedData && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
-                            weeklyDataArray.chartOverview.gridPower,
+                            aggregatedDataArray[aggregatedChartState]
+                              .chartOverview.gridPower,
                             'weekly',
-                            weeklyDateList,
+                            aggregatedDataArray[aggregatedChartState].datelist,
                             true
                           )
                         }}
                         series={[
                           {
-                            ...weeklyDataArray.chartData.gridImportPower,
+                            ...aggregatedDataArray[aggregatedChartState]
+                              .chartData.gridImportPower,
                             color: '#b30000'
                           },
 
                           {
-                            ...weeklyDataArray.chartData.gridExportPower,
+                            ...aggregatedDataArray[aggregatedChartState]
-                            color: '#ff3333'
+                              .chartData.gridExportPower,
-                          }
-                        ]}
-                        type="bar"
-                        height={400}
-                      />
-                    )}
-
-                    {monthlyData && (
-                      <ReactApexChart
-                        options={{
-                          ...getChartOptions(
-                            monthlyDataArray.chartOverview.gridPower,
-                            'monthly',
-                            monthlyDateList,
-                            true
-                          )
-                        }}
-                        series={[
-                          {
-                            ...monthlyDataArray.chartData.gridImportPower,
-                            color: '#b30000'
-                          },
-                          {
-                            ...monthlyDataArray.chartData.gridExportPower,
                             color: '#ff3333'
                           }
                         ]}

typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx

@@ -9,11 +9,30 @@ import { InstallationsContext } from 'src/contexts/InstallationsContextProvider'
 import { Route, Routes } from 'react-router-dom';
 import routes from '../../../Resources/routes.json';
 import Folder from './Folder';
+import { WebSocketContext } from '../../../contexts/WebSocketContextProvider';
 
 function InstallationTree() {
   const { foldersAndInstallations, fetchAllFoldersAndInstallations } =
     useContext(InstallationsContext);
 
+  const webSocketContext = useContext(WebSocketContext);
+  const { getStatus } = webSocketContext;
+
+  const sortedInstallations = [...foldersAndInstallations].sort((a, b) => {
+    // Compare the status field of each installation and sort them based on the status.
+    //Installations with alarms go first
+    let a_status = getStatus(a.id);
+    let b_status = getStatus(b.id);
+
+    if (a_status > b_status) {
+      return -1;
+    }
+    if (a_status < b_status) {
+      return 1;
+    }
+    return 0;
+  });
+
   useEffect(() => {
     fetchAllFoldersAndInstallations();
   }, []);
@@ -23,7 +42,7 @@ function InstallationTree() {
       return (
         node.parentId == parent_id && (
           <CustomTreeItem node={node} parent_id={parent_id}>
-            {foldersAndInstallations.map((subnode) => {
+            {sortedInstallations.map((subnode) => {
               return (
                 subnode != node &&
                 subnode.parentId == node.id && (

typescript/frontend-marios2/src/interfaces/Chart.tsx

@@ -424,7 +424,8 @@ export const transformInputToDailyData = async (
 
 export const transformInputToAggregatedData = async (
   s3Credentials: I_S3Credentials,
-  type: string
+  start_date: dayjs.Dayjs,
+  end_date: dayjs.Dayjs
 ): Promise<{
   chartAggregatedData: chartAggregatedDataInterface;
   chartOverview: overviewInterface;
@@ -435,11 +436,11 @@ export const transformInputToAggregatedData = async (
   const MAX_NUMBER = 9999999;
   const dateList = [];
 
-  let currentDate = dayjs();
+  //let currentDate = dayjs();
-  let currentDay =
+  let currentDay = start_date;
-    type === 'weekly'
+  // type === 'weekly'
-      ? currentDate.subtract(1, 'week')
+  //   ? currentDate.subtract(1, 'week')
-      : currentDate.subtract(1, 'month');
+  //   : currentDate.subtract(1, 'month');
 
   const pathsToSearch = [
     '/MinSoc',
@@ -497,7 +498,7 @@ export const transformInputToAggregatedData = async (
 
   const timestampPromises = [];
 
-  while (currentDay.isBefore(currentDate)) {
+  while (currentDay.isBefore(end_date)) {
     timestampPromises.push(
       fetchDailyData(currentDay.format('YYYY-MM-DD'), s3Credentials)
     );
@@ -505,7 +506,7 @@ export const transformInputToAggregatedData = async (
   }
 
   const results = await Promise.all(timestampPromises);
-  currentDay = currentDate.subtract(1, 'month');
+  currentDay = start_date;
 
   for (let i = 0; i < results.length; i++) {
     const result = results[i];