Changes to color controls

.gitignore

@@ -9,7 +9,6 @@ npm-debug.log*
 
 # Ignore build files
 dist/
-build/
 
 # Ignore .env files (for sensitive data like API keys)
 .env

blocks/bar-graph/build/block.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "lcp/bar-graph",
+  "version": "0.1.0",
+  "title": "LCP Bar Graph",
+  "category": "widgets",
+  "icon": "chart-bar",
+  "description": "Display data in a bar graph format.",
+  "supports": {
+    "html": false
+  },
+  "textdomain": "lcp",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css",
+  "viewScript": "file:./view.js",
+  "attributes": {
+    "chartColorSource": {
+      "type": "string",
+      "default": "default"
+    },
+    "chartCustomColors": {
+      "type": "array",
+      "default": []
+    },
+    "showBarValues": {
+      "type": "boolean",
+      "default": true
+    },
+    "chartHeight": {
+      "type": "string",
+      "default": "400px"
+    },
+    "chartWidth": {
+      "type": "string",
+      "default": "100%"
+    },
+    "chartTitle": {
+      "type": "string",
+      "default": ""
+    },
+    "displayChartTitle": {
+      "type": "boolean",
+      "default": false
+    },
+    "allowDownload": {
+      "type": "boolean",
+      "default": false
+    },
+    "downloadMaxWidth": {
+      "type": "string",
+      "default": "2000px"
+    },
+    "showSorting": {
+      "type": "boolean",
+      "default": false
+    },
+    "showFiltering": {
+      "type": "boolean",
+      "default": false
+    },
+    "chartData": {
+      "type": "object",
+      "default": {}
+    },
+    "dataSource": {
+      "type": "string",
+      "default": "manual_json"
+    },
+    "barColor": {
+      "type": "string",
+      "default": "#0073aa"
+    },
+    "barOpacity": {
+      "type": "number",
+      "default": 1
+    },
+    "backgroundColor": {
+      "type": "string",
+      "default": "#ffffff"
+    },
+    "showGridX": {
+      "type": "boolean",
+      "default": false
+    },
+    "showGridY": {
+      "type": "boolean",
+      "default": true
+    },
+    "gridColor": {
+      "type": "string",
+      "default": "#e0e0e0"
+    },
+    "gridWidth": {
+      "type": "number",
+      "default": 1
+    },
+    "xAxisLabel": {
+      "type": "string",
+      "default": ""
+    },
+    "yAxisLabel": {
+      "type": "string",
+      "default": ""
+    },
+    "gridOpacity": {
+      "type": "number",
+      "default": 0.5
+    }
+  }
+}

blocks/bar-graph/build/index-rtl.css

@@ -0,0 +1 @@
+.wp-block-create-block-todo-list{border:1px dotted red}.wp-block-lcp-bar-graph{margin:1em 0}.wp-block-lcp-bar-graph .lcp-bar-graph-container{overflow:visible;width:100%}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg{overflow:visible}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .bar{transition:opacity .2s ease}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .bar:hover{cursor:pointer}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .grid line{stroke-opacity:.1}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .domain,.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .tick line{stroke:#666}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .tick text{fill:#666;font-size:12px}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .tooltip{pointer-events:none}.wp-block-lcp-bar-graph .lcp-bar-graph-placeholder{font-size:1.2em;padding:2em;text-align:center}.lcp-data-selector .components-base-control{margin-bottom:1.5em}.lcp-data-selector .lcp-data-selector-error{background-color:#f8d7da;border-right:4px solid #cc1818;margin-top:.5em;padding:.5em}

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

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

blocks/bar-graph/build/index.css

@@ -0,0 +1 @@
+.wp-block-create-block-todo-list{border:1px dotted red}.wp-block-lcp-bar-graph{margin:1em 0}.wp-block-lcp-bar-graph .lcp-bar-graph-container{overflow:visible;width:100%}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg{overflow:visible}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .bar{transition:opacity .2s ease}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .bar:hover{cursor:pointer}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .grid line{stroke-opacity:.1}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .domain,.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .tick line{stroke:#666}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .tick text{fill:#666;font-size:12px}.wp-block-lcp-bar-graph .lcp-bar-graph-container svg .tooltip{pointer-events:none}.wp-block-lcp-bar-graph .lcp-bar-graph-placeholder{font-size:1.2em;padding:2em;text-align:center}.lcp-data-selector .components-base-control{margin-bottom:1.5em}.lcp-data-selector .lcp-data-selector-error{background-color:#f8d7da;border-left:4px solid #cc1818;margin-top:.5em;padding:.5em}

blocks/bar-graph/build/style-index-rtl.css

@@ -0,0 +1 @@
+.wp-block-create-block-todo-list{background-color:#21759b;color:#fff;padding:2px}

blocks/bar-graph/build/style-index.css

@@ -0,0 +1 @@
+.wp-block-create-block-todo-list{background-color:#21759b;color:#fff;padding:2px}

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

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '7ca23fe6db2e4bfa97aa');

blocks/bar-graph/build/view.js

@@ -0,0 +1 @@
+console.log("Hello World! (from create-block-todo-list block)");

blocks/bar-graph/src/block.json

@@ -16,6 +16,14 @@
 	"style": "file:./style-index.css",
 	"viewScript": "file:./view.js",
 	"attributes": {
+		"chartColorSource": {
+			"type": "string",
+			"default": "default"
+		},
+		"chartCustomColors": {
+			"type": "array",
+			"default": []
+		},
 		"showBarValues": {
 			"type": "boolean",
 			"default": true

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

@@ -13,7 +13,11 @@ const BarGraph = ({
     gridWidth,
     showBarValues,
     xAxisLabel,
-    yAxisLabel
+    yAxisLabel,
+    colorSource,
+    defaultBarColor,
+    customColors,
+    barOpacity
 }) => {
     const svgRef = useRef();
     const containerRef = useRef();
@@ -80,6 +84,22 @@ const BarGraph = ({
             .domain([0, d3.max(chartData, d => d.value)])
             .range([innerHeight, 0]);
 
+        // Get color for a datapoint based on color source
+        const getColor = (datapoint) => {
+            switch (colorSource) {
+                case 'singleColor':
+                    return defaultBarColor;
+                case 'customColors':
+                    const customColor = customColors.find(
+                        c => c.dataset === datapoint.dataset && c.label === datapoint.label
+                    );
+                    return customColor ? customColor.color : datapoint.color;
+                case 'default':
+                default:
+                    return datapoint.color;
+            }
+        };
+
         // Add X grid
         if (showGridX) {
             g.append('g')
@@ -116,7 +136,8 @@ const BarGraph = ({
             .attr('y', d => yScale(d.value))
             .attr('width', xScale.bandwidth())
             .attr('height', d => innerHeight - yScale(d.value))
-            .attr('fill', d => d.color);
+            .attr('fill', d => getColor(d))
+            .style('opacity', barOpacity);
 
         // Add bar values
         if (showBarValues) {
@@ -163,7 +184,7 @@ const BarGraph = ({
                 .text(yAxisLabel);
         }
 
-    }, [data, width, height, title, showGridX, showGridY, gridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel]);
+    }, [data, width, height, title, showGridX, showGridY, gridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]);
 
     return (
         <div 

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

@@ -0,0 +1,116 @@
+import { __ } from '@wordpress/i18n';
+import { 
+    ColorPicker, 
+    SelectControl,
+    Button,
+    Popover
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const ColorControls = ({ 
+    data,
+    colorSource,
+    singleColor,
+    customColors,
+    onColorSourceChange,
+    onSingleColorChange,
+    onCustomColorChange 
+}) => {
+    const [activePopover, setActivePopover] = useState(null);
+
+    // Get all datapoints from all datasets
+    const getAllDatapoints = () => {
+        const datapoints = [];
+        Object.entries(data).forEach(([dataset, items]) => {
+            items.forEach(item => {
+                datapoints.push({
+                    dataset,
+                    label: item.label,
+                    value: item.value
+                });
+            });
+        });
+        return datapoints;
+    };
+
+    const getCustomColor = (dataset, label) => {
+        const colorEntry = customColors.find(c => c.dataset === dataset && c.label === label);
+        return colorEntry ? colorEntry.color : '#FF6384';
+    };
+
+    return (
+        <div className="lcp-color-controls">
+            <SelectControl
+                label={__('Color Source', 'lcp')}
+                value={colorSource}
+                options={[
+                    { label: __('Default Colors', 'lcp'), value: 'default' },
+                    { label: __('Single Color', 'lcp'), value: 'singleColor' },
+                    { label: __('Custom Colors', 'lcp'), value: 'customColors' }
+                ]}
+                onChange={onColorSourceChange}
+            />
+
+            {colorSource === 'singleColor' && (
+                <div className="components-base-control">
+                    <label className="components-base-control__label">
+                        {__('Bar Color', 'lcp')}
+                    </label>
+                    <ColorPicker
+                        color={singleColor}
+                        onChangeComplete={(color) => onSingleColorChange(color.hex)}
+                    />
+                </div>
+            )}
+
+            {colorSource === 'customColors' && (
+                <div className="custom-colors-grid" style={{ marginTop: '10px' }}>
+                    {getAllDatapoints().map((datapoint, index) => (
+                        <div 
+                            key={`${datapoint.dataset}-${datapoint.label}`}
+                            style={{ 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                marginBottom: '8px',
+                                gap: '8px'
+                            }}
+                        >
+                            <span style={{ flex: 1 }}>{datapoint.label}</span>
+                            <Button
+                                onClick={() => setActivePopover(index)}
+                                style={{
+                                    backgroundColor: getCustomColor(datapoint.dataset, datapoint.label),
+                                    width: '24px',
+                                    height: '24px',
+                                    borderRadius: '50%',
+                                    padding: 0,
+                                    border: '1px solid #ddd'
+                                }}
+                            />
+                            {activePopover === index && (
+                                <Popover
+                                    onClose={() => setActivePopover(null)}
+                                >
+                                    <div style={{ padding: '12px' }}>
+                                        <ColorPicker
+                                            color={getCustomColor(datapoint.dataset, datapoint.label)}
+                                            onChangeComplete={(color) => {
+                                                onCustomColorChange(
+                                                    datapoint.dataset,
+                                                    datapoint.label,
+                                                    color.hex
+                                                );
+                                            }}
+                                        />
+                                    </div>
+                                </Popover>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ColorControls;

blocks/bar-graph/src/edit.js

@@ -11,9 +11,11 @@ import {
     ToggleControl,
     TabPanel,
     TextControl,
-    Button
+    Button,
+	Popover	
 } from '@wordpress/components';
 
+import {useState} from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -21,6 +23,7 @@ import './editor.scss';
 import LCPDataSelector from '../../../components/LCPDataSelector';
 import BarGraph from './components/BarGraph';
 import LCPDimensionControl from '../../../components/LCPDimensionControl';
+import ColorControls from './components/ColorControls';
 
 export default function Edit({ attributes, setAttributes }) {
     const {
@@ -43,8 +46,9 @@ export default function Edit({ attributes, setAttributes }) {
         showGridX,
         gridWidth,
         xAxisLabel,
-        yAxisLabel
+        yAxisLabel,
-    } = attributes;
+        chartColorSource,
+        chartCustomColors    } = attributes;
 
     const blockProps = useBlockProps();
 
@@ -60,6 +64,21 @@ export default function Edit({ attributes, setAttributes }) {
         });
     };
 
+    const handleCustomColorChange = (dataset, label, color) => {
+        const existingColors = [...chartCustomColors];
+        const existingIndex = existingColors.findIndex(
+            c => c.dataset === dataset && c.label === label
+        );
+
+        if (existingIndex >= 0) {
+            existingColors[existingIndex].color = color;
+        } else {
+            existingColors.push({ dataset, label, color });
+        }
+
+        setAttributes({ chartCustomColors: existingColors });
+    };
+
     const handleDownload = () => {
         // Get the SVG element
         const svg = document.querySelector('.bar-graph svg');
@@ -103,6 +122,33 @@ export default function Edit({ attributes, setAttributes }) {
         img.src = url;
     };
 
+	// Grid Color Popover
+	const [isGridColorPopoverOpen, setIsGridColorPopoverOpen] = useState(false);
+
+	// Toggle the popover visibility
+	const toggleGridColorPopover = () => {
+		setIsGridColorPopoverOpen(!isGridColorPopoverOpen);
+	};
+
+	// Handle color change
+	const onGridColorChange = (newColor) => {
+		setAttributes({ gridColor: newColor });
+	};
+
+		// Grid 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
     console.log('Chart data:', chartData);
 
@@ -167,15 +213,65 @@ export default function Edit({ attributes, setAttributes }) {
                                         />
 									</PanelBody>
 									<PanelBody title="Appearance">
-										<div className="components-base-control">
+										<div className="grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px' }}>
-											<label className="components-base-control__label">
+											<span>Grid Color</span>
-												{__('Bar Color', 'lcp')}
+											<Button
-											</label>
+												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={barColor}
+														color={gridColor}
-												onChangeComplete={(color) => setAttributes({ barColor: color.hex })}
+														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
+												className="background-color-button"
+												onClick={toggleBackgroundColorPopover}
+												style={{
+													backgroundColor: backgroundColor,
+													width: '26px',
+													height: '26px',
+													borderRadius: '50%',
+													border: '1px solid #ccc',
+												}}
+											></Button>
+											{isBackgroundColorPopoverOpen && (
+												<Popover
+													position="bottom center"
+													onClose={toggleBackgroundColorPopover} // Close the popover when clicked outside
+												>
+													<ColorPicker
+														color={backgroundColor}
+														onChangeComplete={(color) => onBackgroundColorChange(color.hex)} // Update color
+													/>
+												</Popover>
+											)}
+										</div>
+                                        <ColorControls
+                                            data={chartData}
+                                            colorSource={chartColorSource}
+                                            singleColor={barColor}
+                                            customColors={chartCustomColors}
+                                            onColorSourceChange={(value) => setAttributes({ chartColorSource: value })}
+                                            onSingleColorChange={(color) => setAttributes({ barColor: color })}
+                                            onCustomColorChange={handleCustomColorChange}
+                                        />
 										<RangeControl
 											label={__('Bar Opacity', 'lcp')}
 											value={barOpacity}
@@ -230,6 +326,12 @@ export default function Edit({ attributes, setAttributes }) {
                                                         color={gridColor}
                                                         onChangeComplete={(color) => setAttributes({ gridColor: color.hex })}
                                                     />
+
+
+													
+
+
+
                                                 </div>
                                                 <RangeControl
                                                     label={__('Grid Width', 'lcp')}
@@ -317,6 +419,8 @@ export default function Edit({ attributes, setAttributes }) {
                     showBarValues={showBarValues}
                     xAxisLabel={xAxisLabel}
                     yAxisLabel={yAxisLabel}
+                    colorSource={chartColorSource}
+                    customColors={chartCustomColors}
                 />
             ) : (
                 <div