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",
"default": "#e0e0e0"
},
"gridWidth": {
"xGridWidth": {
"type": "number",
"default": 1
},
"yGridWidth": {
"type": "number",
"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",
"default": "#e0e0e0"
},
"gridWidth": {
"xGridWidth": {
"type": "number",
"default": 1
},
"yGridWidth": {
"type": "number",
"default": 1
},

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

@ -11,7 +11,8 @@ const BarGraph = ({
showGridY,
xGridColor,
yGridColor,
gridWidth,
xGridWidth,
yGridWidth,
showBarValues,
xAxisLabel,
yAxisLabel,
@ -107,7 +108,7 @@ const BarGraph = ({
.attr('class', 'grid x-grid')
.attr('transform', `translate(0,${innerHeight})`)
.style('color', xGridColor)
.style('stroke-width', gridWidth)
.style('stroke-width', xGridWidth)
.call(d3.axisBottom(xScale)
.tickSize(-innerHeight)
.tickFormat(''));
@ -118,7 +119,7 @@ const BarGraph = ({
g.append('g')
.attr('class', 'grid y-grid')
.style('color', yGridColor)
.style('stroke-width', gridWidth)
.style('stroke-width', yGridWidth)
.call(d3.axisLeft(yScale)
.tickSize(-innerWidth)
.tickFormat(''));
@ -181,7 +182,7 @@ const BarGraph = ({
.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 (
<div

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

@ -35,6 +35,8 @@ export default function Edit({ attributes, setAttributes }) {
showGridY,
yGridColor,
xGridColor,
xGridWidth,
yGridWidth,
chartData,
dataSource,
displayChartTitle,
@ -45,7 +47,6 @@ export default function Edit({ attributes, setAttributes }) {
showFiltering,
showBarValues,
showGridX,
gridWidth,
xAxisLabel,
yAxisLabel,
chartColorSource,
@ -295,6 +296,7 @@ export default function Edit({ attributes, setAttributes }) {
onChange={(value) => setAttributes({ showGridY: value })}
/>
{showGridY && (
<>
<div className="y-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<span>Y-Axis Grid Color</span>
<Button
@ -320,9 +322,19 @@ export default function Edit({ attributes, setAttributes }) {
</Popover>
)}
</div>
<RangeControl
label={__('Y-Axis Grid Width', 'lcp')}
value={yGridWidth}
onChange={(value) => setAttributes({ yGridWidth: value })}
min={1}
max={5}
step={1}
/>
</>
)}
{showGridX && (
<>
<div className="x-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<span>X-Axis Grid Color</span>
<Button
@ -348,17 +360,15 @@ export default function Edit({ attributes, setAttributes }) {
</Popover>
)}
</div>
)}
{(showGridX || showGridY) && (
<RangeControl
label={__('Grid Width', 'lcp')}
value={gridWidth}
onChange={(value) => setAttributes({ gridWidth: value })}
label={__('X-Axis Grid Width', 'lcp')}
value={xGridWidth}
onChange={(value) => setAttributes({ xGridWidth: value })}
min={1}
max={5}
step={1}
/>
</>
)}
</PanelBody>
</Panel>
@ -430,7 +440,8 @@ export default function Edit({ attributes, setAttributes }) {
showGridY={showGridY}
yGridColor={yGridColor}
xGridColor={xGridColor}
gridWidth={gridWidth}
xGridWidth={xGridWidth}
yGridWidth={yGridWidth}
title={displayChartTitle ? chartTitle : ''}
showSorting={showSorting}
showFiltering={showFiltering}