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

Added support for separate X and Y grid widths

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-15 03:26:50 -08:00
parent 1562ef55ec
commit cb0ab8055d
6 changed files with 91 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,8 @@ export default function Edit({ attributes, setAttributes }) {
showGridY,
yGridColor,
xGridColor,
xGridWidth,
yGridWidth,
chartData,
dataSource,
displayChartTitle,
@ -45,7 +47,6 @@ export default function Edit({ attributes, setAttributes }) {
showFiltering,
showBarValues,
showGridX,
gridWidth,
xAxisLabel,
yAxisLabel,
chartColorSource,
@ -295,70 +296,79 @@ export default function Edit({ attributes, setAttributes }) {
onChange={(value) => setAttributes({ showGridY: value })}
/>
{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>
<>
<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>
<RangeControl
label={__('Y-Axis Grid Width', 'lcp')}
value={yGridWidth}
onChange={(value) => setAttributes({ yGridWidth: value })}
min={1}
max={5}
step={1}
/>
</>
)}
{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>
)}
{(showGridX || showGridY) && (
<RangeControl
label={__('Grid Width', 'lcp')}
value={gridWidth}
onChange={(value) => setAttributes({ gridWidth: value })}
min={1}
max={5}
step={1}
/>
<>
<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>
<RangeControl
label={__('X-Axis Grid Width', 'lcp')}
value={xGridWidth}
onChange={(value) => setAttributes({ xGridWidth: value })}
min={1}
max={5}
step={1}
/>
</>
)}
</PanelBody>
</Panel>
@ -430,7 +440,8 @@ export default function Edit({ attributes, setAttributes }) {
showGridY={showGridY}
yGridColor={yGridColor}
xGridColor={xGridColor}
gridWidth={gridWidth}
xGridWidth={xGridWidth}
yGridWidth={yGridWidth}
title={displayChartTitle ? chartTitle : ''}
showSorting={showSorting}
showFiltering={showFiltering}