V2 of front-end is ready

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

@@ -104,7 +104,10 @@ function InstallationTabs() {
           value: 'live',
           label: <FormattedMessage id="live" defaultMessage="Live" />
         },
-
+        {
+          value: 'overview',
+          label: <FormattedMessage id="overview" defaultMessage="Overview" />
+        },
         {
           value: 'batteryview',
           label: (
@@ -148,12 +151,7 @@ function InstallationTabs() {
           value: 'overview',
           label: <FormattedMessage id="overview" defaultMessage="Overview" />
         },
-        {
+
-          value: 'batteryview',
-          label: (
-            <FormattedMessage id="batteryview" defaultMessage="Battery View" />
-          )
-        },
         {
           value: 'log',
           label: <FormattedMessage id="log" defaultMessage="Log" />

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

@@ -29,10 +29,17 @@ interface LogProps {
 
 function Log(props: LogProps) {
   const theme = useTheme();
+  const searchParams = new URLSearchParams(location.search);
+  const openModal = searchParams.get('open');
+
   const [warnings, setWarnings] = useState<ErrorMessage[]>([]);
   const [errors, setErrors] = useState<ErrorMessage[]>([]);
-  const [errorButtonPressed, setErrorButtonPressed] = useState(false);
+  const [errorButtonPressed, setErrorButtonPressed] = useState(
-  const [warningButtonPressed, setWarningButtonPressed] = useState(false);
+    openModal === 'error' ? true : false
+  );
+  const [warningButtonPressed, setWarningButtonPressed] = useState(
+    openModal === 'warning' ? true : false
+  );
   const [updateCount, setUpdateCount] = useState(0);
   const navigate = useNavigate();
   const tokencontext = useContext(TokenContext);

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

@@ -306,6 +306,17 @@ export const getChartOptions = (
             }
           }
         },
+        annotations: {
+          yaxis: [
+            {
+              y: 0,
+              strokeDashArray: 0,
+              borderColor: '#d3d3d3',
+              borderWidth: 1,
+              yAxisIndex: 0
+            }
+          ]
+        },
         tooltip: {
           y: {
             formatter: function (val) {

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

@@ -444,20 +444,20 @@ function Overview(props: OverviewProps) {
             >
               <FormattedMessage id="lastweek" defaultMessage="Last week" />
             </Button>
-            <Button
+            {/*<Button*/}
-              variant="contained"
+            {/*  variant="contained"*/}
-              onClick={handleMonthData}
+            {/*  onClick={handleMonthData}*/}
-              disabled={loading}
+            {/*  disabled={loading}*/}
-              sx={{
+            {/*  sx={{*/}
-                marginTop: '20px',
+            {/*    marginTop: '20px',*/}
-                marginLeft: '10px',
+            {/*    marginLeft: '10px',*/}
-                backgroundColor: monthlyData ? '#808080' : '#ffc04d',
+            {/*    backgroundColor: monthlyData ? '#808080' : '#ffc04d',*/}
-                color: '#000000',
+            {/*    color: '#000000',*/}
-                '&:hover': { bgcolor: '#f7b34d' }
+            {/*    '&:hover': { bgcolor: '#f7b34d' }*/}
-              }}
+            {/*  }}*/}
-            >
+            {/*>*/}
-              <FormattedMessage id="lastmonth" defaultMessage="Last Month" />
+            {/*  <FormattedMessage id="lastmonth" defaultMessage="Last Month" />*/}
-            </Button>
+            {/*</Button>*/}
             {dailyData && (
               <>
                 <Button
@@ -687,7 +687,7 @@ function Overview(props: OverviewProps) {
                             },
                             {
                               name: 'Net Energy',
-                              color: '#666666',
+                              color: '#ff3333',
                               type: 'line',
                               data: weeklybalance
                             }
@@ -917,7 +917,7 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {weeklyData && (
+                    {weeklyData && currentUser.hasWriteAccess && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
@@ -930,7 +930,7 @@ function Overview(props: OverviewProps) {
                         series={[
                           {
                             ...weeklyDataArray.chartData.dcChargingPower,
-                            color: '#69d2e7'
+                            color: '#008FFB'
                           },
                           {
                             ...weeklyDataArray.chartData.heatingPower,
@@ -938,7 +938,7 @@ function Overview(props: OverviewProps) {
                           },
                           {
                             ...weeklyDataArray.chartData.dcDischargingPower,
-                            color: '#008FFB'
+                            color: '#69d2e7'
                           }
                         ]}
                         type="bar"
@@ -946,7 +946,33 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {monthlyData && (
+                    {weeklyData && !currentUser.hasWriteAccess && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            weeklyDataArray.chartOverview.dcPowerWithoutHeating,
+                            'weekly',
+                            weeklyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...weeklyDataArray.chartData.dcChargingPower,
+                            color: '#008FFB'
+                          },
+
+                          {
+                            ...weeklyDataArray.chartData.dcDischargingPower,
+                            color: '#69d2e7'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+
+                    {monthlyData && currentUser.hasWriteAccess && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
@@ -959,7 +985,7 @@ function Overview(props: OverviewProps) {
                         series={[
                           {
                             ...monthlyDataArray.chartData.dcChargingPower,
-                            color: '#69d2e7'
+                            color: '#008FFB'
                           },
                           {
                             ...weeklyDataArray.chartData.heatingPower,
@@ -967,7 +993,34 @@ function Overview(props: OverviewProps) {
                           },
                           {
                             ...monthlyDataArray.chartData.dcDischargingPower,
+                            color: '#69d2e7'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+
+                    {monthlyData && !currentUser.hasWriteAccess && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            monthlyDataArray.chartOverview
+                              .dcPowerWithoutHeating,
+                            'monthly',
+                            monthlyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...monthlyDataArray.chartData.dcChargingPower,
                             color: '#008FFB'
+                          },
+
+                          {
+                            ...monthlyDataArray.chartData.dcDischargingPower,
+                            color: '#69d2e7'
                           }
                         ]}
                         type="bar"
@@ -1106,7 +1159,6 @@ function Overview(props: OverviewProps) {
                 </Grid>
               )}
 
-              {currentUser.hasWriteAccess && (
               <Grid
                 container
                 direction="row"
@@ -1256,8 +1308,7 @@ function Overview(props: OverviewProps) {
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
-                              dailyDataArray[chartState].chartOverview
+                            dailyDataArray[chartState].chartOverview.gridPower,
-                                .gridPower,
                             'daily',
                             [],
                             true
@@ -1331,7 +1382,6 @@ function Overview(props: OverviewProps) {
                   </Card>
                 </Grid>
               </Grid>
-              )}
             </Grid>
           )}
         </Grid>

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

@@ -11,6 +11,7 @@ export interface overviewInterface {
   soc: chartInfoInterface;
   temperature: chartInfoInterface;
   dcPower: chartInfoInterface;
+  dcPowerWithoutHeating: chartInfoInterface;
   gridPower: chartInfoInterface;
   pvProduction: chartInfoInterface;
   dcBusVoltage: chartInfoInterface;
@@ -78,6 +79,7 @@ export const transformInputToDailyData = async (
     soc: { magnitude: 0, unit: '', min: 0, max: 0 },
     temperature: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcPower: { magnitude: 0, unit: '', min: 0, max: 0 },
+    dcPowerWithoutHeating: { magnitude: 0, unit: '', min: 0, max: 0 },
     gridPower: { magnitude: 0, unit: '', min: 0, max: 0 },
     pvProduction: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcBusVoltage: { magnitude: 0, unit: '', min: 0, max: 0 },
@@ -280,7 +282,7 @@ export const transformInputToAggregatedData = async (
     maxsoc: { name: 'max SOC', data: [] },
     pvProduction: { name: 'Pv Energy', data: [] },
     dcChargingPower: { name: 'Charging Battery Energy', data: [] },
-    heatingPower: { name: 'Heating Power', data: [] },
+    heatingPower: { name: 'Heating Energy', data: [] },
     dcDischargingPower: { name: 'Discharging Battery Energy', data: [] },
     gridImportPower: { name: 'Grid Import Energy', data: [] },
     gridExportPower: { name: 'Grid Export Energy', data: [] }
@@ -290,6 +292,7 @@ export const transformInputToAggregatedData = async (
     soc: { magnitude: 0, unit: '', min: 0, max: 0 },
     temperature: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcPower: { magnitude: 0, unit: '', min: 0, max: 0 },
+    dcPowerWithoutHeating: { magnitude: 0, unit: '', min: 0, max: 0 },
     gridPower: { magnitude: 0, unit: '', min: 0, max: 0 },
     pvProduction: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcBusVoltage: { magnitude: 0, unit: '', min: 0, max: 0 },
@@ -329,6 +332,9 @@ export const transformInputToAggregatedData = async (
       dateList.push(currentDay.format('DD-MM'));
       pathsToSearch.forEach((path) => {
         if (result[path]) {
+          if (path === '/GridExportPower') {
+            result[path].value = -result[path].value;
+          }
           if (result[path].value < overviewData[path].min) {
             overviewData[path].min = result[path].value;
           }
@@ -336,9 +342,9 @@ export const transformInputToAggregatedData = async (
           if (result[path].value > overviewData[path].max) {
             overviewData[path].max = result[path].value;
           }
-          if (path === '/GridExportPower' && result[path].value < 0.1) {
+          // if (path === '/GridExportPower' && Math.abs(result[path].value) < 0.1) {
-            result[path].value = 0.3;
+          //   result[path].value = -0.3;
-          }
+          // }
           data[path].push(result[path].value as number);
         }
       });
@@ -395,6 +401,16 @@ export const transformInputToAggregatedData = async (
   path = '/HeatingPower';
   chartAggregatedData.heatingPower.data = data[path];
 
+  chartOverview.dcPowerWithoutHeating = {
+    magnitude: Math.max(
+      overviewData['/ChargingBatteryPower'].magnitude,
+      overviewData['/DischargingBatteryPower'].magnitude
+    ),
+    unit: '(kWh)',
+    min: overviewData['/DischargingBatteryPower'].min,
+    max: overviewData['/ChargingBatteryPower'].max
+  };
+
   chartOverview.dcPower = {
     magnitude: Math.max(
       overviewData['/ChargingBatteryPower'].magnitude,