updated microgrid dashboard

myems-api/app.py

@@ -60,6 +60,9 @@ from reports import microgriddashboard
 from reports import microgriddetails
 from reports import microgridlist
 from reports import microgridreporting
+from reports import microgridsenergy
+from reports import microgridsbilling
+from reports import microgridscarbon
 from reports import offlinemeterbatch
 from reports import offlinemetercarbon
 from reports import offlinemetercost
@@ -992,6 +995,12 @@ api.add_route('/reports/microgridlist',
               microgridlist.Reporting())
 api.add_route('/reports/microgridreporting',
               microgridreporting.Reporting())
+api.add_route('/reports/microgridsenergy',
+              microgridsenergy.Reporting())
+api.add_route('/reports/microgridsbilling',
+              microgridsbilling.Reporting())
+api.add_route('/reports/microgridscarbon',
+              microgridscarbon.Reporting())
 api.add_route('/reports/offlinemeterbatch',
               offlinemeterbatch.Reporting())
 api.add_route('/reports/offlinemetercarbon',

myems-web/src/components/MyEMS/Microgrid/MicrogridRankingTable.js

-import React, { Fragment, createRef } from 'react';
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = [
-  {
-    dataField: 'name',
-    text: 'Name',
-    classes: 'border-0 align-middle',
-    headerClasses: 'border-0',
-    sort: false
-  },
-  {
-    dataField: 'value',
-    text: 'Value',
-    classes: 'border-0 align-middle',
-    headerClasses: 'border-0',
-    sort: true,
-  },
-  {
-    dataField: 'unit',
-    text: 'Unit',
-    classes: 'border-0 align-middle',
-    headerClasses: 'border-0',
-    sort: false,
-  },
-];
-
-const MicrogridRankingTable = ({ microgridList }) => {
-  let table = createRef();
-
-  return (
-    <Fragment>
-      <div className="table-responsive">
-        <BootstrapTable
-          ref={table}
-          bootstrap4
-          keyField="id"
-          data={microgridList}
-          columns={columns}
-          bordered={false}
-          classes="table-dashboard table-sm fs--1 border-bottom border-200 mb-0 table-dashboard-th-nowrap"
-          rowClasses="btn-reveal-trigger border-top border-200"
-          headerClasses="bg-200 text-900 border-y border-200"
-        />
-      </div>
-
-    </Fragment>
-  );
-};
-
-export default MicrogridRankingTable;

myems-web/src/components/MyEMS/Microgrid/StackBarChart.js

@@ -17,9 +17,8 @@ import AppContext from '../../../context/Context';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend, LogarithmicScale);
 
-const StackBarChart = ({ labels, chargeData, dischargeData, stations, t }) => {
+const StackBarChart = ({ labels, chargeData, dischargeData, periodTypes, t }) => {
   const colors = ['#2c7be5', '#00d27a', '#27bcfd', '#f5803e', '#e63757'];
-  const [selectedLabel, setSelectedLabel] = useState('a0');
   const [option, setOption] = useState('a0');
   const { isDark } = useContext(AppContext);
   const chartRef = useRef(null);
@@ -39,41 +38,32 @@ const StackBarChart = ({ labels, chargeData, dischargeData, stations, t }) => {
       gradientFill.addColorStop(0, isDark ? 'rgba(44,123,229, 0.5)' : 'rgba(255, 255, 255, 0.3)');
       gradientFill.addColorStop(1, isDark ? 'transparent' : 'rgba(255, 255, 255, 0)');
       if (chargeData['subtotals_array'] !== undefined && chargeData['subtotals_array'].length > 0) {
-        let category = t('CATEGORY Consumption UNIT', {
-          CATEGORY: chargeData['energy_category_names'][index],
-          UNIT: chargeData['units'][index]
-        });
-        let stationArray = chargeData['station_names_array'][index];
         chargeData['subtotals_array'][index].forEach((item, itemIndex) => {
           dataArray.push({
-            label: stationArray[itemIndex] + ' ' + category,
-            stack: category,
+            label: chargeData['station_names_array'][itemIndex] + ' ' + t('Charge UNIT', { UNIT: chargeData['unit'] }),
+            stack: t('Charge UNIT', { UNIT: chargeData['unit'] }),
             data: item,
             backgroundColor: colors[itemIndex % 5]
           });
         });
       }
       if (dischargeData['subtotals_array'] !== undefined && dischargeData['subtotals_array'].length > 0) {
-        let category = t('CATEGORY Costs UNIT', {
-          CATEGORY: dischargeData['energy_category_names'][index],
-          UNIT: dischargeData['units'][index]
-        });
-        let stationArray = dischargeData['station_names_array'][index];
         dischargeData['subtotals_array'][index].forEach((item, itemIndex) => {
           dataArray.push({
-            label: stationArray[itemIndex] + ' ' + category,
-            stack: category,
+            label: dischargeData['station_names_array'][itemIndex] + ' ' + t('Discharge UNIT', { UNIT: dischargeData['unit'] }),
+            stack: t('Discharge UNIT', { UNIT: dischargeData['unit'] }),
             data: item,
             backgroundColor: colors[itemIndex % 5]
           });
         });
       }
       setChartData({
-        labels: labels,
+        labels: labels[index],
         datasets: dataArray
       });
     }
   }, [labels, chargeData, dischargeData, option]);
+
   const options = {
     scales: {
       x: {
@@ -106,6 +96,7 @@ const StackBarChart = ({ labels, chargeData, dischargeData, stations, t }) => {
       mode: 'x'
     }
   };
+
   return (
     <Fragment>
       <Card className="mb-3">
@@ -114,7 +105,7 @@ const StackBarChart = ({ labels, chargeData, dischargeData, stations, t }) => {
             <Col>
               <h4 className="text-lightSlateGray mb-0" />
             </Col>
-            {isIterableArray(stations) && (
+            {isIterableArray(periodTypes) && (
               <Col xs="auto" className="d-none d-sm-block">
                 <CustomInput
                   id="ddd"
@@ -124,10 +115,9 @@ const StackBarChart = ({ labels, chargeData, dischargeData, stations, t }) => {
                   value={option}
                   onChange={({ target }) => {
                     setOption(target.value);
-                    setSelectedLabel(target.value);
                   }}
                 >
-                  {stations.map(({ value, label }) => (
+                  {periodTypes.map(({ value, label }) => (
                     <option key={value} value={value}>
                       {label}
                     </option>

myems-web/src/i18n.js

@@ -485,6 +485,9 @@ const resources = {
       'Microgrid List': 'Microgrid List',
       'Previous Page': 'Previous Page',
       'Next Page': 'Next Page',
+      '7 Days': '7 Days',
+      'Charge UNIT': 'Charge {{UNIT}}',
+      'Discharge UNIT': 'Discharge {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Battery Operating State',
@@ -1584,6 +1587,9 @@ const resources = {
       'Microgrid List': '微电网列表',
       'Previous Page': '上一页',
       'Next Page': '下一页',
+      '7 Days': '7日',
+      'Charge UNIT': '充 {{UNIT}}',
+      'Discharge UNIT': '放 {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': '电池运行状态',
@@ -2708,6 +2714,9 @@ const resources = {
       'Microgrid List': 'Microgrid-Liste',
       'Previous Page': 'Vorherige Seite',
       'Next Page': 'Nächste Seite',
+      '7 Days': '7 Tage',
+      'Charge UNIT': 'Aufladung {{UNIT}}',
+      'Discharge UNIT': 'Entladung {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Batteriebetriebszustand',
@@ -3849,6 +3858,9 @@ const resources = {
       'Microgrid List': 'Liste des microréseaux',
       'Previous Page': 'Page précédente',
       'Next Page': 'Page suivante',
+      '7 Days': '7 jours',
+      'Charge UNIT': 'Charge {{UNIT}}',
+      'Discharge UNIT': 'décharge {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'État de fonctionnement de la batterie',
@@ -4980,6 +4992,9 @@ const resources = {
       'Microgrid List': 'Lista de microrredes',
       'Previous Page': 'Pagina anterior',
       'Next Page': 'Siguiente página',
+      '7 Days': '7 días',
+      'Charge UNIT': 'Cargar {{UNIT}}',
+      'Discharge UNIT': 'descargar {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Estado de funcionamiento de la batería',
@@ -6110,6 +6125,9 @@ const resources = {
       'Microgrid List': 'Список микросетей',
       'Previous Page': 'Предыдущая страница',
       'Next Page': 'Следущая страница',
+      '7 Days': '7 дней',
+      'Charge UNIT': 'Заряжать {{UNIT}}',
+      'Discharge UNIT': 'увольнять {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'режим работы батареи',
@@ -7230,6 +7248,9 @@ const resources = {
       'Microgrid List': 'قائمة ميكروغريد',
       'Previous Page': 'الصفحة السابقة',
       'Next Page': 'الصفحة التالية',
+      '7 Days': '7 أيام',
+      'Charge UNIT': 'تكلفة {{UNIT}}',
+      'Discharge UNIT': 'تسريح {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'حالة البطارية',
@@ -8346,6 +8367,9 @@ const resources = {
       'Microgrid List': 'Danh sách lưới điện siêu nhỏ',
       'Previous Page': 'Trang trước',
       'Next Page': 'Trang tiếp theo',
+      '7 Days': '7 ngày',
+      'Charge UNIT': 'Thù lao {{UNIT}}',
+      'Discharge UNIT': 'phóng điện {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Trạng thái hoạt động của pin',
@@ -9464,6 +9488,9 @@ const resources = {
       'Microgrid List': 'รายการไมโครกริด',
       'Previous Page': 'หน้าก่อนหน้า',
       'Next Page': 'หน้าต่อไป',
+      '7 Days': '7 วัน',
+      'Charge UNIT': 'ค่าใช้จ่าย {{UNIT}}',
+      'Discharge UNIT': 'ปล่อย {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'สถานะการทำงานของแบตเตอรี่',
@@ -10581,6 +10608,9 @@ const resources = {
       'Microgrid List': 'Mikro Şebeke Listesi',
       'Previous Page': 'Önceki sayfa',
       'Next Page': 'Sonraki Sayfa',
+      '7 Days': '7 gün',
+      'Charge UNIT': 'Şarj {{UNIT}}',
+      'Discharge UNIT': 'deşarj {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Batarya İşlemi Durumu',
@@ -11704,6 +11734,9 @@ const resources = {
       'Microgrid List': 'Senarai Microgrid',
       'Previous Page': 'Halaman sebelumnya',
       'Next Page': 'Muka surat seterusnya',
+      '7 Days': '7 hari',
+      'Charge UNIT': 'caj {{UNIT}}',
+      'Discharge UNIT': 'pelepasan {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Keadaan Operasi Bateri',
@@ -12830,6 +12863,9 @@ const resources = {
       'Microgrid List': 'Daftar Mikrogrid',
       'Previous Page': 'Halaman sebelumnya',
       'Next Page': 'Halaman selanjutnya',
+      '7 Days': '7 hari',
+      'Charge UNIT': 'Mengenakan biaya {{UNIT}}',
+      'Discharge UNIT': 'memulangkan {{UNIT}}',
 
       // Energy Storage Power Station
       'Battery Operating State': 'Status Operasi Bateri',