Added separate controls for X and Y grid colors

blocks/bar-graph/build/block.json

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

blocks/bar-graph/build/index.asset.php

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

blocks/bar-graph/src/block.json

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

blocks/bar-graph/src/components/BarGraph.js

@@ -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(''))
+                    .tickFormat(''));
-                .call(g => g.selectAll('.tick line')
-                    .attr('stroke', gridColor)
-                    .attr('stroke-width', gridWidth)
-                    .attr('opacity', 0.5));
         }
 
         // 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(''))
+                    .tickFormat(''));
-                .call(g => g.selectAll('.tick line')
-                    .attr('stroke', gridColor)
-                    .attr('stroke-width', gridWidth)
-                    .attr('opacity', 0.5));
         }
 
         // 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 

blocks/bar-graph/src/edit.js

@@ -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
+	// Grid Color Popovers
-	const [isGridColorPopoverOpen, setIsGridColorPopoverOpen] = useState(false);
+	const [isYGridColorPopoverOpen, setIsYGridColorPopoverOpen] = useState(false);
+	const [isXGridColorPopoverOpen, setIsXGridColorPopoverOpen] = useState(false);
 
 	// Toggle the popover visibility
-	const toggleGridColorPopover = () => {
+	const toggleYGridColorPopover = () => {
-		setIsGridColorPopoverOpen(!isGridColorPopoverOpen);
+		setIsYGridColorPopoverOpen(!isYGridColorPopoverOpen);
 	};
 
-	// Handle color change
+	const toggleXGridColorPopover = () => {
-	const onGridColorChange = (newColor) => {
+		setIsXGridColorPopoverOpen(!isXGridColorPopoverOpen);
-		setAttributes({ gridColor: newColor });
 	};
 
-		// 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) && (
+										{showGridY && (
-                                            <>
+											<div className="y-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
-                                                <div className="components-base-control">
+												<span>Y-Axis Grid Color</span>
-                                                    <label className="components-base-control__label">
+												<Button
-                                                        {__('Grid Color', 'lcp')}
+													className="grid-color-button"
-                                                    </label>
+													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}
+															color={yGridColor}
-                                                        onChangeComplete={(color) => setAttributes({ gridColor: color.hex })}
+															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}