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',
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" />

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

@ -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 [warningButtonPressed, setWarningButtonPressed] = useState(false);
const [errorButtonPressed, setErrorButtonPressed] = useState(
openModal === 'error' ? true : false
);
const [warningButtonPressed, setWarningButtonPressed] = useState(
openModal === 'warning' ? true : false
);
const [updateCount, setUpdateCount] = useState(0);
const navigate = useNavigate();
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: {
y: {
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" />
</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>
{/*<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
@ -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,232 +1159,229 @@ function Overview(props: OverviewProps) {
</Grid>
)}
{currentUser.hasWriteAccess && (
<Grid
container
direction="row"
justifyContent="center"
alignItems="stretch"
spacing={3}
>
<Grid item md={6} xs={12}>
<Card
<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={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
marginLeft: '20px'
}}
>
<Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="pv_production"
defaultMessage="PV Production"
/>
</Typography>
</Box>
</Box>
<Box
sx={{
marginLeft: '20px'
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
>
<Box display="flex" alignItems="center">
<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>
></Box>
</Box>
{dailyData && (
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview
.pvProduction,
'daily',
[],
true
),
chart: {
events: {
beforeZoom: handleBeforeZoom
}
{dailyData && (
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview
.pvProduction,
'daily',
[],
true
),
chart: {
events: {
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'
}
}}
>
<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'
},
series={[
{
...dailyDataArray[chartState].chartData
.pvProduction,
color: '#ff9900'
}
]}
type="line"
height={400}
/>
)}
{
...weeklyDataArray.chartData.gridExportPower,
color: '#ff3333'
}
]}
type="bar"
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.gridPower,
'monthly',
monthlyDateList,
true
)
}}
series={[
{
...monthlyDataArray.chartData.gridImportPower,
color: '#b30000'
},
{
...monthlyDataArray.chartData.gridExportPower,
color: '#ff3333'
}
]}
type="bar"
height={400}
/>
)}
</Card>
</Grid>
{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'
}}
>
<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>

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

@ -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) {
result[path].value = 0.3;
}
// if (path === '/GridExportPower' && Math.abs(result[path].value) < 0.1) {
// 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,