ALDASH-454 Enhance D3 Map tooltip help text

Author: sdimunzio

plugins/wp-react-blocks-plugin/blocks/d3Map/layers/Data.jsx

@@ -266,7 +266,8 @@ export class DataLayerSetting extends Component {
         let selectedMeasureLabel = ""
         let selectedMeasureValue = ""
 
-        
+        const jsonFields = features.length > 0 ? Object.keys(features[0].properties) : []
+
 
         if (app != 'csv') {
             const theMeasure = measures ? measures[0] : null
@@ -348,25 +349,13 @@ export class DataLayerSetting extends Component {
                 />
 
             </PanelRow>
-            <PanelRow>
-                <div style={{display: "flex", flexDirection: "column"}}>
-                    <strong>{__("You can use the following variables", "dg")}</strong>
-                    {app != 'csv' && allMeasures && allMeasures.map(m =><div  style={{
-                        "margin-top": "calc(8px)",
-                        "font-size": "12px",
-                        "font-style": "normal",
-                        "color": "rgb(117, 117, 117)"
-                    }}>
-                        {"{" + m.value + "}"}</div>)}
-
-                    {jsonFields.map(m => <div style={{
-                        "margin-top": "calc(8px)",
-                        "font-size": "12px",
-                        "font-style": "normal",
-                        "color": "rgb(117, 117, 117)"
-                    }}>{"{" + m + "}"}</div>)}
-                </div>
-            </PanelRow>
+            {app != 'csv' && allMeasures && allMeasures.map(m => <PanelRow><p
+                style={{
+                    "margin-top": "calc(8px)",
+                    "font-size": "12px",
+                    "font-style": "normal",
+                    "color": "rgb(117, 117, 117)"
+                }}>{"{" + m.value + "}"}</p></PanelRow>)}
         </PanelBody>,
             <React.Fragment>
                 {app != 'csv' && <Measures