diff --git a/web/src/components/MyEMS/Space/SpaceCost.js b/web/src/components/MyEMS/Space/SpaceCost.js
index 02c352ca..024de40a 100644
--- a/web/src/components/MyEMS/Space/SpaceCost.js
+++ b/web/src/components/MyEMS/Space/SpaceCost.js
@@ -83,7 +83,9 @@ const SpaceCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [spaceLineChartLabels, setSpaceLineChartLabels] = useState([]);
   const [spaceLineChartData, setSpaceLineChartData] = useState({});
   const [spaceLineChartOptions, setSpaceLineChartOptions] = useState([]);
-  
+  const [childSpaceProportionList, setChildSpaceProportionList] = useState([]);
+  const [childSpaceSubtotalShareData, setChildSpaceSubtotalShareData] = useState([]);
+
   const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
   const [parameterLineChartData, setParameterLineChartData] = useState({});
   const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
@@ -318,7 +320,45 @@ 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 childSpaceSubtotalShareDataArray = [];
+        if (json['child_space']['child_space_names_array'].length > 0) {
+          json['child_space']['child_space_names_array'][0].forEach((currentSpaceName, spaceIndex) => {
+            let subtotal = 0.0;
+            json['child_space']['energy_category_names'].forEach((currentValue, energyCategoryIndex) => {
+              subtotal += json['child_space']['subtotals_array'][energyCategoryIndex][spaceIndex];
+            });
+            let childSpaceSubtotalDataItem = {};
+            childSpaceSubtotalDataItem['id'] = spaceIndex;
+            childSpaceSubtotalDataItem['name'] = currentSpaceName;
+            childSpaceSubtotalDataItem['value'] = subtotal;
+            childSpaceSubtotalDataItem['color'] = "#"+((1<<24)*Math.random()|0).toString(16);
+           childSpaceSubtotalShareDataArray.push(childSpaceSubtotalDataItem);
+          });
+        };
+        setChildSpaceSubtotalShareData(childSpaceSubtotalShareDataArray);
+
         let timestamps = {}
         json['reporting_period']['timestamps'].forEach((currentValue, index) => {
           timestamps['a' + index] = currentValue;
@@ -637,6 +677,24 @@ 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>
+        ))}
+        <Col className="mb-3 pr-lg-2 mb-3">
+          <SharePie
+            data={childSpaceSubtotalShareData}
+            title={t('Child Space Total Proportion')}
+          />
+        </Col>
+
       </Row>
       <LineChart reportingTitle={t('Reporting Period Costs CATEGORY VALUE UNIT', { 'CATEGORY': null, 'VALUE': null, 'UNIT': null })}
          baseTitle=''
diff --git a/web/src/i18n.js b/web/src/i18n.js
index fde945d5..b2973b84 100644
--- a/web/src/i18n.js
+++ b/web/src/i18n.js
@@ -154,7 +154,8 @@ const resources = {
       "Reporting Period Consumption ITEM CATEGORY UNIT": "Reporting Period Consumption {{ITEM}} {{CATEGORY}} {{UNIT}}",
       "Reporting Period Consumption ITEM CATEGORY VALUE UNIT": "Reporting Period Consumption {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Consumption ITEM CATEGORY VALUE UNIT": "Base Period Consumption {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
-      "Child Space Proportion CATEGORY UNIT": "Child Space Proportion {{CATEGORY}} {{UNIT}}",
+      "Child Space Proportion CATEGORY UNIT": "Child Space Proportion by Energy Category {{CATEGORY}} {{UNIT}}",
+      "Child Space Total Proportion": "Child Space Total Proportion",
       "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}}",
@@ -500,7 +501,8 @@ const resources = {
       "Reporting Period Consumption ITEM CATEGORY UNIT": "Verbrauch des Berichtszeitraums {{ITEM}} {{CATEGORY}} {{UNIT}}",
       "Reporting Period Consumption ITEM CATEGORY VALUE UNIT": "Verbrauch des Berichtszeitraums {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Consumption ITEM CATEGORY VALUE UNIT": "Verbrauch des Basiszeitraums {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
-      "Child Space Proportion CATEGORY UNIT": "Anteil des Teil Platz {{CATEGORY}} {{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 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}}",
@@ -849,7 +851,8 @@ const resources = {
       "Reporting Period Consumption ITEM CATEGORY UNIT": "报告期消耗 {{ITEM}} {{CATEGORY}} {{UNIT}}",
       "Reporting Period Consumption ITEM CATEGORY VALUE UNIT": "报告期消耗 {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
       "Base Period Consumption ITEM CATEGORY VALUE UNIT": "基准期消耗 {{ITEM}} {{CATEGORY}} {{VALUE}} {{UNIT}}",
-      "Child Space Proportion CATEGORY UNIT": "子空间占比 {{CATEGORY}} {{UNIT}}",
+      "Child Space Proportion CATEGORY UNIT": "子空间分类占比 {{CATEGORY}} {{UNIT}}",
+      "Child Space Total Proportion": "子空间总计占比",
       "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}}",