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

V2 of front-end is ready

This commit is contained in:
Noe 2024-02-13 15:20:58 +01:00
parent ccef318c6f
commit 984455e815
5 changed files with 329 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

11
typescript/frontend-marios2/src/content/dashboards/Log/Log.tsx
View File

@ -29,10 +29,17 @@ interface LogProps {
function Log(props: LogProps) { function Log(props: LogProps) {
const theme = useTheme(); const theme = useTheme();
const searchParams = new URLSearchParams(location.search);
const openModal = searchParams.get('open');
const [warnings, setWarnings] = useState<ErrorMessage[]>([]); const [warnings, setWarnings] = useState<ErrorMessage[]>([]);
const [errors, setErrors] = 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 [updateCount, setUpdateCount] = useState(0);
const navigate = useNavigate(); const navigate = useNavigate();
const tokencontext = useContext(TokenContext); const tokencontext = useContext(TokenContext);

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

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

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

@ -444,20 +444,20 @@ function Overview(props: OverviewProps) {
> >
<FormattedMessage id="lastweek" defaultMessage="Last week" /> <FormattedMessage id="lastweek" defaultMessage="Last week" />
</Button> </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 && ( {dailyData && (
<> <>
<Button <Button
@ -687,7 +687,7 @@ function Overview(props: OverviewProps) {
}, },
{ {
name: 'Net Energy', name: 'Net Energy',
color: '#666666', color: '#ff3333',
type: 'line', type: 'line',
data: weeklybalance data: weeklybalance
} }
@ -917,7 +917,7 @@ function Overview(props: OverviewProps) {
/> />
)} )}
{weeklyData && ( {weeklyData && currentUser.hasWriteAccess && (
<ReactApexChart <ReactApexChart
options={{ options={{
...getChartOptions( ...getChartOptions(
@ -930,7 +930,7 @@ function Overview(props: OverviewProps) {
series={[ series={[
{ {
...weeklyDataArray.chartData.dcChargingPower, ...weeklyDataArray.chartData.dcChargingPower,
color: '#69d2e7' color: '#008FFB'
}, },
{ {
...weeklyDataArray.chartData.heatingPower, ...weeklyDataArray.chartData.heatingPower,
@ -938,7 +938,7 @@ function Overview(props: OverviewProps) {
}, },
{ {
...weeklyDataArray.chartData.dcDischargingPower, ...weeklyDataArray.chartData.dcDischargingPower,
color: '#008FFB' color: '#69d2e7'
} }
]} ]}
type="bar" 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 <ReactApexChart
options={{ options={{
...getChartOptions( ...getChartOptions(
@ -959,7 +985,7 @@ function Overview(props: OverviewProps) {
series={[ series={[
{ {
...monthlyDataArray.chartData.dcChargingPower, ...monthlyDataArray.chartData.dcChargingPower,
color: '#69d2e7' color: '#008FFB'
}, },
{ {
...weeklyDataArray.chartData.heatingPower, ...weeklyDataArray.chartData.heatingPower,
@ -967,7 +993,34 @@ function Overview(props: OverviewProps) {
}, },
{ {
...monthlyDataArray.chartData.dcDischargingPower, ...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' color: '#008FFB'
},
{
...monthlyDataArray.chartData.dcDischargingPower,
color: '#69d2e7'
} }
]} ]}
type="bar" type="bar"
@ -1106,232 +1159,229 @@ function Overview(props: OverviewProps) {
</Grid> </Grid>
)} )}
{currentUser.hasWriteAccess && ( <Grid
<Grid container
container direction="row"
direction="row" justifyContent="center"
justifyContent="center" alignItems="stretch"
alignItems="stretch" spacing={3}
spacing={3} >
> <Grid item md={6} xs={12}>
<Grid item md={6} xs={12}> <Card
<Card sx={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box
sx={{ sx={{
overflow: 'visible', marginLeft: '20px'
marginTop: '30px',
marginBottom: '30px'
}} }}
> >
<Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="pv_production"
defaultMessage="PV Production"
/>
</Typography>
</Box>
</Box>
<Box <Box
sx={{ sx={{
marginLeft: '20px' display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}} }}
> ></Box>
<Box display="flex" alignItems="center"> </Box>
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="pv_production"
defaultMessage="PV Production"
/>
</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
{dailyData && ( {dailyData && (
<ReactApexChart <ReactApexChart
options={{ options={{
...getChartOptions( ...getChartOptions(
dailyDataArray[chartState].chartOverview dailyDataArray[chartState].chartOverview
.pvProduction, .pvProduction,
'daily', 'daily',
[], [],
true true
), ),
chart: { chart: {
events: { events: {
beforeZoom: handleBeforeZoom beforeZoom: handleBeforeZoom
}
} }
}} }
series={[
{
...dailyDataArray[chartState].chartData
.pvProduction,
color: '#ff9900'
}
]}
type="line"
height={400}
/>
)}
{weeklyData && (
<ReactApexChart
options={{
...getChartOptions(
weeklyDataArray.chartOverview.pvProduction,
'weekly',
weeklyDateList,
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,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
</Card>
</Grid>
<Grid item md={6} xs={12}>
<Card
sx={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box
sx={{
marginLeft: '20px'
}} }}
> series={[
<Box display="flex" alignItems="center"> {
<Box> ...dailyDataArray[chartState].chartData
<Typography variant="subtitle1" noWrap> .pvProduction,
<FormattedMessage color: '#ff9900'
id="grid_power" }
defaultMessage={ ]}
dailyData ? 'Grid Power' : 'Grid Energy' type="line"
} height={400}
/> />
</Typography> )}
</Box>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
{dailyData && (
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview
.gridPower,
'daily',
[],
true
),
chart: {
events: {
beforeZoom: handleBeforeZoom
}
}
}}
series={[
{
...dailyDataArray[chartState].chartData.gridPower,
color: '#ff3333'
}
]}
type="line"
height={400}
/>
)}
{weeklyData && (
<ReactApexChart
options={{
...getChartOptions(
weeklyDataArray.chartOverview.gridPower,
'weekly',
weeklyDateList,
true
)
}}
series={[
{
...weeklyDataArray.chartData.gridImportPower,
color: '#b30000'
},
{ {weeklyData && (
...weeklyDataArray.chartData.gridExportPower, <ReactApexChart
color: '#ff3333' options={{
} ...getChartOptions(
]} weeklyDataArray.chartOverview.pvProduction,
type="bar" 'weekly',
height={400} weeklyDateList,
/> true
)} )
}}
series={[
{
...weeklyDataArray.chartData.pvProduction,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
{monthlyData && ( {monthlyData && (
<ReactApexChart <ReactApexChart
options={{ options={{
...getChartOptions( ...getChartOptions(
monthlyDataArray.chartOverview.gridPower, monthlyDataArray.chartOverview.pvProduction,
'monthly', 'monthly',
monthlyDateList, monthlyDateList,
true true
) )
}} }}
series={[ series={[
{ {
...monthlyDataArray.chartData.gridImportPower, ...monthlyDataArray.chartData.pvProduction,
color: '#b30000' color: '#ff9900'
}, }
{ ]}
...monthlyDataArray.chartData.gridExportPower, type="bar"
color: '#ff3333' height={400}
} />
]} )}
type="bar" </Card>
height={400}
/>
)}
</Card>
</Grid>
</Grid> </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="grid_power"
defaultMessage={
dailyData ? 'Grid Power' : 'Grid Energy'
}
/>
</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
{dailyData && (
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview.gridPower,
'daily',
[],
true
),
chart: {
events: {
beforeZoom: handleBeforeZoom
}
}
}}
series={[
{
...dailyDataArray[chartState].chartData.gridPower,
color: '#ff3333'
}
]}
type="line"
height={400}
/>
)}
{weeklyData && (
<ReactApexChart
options={{
...getChartOptions(
weeklyDataArray.chartOverview.gridPower,
'weekly',
weeklyDateList,
true
)
}}
series={[
{
...weeklyDataArray.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,
color: '#ff3333'
}
]}
type="bar"
height={400}
/>
)}
</Card>
</Grid>
</Grid>
</Grid> </Grid>
)} )}
</Grid> </Grid>

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

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