diff --git a/csharp/App/SaliMax/src/AggregationService/Aggregator.cs b/csharp/App/SaliMax/src/AggregationService/Aggregator.cs index 2cb001661..4fca504a3 100644 --- a/csharp/App/SaliMax/src/AggregationService/Aggregator.cs +++ b/csharp/App/SaliMax/src/AggregationService/Aggregator.cs @@ -57,7 +57,7 @@ public static class Aggregator Console.WriteLine("-----------------------------------------------------------------------------------------------------------------"); // Wait until the next rounded hour - //await Task.Delay(timeUntilNextDay); + await Task.Delay(timeUntilNextDay); while (true) { diff --git a/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx b/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx index 842c1422d..5e0e4522e 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx @@ -14,7 +14,7 @@ export const getChartOptions = ( toolbar: { show: false }, - type: 'area', + type: 'line', height: 350, zoom: { autoScaleYaxis: false @@ -202,12 +202,15 @@ export const getChartOptions = ( : { chart: { height: 380, - type: 'bar', stacked: chartInfo.unit !== '(%)' && type != 'overview' }, + stroke: { + width: [0, 0, 0, 2], + curve: 'smooth' + }, plotOptions: { bar: { - borderRadius: 10, + borderRadius: [10], dataLabels: { position: 'top' } @@ -232,6 +235,7 @@ export const getChartOptions = ( xaxis: { categories: dateList, position: 'bottom', + axisBorder: { show: false }, diff --git a/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx b/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx index 6b0d8caa1..4acc31a0f 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx @@ -41,6 +41,8 @@ const computeLast7Days = (): string[] => { function Overview(props: OverviewProps) { const [dailyData, setDailyData] = useState(true); const [weeklyData, setWeeklyData] = useState(false); + const [weeklybalance, setWeeklyBalance] = useState([]); + const [monthlybalance, setMonthlyBalance] = useState([]); const [monthlyData, setMonthlyData] = useState(false); const [loading, setLoading] = useState(true); const [chartState, setChartState] = useState(0); @@ -154,8 +156,20 @@ function Overview(props: OverviewProps) { chartData: result.chartAggregatedData, chartOverview: result.chartOverview }); - //setChartAggregatedData(result.chartAggregatedData); - //setChartAggregatedOverview(result.chartOverview); + + const powerDifference = []; + for ( + let i = 0; + i < result.chartAggregatedData.gridImportPower.data.length; + i++ + ) { + powerDifference.push( + result.chartAggregatedData.gridImportPower.data[i] - + Math.abs(result.chartAggregatedData.gridExportPower.data[i]) + ); + } + + setWeeklyBalance(powerDifference); setWeeklyDateList(computeLast7Days()); setLoading(false); }) @@ -253,8 +267,22 @@ function Overview(props: OverviewProps) { chartData: result.chartAggregatedData, chartOverview: result.chartOverview }); - //setChartAggregatedData(result.chartAggregatedData); - //setChartAggregatedOverview(result.chartOverview); + + const powerDifference = []; + + for ( + let i = 0; + i < result.chartAggregatedData.gridImportPower.data.length; + i++ + ) { + powerDifference.push( + result.chartAggregatedData.gridImportPower.data[i] - + Math.abs(result.chartAggregatedData.gridExportPower.data[i]) + ); + } + + setMonthlyBalance(powerDifference); + setMonthlyDateList(result.dateList); setLoading(false); }) @@ -559,16 +587,19 @@ function Overview(props: OverviewProps) { series={[ { ...dailyDataArray[chartState].chartData.gridPower, - type: 'line' + type: 'line', + color: '#b30000' }, { ...dailyDataArray[chartState].chartData .pvProduction, - type: 'line' + type: 'line', + color: '#ff9900' }, { ...dailyDataArray[chartState].chartData.soc, - type: 'line' + type: 'line', + color: '#008FFB' } ]} height={420} @@ -631,19 +662,28 @@ function Overview(props: OverviewProps) { series={[ { ...weeklyDataArray.chartData.gridImportPower, - color: '#EA3546' + color: '#b30000', + type: 'bar' }, { ...weeklyDataArray.chartData.gridExportPower, - color: '#00E396' + color: '#ff3333', + type: 'bar' }, { ...weeklyDataArray.chartData.pvProduction, - color: '#FEB019' + type: 'bar', + color: '#ff9900' + }, + { + name: 'Balance', + color: '#666666', + type: 'line', + data: weeklybalance } ]} - type="bar" height={400} + type={'bar'} /> )} @@ -659,19 +699,28 @@ function Overview(props: OverviewProps) { series={[ { ...monthlyDataArray.chartData.gridImportPower, - color: '#EA3546' + color: '#b30000', + type: 'bar' }, { ...monthlyDataArray.chartData.gridExportPower, - color: '#00E396' + color: '#ff3333', + type: 'bar' }, { ...monthlyDataArray.chartData.pvProduction, - color: '#FEB019' + color: '#ff9900', + type: 'bar' + }, + { + name: 'Balance', + type: 'line', + data: monthlybalance, + color: '#666666' } ]} - type="bar" height={400} + type={'bar'} /> )} @@ -852,8 +901,14 @@ function Overview(props: OverviewProps) { ) }} series={[ - {...weeklyDataArray.chartData.dcChargingPower,color: '#69d2e7'}, - {...weeklyDataArray.chartData.dcDischargingPower,color: '#008FFB'} + { + ...weeklyDataArray.chartData.dcChargingPower, + color: '#69d2e7' + }, + { + ...weeklyDataArray.chartData.dcDischargingPower, + color: '#008FFB' + } ]} type="bar" height={400} @@ -870,8 +925,14 @@ function Overview(props: OverviewProps) { ) }} series={[ - {...monthlyDataArray.chartData.dcChargingPower,color: '#69d2e7'}, - {...monthlyDataArray.chartData.dcDischargingPower,color: '#008FFB'} + { + ...monthlyDataArray.chartData.dcChargingPower, + color: '#69d2e7' + }, + { + ...monthlyDataArray.chartData.dcDischargingPower, + color: '#008FFB' + } ]} type="bar" height={400} @@ -956,7 +1017,7 @@ function Overview(props: OverviewProps) { series={[ { ...weeklyDataArray.chartData.pvProduction, - color: '#FEB019' + color: '#ff9900' } ]} type="bar" @@ -976,7 +1037,7 @@ function Overview(props: OverviewProps) { series={[ { ...monthlyDataArray.chartData.pvProduction, - color: '#FEB019' + color: '#ff9900' } ]} type="bar" @@ -1052,11 +1113,11 @@ function Overview(props: OverviewProps) { series={[ { ...weeklyDataArray.chartData.gridImportPower, - color: '#EA3546' + color: '#b30000' }, { ...weeklyDataArray.chartData.gridExportPower, - color: '#00E396' + color: '#ff3333' } ]} type="bar" @@ -1076,11 +1137,11 @@ function Overview(props: OverviewProps) { series={[ { ...monthlyDataArray.chartData.gridImportPower, - color: '#EA3546' + color: '#b30000' }, { ...monthlyDataArray.chartData.gridExportPower, - color: '#00E396' + color: '#ff3333' } ]} type="bar" diff --git a/typescript/frontend-marios2/src/interfaces/Chart.tsx b/typescript/frontend-marios2/src/interfaces/Chart.tsx index 0e4b896ba..f77cd95df 100644 --- a/typescript/frontend-marios2/src/interfaces/Chart.tsx +++ b/typescript/frontend-marios2/src/interfaces/Chart.tsx @@ -275,11 +275,11 @@ export const transformInputToAggregatedData = async ( const chartAggregatedData: chartAggregatedDataInterface = { minsoc: { name: 'min SOC', data: [] }, maxsoc: { name: 'max SOC', data: [] }, - pvProduction: { name: 'Pv Power', data: [] }, - dcChargingPower: { name: 'Charging Battery Power', data: [] }, - dcDischargingPower: { name: 'Discharging Battery Power', data: [] }, - gridImportPower: { name: 'Grid Import Power', data: [] }, - gridExportPower: { name: 'Grid Export Power', data: [] } + pvProduction: { name: 'Pv Energy', data: [] }, + dcChargingPower: { name: 'Charging Battery Energy', data: [] }, + dcDischargingPower: { name: 'Discharging Battery Energy', data: [] }, + gridImportPower: { name: 'Grid Import Energy', data: [] }, + gridExportPower: { name: 'Grid Export Energy', data: [] } }; const chartOverview: overviewInterface = {