change(render): of Popup with value only if we have value within Dott…

…edTableChartView - This avoids moving around and seeing popups such as Value: even though the cells were empty without any values
eea · Jul 13, 2024 · e462ef7 · e462ef7
1 parent ab56e58
commit e462ef7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-datablocks",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "description": "(EEA) Provides primitives for data connectivity to volto-plotlycharts and other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/manage/Blocks/DottedTableChart/View.jsx b/src/components/manage/Blocks/DottedTableChart/View.jsx
@@ -110,31 +110,36 @@ const DottedTableChartView = (props) => {
                         padding: '0',
                       }}
                     >
-                      <Popup
-                        content={
-                          // it might happen that the FormattedValue component returns empty string because of the input data
-                          <>
-                            Value:{' '}
-                            <FormattedValue
-                              textTemplate={text_template}
-                              value={data_tree[col][row]}
-                              specifier={specifier}
-                            />
-                          </>
-                        }
-                        trigger={
-                          <div
-                            style={{
-                              // hack from https://stackoverflow.com/a/3542470/258462
-                              height: '100%',
+                      {data_tree[col][row] ? (
+                        <Popup
+                          content={
+                            // it might happen that the FormattedValue component returns empty string because of the input data
+                            <>
+                              Value:{' '}
+                              <FormattedValue
+                                textTemplate={text_template}
+                                value={data_tree[col][row]}
+                                specifier={specifier}
+                              />
+                            </>
+                          }
+                          trigger={
+                            <div
+                              style={{
+                                // hack from https://stackoverflow.com/a/3542470/258462
+                                height: '100%',
 
-                              padding: '0.78571429em', // value taken from SUIR's collections/table.less (possibly needs to be changed if compact table style is implemented in DottedTableChartView)
-                            }}
-                          >
-                            {renderDots(data_tree[col][row], row_colors?.[row])}
-                          </div>
-                        }
-                      />
+                                padding: '0.78571429em', // value taken from SUIR's collections/table.less (possibly needs to be changed if compact table style is implemented in DottedTableChartView)
+                              }}
+                            >
+                              {renderDots(
+                                data_tree[col][row],
+                                row_colors?.[row],
+                              )}
+                            </div>
+                          }
+                        />
+                      ) : null}
                     </Table.Cell>
                   ))}
                 </Table.Row>