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

Fixed bugs on front-end, fetch data faster using Promises, fixed bugs on user's section

This commit is contained in:
Noe 2024-01-30 16:43:21 +01:00
parent 3b12425838
commit df9536c8fc
5 changed files with 208 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
typescript/frontend-marios2/src/Resources/formatPower.tsx
View File

@ -39,7 +39,10 @@ export function findPower(value) {
value = Math.abs(value);
// Calculate the power of 10 that's greater or equal to the absolute value
const exponent = Math.floor(Math.log10(value));
const exponent =
value < 1
? -(Math.floor(Math.abs(Math.log10(value))) + 1)
: Math.floor(Math.log10(value));
// Compute the nearest power of 10
const nearestPowerOf10 = Math.pow(10, exponent);

2
typescript/frontend-marios2/src/components/Footer/index.tsx
View File

@ -18,7 +18,7 @@ function Footer() {
>
<Box>
<Typography variant="subtitle1">
&copy; 2023 - InnovEnergy AG
&copy; 2024 - InnovEnergy AG
</Typography>
</Box>
<Typography

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

@ -24,6 +24,9 @@ export const getChartOptions = (
dataLabels: {
enabled: false
},
fill: {
type: 'solid'
},
colors: ['#3498db', '#2ecc71', '#282828'],
xaxis: {
@ -210,7 +213,9 @@ export const getChartOptions = (
},
plotOptions: {
bar: {
borderRadius: [10],
//If min<0 and max>0, then we have 2 stacked bars, one with positive and one with negative values, so each one of them should have border radius. \
//Otherwise, we have a single bar or two stacked bars either with positive or negative values.
borderRadius: chartInfo.min <= 0 && chartInfo.max > 0 ? [10] : 10,
dataLabels: {
position: 'top'
}
@ -253,13 +258,29 @@ export const getChartOptions = (
: chartInfo.max <= 0
? Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
findPower(chartInfo.min).value
: Math.abs(chartInfo.min) < 1
? -Math.max(
Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
findPower(chartInfo.min).value,
Math.ceil(chartInfo.max / findPower(chartInfo.max).value) *
findPower(chartInfo.max).value
).toFixed(2)
: undefined,
max:
chartInfo.min >= 0
? Math.ceil(chartInfo.max / findPower(chartInfo.max).value) *
findPower(chartInfo.max).value
? +(
Math.ceil(chartInfo.max / findPower(chartInfo.max).value) *
findPower(chartInfo.max).value
).toFixed(2)
: chartInfo.max <= 0
? 0
: Math.abs(chartInfo.min) < 1
? +Math.max(
Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
findPower(chartInfo.min).value,
Math.ceil(chartInfo.max / findPower(chartInfo.max).value) *
findPower(chartInfo.max).value
).toFixed(2)
: undefined,
title: {
text: chartInfo.unit,
@ -282,11 +303,9 @@ export const getChartOptions = (
tooltip: {
y: {
formatter: function (val) {
return (
formatPowerForGraph(val, chartInfo.magnitude).value.toFixed(2) +
' ' +
chartInfo.unit
);
return val < 1
? val.toFixed(3) + ' ' + chartInfo.unit
: val.toFixed(2) + ' ' + chartInfo.unit;
}
}
}

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

@ -786,7 +786,12 @@ function Overview(props: OverviewProps) {
}
}
}}
series={[dailyDataArray[chartState].chartData.soc]}
series={[
{
...dailyDataArray[chartState].chartData.soc,
color: '#69d2e7'
}
]}
type="area"
height={400}
/>
@ -890,7 +895,12 @@ function Overview(props: OverviewProps) {
}
}
}}
series={[dailyDataArray[chartState].chartData.dcPower]}
series={[
{
...dailyDataArray[chartState].chartData.dcPower,
color: '#69d2e7'
}
]}
type="area"
height={400}
/>
@ -1004,7 +1014,11 @@ function Overview(props: OverviewProps) {
}
}}
series={[
dailyDataArray[chartState].chartData.pvProduction
{
...dailyDataArray[chartState].chartData
.pvProduction,
color: '#ff9900'
}
]}
type="area"
height={400}
@ -1102,7 +1116,10 @@ function Overview(props: OverviewProps) {
}
}}
series={[
dailyDataArray[chartState].chartData.gridPower
{
...dailyDataArray[chartState].chartData.gridPower,
color: '#ff3333'
}
]}
type="area"
height={400}
@ -1160,124 +1177,124 @@ function Overview(props: OverviewProps) {
</Grid>
)}
{dailyData && currentUser.hasWriteAccess && (
<Grid
container
direction="row"
justifyContent="center"
alignItems="stretch"
spacing={3}
>
<Grid item md={6} xs={12}>
<Card
sx={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box
sx={{
marginLeft: '20px'
}}
>
<Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="battery_temperature"
defaultMessage="Battery Temperature"
/>
</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview
.temperature,
'daily',
[]
),
chart: {
events: {
beforeZoom: handleBeforeZoom
}
}
}}
series={[
dailyDataArray[chartState].chartData.temperature
]}
type="area"
height={400}
/>
</Card>
</Grid>
<Grid item md={6} xs={12}>
<Card
sx={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box
sx={{
marginLeft: '20px'
}}
>
<Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="dc_voltage"
defaultMessage="DC Bus Voltage"
/>
</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview
.dcBusVoltage,
'daily',
[]
),
chart: {
events: {
beforeZoom: handleBeforeZoom
}
}
}}
series={[
dailyDataArray[chartState].chartData.dcBusVoltage
]}
type="area"
height={400}
/>
</Card>
</Grid>
</Grid>
)}
{/*{dailyData && currentUser.hasWriteAccess && (*/}
{/* <Grid*/}
{/* container*/}
{/* direction="row"*/}
{/* justifyContent="center"*/}
{/* alignItems="stretch"*/}
{/* spacing={3}*/}
{/* >*/}
{/* <Grid item md={6} xs={12}>*/}
{/* <Card*/}
{/* sx={{*/}
{/* overflow: 'visible',*/}
{/* marginTop: '30px',*/}
{/* marginBottom: '30px'*/}
{/* }}*/}
{/* >*/}
{/* <Box*/}
{/* sx={{*/}
{/* marginLeft: '20px'*/}
{/* }}*/}
{/* >*/}
{/* <Box display="flex" alignItems="center">*/}
{/* <Box>*/}
{/* <Typography variant="subtitle1" noWrap>*/}
{/* <FormattedMessage*/}
{/* id="battery_temperature"*/}
{/* defaultMessage="Battery Temperature"*/}
{/* />*/}
{/* </Typography>*/}
{/* </Box>*/}
{/* </Box>*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'flex-start',*/}
{/* pt: 3*/}
{/* }}*/}
{/* ></Box>*/}
{/* </Box>*/}
{/* <ReactApexChart*/}
{/* options={{*/}
{/* ...getChartOptions(*/}
{/* dailyDataArray[chartState].chartOverview*/}
{/* .temperature,*/}
{/* 'daily',*/}
{/* []*/}
{/* ),*/}
{/* chart: {*/}
{/* events: {*/}
{/* beforeZoom: handleBeforeZoom*/}
{/* }*/}
{/* }*/}
{/* }}*/}
{/* series={[*/}
{/* dailyDataArray[chartState].chartData.temperature*/}
{/* ]}*/}
{/* type="area"*/}
{/* height={400}*/}
{/* />*/}
{/* </Card>*/}
{/* </Grid>*/}
{/* <Grid item md={6} xs={12}>*/}
{/* <Card*/}
{/* sx={{*/}
{/* overflow: 'visible',*/}
{/* marginTop: '30px',*/}
{/* marginBottom: '30px'*/}
{/* }}*/}
{/* >*/}
{/* <Box*/}
{/* sx={{*/}
{/* marginLeft: '20px'*/}
{/* }}*/}
{/* >*/}
{/* <Box display="flex" alignItems="center">*/}
{/* <Box>*/}
{/* <Typography variant="subtitle1" noWrap>*/}
{/* <FormattedMessage*/}
{/* id="dc_voltage"*/}
{/* defaultMessage="DC Bus Voltage"*/}
{/* />*/}
{/* </Typography>*/}
{/* </Box>*/}
{/* </Box>*/}
{/* <Box*/}
{/* sx={{*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'flex-start',*/}
{/* pt: 3*/}
{/* }}*/}
{/* ></Box>*/}
{/* </Box>*/}
{/* <ReactApexChart*/}
{/* options={{*/}
{/* ...getChartOptions(*/}
{/* dailyDataArray[chartState].chartOverview*/}
{/* .dcBusVoltage,*/}
{/* 'daily',*/}
{/* []*/}
{/* ),*/}
{/* chart: {*/}
{/* events: {*/}
{/* beforeZoom: handleBeforeZoom*/}
{/* }*/}
{/* }*/}
{/* }}*/}
{/* series={[*/}
{/* dailyDataArray[chartState].chartData.dcBusVoltage*/}
{/* ]}*/}
{/* type="area"*/}
{/* height={400}*/}
{/* />*/}
{/* </Card>*/}
{/* </Grid>*/}
{/* </Grid>*/}
{/*)}*/}
</Grid>
)}
</Grid>

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

@ -93,6 +93,8 @@ export const transformInputToDailyData = async (
};
});
let adjustedTimestampArray = [];
let startTimestampToNum = Number(startTimestamp);
if (startTimestampToNum % 2 != 0) {
startTimestampToNum += 1;
@ -100,22 +102,32 @@ export const transformInputToDailyData = async (
let startUnixTime = UnixTime.fromTicks(startTimestampToNum);
let diff = endTimestamp.ticks - startUnixTime.ticks;
const timestampPromises = [];
while (startUnixTime < endTimestamp) {
let result = await Promise.resolve(fetchData(startUnixTime, s3Credentials));
timestampPromises.push(fetchData(startUnixTime, s3Credentials));
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + diff / 100);
if (startUnixTime.ticks % 2 !== 0) {
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + 1);
}
const adjustedTimestamp = new Date(startUnixTime.ticks * 1000);
adjustedTimestamp.setHours(adjustedTimestamp.getHours() + 1);
adjustedTimestampArray.push(adjustedTimestamp);
}
const results = await Promise.all(timestampPromises);
for (let i = 0; i < results.length; i++) {
const result = results[i];
if (
result === FetchResult.notAvailable ||
result === FetchResult.tryLater
) {
// Handle not available or try later case
} else {
//console.log('Received data:', result);
// eslint-disable-next-line @typescript-eslint/no-loop-func
pathsToSearch.forEach((path) => {
const timestamp = startUnixTime.ticks * 1000;
const adjustedTimestamp = new Date(timestamp);
adjustedTimestamp.setHours(adjustedTimestamp.getHours() + 1);
if (result[path]) {
const value = result[path];
@ -127,21 +139,13 @@ export const transformInputToDailyData = async (
overviewData[path].max = value.value;
}
data[path].push([adjustedTimestamp, value.value]);
data[path].push([adjustedTimestampArray[i], value.value]);
} else {
//data[path].push([adjustedTimestamp, null]);
}
});
}
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + diff / 100);
if (startUnixTime.ticks % 2 != 0) {
startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + 1);
}
console.log('Try next timestamp: ', startUnixTime);
}
pathsToSearch.forEach((path) => {
let value = Math.max(
Math.abs(overviewData[path].max),
@ -234,9 +238,6 @@ export const transformInputToDailyData = async (
)
};
console.log('min = ', chartOverview.overview.min);
console.log('max = ', chartOverview.overview.max);
return {
chartData: chartData,
chartOverview: chartOverview
@ -302,31 +303,25 @@ export const transformInputToAggregatedData = async (
};
});
let fake_data = [
'temp0',
'temp1',
'temp2',
'temp3',
'temp4',
'temp5',
'temp6'
];
const timestampPromises = [];
while (currentDay.isBefore(currentDate)) {
//for (let i = 0; i < 7; i++) {
// console.log('Current day:', currentDay.format('YYYY-MM-DD'));
let result = await Promise.resolve(
timestampPromises.push(
fetchDailyData(currentDay.format('YYYY-MM-DD'), s3Credentials)
//fetchDailyData(fake_data[i], s3Credentials)
);
currentDay = currentDay.add(1, 'day');
}
const results = await Promise.all(timestampPromises);
for (let i = 0; i < results.length; i++) {
const result = results[i];
if (
result === FetchResult.notAvailable ||
result === FetchResult.tryLater
) {
// Handle not available or try later case
} else {
console.log('Received data:', result);
dateList.push(currentDay.format('DD-MM'));
pathsToSearch.forEach((path) => {
if (result[path]) {
@ -337,12 +332,13 @@ export const transformInputToAggregatedData = async (
if (result[path].value > overviewData[path].max) {
overviewData[path].max = result[path].value;
}
if (path === '/SumGridExportPower' && result[path].value < 0.1) {
result[path].value = 0.3;
}
data[path].push(result[path].value as number);
}
});
}
// Add one day to move to the next day
currentDay = currentDay.add(1, 'day');
}
pathsToSearch.forEach((path) => {
@ -419,14 +415,12 @@ export const transformInputToAggregatedData = async (
overviewData['/SumGridExportPower'].magnitude
),
unit: '(kWh)',
min: Math.min(
overviewData['/SumGridImportPower'].min,
overviewData['/SumGridExportPower'].min
),
max: Math.max(
overviewData['/SumGridImportPower'].max,
min:
overviewData['/SumGridImportPower'].min +
overviewData['/SumGridExportPower'].min,
max:
overviewData['/SumGridImportPower'].max +
overviewData['/SumGridExportPower'].max
)
};
chartOverview.overview = {