From 2cd13bc7d5f6b249b0cf81d1f6d82359ea0b8450 Mon Sep 17 00:00:00 2001
From: tianlinzhong <673359306@qq.com>
Date: Mon, 19 Jul 2021 17:59:56 +0800
Subject: [PATCH] Add Child Spaces Share Pie to Space Cost Report Web UI

---
 web/src/components/MyEMS/Space/SpaceCost.js | 37 +++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MyEMS/Space/SpaceCost.js b/web/src/components/MyEMS/Space/SpaceCost.js
index 02c352ca..a59bc58f 100644
--- a/web/src/components/MyEMS/Space/SpaceCost.js
+++ b/web/src/components/MyEMS/Space/SpaceCost.js
@@ -83,7 +83,8 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [spaceLineChartLabels, setSpaceLineChartLabels] = useState([]);
   const [spaceLineChartData, setSpaceLineChartData] = useState({});
   const [spaceLineChartOptions, setSpaceLineChartOptions] = useState([]);
-  
+  const [childSpaceProportionList, setChildSpaceProportionList] = useState([]);
+
   const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
   const [parameterLineChartData, setParameterLineChartData] = useState({});
   const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
@@ -318,7 +319,28 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
           costDataArray.push(costDataItem);
         });
         setCostShareData(costDataArray);
-        
+
+        let childSpaceProportionArray = [];
+        json['child_space']['energy_category_names'].forEach((currentValue, energyCategoryIndex) => {
+          if (json['child_space']['child_space_names_array'][energyCategoryIndex].length > 0) {
+            let childSpaceProportionItem = {}
+            childSpaceProportionItem['data'] = []
+            json['child_space']['child_space_names_array'][energyCategoryIndex].forEach((currentSpaceName, spaceIndex) => {
+              let childSpaceProportionItemDataItem = {}
+              childSpaceProportionItemDataItem['id'] = spaceIndex;
+              childSpaceProportionItemDataItem['name'] = currentSpaceName;
+              childSpaceProportionItemDataItem['value'] = json['child_space']['subtotals_array'][energyCategoryIndex][spaceIndex];
+              childSpaceProportionItemDataItem['color'] = "#"+((1<<24)*Math.random()|0).toString(16);
+              childSpaceProportionItem['data'].push(childSpaceProportionItemDataItem);
+            });
+
+            childSpaceProportionItem['name'] = json['child_space']['energy_category_names'][energyCategoryIndex];
+            childSpaceProportionItem['unit'] = json['child_space']['units'][energyCategoryIndex];
+            childSpaceProportionArray.push(childSpaceProportionItem);
+          };
+        });
+        setChildSpaceProportionList(childSpaceProportionArray);
+
         let timestamps = {}
         json['reporting_period']['timestamps'].forEach((currentValue, index) => {
           timestamps['a' + index] = currentValue;
@@ -637,6 +659,17 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
         <Col className="mb-3 pr-lg-2 mb-3">
           <SharePie data={costShareData} title={t('Costs by Energy Category')} />
         </Col>
+        {childSpaceProportionList.map(childSpaceProportionItem => (
+          <Col className="mb-3 pr-lg-2 mb-3">
+            <SharePie
+              data={childSpaceProportionItem['data']}
+              title={t('Child Space Proportion CATEGORY UNIT',
+                      {'CATEGORY': childSpaceProportionItem['name'],
+                       'UNIT': '(' + childSpaceProportionItem['unit'] + ')'
+                      })}
+            />
+          </Col>
+        ))}
       </Row>
       <LineChart reportingTitle={t('Reporting Period Costs CATEGORY VALUE UNIT', { 'CATEGORY': null, 'VALUE': null, 'UNIT': null })}
          baseTitle=''