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

Added separate controls for X and Y grid colors

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-15 03:21:46 -08:00
parent ea5e69f0fd
commit 1562ef55ec
6 changed files with 119 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,8 @@ export default function Edit({ attributes, setAttributes }) {
barOpacity,
backgroundColor,
showGridY,
gridColor,
yGridColor,
xGridColor,
chartData,
dataSource,
displayChartTitle,
@ -122,31 +123,40 @@ export default function Edit({ attributes, setAttributes }) {
img.src = url;
};
// Grid Color Popover
const [isGridColorPopoverOpen, setIsGridColorPopoverOpen] = useState(false);
// Grid Color Popovers
const [isYGridColorPopoverOpen, setIsYGridColorPopoverOpen] = useState(false);
const [isXGridColorPopoverOpen, setIsXGridColorPopoverOpen] = useState(false);
// Toggle the popover visibility
const toggleGridColorPopover = () => {
setIsGridColorPopoverOpen(!isGridColorPopoverOpen);
const toggleYGridColorPopover = () => {
setIsYGridColorPopoverOpen(!isYGridColorPopoverOpen);
};
// Handle color change
const onGridColorChange = (newColor) => {
setAttributes({ gridColor: newColor });
const toggleXGridColorPopover = () => {
setIsXGridColorPopoverOpen(!isXGridColorPopoverOpen);
};
// Grid Color Popover
const [isBackgroundColorPopoverOpen, setIsBackgroundColorPopoverOpen] = useState(false);
// Handle color changes
const onYGridColorChange = (newColor) => {
setAttributes({ yGridColor: newColor });
};
// Toggle the background popover visibility
const toggleBackgroundColorPopover = () => {
setIsBackgroundColorPopoverOpen(!isBackgroundColorPopoverOpen);
};
const onXGridColorChange = (newColor) => {
setAttributes({ xGridColor: newColor });
};
// Handle color change
const onBackgroundColorChange = (newColor) => {
setAttributes({ backgroundColor: newColor });
};
// Background Color Popover
const [isBackgroundColorPopoverOpen, setIsBackgroundColorPopoverOpen] = useState(false);
// Toggle the background popover visibility
const toggleBackgroundColorPopover = () => {
setIsBackgroundColorPopoverOpen(!isBackgroundColorPopoverOpen);
};
// Handle color change
const onBackgroundColorChange = (newColor) => {
setAttributes({ backgroundColor: newColor });
};
// Debug log to check chartData
@ -213,31 +223,7 @@ export default function Edit({ attributes, setAttributes }) {
/>
</PanelBody>
<PanelBody title="Appearance">
<div className="grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px' }}>
<span>Grid Color</span>
<Button
className="grid-color-button"
onClick={toggleGridColorPopover}
style={{
backgroundColor: gridColor,
width: '26px',
height: '26px',
borderRadius: '50%',
border: 'none',
}}
></Button>
{isGridColorPopoverOpen && (
<Popover
position="bottom center"
onClose={toggleGridColorPopover} // Close the popover when clicked outside
>
<ColorPicker
color={gridColor}
onChangeComplete={(color) => onGridColorChange(color.hex)} // Update color
/>
</Popover>
)}
</div>
<div className="background-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px' }}>
<span>Background Color</span>
<Button
@ -280,15 +266,7 @@ export default function Edit({ attributes, setAttributes }) {
max={1}
step={0.1}
/>
<div className="components-base-control">
<label className="components-base-control__label">
{__('Background Color', 'lcp')}
</label>
<ColorPicker
color={backgroundColor}
onChangeComplete={(color) => setAttributes({ backgroundColor: color.hex })}
/>
</div>
<ToggleControl
label={__('Show Bar Values', 'lcp')}
checked={showBarValues}
@ -316,35 +294,74 @@ export default function Edit({ attributes, setAttributes }) {
checked={showGridY}
onChange={(value) => setAttributes({ showGridY: value })}
/>
{(showGridX || showGridY) && (
<>
<div className="components-base-control">
<label className="components-base-control__label">
{__('Grid Color', 'lcp')}
</label>
<ColorPicker
color={gridColor}
onChangeComplete={(color) => setAttributes({ gridColor: color.hex })}
/>
{showGridY && (
<div className="y-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<span>Y-Axis Grid Color</span>
<Button
className="grid-color-button"
onClick={toggleYGridColorPopover}
style={{
backgroundColor: yGridColor,
width: '26px',
height: '26px',
borderRadius: '50%',
border: '1px solid #ccc',
}}
></Button>
{isYGridColorPopoverOpen && (
<Popover
position="bottom center"
onClose={toggleYGridColorPopover}
>
<ColorPicker
color={yGridColor}
onChangeComplete={(color) => onYGridColorChange(color.hex)}
/>
</Popover>
)}
</div>
)}
{showGridX && (
<div className="x-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<span>X-Axis Grid Color</span>
<Button
className="grid-color-button"
onClick={toggleXGridColorPopover}
style={{
backgroundColor: xGridColor,
width: '26px',
height: '26px',
borderRadius: '50%',
border: '1px solid #ccc',
}}
></Button>
{isXGridColorPopoverOpen && (
<Popover
position="bottom center"
onClose={toggleXGridColorPopover}
>
<ColorPicker
color={xGridColor}
onChangeComplete={(color) => onXGridColorChange(color.hex)}
/>
</Popover>
)}
</div>
)}
</div>
<RangeControl
label={__('Grid Width', 'lcp')}
value={gridWidth}
onChange={(value) => setAttributes({ gridWidth: value })}
min={1}
max={5}
step={1}
/>
</>
)}
</PanelBody>
</Panel>
{(showGridX || showGridY) && (
<RangeControl
label={__('Grid Width', 'lcp')}
value={gridWidth}
onChange={(value) => setAttributes({ gridWidth: value })}
min={1}
max={5}
step={1}
/>
)}
</PanelBody>
</Panel>
);
}
if (tab.name === 'appearance') {
@ -411,7 +428,8 @@ export default function Edit({ attributes, setAttributes }) {
barOpacity={barOpacity}
showGridX={showGridX}
showGridY={showGridY}
gridColor={gridColor}
yGridColor={yGridColor}
xGridColor={xGridColor}
gridWidth={gridWidth}
title={displayChartTitle ? chartTitle : ''}
showSorting={showSorting}