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

Updated styles and positioning of popovers for the bars

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-17 00:11:26 -08:00
parent 8a2998d054
commit 9f42059887
4 changed files with 54 additions and 23 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' => 'a041e34678577c1083c6');
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '2bef9a687e942bb92daa');

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

File diff suppressed because one or more lines are too long

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

@ -28,9 +28,10 @@ const BarGraph = ({
enableBarPopovers,
setAttributes
}) => {
const svgRef = useRef();
const containerRef = useRef();
const svgRef = useRef(null);
const containerRef = useRef(null);
const [hoveredBar, setHoveredBar] = useState(null);
const [pendingHover, setPendingHover] = useState(null);
// Helper function to darken a color
const darkenColor = (color, amount) => {
@ -42,6 +43,24 @@ const BarGraph = ({
).toString();
};
// Clear pending hover when mouse leaves
useEffect(() => {
if (!pendingHover) {
setHoveredBar(null);
}
}, [pendingHover]);
// Debounced hover effect
useEffect(() => {
if (!pendingHover) return;
const timer = setTimeout(() => {
setHoveredBar(pendingHover);
}, 100); // 200ms delay
return () => clearTimeout(timer);
}, [pendingHover]);
useEffect(() => {
if (!data || !svgRef.current || !containerRef.current) return;
@ -210,31 +229,36 @@ const BarGraph = ({
})
.on('mouseenter', function(event, d) {
if (enableBarPopovers) {
setHoveredBar({
const rect = this.getBoundingClientRect();
const barCenterX = rect.left + (rect.width / 2);
setPendingHover({
data: d,
position: {
x: event.clientX,
x: barCenterX,
y: event.clientY
}
});
}
})
.on('mousemove', function(event, d) {
if (enableBarPopovers && hoveredBar) {
setHoveredBar({
if (enableBarPopovers && pendingHover) {
const rect = this.getBoundingClientRect();
const barCenterX = rect.left + (rect.width / 2);
setPendingHover({
data: d,
position: {
x: event.clientX,
x: barCenterX,
y: event.clientY
}
});
}
})
.on('mouseleave', () => {
setHoveredBar(null);
setPendingHover(null);
})
.on('click', function(event, d) {
// Always close popover on click
setPendingHover(null);
setHoveredBar(null);
if (d.hasChildren && enableHierarchicalView) {
@ -454,6 +478,18 @@ const BarGraph = ({
{hoveredBar.data.popoverHtml && (
<div dangerouslySetInnerHTML={{ __html: hoveredBar.data.popoverHtml }} />
)}
<div style={{
position: 'absolute',
left: '50%',
bottom: '-6px',
transform: 'translateX(-50%)',
width: 0,
height: 0,
borderLeft: '6px solid transparent',
borderRight: '6px solid transparent',
borderTop: '6px solid white',
filter: 'drop-shadow(0 2px 2px rgba(0,0,0,0.1))'
}} />
</div>
)}
</div>

21
blocks/bar-graph/src/edit.js
View File

@ -245,7 +245,13 @@ export default function Edit({ attributes, setAttributes }) {
/>
</PanelBody>
<PanelBody title={__('Chart Settings', 'lcp')} initialOpen={true}>
<ToggleControl
<ToggleControl
label={__('Enable Bar Popovers', 'lcp-data-blocks')}
checked={enableBarPopovers}
onChange={(value) => setAttributes({ enableBarPopovers: value })}
help={__('Show HTML content when hovering over bars', 'lcp-data-blocks')}
/>
<ToggleControl
label={__('Enable Hierarchical View', 'lcp')}
checked={enableHierarchicalView}
onChange={(value) => setAttributes({ enableHierarchicalView: value })}
@ -435,18 +441,7 @@ export default function Edit({ attributes, setAttributes }) {
</Panel>
);
}
if (tab.name === 'appearance') {
return (
<PanelBody>
<ToggleControl
label={__('Enable Bar Popovers', 'lcp-data-blocks')}
checked={enableBarPopovers}
onChange={(value) => setAttributes({ enableBarPopovers: value })}
help={__('Show HTML content when hovering over bars', 'lcp-data-blocks')}
/>
</PanelBody>
);
}
if (tab.name === 'tools') {
return (
<PanelBody>