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:
parent
ff8dc25722
commit
a10762fefe
|
@ -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 \
|
||||
|
|
|
@ -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)
|
||||
{
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -58,15 +58,24 @@ 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)
|
||||
);
|
||||
|
||||
// Decompress the byte array using JSZip
|
||||
//Decompress the byte array using JSZip
|
||||
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);
|
||||
|
|
|
@ -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,88 +217,100 @@ function Overview(props: OverviewProps) {
|
|||
}
|
||||
|
||||
setLoading(true);
|
||||
const resultPromise: Promise<{
|
||||
chartData: chartDataInterface;
|
||||
chartOverview: overviewInterface;
|
||||
}> = transformInputToDailyData(
|
||||
props.s3Credentials,
|
||||
UnixTime.fromTicks(startDate.unix()),
|
||||
UnixTime.fromTicks(endDate.unix())
|
||||
);
|
||||
|
||||
resultPromise
|
||||
.then((result) => {
|
||||
setDailyDataArray((prevData) =>
|
||||
prevData.concat({
|
||||
chartData: result.chartData,
|
||||
chartOverview: result.chartOverview
|
||||
})
|
||||
);
|
||||
if (dailyData) {
|
||||
const resultPromise: Promise<{
|
||||
chartData: chartDataInterface;
|
||||
chartOverview: overviewInterface;
|
||||
}> = transformInputToDailyData(
|
||||
props.s3Credentials,
|
||||
UnixTime.fromTicks(startDate.unix()),
|
||||
UnixTime.fromTicks(endDate.unix())
|
||||
);
|
||||
|
||||
setLoading(false);
|
||||
setChartState(dailyDataArray.length);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
resultPromise
|
||||
.then((result) => {
|
||||
setDailyDataArray((prevData) =>
|
||||
prevData.concat({
|
||||
chartData: result.chartData,
|
||||
chartOverview: result.chartOverview
|
||||
})
|
||||
);
|
||||
|
||||
setLoading(false);
|
||||
setChartState(dailyDataArray.length);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
} else {
|
||||
setDailyData(false);
|
||||
setAggregatedData(true);
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const resultPromise: Promise<{
|
||||
chartAggregatedData: chartAggregatedDataInterface;
|
||||
chartOverview: overviewInterface;
|
||||
dateList: string[];
|
||||
}> = transformInputToAggregatedData(
|
||||
props.s3Credentials,
|
||||
startDate,
|
||||
endDate
|
||||
);
|
||||
|
||||
resultPromise
|
||||
.then((result) => {
|
||||
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])
|
||||
);
|
||||
}
|
||||
|
||||
setAggregatedDataArray((prevData) =>
|
||||
prevData.concat({
|
||||
chartData: result.chartAggregatedData,
|
||||
chartOverview: result.chartOverview,
|
||||
datelist: result.dateList,
|
||||
netbalance: powerDifference
|
||||
})
|
||||
);
|
||||
|
||||
setAggregatedChartState(aggregatedDataArray.length);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoBack = () => {
|
||||
if (chartState > 0) {
|
||||
if (dailyData && chartState > 0) {
|
||||
setChartState(chartState - 1);
|
||||
}
|
||||
if (aggregatedData && aggregatedChartState > 0) {
|
||||
setAggregatedChartState(aggregatedChartState - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoForward = () => {
|
||||
if (chartState + 1 < dailyDataArray.length) {
|
||||
if (dailyData && chartState + 1 < dailyDataArray.length) {
|
||||
setChartState(chartState + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMonthData = () => {
|
||||
setDailyData(false);
|
||||
setWeeklyData(false);
|
||||
setMonthlyData(true);
|
||||
|
||||
if (monthlyDataArray.chartData != null) {
|
||||
return;
|
||||
if (
|
||||
aggregatedData &&
|
||||
aggregatedChartState + 1 < aggregatedDataArray.length
|
||||
) {
|
||||
setAggregatedChartState(aggregatedChartState + 1);
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
const resultPromise: Promise<{
|
||||
chartAggregatedData: chartAggregatedDataInterface;
|
||||
chartOverview: overviewInterface;
|
||||
dateList: string[];
|
||||
}> = transformInputToAggregatedData(props.s3Credentials, 'monthly');
|
||||
|
||||
resultPromise
|
||||
.then((result) => {
|
||||
setMonthlyDataArray({
|
||||
chartData: result.chartAggregatedData,
|
||||
chartOverview: 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);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
};
|
||||
|
||||
const renderGraphs = () => {
|
||||
|
@ -438,86 +455,74 @@ 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}
|
||||
disabled={loading}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: dateOpen ? '#808080' : '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="lastmonth" defaultMessage="Set Date" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
{dailyData && (
|
||||
<Grid
|
||||
container
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
item
|
||||
xs={6}
|
||||
md={6}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!(chartState > 0)}
|
||||
onClick={handleGoBack}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="goback" defaultMessage="Zoom out" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!(chartState < dailyDataArray.length - 1)}
|
||||
onClick={handleGoForward}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="goback" defaultMessage="Zoom in" />
|
||||
</Button>
|
||||
</Grid>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleSetDate}
|
||||
disabled={loading}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: dateOpen ? '#808080' : '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="lastmonth" defaultMessage="Set Date" />
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
item
|
||||
xs={6}
|
||||
md={6}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={
|
||||
dailyData ? !(chartState > 0) : !(aggregatedChartState > 0)
|
||||
}
|
||||
onClick={handleGoBack}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="goback" defaultMessage="Zoom out" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={
|
||||
dailyData
|
||||
? !(chartState < dailyDataArray.length - 1)
|
||||
: !(aggregatedChartState < aggregatedDataArray.length - 1)
|
||||
}
|
||||
onClick={handleGoForward}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: '#ffc04d',
|
||||
color: '#000000',
|
||||
'&:hover': { bgcolor: '#f7b34d' }
|
||||
}}
|
||||
>
|
||||
<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,81 +665,46 @@ function Overview(props: OverviewProps) {
|
|||
></Box>
|
||||
</Box>
|
||||
|
||||
{weeklyData && (
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
weeklyDataArray.chartOverview.overview,
|
||||
'overview',
|
||||
weeklyDateList,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...weeklyDataArray.chartData.gridImportPower,
|
||||
color: '#b30000',
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
...weeklyDataArray.chartData.gridExportPower,
|
||||
color: '#ff3333',
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
...weeklyDataArray.chartData.pvProduction,
|
||||
type: 'bar',
|
||||
color: '#ff9900'
|
||||
},
|
||||
{
|
||||
name: 'Net Energy',
|
||||
color: '#ff3333',
|
||||
type: 'line',
|
||||
data: weeklybalance
|
||||
}
|
||||
]}
|
||||
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'}
|
||||
/>
|
||||
)}
|
||||
<ReactApexChart
|
||||
options={{
|
||||
...getChartOptions(
|
||||
aggregatedDataArray[aggregatedChartState]
|
||||
.chartOverview.overview,
|
||||
'overview',
|
||||
aggregatedDataArray[aggregatedChartState].datelist,
|
||||
true
|
||||
)
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
...aggregatedDataArray[aggregatedChartState]
|
||||
.chartData.gridImportPower,
|
||||
color: '#b30000',
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
...aggregatedDataArray[aggregatedChartState]
|
||||
.chartData.gridExportPower,
|
||||
color: '#ff3333',
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
...aggregatedDataArray[aggregatedChartState]
|
||||
.chartData.pvProduction,
|
||||
type: 'bar',
|
||||
color: '#ff9900'
|
||||
},
|
||||
{
|
||||
name: 'Net Energy',
|
||||
color: '#ff3333',
|
||||
type: 'line',
|
||||
data: aggregatedDataArray[aggregatedChartState]
|
||||
.netbalance
|
||||
}
|
||||
]}
|
||||
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'
|
||||
}
|
||||
]}
|
||||
|
|
|
@ -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];
|
||||
|
|
Loading…
Reference in New Issue