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

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

@ -96,7 +96,11 @@
"type": "string", "type": "string",
"default": "#e0e0e0" "default": "#e0e0e0"
}, },
"gridWidth": { "xGridWidth": {
"type": "number",
"default": 1
},
"yGridWidth": {
"type": "number", "type": "number",
"default": 1 "default": 1
}, },

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' => '9e08ac91fd20a1bb3a3d'); <?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'd3e2bb3c261756c0085a');

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

@ -96,7 +96,11 @@
"type": "string", "type": "string",
"default": "#e0e0e0" "default": "#e0e0e0"
}, },
"gridWidth": { "xGridWidth": {
"type": "number",
"default": 1
},
"yGridWidth": {
"type": "number", "type": "number",
"default": 1 "default": 1
}, },

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

@ -11,7 +11,8 @@ const BarGraph = ({
showGridY, showGridY,
xGridColor, xGridColor,
yGridColor, yGridColor,
gridWidth, xGridWidth,
yGridWidth,
showBarValues, showBarValues,
xAxisLabel, xAxisLabel,
yAxisLabel, yAxisLabel,
@ -107,7 +108,7 @@ const BarGraph = ({
.attr('class', 'grid x-grid') .attr('class', 'grid x-grid')
.attr('transform', `translate(0,${innerHeight})`) .attr('transform', `translate(0,${innerHeight})`)
.style('color', xGridColor) .style('color', xGridColor)
.style('stroke-width', gridWidth) .style('stroke-width', xGridWidth)
.call(d3.axisBottom(xScale) .call(d3.axisBottom(xScale)
.tickSize(-innerHeight) .tickSize(-innerHeight)
.tickFormat('')); .tickFormat(''));
@ -118,7 +119,7 @@ const BarGraph = ({
g.append('g') g.append('g')
.attr('class', 'grid y-grid') .attr('class', 'grid y-grid')
.style('color', yGridColor) .style('color', yGridColor)
.style('stroke-width', gridWidth) .style('stroke-width', yGridWidth)
.call(d3.axisLeft(yScale) .call(d3.axisLeft(yScale)
.tickSize(-innerWidth) .tickSize(-innerWidth)
.tickFormat('')); .tickFormat(''));
@ -181,7 +182,7 @@ const BarGraph = ({
.text(yAxisLabel); .text(yAxisLabel);
} }
}, [data, width, height, title, showGridX, showGridY, xGridColor, yGridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]); }, [data, width, height, title, showGridX, showGridY, xGridColor, yGridColor, xGridWidth, yGridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]);
return ( return (
<div <div

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

@ -35,6 +35,8 @@ export default function Edit({ attributes, setAttributes }) {
showGridY, showGridY,
yGridColor, yGridColor,
xGridColor, xGridColor,
xGridWidth,
yGridWidth,
chartData, chartData,
dataSource, dataSource,
displayChartTitle, displayChartTitle,
@ -45,7 +47,6 @@ export default function Edit({ attributes, setAttributes }) {
showFiltering, showFiltering,
showBarValues, showBarValues,
showGridX, showGridX,
gridWidth,
xAxisLabel, xAxisLabel,
yAxisLabel, yAxisLabel,
chartColorSource, chartColorSource,
@ -295,70 +296,79 @@ export default function Edit({ attributes, setAttributes }) {
onChange={(value) => setAttributes({ showGridY: value })} onChange={(value) => setAttributes({ showGridY: value })}
/> />
{showGridY && ( {showGridY && (
<div className="y-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}> <>
<span>Y-Axis Grid Color</span> <div className="y-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<Button <span>Y-Axis Grid Color</span>
className="grid-color-button" <Button
onClick={toggleYGridColorPopover} className="grid-color-button"
style={{ onClick={toggleYGridColorPopover}
backgroundColor: yGridColor, style={{
width: '26px', backgroundColor: yGridColor,
height: '26px', width: '26px',
borderRadius: '50%', height: '26px',
border: '1px solid #ccc', borderRadius: '50%',
}} border: '1px solid #ccc',
></Button> }}
{isYGridColorPopoverOpen && ( ></Button>
<Popover {isYGridColorPopoverOpen && (
position="bottom center" <Popover
onClose={toggleYGridColorPopover} position="bottom center"
> onClose={toggleYGridColorPopover}
<ColorPicker >
color={yGridColor} <ColorPicker
onChangeComplete={(color) => onYGridColorChange(color.hex)} color={yGridColor}
/> onChangeComplete={(color) => onYGridColorChange(color.hex)}
</Popover> />
)} </Popover>
</div> )}
</div>
<RangeControl
label={__('Y-Axis Grid Width', 'lcp')}
value={yGridWidth}
onChange={(value) => setAttributes({ yGridWidth: value })}
min={1}
max={5}
step={1}
/>
</>
)} )}
{showGridX && ( {showGridX && (
<div className="x-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}> <>
<span>X-Axis Grid Color</span> <div className="x-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<Button <span>X-Axis Grid Color</span>
className="grid-color-button" <Button
onClick={toggleXGridColorPopover} className="grid-color-button"
style={{ onClick={toggleXGridColorPopover}
backgroundColor: xGridColor, style={{
width: '26px', backgroundColor: xGridColor,
height: '26px', width: '26px',
borderRadius: '50%', height: '26px',
border: '1px solid #ccc', borderRadius: '50%',
}} border: '1px solid #ccc',
></Button> }}
{isXGridColorPopoverOpen && ( ></Button>
<Popover {isXGridColorPopoverOpen && (
position="bottom center" <Popover
onClose={toggleXGridColorPopover} position="bottom center"
> onClose={toggleXGridColorPopover}
<ColorPicker >
color={xGridColor} <ColorPicker
onChangeComplete={(color) => onXGridColorChange(color.hex)} color={xGridColor}
/> onChangeComplete={(color) => onXGridColorChange(color.hex)}
</Popover> />
)} </Popover>
</div> )}
)} </div>
<RangeControl
{(showGridX || showGridY) && ( label={__('X-Axis Grid Width', 'lcp')}
<RangeControl value={xGridWidth}
label={__('Grid Width', 'lcp')} onChange={(value) => setAttributes({ xGridWidth: value })}
value={gridWidth} min={1}
onChange={(value) => setAttributes({ gridWidth: value })} max={5}
min={1} step={1}
max={5} />
step={1} </>
/>
)} )}
</PanelBody> </PanelBody>
</Panel> </Panel>
@ -430,7 +440,8 @@ export default function Edit({ attributes, setAttributes }) {
showGridY={showGridY} showGridY={showGridY}
yGridColor={yGridColor} yGridColor={yGridColor}
xGridColor={xGridColor} xGridColor={xGridColor}
gridWidth={gridWidth} xGridWidth={xGridWidth}
yGridWidth={yGridWidth}
title={displayChartTitle ? chartTitle : ''} title={displayChartTitle ? chartTitle : ''}
showSorting={showSorting} showSorting={showSorting}
showFiltering={showFiltering} showFiltering={showFiltering}