Updated bargraph popover logic so that all bars have a popover with at least the label and value

blocks/bar-graph/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '80544ff4a7959491b7f6');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'a041e34678577c1083c6');

blocks/bar-graph/src/components/BarGraph.js

@@ -205,17 +205,27 @@ const BarGraph = ({
             .attr('fill', d => d.color || defaultBarColor)
             .style('opacity', barOpacity)
             .style('cursor', d => {
-                if (enableBarPopovers && d.popoverHtml) return 'pointer';
+                if (enableBarPopovers) return 'pointer';
                 return (d.hasChildren && enableHierarchicalView) ? 'pointer' : 'default';
             })
             .on('mouseenter', function(event, d) {
-                if (enableBarPopovers && d.popoverHtml) {
+                if (enableBarPopovers) {
-                    const rect = this.getBoundingClientRect();
                     setHoveredBar({
                         data: d,
                         position: {
-                            x: rect.x + rect.width / 2,
+                            x: event.clientX,
-                            y: rect.y
+                            y: event.clientY
+                        }
+                    });
+                }
+            })
+            .on('mousemove', function(event, d) {
+                if (enableBarPopovers && hoveredBar) {
+                    setHoveredBar({
+                        data: d,
+                        position: {
+                            x: event.clientX,
+                            y: event.clientY
                         }
                     });
                 }
@@ -224,6 +234,9 @@ const BarGraph = ({
                 setHoveredBar(null);
             })
             .on('click', function(event, d) {
+                // Always close popover on click
+                setHoveredBar(null);
+                
                 if (d.hasChildren && enableHierarchicalView) {
                     event.stopPropagation();
                     setAttributes({ selectedParentId: d.id });
@@ -428,10 +441,20 @@ const BarGraph = ({
                         boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
                         zIndex: 1000,
                         pointerEvents: 'none',
-                        marginTop: '-8px'
+                        marginTop: '-8px',
+                        maxWidth: '200px',
                     }}
-                    dangerouslySetInnerHTML={{ __html: hoveredBar.data.popoverHtml }}
+                >
-                />
+                    <div style={{ marginBottom: '4px' }}>
+                        <strong>{hoveredBar.data.label}</strong>
+                    </div>
+                    <div style={{ marginBottom: '8px' }}>
+                        Value: {hoveredBar.data.value}
+                    </div>
+                    {hoveredBar.data.popoverHtml && (
+                        <div dangerouslySetInnerHTML={{ __html: hoveredBar.data.popoverHtml }} />
+                    )}
+                </div>
             )}
         </div>
     );