Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Innovenergy:775c7a1785afa93f06a8d3a8fd5c4ad52c042edb
Branches Tags
Innovenergy:main
Innovenergy:v1.2
Innovenergy:v1.02
Innovenergy:v1.01
...
compare: Innovenergy:8646790824becb3aa1ffb762865fce2cacf4ee1d
Branches Tags
Innovenergy:main
Innovenergy:v1.2
Innovenergy:v1.02
Innovenergy:v1.01

2 Commits
775c7a1785 ... 8646790824

Author SHA1 Message Date
Noe 8646790824 Merge remote-tracking branch 'origin/main' 2024-05-07 17:19:18 +02:00
Noe a10762fefe Inserted Set date button in overview aggregated data 
Compressed csv files when pushing aggregated data to S3
Front en can now parse both compressed and not-compressed data in parallel
 2024-05-07 17:19:02 +02:00
6 changed files with 329 additions and 412 deletions
Show Stats Expand all files Collapse all files

2
csharp/App/SaliMax/deploy_all_installations.sh
View File

@ -17,6 +17,8 @@ dotnet publish \
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.4.154" "10.2.4.29")
for ip_address in "${ip_addresses[@]}"; do
rsync -v \

34
csharp/App/SaliMax/src/AggregationService/HourlyData.cs
View File

@ -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)
{

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

@ -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;

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

@ -58,15 +58,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 byteArray = Uint8Array.from(atob(base64String), (c) =>
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
//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);

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

@ -45,14 +45,10 @@ function Overview(props: OverviewProps) {
const { currentUser } = context;
const [dailyData, setDailyData] = useState(true);
const [weeklyData, setWeeklyData] = useState(false);
const [weeklybalance, setWeeklyBalance] = useState([]);
const [monthlybalance, setMonthlyBalance] = useState([]);
const [monthlyData, setMonthlyData] = useState(false);
const [aggregatedData, setAggregatedData] = useState(false);
const [loading, setLoading] = useState(true);
const [chartState, setChartState] = useState(0);
const [monthlyDateList, setMonthlyDateList] = useState([]);
const [weeklyDateList, setWeeklyDateList] = useState([]);
const [aggregatedChartState, setAggregatedChartState] = useState(0);
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);
setMonthlyData(false);
setAggregatedData(false);
setChartState(0);
};
const handleWeekData = () => {
setDailyData(false);
setWeeklyData(true);
setMonthlyData(false);
setAggregatedData(true);
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);
setWeeklyDateList(computeLast7Days());
setAggregatedDataArray((prevData) =>
prevData.concat({
chartData: result.chartAggregatedData,
chartOverview: result.chartOverview,
datelist: computeLast7Days(),
netbalance: powerDifference
})
);
setAggregatedChartState(aggregatedDataArray.length);
setLoading(false);
})
.catch((error) => {
@ -212,6 +217,8 @@ function Overview(props: OverviewProps) {
}
setLoading(true);
if (dailyData) {
const resultPromise: Promise<{
chartData: chartDataInterface;
chartOverview: overviewInterface;
@ -236,43 +243,24 @@ function Overview(props: OverviewProps) {
.catch((error) => {
console.error('Error:', error);
});
};
const handleGoBack = () => {
if (chartState > 0) {
setChartState(chartState - 1);
}
};
const handleGoForward = () => {
if (chartState + 1 < dailyDataArray.length) {
setChartState(chartState + 1);
}
};
const handleMonthData = () => {
} else {
setDailyData(false);
setWeeklyData(false);
setMonthlyData(true);
setAggregatedData(true);
if (monthlyDataArray.chartData != null) {
return;
}
setLoading(true);
const resultPromise: Promise<{
chartAggregatedData: chartAggregatedDataInterface;
chartOverview: overviewInterface;
dateList: string[];
}> = transformInputToAggregatedData(props.s3Credentials, 'monthly');
}> = transformInputToAggregatedData(
props.s3Credentials,
startDate,
endDate
);
resultPromise
.then((result) => {
setMonthlyDataArray({
chartData: result.chartAggregatedData,
chartOverview: result.chartOverview
});
const powerDifference = [];
for (
@ -286,14 +274,43 @@ function Overview(props: OverviewProps) {
);
}
setMonthlyBalance(powerDifference);
setAggregatedDataArray((prevData) =>
prevData.concat({
chartData: result.chartAggregatedData,
chartOverview: result.chartOverview,
datelist: result.dateList,
netbalance: powerDifference
})
);
setMonthlyDateList(result.dateList);
setAggregatedChartState(aggregatedDataArray.length);
setLoading(false);
})
.catch((error) => {
console.error('Error:', error);
});
}
};
const handleGoBack = () => {
if (dailyData && chartState > 0) {
setChartState(chartState - 1);
}
if (aggregatedData && aggregatedChartState > 0) {
setAggregatedChartState(aggregatedChartState - 1);
}
};
const handleGoForward = () => {
if (dailyData && chartState + 1 < dailyDataArray.length) {
setChartState(chartState + 1);
}
if (
aggregatedData &&
aggregatedChartState + 1 < aggregatedDataArray.length
) {
setAggregatedChartState(aggregatedChartState + 1);
}
};
const renderGraphs = () => {
@ -438,29 +455,14 @@ 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}
@ -475,10 +477,8 @@ function Overview(props: OverviewProps) {
>
<FormattedMessage id="lastmonth" defaultMessage="Set Date" />
</Button>
</>
)}
</Grid>
{dailyData && (
<Grid
container
justifyContent="flex-end"
@ -489,7 +489,9 @@ function Overview(props: OverviewProps) {
>
<Button
variant="contained"
disabled={!(chartState > 0)}
disabled={
dailyData ? !(chartState > 0) : !(aggregatedChartState > 0)
}
onClick={handleGoBack}
sx={{
marginTop: '20px',
@ -504,7 +506,11 @@ function Overview(props: OverviewProps) {
<Button
variant="contained"
disabled={!(chartState < dailyDataArray.length - 1)}
disabled={
dailyData
? !(chartState < dailyDataArray.length - 1)
: !(aggregatedChartState < aggregatedDataArray.length - 1)
}
onClick={handleGoForward}
sx={{
marginTop: '20px',
@ -517,7 +523,6 @@ function Overview(props: OverviewProps) {
<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,29 +665,32 @@ function Overview(props: OverviewProps) {
></Box>
</Box>
{weeklyData && (
<ReactApexChart
options={{
...getChartOptions(
weeklyDataArray.chartOverview.overview,
aggregatedDataArray[aggregatedChartState]
.chartOverview.overview,
'overview',
weeklyDateList,
aggregatedDataArray[aggregatedChartState].datelist,
true
)
}}
series={[
{
...weeklyDataArray.chartData.gridImportPower,
...aggregatedDataArray[aggregatedChartState]
.chartData.gridImportPower,
color: '#b30000',
type: 'bar'
},
{
...weeklyDataArray.chartData.gridExportPower,
...aggregatedDataArray[aggregatedChartState]
.chartData.gridExportPower,
color: '#ff3333',
type: 'bar'
},
{
...weeklyDataArray.chartData.pvProduction,
...aggregatedDataArray[aggregatedChartState]
.chartData.pvProduction,
type: 'bar',
color: '#ff9900'
},
@ -690,51 +698,13 @@ function Overview(props: OverviewProps) {
name: 'Net Energy',
color: '#ff3333',
type: 'line',
data: weeklybalance
data: aggregatedDataArray[aggregatedChartState]
.netbalance
}
]}
height={400}
type={'bar'}
/>
)}
{monthlyData && (
<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,
color: '#008FFB'
}
]}
type="bar"
height={400}
/>
)}
{monthlyData && (
<ReactApexChart
options={{
...getChartOptions(
monthlyDataArray.chartOverview.soc,
'monthly',
monthlyDateList,
true
)
}}
series={[
{
...monthlyDataArray.chartData.minsoc,
color: '#69d2e7'
},
{
...monthlyDataArray.chartData.maxsoc,
...aggregatedDataArray[aggregatedChartState]
.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,
color: '#69d2e7'
}
]}
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,
...aggregatedDataArray[aggregatedChartState]
.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,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
{monthlyData && (
<ReactApexChart
options={{
...getChartOptions(
monthlyDataArray.chartOverview.pvProduction,
'monthly',
monthlyDateList,
true
)
}}
series={[
{
...monthlyDataArray.chartData.pvProduction,
...aggregatedDataArray[aggregatedChartState]
.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,
color: '#ff3333'
}
]}
type="bar"
height={400}
/>
)}
{monthlyData && (
<ReactApexChart
options={{
...getChartOptions(
monthlyDataArray.chartOverview.gridPower,
'monthly',
monthlyDateList,
true
)
}}
series={[
{
...monthlyDataArray.chartData.gridImportPower,
color: '#b30000'
},
{
...monthlyDataArray.chartData.gridExportPower,
...aggregatedDataArray[aggregatedChartState]
.chartData.gridExportPower,
color: '#ff3333'
}
]}

17
typescript/frontend-marios2/src/interfaces/Chart.tsx
View File

@ -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 currentDay =
type === 'weekly'
? currentDate.subtract(1, 'week')
: currentDate.subtract(1, 'month');
//let currentDate = dayjs();
let currentDay = start_date;
// type === 'weekly'
// ? currentDate.subtract(1, 'week')
// : 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];