Merge branch 'develop'

database/install/myems_system_db.sql

@@ -431,6 +431,7 @@ VALUES
 (309,'Offline Meter Cost','/meter/offlinemetercost',300,0),
 (310,'Batch Analysis','/meter/batch',300,0),
 (311,'Meter Tracking','/meter/tracking',300,0),
+(312,'Meter Carbon','/meter/metercarbon',300,0),
 (400,'Tenant Data','/tenant',NULL,0),
 (401,'Energy Category Data','/tenant/energycategory',400,0),
 (402,'Energy Item Data','/tenant/energyitem',400,0),

database/upgrade/upgrade1.8.0.sql

@@ -0,0 +1,16 @@
+-- ---------------------------------------------------------------------------------------------------------------------
+-- WARNING: BACKUP YOUR DATABASE BEFORE UPGRADING
+-- THIS SCRIPT IS ONLY FOR UPGRADING 1.7.1 TO 1.7.2
+-- THE CURRENT VERSION CAN BE FOUND AT `myems_system_db`.`tbl_versions`
+-- ---------------------------------------------------------------------------------------------------------------------
+
+START TRANSACTION;
+
+INSERT INTO myems_system_db.tbl_menus (id,name,route, parent_menu_id,is_hidden)
+VALUES
+(312,'Meter Carbon','/meter/metercarbon',300,0);
+
+-- UPDATE VERSION NUMBER
+UPDATE `myems_system_db`.`tbl_versions` SET version='1.8.0', release_date='2022-02-28' WHERE id=1;
+
+COMMIT;

myems-api/core/version.py

@@ -15,8 +15,8 @@ class VersionItem:
     @staticmethod
     def on_get(req, resp):
 
-        result = {"version": 'MyEMS v1.7.2',
+        result = {"version": 'MyEMS v1.8.0',
-                  "release-date": '2022-02-19',
+                  "release-date": '2022-02-28',
                   "website": "https://myems.io"}
         resp.text = json.dumps(result)
 

myems-api/excelexporters/metercarbon.py

@@ -62,7 +62,7 @@ def generate_excel(report, name, reporting_start_datetime_local, reporting_end_d
 
     # todo
     ws = wb.active
-    ws.title = "MeterCarbon"
+    ws.title = "MeterCarbonDioxideEmissions"
     # Row height
     ws.row_dimensions[1].height = 102
     for i in range(2, 2000 + 1):
@@ -166,7 +166,7 @@ def generate_excel(report, name, reporting_start_datetime_local, reporting_end_d
 
         ws['B8'].font = title_font
         ws['B8'].alignment = c_c_alignment
-        ws['B8'] = 'Carbon Dioxide Emission'
+        ws['B8'] = 'Carbon Dioxide Emissions'
         ws['B8'].border = f_border
 
         ws['B9'].font = title_font

web/src/components/MyEMS/Meter/MeterCarbon.js

@@ -0,0 +1,642 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Row,
+  Col,
+  Card,
+  CardBody,
+  Button,
+  ButtonGroup,
+  Form,
+  FormGroup,
+  Input,
+  Label,
+  CustomInput,
+  Spinner,
+} from 'reactstrap';
+import CountUp from 'react-countup';
+import Datetime from 'react-datetime';
+import moment from 'moment';
+import loadable from '@loadable/component';
+import Cascader from 'rc-cascader';
+import CardSummary from '../common/CardSummary';
+import LineChart from '../common/LineChart';
+import { getCookieValue, createCookie } from '../../../helpers/utils';
+import withRedirect from '../../../hoc/withRedirect';
+import { withTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import ButtonIcon from '../../common/ButtonIcon';
+import { APIBaseURL } from '../../../config';
+import { periodTypeOptions } from '../common/PeriodTypeOptions';
+import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
+
+
+const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
+
+const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
+  let current_moment = moment();
+  useEffect(() => {
+    let is_logged_in = getCookieValue('is_logged_in');
+    let user_name = getCookieValue('user_name');
+    let user_display_name = getCookieValue('user_display_name');
+    let user_uuid = getCookieValue('user_uuid');
+    let token = getCookieValue('token');
+    if (is_logged_in === null || !is_logged_in) {
+      setRedirectUrl(`/authentication/basic/login`);
+      setRedirect(true);
+    } else {
+      //update expires time of cookies
+      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
+      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
+      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
+      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
+      createCookie('token', token, 1000 * 60 * 60 * 8);
+    }
+  });
+
+  // State
+  //Query From
+  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
+  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
+  const [meterList, setMeterList] = useState([]);
+  const [filteredMeterList, setFilteredMeterList] = useState([]);
+  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 [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 [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
+  const [cascaderOptions, setCascaderOptions] = useState(undefined);
+
+  // buttons
+  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
+  const [spinnerHidden, setSpinnerHidden] = useState(true);
+  const [exportButtonHidden, setExportButtonHidden] = useState(true);
+  
+  //Results
+  const [meterEnergyCategory, setMeterEnergyCategory] = useState({ 'name': '', 'unit': '' });
+  const [reportingPeriodEnergyCarbonInCategory, setReportingPeriodEnergyCarbonInCategory] = useState(0);
+  const [reportingPeriodEnergyCarbonRate, setReportingPeriodEnergyCarbonRate] = useState('');
+  const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0);
+  const [reportingPeriodEnergyConsumptionInCO2, setReportingPeriodEnergyConsumptionInCO2] = useState(0);
+  const [basePeriodEnergyCarbonInCategory, setBasePeriodEnergyCarbonInCategory] = useState(0);
+  const [meterLineChartOptions, setMeterLineChartOptions] = useState([]);
+  const [meterLineChartData, setMeterLineChartData] = useState({});
+  const [meterLineChartLabels, setMeterLineChartLabels] = useState([]);
+  const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
+  const [parameterLineChartData, setParameterLineChartData] = useState({});
+  const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
+  const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
+  const [detailedDataTableData, setDetailedDataTableData] = useState([]);
+  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
+
+  useEffect(() => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/spaces/tree', {
+      method: 'GET',
+      headers: {
+        "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, ]);
+
+  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]);
+
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/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);
+    });
+  };
+
+  const onSearchMeter = ({ target }) => {
+    const keyword = target.value.toLowerCase();
+    const filteredResult = meterList.filter(
+      meter => meter.label.toLowerCase().includes(keyword)
+    );
+    setFilteredMeterList(keyword.length ? filteredResult : meterList);
+    if (filteredResult.length > 0) {
+      setSelectedMeter(filteredResult[0].value);
+      // enable submit button
+      setSubmitButtonDisabled(false);
+    } else {
+      setSelectedMeter(undefined);
+      // disable submit button
+      setSubmitButtonDisabled(true);
+    };
+  };
+
+  let onComparisonTypeChange = ({ target }) => {
+    console.log(target.value);
+    setComparisonType(target.value);
+    if (target.value === 'year-over-year') {
+      setBasePeriodBeginsDatetimeDisabled(true);
+      setBasePeriodEndsDatetimeDisabled(true);
+      setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years'));
+      setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
+    } else if (target.value === 'month-on-month') {
+      setBasePeriodBeginsDatetimeDisabled(true);
+      setBasePeriodEndsDatetimeDisabled(true);
+      setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months'));
+      setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
+    } else if (target.value === 'free-comparison') {
+      setBasePeriodBeginsDatetimeDisabled(false);
+      setBasePeriodEndsDatetimeDisabled(false);
+    } else if (target.value === 'none-comparison') {
+      setBasePeriodBeginsDatetime(undefined);
+      setBasePeriodEndsDatetime(undefined);
+      setBasePeriodBeginsDatetimeDisabled(true);
+      setBasePeriodEndsDatetimeDisabled(true);
+    }
+  };
+
+  let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
+    setBasePeriodBeginsDatetime(newDateTime);
+  };
+
+  let onBasePeriodEndsDatetimeChange = (newDateTime) => {
+    setBasePeriodEndsDatetime(newDateTime);
+  };
+
+  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
+    setReportingPeriodBeginsDatetime(newDateTime);
+    if (comparisonType === 'year-over-year') {
+      setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years'));
+    } else if (comparisonType === 'month-on-month') {
+      setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months'));
+    }
+  };
+
+  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
+    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) {
+    return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
+  };
+
+  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();
+    console.log('handleSubmit');
+    console.log(selectedSpaceID);
+    console.log(selectedMeter);
+    console.log(comparisonType);
+    console.log(periodType);
+    console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined);
+    console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined);
+    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+
+    // disable submit button
+    setSubmitButtonDisabled(true);  
+    // show spinner
+    setSpinnerHidden(false);
+    // hide export button
+    setExportButtonHidden(true)
+
+    // Reinitialize tables
+    setDetailedDataTableData([]);
+    
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/reports/metercarbon?' +
+      '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']
+        });
+        setReportingPeriodEnergyCarbonRate(parseFloat(json['reporting_period']['increment_rate']*100).toFixed(2) + "%");
+        setReportingPeriodEnergyCarbonInCategory(json['reporting_period']['total_in_category']);
+        setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000);
+        setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000);
+        setBasePeriodEnergyCarbonInCategory(json['base_period']['total_in_category']);
+
+        let names = Array();
+        names.push({ 'value': 'a0', 'label': json['meter']['energy_category_name'] });
+        setMeterLineChartOptions(names);
+
+        let timestamps =  { 'a0': [] }
+        json['reporting_period']['timestamps'].forEach((currentValue, index) => {
+          timestamps['a0'][index] = currentValue;
+        });
+        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 = 'metercarbon.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);
+        });
+  };
+  
+
+  return (
+    <Fragment>
+      <div>
+        <Breadcrumb>
+          <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Meter Carbon')}</BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <Card className="bg-light mb-3">
+        <CardBody className="p-3">
+          <Form onSubmit={handleSubmit}>
+            <Row form >
+              <Col xs={6} sm={3}>
+                <FormGroup className="form-group">
+                  <Label className={labelClasses} for="space">
+                    {t('Space')}
+                  </Label>
+                  <br />
+                  <Cascader options={cascaderOptions}
+                    onChange={onSpaceCascaderChange}
+                    changeOnSelect
+                    expandTrigger="hover">
+                    <Input value={selectedSpaceName || ''} readOnly />
+                  </Cascader>
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                <FormGroup>
+                  <Label className={labelClasses} for="meterSelect">
+                    {t('Meter')}
+                  </Label>
+                  <Form inline>
+                      <Input placeholder={t('Search')} onChange={onSearchMeter} />
+                      <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
+                      >
+                        {filteredMeterList.map((meter, index) => (
+                          <option value={meter.value} key={meter.value}>
+                            {meter.label}
+                          </option>
+                        ))}
+                      </CustomInput>
+                  </Form>
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                <FormGroup>
+                  <Label className={labelClasses} for="comparisonType">
+                    {t('Comparison Types')}
+                  </Label>
+                  <CustomInput type="select" id="comparisonType" name="comparisonType"
+                    defaultValue="month-on-month"
+                    onChange={onComparisonTypeChange}
+                  >
+                    {comparisonTypeOptions.map((comparisonType, index) => (
+                      <option value={comparisonType.value} key={comparisonType.value} >
+                        {t(comparisonType.label)}
+                      </option>
+                    ))}
+                  </CustomInput>
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                <FormGroup>
+                  <Label className={labelClasses} for="periodType">
+                    {t('Period Types')}
+                  </Label>
+                  <CustomInput type="select" id="periodType" name="periodType" defaultValue="daily" onChange={({ target }) => setPeriodType(target.value)}
+                  >
+                    {periodTypeOptions.map((periodType, index) => (
+                      <option value={periodType.value} key={periodType.value} >
+                        {t(periodType.label)}
+                      </option>
+                    ))}
+                  </CustomInput>
+                </FormGroup>
+              </Col>
+              <Col xs={6} sm={3}>
+                <FormGroup className="form-group">
+                  <Label className={labelClasses} for="basePeriodBeginsDatetime">
+                    {t('Base Period Begins')}{t('(Optional)')}
+                  </Label>
+                  <Datetime id='basePeriodBeginsDatetime'
+                    value={basePeriodBeginsDatetime}
+                    inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }}
+                    onChange={onBasePeriodBeginsDatetimeChange}
+                    isValidDate={getValidBasePeriodBeginsDatetimes}
+                    closeOnSelect={true} />
+                </FormGroup>
+              </Col>
+              <Col xs={6} sm={3}>
+                <FormGroup className="form-group">
+                  <Label className={labelClasses} for="basePeriodEndsDatetime">
+                    {t('Base Period Ends')}{t('(Optional)')}
+                  </Label>
+                  <Datetime id='basePeriodEndsDatetime'
+                    value={basePeriodEndsDatetime}
+                    inputProps={{ disabled: basePeriodEndsDatetimeDisabled }}
+                    onChange={onBasePeriodEndsDatetimeChange}
+                    isValidDate={getValidBasePeriodEndsDatetimes}
+                    closeOnSelect={true} />
+                </FormGroup>
+              </Col>
+              <Col xs={6} sm={3}>
+                <FormGroup className="form-group">
+                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
+                    {t('Reporting Period Begins')}
+                  </Label>
+                  <Datetime id='reportingPeriodBeginsDatetime'
+                    value={reportingPeriodBeginsDatetime}
+                    onChange={onReportingPeriodBeginsDatetimeChange}
+                    isValidDate={getValidReportingPeriodBeginsDatetimes}
+                    closeOnSelect={true} />
+                </FormGroup>
+              </Col>
+              <Col xs={6} sm={3}>
+                <FormGroup className="form-group">
+                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
+                    {t('Reporting Period Ends')}
+                  </Label>
+                  <Datetime id='reportingPeriodEndsDatetime'
+                    value={reportingPeriodEndsDatetime}
+                    onChange={onReportingPeriodEndsDatetimeChange}
+                    isValidDate={getValidReportingPeriodEndsDatetimes}
+                    closeOnSelect={true} />
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                <FormGroup>
+                  <br></br>
+                  <ButtonGroup id="submit">
+                    <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
+                  </ButtonGroup>
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                <FormGroup>
+                  <br></br>
+                  <Spinner color="primary" hidden={spinnerHidden}  />
+                </FormGroup>
+              </Col>
+              <Col xs="auto">
+                  <br></br>
+                  <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" 
+                  hidden={exportButtonHidden}
+                  onClick={handleExport} >
+                    {t('Export')}
+                  </ButtonIcon>
+              </Col>
+            </Row>
+          </Form>
+        </CardBody>
+      </Card>
+      <div className="card-deck">
+        <CardSummary rate={reportingPeriodEnergyCarbonRate} title={t('Reporting Period Carbon Dioxide Emissions CATEGORY UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
+          color="success"  >
+          <CountUp end={reportingPeriodEnergyCarbonInCategory} duration={2} prefix="" separator="," decimals={2} decimal="." />
+        </CardSummary>
+        <CardSummary rate={reportingPeriodEnergyCarbonRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Standard Coal'), 'UNIT': '(TCE)' })}
+          color="warning" >
+          <CountUp end={reportingPeriodEnergyConsumptionInTCE} duration={2} prefix="" separator="," decimal="." decimals={2} />
+        </CardSummary>
+        <CardSummary rate={reportingPeriodEnergyCarbonRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Carbon Dioxide Emissions'), 'UNIT': '(T)' })}
+          color="warning" >
+          <CountUp end={reportingPeriodEnergyConsumptionInCO2} duration={2} prefix="" separator="," decimal="." decimals={2} />
+        </CardSummary>
+      </div>
+
+      <LineChart reportingTitle={t('Reporting Period Carbon Dioxide Emissions CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': reportingPeriodEnergyCarbonInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
+        baseTitle={t('Base Period Carbon Dioxide Emissions CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': basePeriodEnergyCarbonInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
+        labels={meterLineChartLabels}
+        data={meterLineChartData}
+        options={meterLineChartOptions}>
+      </LineChart>
+
+      <LineChart reportingTitle={t('Related Parameters')}
+        baseTitle=''
+        labels={parameterLineChartLabels}
+        data={parameterLineChartData}
+        options={parameterLineChartOptions}>
+      </LineChart>
+      <br />
+      <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
+      </DetailedDataTable>
+
+    </Fragment>
+  );
+};
+
+export default withTranslation()(withRedirect(MeterCarbon));

web/src/i18n.js

@@ -32,6 +32,7 @@ const resources = {
       'Saving': 'Saving',
       'Equipment Tracking': 'Equipment Tracking',
       'Meter Energy': 'Meter Energy',
+      'Meter Carbon': 'Meter Carbon Dioxide Emission',
       'Meter Cost': 'Meter Cost',
       'Meter Trend': 'Meter Trend',
       'Meter Realtime': 'Meter Realtime',
@@ -165,6 +166,9 @@ const resources = {
         'Base Period Consumption {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Child Space Proportion CATEGORY UNIT': 'Child Space Proportion by Energy Category {{CATEGORY}} {{UNIT}}',
       'Child Space Total Proportion': 'Child Space Total Proportion',
+      'Reporting Period Carbon Dioxide Emissions CATEGORY UNIT': 'Reporting Period Carbon Dioxide Emissions {{CATEGORY}} {{UNIT}}',
+      'Reporting Period Carbon Dioxide Emissions CATEGORY VALUE UNIT': 'Reporting Period Carbon Dioxide Emissions {{CATEGORY}} {{VALUE}} {{UNIT}}',
+      'Base Period Carbon Dioxide Emissions CATEGORY VALUE UNIT': 'Base Period Carbon Dioxide Emissions {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Reporting Period Costs CATEGORY UNIT': 'Reporting Period Costs {{CATEGORY}} {{UNIT}}',
       'Reporting Period Costs CATEGORY VALUE UNIT': 'Reporting Period Costs {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Base Period Costs CATEGORY VALUE UNIT': 'Base Period Costs {{CATEGORY}} {{VALUE}} {{UNIT}}',
@@ -812,6 +816,7 @@ const resources = {
       'Saving': 'Sparen',
       'Equipment Tracking': 'Ausrüstung Datei',
       'Meter Energy': 'Meter Energie ',
+      'Meter Carbon': 'Meter Kohlendioxidemission',
       'Meter Cost': 'Meter Kosten',
       'Meter Trend': 'Meter Trend',
       'Meter Realtime': 'Meter Echtzeit',
@@ -947,6 +952,9 @@ const resources = {
         'Verbrauch des Basiszeitraums {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Child Space Proportion CATEGORY UNIT': 'Anteil des Teil Platz nach Energiekategorie {{CATEGORY}} {{UNIT}}',
       'Child Space Total Proportion': 'Anteil des Teil Platz Gesamtanteil',
+      'Reporting Period Carbon Dioxide Emissions CATEGORY UNIT': 'Berichtszeitraum Kohlendioxidemissionen {{CATEGORY}} {{UNIT}}',
+      'Reporting Period Carbon Dioxide Emissions CATEGORY VALUE UNIT': 'Berichtszeitraum Kohlendioxidemissionen {{CATEGORY}} {{VALUE}} {{UNIT}}',
+      'Base Period Carbon Dioxide Emissions CATEGORY VALUE UNIT': 'Basiszeitraum Kohlendioxidemissionen {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Reporting Period Costs CATEGORY UNIT': 'Berichtszeitraumkosten {{CATEGORY}} {{UNIT}}',
       'Reporting Period Costs CATEGORY VALUE UNIT': 'Berichtszeitraumkosten {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Base Period Costs CATEGORY VALUE UNIT': 'Kosten des Basiszeitraums {{CATEGORY}} {{VALUE}} {{UNIT}}',
@@ -1602,6 +1610,7 @@ const resources = {
       'Saving': '节能分析',
       'Equipment Tracking': '设备台账',
       'Meter Energy': '计量表能耗分析',
+      'Meter Carbon': '计量表碳排放分析',
       'Meter Cost': '计量表成本分析',
       'Meter Trend': '计量表趋势分析',
       'Meter Realtime': '计量表实时分析',
@@ -1728,6 +1737,9 @@ const resources = {
       'Base Period Consumption ITEM CATEGORY VALUE UNIT': '基准期消耗 {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Child Space Proportion CATEGORY UNIT': '子空间分类占比 {{CATEGORY}} {{UNIT}}',
       'Child Space Total Proportion': '子空间总计占比',
+      'Reporting Period Carbon Dioxide Emissions CATEGORY UNIT': '报告期二氧化碳排放 {{CATEGORY}} {{UNIT}}',
+      'Reporting Period Carbon Dioxide Emissions CATEGORY VALUE UNIT': '报告期二氧化碳排放 {{CATEGORY}} {{VALUE}} {{UNIT}}',
+      'Base Period Carbon Dioxide Emissions CATEGORY VALUE UNIT': '基准期二氧化碳排放 {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Reporting Period Costs CATEGORY UNIT': '报告期成本 {{CATEGORY}} {{UNIT}}',
       'Reporting Period Costs CATEGORY VALUE UNIT': '报告期成本 {{CATEGORY}} {{VALUE}} {{UNIT}}',
       'Base Period Costs CATEGORY VALUE UNIT': '基准期成本 {{CATEGORY}} {{VALUE}} {{UNIT}}',

web/src/layouts/MyEMSRoutes.js

@@ -126,6 +126,7 @@ import EquipmentStatistics from '../components/MyEMS/Equipment/EquipmentStatisti
 import EquipmentTracking from '../components/MyEMS/Equipment/EquipmentTracking';
 // Meter
 import MeterBatch from '../components/MyEMS/Meter/MeterBatch';
+import MeterCarbon from '../components/MyEMS/Meter/MeterCarbon';
 import MeterCost from '../components/MyEMS/Meter/MeterCost';
 import MeterEnergy from '../components/MyEMS/Meter/MeterEnergy';
 import MeterRealtime from '../components/MyEMS/Meter/MeterRealtime';
@@ -365,6 +366,7 @@ const MyEMSRoutes = () => (
     {/*Meter*/}
     <Route path="/meter/batch" exact component={MeterBatch} />
     <Route path="/meter/meterenergy" exact component={MeterEnergy} />
+    <Route path="/meter/metercarbon" exact component={MeterCarbon} />
     <Route path="/meter/metercost" exact component={MeterCost} />
     <Route path="/meter/metertrend" exact component={MeterTrend} />
     <Route path="/meter/meterrealtime" exact component={MeterRealtime} />

web/src/routes.js

@@ -358,6 +358,7 @@ export const meterRoutes = {
   icon: 'chart-pie',
   children: [
     { to: '/meter/meterenergy', name: 'Meter Energy' },
+    { to: '/meter/metercarbon', name: 'Meter Carbon' },
     { to: '/meter/metercost', name: 'Meter Cost' },
     { to: '/meter/metertrend', name: 'Meter Trend' },
     { to: '/meter/meterrealtime', name: 'Meter Realtime' },
@@ -448,7 +449,7 @@ export const auxiliarySystemRoutes = {
 export const fddRoutes = {
   name: 'Fault Detection & Diagnostics',
   to: '/fdd',
-  icon: 'chart-pie',
+  icon: 'bell',
   children: [
     { to: '/fdd/space', name: 'Space Faults Data' },
     { to: '/fdd/equipment', name: 'Equipment Faults Data' },