jrangel/lcp-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-16 23:52:35 -08:00
parent 62284b71f7
commit 8a2998d054
3 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/bar-graph/build/index.asset.php
View File

@ -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');

2
blocks/bar-graph/build/index.js
View File

File diff suppressed because one or more lines are too long

39
blocks/bar-graph/src/components/BarGraph.js
View File

@ -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) {
const rect = this.getBoundingClientRect();
if (enableBarPopovers) {
setHoveredBar({
data: d,
position: {
x: rect.x + rect.width / 2,
y: rect.y
x: event.clientX,
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>
);