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

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
This commit is contained in:
Noe 2024-05-07 17:19:02 +02:00
parent ff8dc25722
commit a10762fefe
6 changed files with 329 additions and 412 deletions
Show Stats Download Patch File Download Diff File 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;

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

@ -58,8 +58,16 @@ 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)
);
@ -67,6 +75,7 @@ export const fetchData = (
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];