From fbb33fcb1537d4be96d22705cd960fca1c3eb30a Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@nedap.com>
Date: Wed, 9 Mar 2022 04:05:15 +0100
Subject: [PATCH] Add option to hide secondary value (#2460)

---
 frontend/src/Editor/Components/Statistics.jsx | 54 +++++++++++--------
 frontend/src/Editor/Components/components.js  |  1 +
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/frontend/src/Editor/Components/Statistics.jsx b/frontend/src/Editor/Components/Statistics.jsx
index f3d20f1a57..b3686db46d 100644
--- a/frontend/src/Editor/Components/Statistics.jsx
+++ b/frontend/src/Editor/Components/Statistics.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 export const Statistics = function Statistics({ height, properties, styles, darkMode }) {
-  const { primaryValueLabel, primaryValue, secondaryValueLabel, secondaryValue, secondarySignDisplay } = properties;
+  const { primaryValueLabel, primaryValue, secondaryValueLabel, secondaryValue, secondarySignDisplay, hideSecondary } =
+    properties;
   const { primaryLabelColour, primaryTextColour, secondaryLabelColour, secondaryTextColour, visibility } = styles;
 
   const baseStyle = {
@@ -73,29 +74,36 @@ export const Statistics = function Statistics({ height, properties, styles, dark
         {primaryValueLabel}
       </p>
       <h2 style={primaryStyle}>{primaryValue}</h2>
-      <div>
-        <div className="d-flex flex-row justify-content-center align-items-baseline">
-          {secondarySignDisplay !== 'negative' ? (
-            <img src="/assets/images/icons/widgets/upstatistics.svg" style={{ ...marginStyle, marginRight: '6.5px' }} />
-          ) : (
-            <img
-              src="/assets/images/icons/widgets/downstatistics.svg"
-              style={{ ...marginStyle, marginRight: '6.5px' }}
-            />
-          )}
-          <p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
+      {hideSecondary ? (
+        ''
+      ) : (
+        <div>
+          <div className="d-flex flex-row justify-content-center align-items-baseline">
+            {secondarySignDisplay !== 'negative' ? (
+              <img
+                src="/assets/images/icons/widgets/upstatistics.svg"
+                style={{ ...marginStyle, marginRight: '6.5px' }}
+              />
+            ) : (
+              <img
+                src="/assets/images/icons/widgets/downstatistics.svg"
+                style={{ ...marginStyle, marginRight: '6.5px' }}
+              />
+            )}
+            <p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
+          </div>
+          <p
+            style={{
+              ...letterStyle,
+              color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
+              padding: '6px 20px 12px 20px ',
+              marginBottom: '0px',
+            }}
+          >
+            {secondaryValueLabel}
+          </p>
         </div>
-        <p
-          style={{
-            ...letterStyle,
-            color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
-            padding: '6px 20px 12px 20px ',
-            marginBottom: '0px',
-          }}
-        >
-          {secondaryValueLabel}
-        </p>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index d4ce75b149..e7feab64d9 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -1822,6 +1822,7 @@ export const componentTypes = [
     properties: {
       primaryValueLabel: { type: 'code', displayName: 'Primary value label' },
       primaryValue: { type: 'code', displayName: 'Primary value' },
+      hideSecondary: { type: 'toggle', displayName: 'Hide secondary value' },
       secondaryValueLabel: { type: 'code', displayName: 'Secondary value label' },
       secondaryValue: { type: 'code', displayName: 'Secondary value' },
       secondarySignDisplay: { type: 'code', displayName: 'Secondary sign display' },