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

Changes to color controls

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-15 03:00:49 -08:00
parent 7df4855b60
commit ea5e69f0fd
14 changed files with 383 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
} = attributes;
yAxisLabel,
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">
<label className="components-base-control__label">
{__('Bar Color', 'lcp')}
</label>
<ColorPicker
color={barColor}
onChangeComplete={(color) => setAttributes({ barColor: color.hex })}
/>
<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
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