From 51ff6234a6f14eb5656b72d57d5b2a47b9679bb1 Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Wed, 16 Feb 2022 01:07:33 +0800 Subject: [PATCH] added DateTimeRangeContainer to MeterEnergy --- web/src/components/MyEMS/Meter/MeterEnergy.js | 798 ++++++++++-------- 1 file changed, 456 insertions(+), 342 deletions(-) diff --git a/web/src/components/MyEMS/Meter/MeterEnergy.js b/web/src/components/MyEMS/Meter/MeterEnergy.js index cbb794b2..13fb6e7b 100644 --- a/web/src/components/MyEMS/Meter/MeterEnergy.js +++ b/web/src/components/MyEMS/Meter/MeterEnergy.js @@ -1,4 +1,5 @@ import React, { Fragment, useEffect, useState } from 'react'; + import { Breadcrumb, BreadcrumbItem, @@ -13,7 +14,7 @@ import { Input, Label, CustomInput, - Spinner, + Spinner } from 'reactstrap'; import CountUp from 'react-countup'; import Datetime from 'react-datetime'; @@ -30,10 +31,10 @@ import ButtonIcon from '../../common/ButtonIcon'; import { APIBaseURL } from '../../../config'; import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; - +import DateTimeRangeContainer from 'react-advanced-datetimerange-picker'; +import { FormControl } from 'react-bootstrap'; const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); - const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { let current_moment = moment(); useEffect(() => { @@ -64,11 +65,18 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [selectedMeter, setSelectedMeter] = useState(undefined); const [comparisonType, setComparisonType] = useState('month-on-month'); const [periodType, setPeriodType] = useState('daily'); - const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month')); + const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState( + current_moment + .clone() + .subtract(1, 'months') + .startOf('month') + ); const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months')); const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true); const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true); - const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); + const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState( + current_moment.clone().startOf('month') + ); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [cascaderOptions, setCascaderOptions] = useState(undefined); @@ -79,7 +87,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [loading, setLoading] = useState(false); //Results - const [meterEnergyCategory, setMeterEnergyCategory] = useState({ 'name': '', 'unit': '' }); + const [meterEnergyCategory, setMeterEnergyCategory] = useState({ name: '', unit: '' }); const [reportingPeriodEnergyConsumptionInCategory, setReportingPeriodEnergyConsumptionInCategory] = useState(0); const [reportingPeriodEnergyConsumptionRate, setReportingPeriodEnergyConsumptionRate] = useState(''); const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0); @@ -91,85 +99,113 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]); const [parameterLineChartData, setParameterLineChartData] = useState({}); const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]); - const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]); + const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([ + { dataField: 'startdatetime', text: t('Datetime'), sort: true } + ]); const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); + const [local, setLocal] = useState({ + format: 'MM/DD/YYYY HH:mm:ss A', + sundayFirst: false + }); + const [ranges, setRanges] = useState({ + 'Today Only': [moment(reportingPeriodEndsDatetime).subtract('1','days'), moment(reportingPeriodEndsDatetime)], + 'Yesterday Only': [ + moment().subtract(2, 'days'), + moment().subtract(1, 'days') + ], + 'Last 3 Days': [moment().subtract(3, 'days'), moment()], + }); useEffect(() => { let isResponseOK = false; fetch(APIBaseURL + '/spaces/tree', { method: 'GET', headers: { - "Content-type": "application/json", - "User-UUID": getCookieValue('user_uuid'), - "Token": getCookieValue('token') + 'Content-type': 'application/json', + 'User-UUID': getCookieValue('user_uuid'), + Token: getCookieValue('token') }, - body: null, - - }).then(response => { - console.log(response); - if (response.ok) { - isResponseOK = true; - } - return response.json(); - }).then(json => { - console.log(json); - if (isResponseOK) { - // rename keys - json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); - setCascaderOptions(json); - setSelectedSpaceName([json[0]].map(o => o.label)); - setSelectedSpaceID([json[0]].map(o => o.value)); - // get Meters by root Space ID - let isResponseOK = false; - fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { - method: 'GET', - headers: { - "Content-type": "application/json", - "User-UUID": getCookieValue('user_uuid'), - "Token": getCookieValue('token') - }, - body: null, - - }).then(response => { - if (response.ok) { - isResponseOK = true; - } - return response.json(); - }).then(json => { - if (isResponseOK) { - json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); - console.log(json); - setMeterList(json[0]); - setFilteredMeterList(json[0]); - if (json[0].length > 0) { - setSelectedMeter(json[0][0].value); - // enable submit button - setSubmitButtonDisabled(false); - } else { - setSelectedMeter(undefined); - // disable submit button - setSubmitButtonDisabled(true); - } - } else { - toast.error(json.description) - } - }).catch(err => { - console.log(err); - }); - // end of get Meters by root Space ID - } else { - toast.error(json.description); - } - }).catch(err => { - console.log(err); - }); - - }, [t,]); + body: null + }) + .then(response => { + console.log(response); + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }) + .then(json => { + console.log(json); + if (isResponseOK) { + // rename keys + json = JSON.parse( + JSON.stringify([json]) + .split('"id":') + .join('"value":') + .split('"name":') + .join('"label":') + ); + setCascaderOptions(json); + setSelectedSpaceName([json[0]].map(o => o.label)); + setSelectedSpaceID([json[0]].map(o => o.value)); + // get Meters by root Space ID + let isResponseOK = false; + fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { + method: 'GET', + headers: { + 'Content-type': 'application/json', + 'User-UUID': getCookieValue('user_uuid'), + Token: getCookieValue('token') + }, + body: null + }) + .then(response => { + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }) + .then(json => { + if (isResponseOK) { + json = JSON.parse( + JSON.stringify([json]) + .split('"id":') + .join('"value":') + .split('"name":') + .join('"label":') + ); + console.log(json); + setMeterList(json[0]); + setFilteredMeterList(json[0]); + if (json[0].length > 0) { + setSelectedMeter(json[0][0].value); + // enable submit button + setSubmitButtonDisabled(false); + } else { + setSelectedMeter(undefined); + // disable submit button + setSubmitButtonDisabled(true); + } + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + // end of get Meters by root Space ID + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + }, [t]); const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; - let onSpaceCascaderChange = (value, selectedOptions) => { setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceID(value[value.length - 1]); @@ -178,39 +214,47 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/meters', { method: 'GET', headers: { - "Content-type": "application/json", - "User-UUID": getCookieValue('user_uuid'), - "Token": getCookieValue('token') + 'Content-type': 'application/json', + 'User-UUID': getCookieValue('user_uuid'), + Token: getCookieValue('token') }, - body: null, - - }).then(response => { - if (response.ok) { - isResponseOK = true; - } - return response.json(); - }).then(json => { - if (isResponseOK) { - json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); - console.log(json) - setMeterList(json[0]); - setFilteredMeterList(json[0]); - if (json[0].length > 0) { - setSelectedMeter(json[0][0].value); - // enable submit button - setSubmitButtonDisabled(false); - } else { - setSelectedMeter(undefined); - // disable submit button - setSubmitButtonDisabled(true); + body: null + }) + .then(response => { + if (response.ok) { + isResponseOK = true; } - } else { - toast.error(json.description) - } - }).catch(err => { - console.log(err); - }); - } + return response.json(); + }) + .then(json => { + if (isResponseOK) { + json = JSON.parse( + JSON.stringify([json]) + .split('"id":') + .join('"value":') + .split('"name":') + .join('"label":') + ); + console.log(json); + setMeterList(json[0]); + setFilteredMeterList(json[0]); + if (json[0].length > 0) { + setSelectedMeter(json[0][0].value); + // enable submit button + setSubmitButtonDisabled(false); + } else { + setSelectedMeter(undefined); + // disable submit button + setSubmitButtonDisabled(true); + } + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + }; let onComparisonTypeChange = ({ target }) => { console.log(target.value); @@ -238,9 +282,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const onSearchMeter = ({ target }) => { 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); if (filteredResult.length > 0) { setSelectedMeter(filteredResult[0].value); @@ -250,57 +292,40 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { setSelectedMeter(undefined); // disable submit button setSubmitButtonDisabled(true); - }; + } }; - let onBasePeriodBeginsDatetimeChange = (newDateTime) => { + let onBasePeriodBeginsDatetimeChange = newDateTime => { setBasePeriodBeginsDatetime(newDateTime); }; - let onBasePeriodEndsDatetimeChange = (newDateTime) => { + let onBasePeriodEndsDatetimeChange = newDateTime => { setBasePeriodEndsDatetime(newDateTime); }; - let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { - if(reportingPeriodEndsDatetime < newDateTime){ - newDateTime = reportingPeriodBeginsDatetime; - } - setReportingPeriodBeginsDatetime(newDateTime); + let applyCallback = (startDate, endDate) => { + setReportingPeriodBeginsDatetime(startDate); if (comparisonType === 'year-over-year') { - setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); + setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years')); } else if (comparisonType === 'month-on-month') { - setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); + setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'months')); + } + setReportingPeriodEndsDatetime(endDate); + if (comparisonType === 'year-over-year') { + setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'years')); + } else if (comparisonType === 'month-on-month') { + setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months')); } }; - let onReportingPeriodEndsDatetimeChange = (newDateTime) => { - if(reportingPeriodBeginsDatetime > newDateTime){ - newDateTime = reportingPeriodEndsDatetime; - } - setReportingPeriodEndsDatetime(newDateTime); - if (comparisonType === 'year-over-year') { - setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); - } else if (comparisonType === 'month-on-month') { - setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months')); - } - }; - - var getValidBasePeriodBeginsDatetimes = function (currentDate) { + var getValidBasePeriodBeginsDatetimes = function(currentDate) { return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); }; - var getValidBasePeriodEndsDatetimes = function (currentDate) { + var getValidBasePeriodEndsDatetimes = function(currentDate) { 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 const handleSubmit = e => { e.preventDefault(); @@ -315,170 +340,188 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); // disable submit button - setSubmitButtonDisabled(true); + setSubmitButtonDisabled(true); // show spinner setSpinnerHidden(false); // hide export button - setExportButtonHidden(true) + setExportButtonHidden(true); // Reinitialize tables setDetailedDataTableData([]); let isResponseOK = false; - fetch(APIBaseURL + '/reports/meterenergy?' + - 'meterid=' + selectedMeter + - '&periodtype=' + periodType + - '&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', - headers: { - "Content-type": "application/json", - "User-UUID": getCookieValue('user_uuid'), - "Token": getCookieValue('token') - }, - body: null, - - }).then(response => { - if (response.ok) { - isResponseOK = true; - }; - return response.json(); - }).then(json => { - if (isResponseOK) { - console.log(json) - setMeterEnergyCategory({ - 'name': json['meter']['energy_category_name'], - 'unit': json['meter']['unit_of_measure'] - }); - setReportingPeriodEnergyConsumptionRate(parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + "%"); - setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']); - setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000); - setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000); - setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']); - - let names = Array(); - names.push({ 'value': 'a0', 'label': json['meter']['energy_category_name'] }); - setMeterLineChartOptions(names); - - let timestamps = {} - timestamps['a0'] = json['reporting_period']['timestamps']; - setMeterLineChartLabels(timestamps); - - let values = {'a0':[]} - json['reporting_period']['values'].forEach((currentValue, index) => { - values['a0'][index] = currentValue.toFixed(2); - }); - setMeterLineChartData(values) - - names = Array(); - json['parameters']['names'].forEach((currentValue, index) => { - names.push({ 'value': 'a' + index, 'label': currentValue }); - }); - setParameterLineChartOptions(names); - - timestamps = {} - json['parameters']['timestamps'].forEach((currentValue, index) => { - timestamps['a' + index] = currentValue; - }); - setParameterLineChartLabels(timestamps); - - values = {} - json['parameters']['values'].forEach((currentValue, index) => { - values['a' + index] = currentValue; - }); - setParameterLineChartData(values); - - setDetailedDataTableColumns([{ - dataField: 'startdatetime', - text: t('Datetime'), - sort: true - }, { - dataField: 'a0', - text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', - sort: true, - formatter: function (decimalValue) { - if (decimalValue !== null) { - return decimalValue.toFixed(2); - } else { - return null; - } - } - }]); - - let detailed_value_list = []; - json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => { - let detailed_value = {}; - detailed_value['id'] = timestampIndex; - detailed_value['startdatetime'] = currentTimestamp; - detailed_value['a0'] = json['reporting_period']['values'][timestampIndex]; - detailed_value_list.push(detailed_value); - }); - - let detailed_value = {}; - detailed_value['id'] = detailed_value_list.length; - detailed_value['startdatetime'] = t('Total'); - detailed_value['a0'] = json['reporting_period']['total_in_category']; - detailed_value_list.push(detailed_value); - setDetailedDataTableData(detailed_value_list); - - setExcelBytesBase64(json['excel_bytes_base64']); - - // enable submit button - setSubmitButtonDisabled(false); - // hide spinner - setSpinnerHidden(true); - // show export button - setExportButtonHidden(false); - - } else { - toast.error(json.description) + fetch( + APIBaseURL + + '/reports/meterenergy?' + + 'meterid=' + + selectedMeter + + '&periodtype=' + + periodType + + '&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', + headers: { + 'Content-type': 'application/json', + 'User-UUID': getCookieValue('user_uuid'), + Token: getCookieValue('token') + }, + body: null } - }).catch(err => { - console.log(err); - }); + ) + .then(response => { + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }) + .then(json => { + if (isResponseOK) { + console.log(json); + setMeterEnergyCategory({ + name: json['meter']['energy_category_name'], + unit: json['meter']['unit_of_measure'] + }); + setReportingPeriodEnergyConsumptionRate( + parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + '%' + ); + setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']); + setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000); + setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000); + setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']); + + let names = Array(); + names.push({ value: 'a0', label: json['meter']['energy_category_name'] }); + setMeterLineChartOptions(names); + + let timestamps = {}; + timestamps['a0'] = json['reporting_period']['timestamps']; + setMeterLineChartLabels(timestamps); + + let values = { a0: [] }; + json['reporting_period']['values'].forEach((currentValue, index) => { + values['a0'][index] = currentValue.toFixed(2); + }); + setMeterLineChartData(values); + + names = Array(); + json['parameters']['names'].forEach((currentValue, index) => { + names.push({ value: 'a' + index, label: currentValue }); + }); + setParameterLineChartOptions(names); + + timestamps = {}; + json['parameters']['timestamps'].forEach((currentValue, index) => { + timestamps['a' + index] = currentValue; + }); + setParameterLineChartLabels(timestamps); + + values = {}; + json['parameters']['values'].forEach((currentValue, index) => { + values['a' + index] = currentValue; + }); + setParameterLineChartData(values); + + setDetailedDataTableColumns([ + { + dataField: 'startdatetime', + text: t('Datetime'), + sort: true + }, + { + dataField: 'a0', + text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', + sort: true, + formatter: function(decimalValue) { + if (decimalValue !== null) { + return decimalValue.toFixed(2); + } else { + return null; + } + } + } + ]); + + let detailed_value_list = []; + json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => { + let detailed_value = {}; + detailed_value['id'] = timestampIndex; + detailed_value['startdatetime'] = currentTimestamp; + detailed_value['a0'] = json['reporting_period']['values'][timestampIndex]; + detailed_value_list.push(detailed_value); + }); + + let detailed_value = {}; + detailed_value['id'] = detailed_value_list.length; + detailed_value['startdatetime'] = t('Total'); + detailed_value['a0'] = json['reporting_period']['total_in_category']; + detailed_value_list.push(detailed_value); + setDetailedDataTableData(detailed_value_list); + + setExcelBytesBase64(json['excel_bytes_base64']); + + // enable submit button + setSubmitButtonDisabled(false); + // hide spinner + setSpinnerHidden(true); + // show export button + setExportButtonHidden(false); + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); }; const handleExport = e => { e.preventDefault(); - const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' - const fileName = 'meterenergy.xlsx' - var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64; + const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; + const fileName = 'meterenergy.xlsx'; + var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64; fetch(fileUrl) - .then(response => response.blob()) - .then(blob => { - var link = window.document.createElement("a"); - link.href = window.URL.createObjectURL(blob, { type: mimeType }); - link.download = fileName; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - }); + .then(response => response.blob()) + .then(blob => { + var link = window.document.createElement('a'); + link.href = window.URL.createObjectURL(blob, { type: mimeType }); + link.download = fileName; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }); }; - return (
- {t('Meter Data')}{t('Meter Energy')} + {t('Meter Data')} + {t('Meter Energy')}
- +
- + expandTrigger="hover" + > @@ -488,19 +531,21 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - - - setSelectedMeter(target.value)} - > - {filteredMeterList.map((meter, index) => ( - - ))} - + + setSelectedMeter(target.value)} + > + {filteredMeterList.map((meter, index) => ( + + ))} + - @@ -508,12 +553,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - {comparisonTypeOptions.map((comparisonType, index) => ( - ))} @@ -525,10 +573,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - setPeriodType(target.value)} + setPeriodType(target.value)} > {periodTypeOptions.map((periodType, index) => ( - ))} @@ -538,116 +591,177 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - + closeOnSelect={true} + /> - + closeOnSelect={true} + /> - - - - - - + + + -

+
- + -

- -

- + + onClick={handleExport} + > + {t('Export')} +
-
- - - + + - - + + - - + + -
- - + options={meterLineChartOptions} + /> - - + options={parameterLineChartOptions} + />
- - - + );