seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added rsuite/DateRangePicker to MeterEnergy

pull/125/head
Caozhenhui 2022-02-18 20:10:57 +08:00
parent 5ac1889af0
commit ffcd2df20b
1 changed files with 292 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

383
web/src/components/MyEMS/Meter/MeterEnergy.js
View File

@ -1,5 +1,4 @@
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
@ -14,7 +13,7 @@ import {
Input, Input,
Label, Label,
CustomInput, CustomInput,
Spinner Spinner,
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime'; import Datetime from 'react-datetime';
@ -33,7 +32,9 @@ import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import { DateRangePicker } from 'rsuite'; import { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
let current_moment = moment(); let current_moment = moment();
useEffect(() => { useEffect(() => {
@ -64,18 +65,11 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedMeter, setSelectedMeter] = useState(undefined); const [selectedMeter, setSelectedMeter] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); const [periodType, setPeriodType] = useState('daily');
const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState( const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month'));
current_moment
.clone()
.subtract(1, 'months')
.startOf('month')
);
const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months')); const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months'));
const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true); const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true);
const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true); const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true);
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState( const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
current_moment.clone().startOf('month')
);
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined);
@ -86,7 +80,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
//Results //Results
const [meterEnergyCategory, setMeterEnergyCategory] = useState({ name: '', unit: '' }); const [meterEnergyCategory, setMeterEnergyCategory] = useState({ 'name': '', 'unit': '' });
const [reportingPeriodEnergyConsumptionInCategory, setReportingPeriodEnergyConsumptionInCategory] = useState(0); const [reportingPeriodEnergyConsumptionInCategory, setReportingPeriodEnergyConsumptionInCategory] = useState(0);
const [reportingPeriodEnergyConsumptionRate, setReportingPeriodEnergyConsumptionRate] = useState(''); const [reportingPeriodEnergyConsumptionRate, setReportingPeriodEnergyConsumptionRate] = useState('');
const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0); const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0);
@ -98,9 +92,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]); const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
const [parameterLineChartData, setParameterLineChartData] = useState({}); const [parameterLineChartData, setParameterLineChartData] = useState({});
const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]); const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([ const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
{ dataField: 'startdatetime', text: t('Datetime'), sort: true }
]);
const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]); const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]);
@ -110,30 +102,23 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/tree', { fetch(APIBaseURL + '/spaces/tree', {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-type': 'application/json', "Content-type": "application/json",
'User-UUID': getCookieValue('user_uuid'), "User-UUID": getCookieValue('user_uuid'),
Token: getCookieValue('token') "Token": getCookieValue('token')
}, },
body: null body: null,
})
.then(response => { }).then(response => {
console.log(response); console.log(response);
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}) }).then(json => {
.then(json => {
console.log(json); console.log(json);
if (isResponseOK) { if (isResponseOK) {
// rename keys // rename keys
json = JSON.parse( json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
JSON.stringify([json])
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
setCascaderOptions(json); setCascaderOptions(json);
setSelectedSpaceName([json[0]].map(o => o.label)); setSelectedSpaceName([json[0]].map(o => o.label));
setSelectedSpaceID([json[0]].map(o => o.value)); setSelectedSpaceID([json[0]].map(o => o.value));
@ -142,27 +127,20 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-type': 'application/json', "Content-type": "application/json",
'User-UUID': getCookieValue('user_uuid'), "User-UUID": getCookieValue('user_uuid'),
Token: getCookieValue('token') "Token": getCookieValue('token')
}, },
body: null body: null,
})
.then(response => { }).then(response => {
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}) }).then(json => {
.then(json => {
if (isResponseOK) { if (isResponseOK) {
json = JSON.parse( json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
JSON.stringify([json])
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
console.log(json); console.log(json);
setMeterList(json[0]); setMeterList(json[0]);
setFilteredMeterList(json[0]); setFilteredMeterList(json[0]);
@ -176,24 +154,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
} }
} else { } else {
toast.error(json.description); toast.error(json.description)
} }
}) }).catch(err => {
.catch(err => {
console.log(err); console.log(err);
}); });
// end of get Meters by root Space ID // end of get Meters by root Space ID
} else { } else {
toast.error(json.description); toast.error(json.description);
} }
}) }).catch(err => {
.catch(err => {
console.log(err); console.log(err);
}); });
}, [t]);
}, [t,]);
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
@ -202,28 +180,21 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/meters', { fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/meters', {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-type': 'application/json', "Content-type": "application/json",
'User-UUID': getCookieValue('user_uuid'), "User-UUID": getCookieValue('user_uuid'),
Token: getCookieValue('token') "Token": getCookieValue('token')
}, },
body: null body: null,
})
.then(response => { }).then(response => {
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}) }).then(json => {
.then(json => {
if (isResponseOK) { if (isResponseOK) {
json = JSON.parse( json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
JSON.stringify([json]) console.log(json)
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
console.log(json);
setMeterList(json[0]); setMeterList(json[0]);
setFilteredMeterList(json[0]); setFilteredMeterList(json[0]);
if (json[0].length > 0) { if (json[0].length > 0) {
@ -236,13 +207,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
} }
} else { } else {
toast.error(json.description); toast.error(json.description)
} }
}) }).catch(err => {
.catch(err => {
console.log(err); console.log(err);
}); });
}; }
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
@ -270,7 +240,9 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const onSearchMeter = ({ target }) => { const onSearchMeter = ({ target }) => {
const keyword = target.value.toLowerCase(); const keyword = target.value.toLowerCase();
const filteredResult = meterList.filter(meter => meter.label.toLowerCase().includes(keyword)); const filteredResult = meterList.filter(
meter => meter.label.toLowerCase().includes(keyword)
);
setFilteredMeterList(keyword.length ? filteredResult : meterList); setFilteredMeterList(keyword.length ? filteredResult : meterList);
if (filteredResult.length > 0) { if (filteredResult.length > 0) {
setSelectedMeter(filteredResult[0].value); setSelectedMeter(filteredResult[0].value);
@ -280,14 +252,14 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedMeter(undefined); setSelectedMeter(undefined);
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
} };
}; };
let onBasePeriodBeginsDatetimeChange = newDateTime => { let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
setBasePeriodBeginsDatetime(newDateTime); setBasePeriodBeginsDatetime(newDateTime);
}; };
let onBasePeriodEndsDatetimeChange = newDateTime => { let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime); setBasePeriodEndsDatetime(newDateTime);
}; };
@ -321,6 +293,14 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}; };
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
};
var getValidReportingPeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
};
// Handler // Handler
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
@ -339,97 +319,82 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
// show spinner // show spinner
setSpinnerHidden(false); setSpinnerHidden(false);
// hide export button // hide export button
setExportButtonHidden(true); setExportButtonHidden(true)
// Reinitialize tables // Reinitialize tables
setDetailedDataTableData([]); setDetailedDataTableData([]);
let isResponseOK = false; let isResponseOK = false;
fetch( fetch(APIBaseURL + '/reports/meterenergy?' +
APIBaseURL + 'meterid=' + selectedMeter +
'/reports/meterenergy?' + '&periodtype=' + periodType +
'meterid=' + '&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
selectedMeter + '&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
'&periodtype=' + '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
periodType + '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
'&baseperiodstartdatetime=' +
(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' +
(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
'&reportingperiodstartdatetime=' +
reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' +
reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'),
{
method: 'GET', method: 'GET',
headers: { headers: {
'Content-type': 'application/json', "Content-type": "application/json",
'User-UUID': getCookieValue('user_uuid'), "User-UUID": getCookieValue('user_uuid'),
Token: getCookieValue('token') "Token": getCookieValue('token')
}, },
body: null body: null,
}
) }).then(response => {
.then(response => {
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} };
return response.json(); return response.json();
}) }).then(json => {
.then(json => {
if (isResponseOK) { if (isResponseOK) {
console.log(json); console.log(json)
setMeterEnergyCategory({ setMeterEnergyCategory({
name: json['meter']['energy_category_name'], 'name': json['meter']['energy_category_name'],
unit: json['meter']['unit_of_measure'] 'unit': json['meter']['unit_of_measure']
}); });
setReportingPeriodEnergyConsumptionRate( setReportingPeriodEnergyConsumptionRate(parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + "%");
parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + '%'
);
setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']); setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']);
setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000); setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000);
setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000); setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000);
setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']); setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']);
let names = Array(); let names = Array();
names.push({ value: 'a0', label: json['meter']['energy_category_name'] }); names.push({ 'value': 'a0', 'label': json['meter']['energy_category_name'] });
setMeterLineChartOptions(names); setMeterLineChartOptions(names);
let timestamps = {}; let timestamps = {}
timestamps['a0'] = json['reporting_period']['timestamps']; timestamps['a0'] = json['reporting_period']['timestamps'];
setMeterLineChartLabels(timestamps); setMeterLineChartLabels(timestamps);
let values = { a0: [] }; let values = {'a0':[]}
json['reporting_period']['values'].forEach((currentValue, index) => { json['reporting_period']['values'].forEach((currentValue, index) => {
values['a0'][index] = currentValue.toFixed(2); values['a0'][index] = currentValue.toFixed(2);
}); });
setMeterLineChartData(values); setMeterLineChartData(values)
names = Array(); names = Array();
json['parameters']['names'].forEach((currentValue, index) => { json['parameters']['names'].forEach((currentValue, index) => {
names.push({ value: 'a' + index, label: currentValue }); names.push({ 'value': 'a' + index, 'label': currentValue });
}); });
setParameterLineChartOptions(names); setParameterLineChartOptions(names);
timestamps = {}; timestamps = {}
json['parameters']['timestamps'].forEach((currentValue, index) => { json['parameters']['timestamps'].forEach((currentValue, index) => {
timestamps['a' + index] = currentValue; timestamps['a' + index] = currentValue;
}); });
setParameterLineChartLabels(timestamps); setParameterLineChartLabels(timestamps);
values = {}; values = {}
json['parameters']['values'].forEach((currentValue, index) => { json['parameters']['values'].forEach((currentValue, index) => {
values['a' + index] = currentValue; values['a' + index] = currentValue;
}); });
setParameterLineChartData(values); setParameterLineChartData(values);
setDetailedDataTableColumns([ setDetailedDataTableColumns([{
{
dataField: 'startdatetime', dataField: 'startdatetime',
text: t('Datetime'), text: t('Datetime'),
sort: true sort: true
}, }, {
{
dataField: 'a0', dataField: 'a0',
text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')',
sort: true, sort: true,
@ -440,8 +405,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
return null; return null;
} }
} }
} }]);
]);
let detailed_value_list = []; let detailed_value_list = [];
json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => { json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => {
@ -467,24 +431,26 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSpinnerHidden(true); setSpinnerHidden(true);
// show export button // show export button
setExportButtonHidden(false); setExportButtonHidden(false);
} else { } else {
toast.error(json.description); toast.error(json.description)
setSpinnerHidden(true);
setSubmitButtonDisabled(false);
} }
}) }).catch(err => {
.catch(err => {
console.log(err); console.log(err);
}); });
}; };
const handleExport = e => { const handleExport = e => {
e.preventDefault(); e.preventDefault();
const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileName = 'meterenergy.xlsx'; const fileName = 'meterenergy.xlsx'
var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64; var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64;
fetch(fileUrl) fetch(fileUrl)
.then(response => response.blob()) .then(response => response.blob())
.then(blob => { .then(blob => {
var link = window.document.createElement('a'); var link = window.document.createElement("a");
link.href = window.URL.createObjectURL(blob, { type: mimeType }); link.href = window.URL.createObjectURL(blob, { type: mimeType });
link.download = fileName; link.download = fileName;
document.body.appendChild(link); document.body.appendChild(link);
@ -493,12 +459,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}; };
return ( return (
<Fragment> <Fragment>
<div> <div>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem> <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Meter Energy')}</BreadcrumbItem>
<BreadcrumbItem active>{t('Meter Energy')}</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
</div> </div>
<Card className="bg-light mb-3"> <Card className="bg-light mb-3">
@ -511,12 +477,10 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
{t('Space')} {t('Space')}
</Label> </Label>
<br /> <br />
<Cascader <Cascader options={cascaderOptions}
options={cascaderOptions}
onChange={onSpaceCascaderChange} onChange={onSpaceCascaderChange}
changeOnSelect changeOnSelect
expandTrigger="hover" expandTrigger="hover">
>
<Input value={selectedSpaceName || ''} readOnly /> <Input value={selectedSpaceName || ''} readOnly />
</Cascader> </Cascader>
</FormGroup> </FormGroup>
@ -526,13 +490,10 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="meterSelect"> <Label className={labelClasses} for="meterSelect">
{t('Meter')} {t('Meter')}
</Label> </Label>
<Form inline> <Form inline>
<Input placeholder={t('Search')} onChange={onSearchMeter} /> <Input placeholder={t('Search')} onChange={onSearchMeter} />
<CustomInput <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
type="select"
id="meterSelect"
name="meterSelect"
onChange={({ target }) => setSelectedMeter(target.value)}
> >
{filteredMeterList.map((meter, index) => ( {filteredMeterList.map((meter, index) => (
<option value={meter.value} key={meter.value}> <option value={meter.value} key={meter.value}>
@ -541,6 +502,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
))} ))}
</CustomInput> </CustomInput>
</Form> </Form>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
@ -548,10 +510,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="comparisonType"> <Label className={labelClasses} for="comparisonType">
{t('Comparison Types')} {t('Comparison Types')}
</Label> </Label>
<CustomInput <CustomInput type="select" id="comparisonType" name="comparisonType"
type="select"
id="comparisonType"
name="comparisonType"
defaultValue="month-on-month" defaultValue="month-on-month"
onChange={onComparisonTypeChange} onChange={onComparisonTypeChange}
> >
@ -568,12 +527,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="periodType"> <Label className={labelClasses} for="periodType">
{t('Period Types')} {t('Period Types')}
</Label> </Label>
<CustomInput <CustomInput type="select" id="periodType" name="periodType" defaultValue="daily" onChange={({ target }) => setPeriodType(target.value)}
type="select"
id="periodType"
name="periodType"
defaultValue="daily"
onChange={({ target }) => setPeriodType(target.value)}
> >
{periodTypeOptions.map((periodType, index) => ( {periodTypeOptions.map((periodType, index) => (
<option value={periodType.value} key={periodType.value} > <option value={periodType.value} key={periodType.value} >
@ -586,33 +540,27 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodBeginsDatetime">
{t('Base Period Begins')} {t('Base Period Begins')}{t('(Optional)')}
{t('(Optional)')}
</Label> </Label>
<Datetime <Datetime id='basePeriodBeginsDatetime'
id="basePeriodBeginsDatetime"
value={basePeriodBeginsDatetime} value={basePeriodBeginsDatetime}
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodBeginsDatetimeChange}
isValidDate={getValidBasePeriodBeginsDatetimes} isValidDate={getValidBasePeriodBeginsDatetimes}
closeOnSelect={true} closeOnSelect={true} />
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="basePeriodEndsDatetime"> <Label className={labelClasses} for="basePeriodEndsDatetime">
{t('Base Period Ends')} {t('Base Period Ends')}{t('(Optional)')}
{t('(Optional)')}
</Label> </Label>
<Datetime <Datetime id='basePeriodEndsDatetime'
id="basePeriodEndsDatetime"
value={basePeriodEndsDatetime} value={basePeriodEndsDatetime}
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} inputProps={{ disabled: basePeriodEndsDatetimeDisabled }}
onChange={onBasePeriodEndsDatetimeChange} onChange={onBasePeriodEndsDatetimeChange}
isValidDate={getValidBasePeriodEndsDatetimes} isValidDate={getValidBasePeriodEndsDatetimes}
closeOnSelect={true} closeOnSelect={true} />
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
@ -632,29 +580,23 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<FormGroup> <FormGroup>
<br /> <br></br>
<ButtonGroup id="submit"> <ButtonGroup id="submit">
<Button color="success" disabled={submitButtonDisabled}> <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
{t('Submit')}
</Button>
</ButtonGroup> </ButtonGroup>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<FormGroup> <FormGroup>
<br /> <br></br>
<Spinner color="primary" hidden={spinnerHidden} /> <Spinner color="primary" hidden={spinnerHidden} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<br /> <br></br>
<ButtonIcon <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default"
icon="external-link-alt"
transform="shrink-3 down-2"
color="falcon-default"
hidden={exportButtonHidden} hidden={exportButtonHidden}
onClick={handleExport} onClick={handleExport} >
>
{t('Export')} {t('Export')}
</ButtonIcon> </ButtonIcon>
</Col> </Col>
@ -663,91 +605,42 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
</CardBody> </CardBody>
</Card> </Card>
<Fragment> <Fragment>
<div className="card-deck"> <div className="card-deck">
<CardSummary
rate={reportingPeriodEnergyConsumptionRate} <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
title={t('Reporting Period Consumption CATEGORY UNIT', { color="success" >
CATEGORY: meterEnergyCategory['name'], <CountUp end={reportingPeriodEnergyConsumptionInCategory} duration={2} prefix="" separator="," decimals={2} decimal="." />
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
color="success"
>
<CountUp
end={reportingPeriodEnergyConsumptionInCategory}
duration={2}
prefix=""
separator=","
decimals={2}
decimal="."
/>
</CardSummary> </CardSummary>
<CardSummary <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Standard Coal'), 'UNIT': '(TCE)' })}
rate={reportingPeriodEnergyConsumptionRate} color="warning" >
title={t('Reporting Period Consumption CATEGORY UNIT', { <CountUp end={reportingPeriodEnergyConsumptionInTCE} duration={2} prefix="" separator="," decimal="." decimals={2} />
CATEGORY: t('Ton of Standard Coal'),
UNIT: '(TCE)'
})}
color="warning"
>
<CountUp
end={reportingPeriodEnergyConsumptionInTCE}
duration={2}
prefix=""
separator=","
decimal="."
decimals={2}
/>
</CardSummary> </CardSummary>
<CardSummary <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Carbon Dioxide Emissions'), 'UNIT': '(T)' })}
rate={reportingPeriodEnergyConsumptionRate} color="warning" >
title={t('Reporting Period Consumption CATEGORY UNIT', { <CountUp end={reportingPeriodEnergyConsumptionInCO2} duration={2} prefix="" separator="," decimal="." decimals={2} />
CATEGORY: t('Ton of Carbon Dioxide Emissions'),
UNIT: '(T)'
})}
color="warning"
>
<CountUp
end={reportingPeriodEnergyConsumptionInCO2}
duration={2}
prefix=""
separator=","
decimal="."
decimals={2}
/>
</CardSummary> </CardSummary>
</div> </div>
<LineChart <LineChart reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': reportingPeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': basePeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
CATEGORY: meterEnergyCategory['name'],
VALUE: reportingPeriodEnergyConsumptionInCategory.toFixed(2),
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', {
CATEGORY: meterEnergyCategory['name'],
VALUE: basePeriodEnergyConsumptionInCategory.toFixed(2),
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
labels={meterLineChartLabels} labels={meterLineChartLabels}
data={meterLineChartData} data={meterLineChartData}
options={meterLineChartOptions} options={meterLineChartOptions}>
/> </LineChart>
<LineChart <LineChart reportingTitle={t('Related Parameters')}
reportingTitle={t('Related Parameters')} baseTitle=''
baseTitle=""
labels={parameterLineChartLabels} labels={parameterLineChartLabels}
data={parameterLineChartData} data={parameterLineChartData}
options={parameterLineChartOptions} options={parameterLineChartOptions}>
/> </LineChart>
<br /> <br />
<DetailedDataTable <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
data={detailedDataTableData} </DetailedDataTable>
title={t('Detailed Data')}
columns={detailedDataTableColumns}
pagesize={50}
/>
</Fragment> </Fragment>
</Fragment> </Fragment>
); );