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

6
blocks/bar-graph/build/block.json
View File

@ -88,7 +88,11 @@
"type": "boolean",
"default": true
},
"gridColor": {
"yGridColor": {
"type": "string",
"default": "#e0e0e0"
},
"xGridColor": {
"type": "string",
"default": "#e0e0e0"
},

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

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '62449dbdc80e118c522c');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '9e08ac91fd20a1bb3a3d');

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

File diff suppressed because one or more lines are too long

6
blocks/bar-graph/src/block.json
View File

@ -88,7 +88,11 @@
"type": "boolean",
"default": true
},
"gridColor": {
"yGridColor": {
"type": "string",
"default": "#e0e0e0"
},
"xGridColor": {
"type": "string",
"default": "#e0e0e0"
},

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

@ -9,7 +9,8 @@ const BarGraph = ({
title,
showGridX,
showGridY,
gridColor,
xGridColor,
yGridColor,
gridWidth,
showBarValues,
xAxisLabel,
@ -105,26 +106,22 @@ const BarGraph = ({
g.append('g')
.attr('class', 'grid x-grid')
.attr('transform', `translate(0,${innerHeight})`)
.style('color', xGridColor)
.style('stroke-width', gridWidth)
.call(d3.axisBottom(xScale)
.tickSize(-innerHeight)
.tickFormat(''))
.call(g => g.selectAll('.tick line')
.attr('stroke', gridColor)
.attr('stroke-width', gridWidth)
.attr('opacity', 0.5));
.tickFormat(''));
}
// Add Y grid
if (showGridY) {
g.append('g')
.attr('class', 'grid y-grid')
.style('color', yGridColor)
.style('stroke-width', gridWidth)
.call(d3.axisLeft(yScale)
.tickSize(-innerWidth)
.tickFormat(''))
.call(g => g.selectAll('.tick line')
.attr('stroke', gridColor)
.attr('stroke-width', gridWidth)
.attr('opacity', 0.5));
.tickFormat(''));
}
// Add bars
@ -184,7 +181,7 @@ const BarGraph = ({
.text(yAxisLabel);
}
}, [data, width, height, title, showGridX, showGridY, gridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]);
}, [data, width, height, title, showGridX, showGridY, xGridColor, yGridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]);
return (
<div

136
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,20 +123,29 @@ 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
// Handle color changes
const onYGridColorChange = (newColor) => {
setAttributes({ yGridColor: newColor });
};
const onXGridColorChange = (newColor) => {
setAttributes({ xGridColor: newColor });
};
// Background Color Popover
const [isBackgroundColorPopoverOpen, setIsBackgroundColorPopoverOpen] = useState(false);
// Toggle the background popover visibility
@ -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,23 +294,63 @@ 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>
{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={gridColor}
onChangeComplete={(color) => setAttributes({ gridColor: color.hex })}
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>
)}
{(showGridX || showGridY) && (
<RangeControl
label={__('Grid Width', 'lcp')}
value={gridWidth}
@ -341,7 +359,6 @@ export default function Edit({ attributes, setAttributes }) {
max={5}
step={1}
/>
</>
)}
</PanelBody>
</Panel>
@ -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}