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

Added basics of LCPLegend and more controls for blocks. Added boilerplate for lcp/line-graph

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-22 02:34:10 -08:00
parent dd4bd0caf5
commit 23944b0052
29 changed files with 24323 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
blocks/components/LCPChartBlockSettings.js
View File

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react';
import { Button, Icon, PanelBody, ToggleControl } from '@wordpress/components';
import { Button, Icon, PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDimensionControl from './LCPDimensionControl';
import LCPHTMLModal from './LCPHTMLModal.js';
const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
// Use `legendAlignment` from props (block attributes)
// Attributes from parent edit.js file
const { renderLegend,
legendLocation,
legendAlignment,
@ -18,38 +18,58 @@ const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
footerContent,
chartTitle,
chartSubtitle,
toolbarLocation,
toolbarAlignment
toolbarLocation = 'top',
toolbarAlignment,
showXAxisLabel,
xAxisLabel,
showYAxisLabel,
yAxisLabel,
renderXGrid,
renderYGrid,
xGridColor,
yGridColor,
legendFontSize
} = attributes;
// Set local state for legend location (for UI updates)
// Set local state for legend location and alignment (for UI updates)
const [selectedLegendLocation, setSelectedLegendLocation] = useState(legendLocation);
// Update block attribute when location changes
useEffect(() => {
setAttributes({ legendLocation: selectedLegendLocation });
}, [selectedLegendLocation, setAttributes]);
// Set local state for alignment (for UI updates)
const [selectedLegendAlignment, setSelectedLegendAlignment] = useState(legendAlignment);
// Update block attribute when alignment changes
// Update block attributes when location or alignment changes
useEffect(() => {
setAttributes({ legendAlignment: selectedLegendAlignment });
}, [selectedLegendAlignment, setAttributes]);
setAttributes({ legendLocation: selectedLegendLocation, legendAlignment: selectedLegendAlignment });
}, [selectedLegendLocation, selectedLegendAlignment, setAttributes]);
// Set local state for alignment (for UI updates)
// Set local state for toolbar location and alignment (for UI updates)
const [selectedToolbarLocation, setSelectedToolbarLocation] = useState(toolbarLocation);
const [selectedToolbarAlignment, setSelectedToolbarAlignment] = useState(toolbarAlignment);
// Update block attribute when alignment changes
// Update block attributes when toolbar location or alignment changes
useEffect(() => {
setAttributes({ toolbarAlignment: selectedToolbarAlignment });
}, [selectedToolbarAlignment, setAttributes]);
setAttributes({ toolbarLocation: selectedToolbarLocation, toolbarAlignment: selectedToolbarAlignment });
}, [selectedToolbarLocation, selectedToolbarAlignment, setAttributes]);
// Render the component
return (
<div>
{/* Grid Settings Panel */}
<PanelBody title={__('Grid', 'lcp')} initialOpen={false}>
{/* Render X-Grid */}
<ToggleControl
label={__('Show X Grid', 'lcp')}
checked={renderXGrid}
onChange={(value) =>
setAttributes({ renderXGrid: value })}
/>
{/* Render Y-Grid */}
<ToggleControl
label={__('Show Y Grid', 'lcp')}
checked={renderYGrid}
onChange={(value) =>
setAttributes({ renderYGrid: value })}
/>
</PanelBody>
{/* Legend Settings Panel */}
<PanelBody title={__('Legend', 'lcp')} initialOpen={false}>
<ToggleControl
@ -103,15 +123,72 @@ const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
>
{__('Bottom', 'lcp')}
</Button>
<LCPDimensionControl
unitTypes={['px']}
label={__('Legend Font Size', 'lcp')}
value={legendFontSize}
onChange={(value) => setAttributes({ legendFontSize: value })}
/>
</div>
</div>
)}
</PanelBody>
{/* Labels Settings Panel */}
<PanelBody title={__('Labels', 'lcp')} initialOpen={false}>
{/* Show X-Axis Label*/}
<ToggleControl
label={__('Show X-Axis', 'lcp')}
checked={showXAxisLabel}
onChange={(value) => setAttributes({ showXAxisLabel: value })}
/>
{/* X-Axis Label */}
<TextControl
label={__('X Axis Label', 'lcp')}
value={xAxisLabel}
onChange={(value) => setAttributes({ xAxisLabel: value })}
placeholder={__('Enter X-axis label...', 'lcp')}
/>
{/* Show Y-Axis */}
<ToggleControl
label={__('Show Y-Axis Label', 'lcp')}
checked={showYAxisLabel}
onChange={(value) => setAttributes({ showYAxisLabel: value })}
/>
{/* Y-Axis Label */}
<TextControl
label={__('Y Axis Label', 'lcp')}
value={yAxisLabel}
onChange={(value) => setAttributes({ xAxisLabel: value })}
placeholder={__('Enter X-axis label', 'lcp')}
/>
</PanelBody>
{/* Controls Settings Panel */}
<PanelBody title={__('Controls', 'lcp')} initialOpen={false}>
<div>
{/* Top Location Button */}
<Button
isPrimary={selectedToolbarLocation === 'top'}
onClick={() => setSelectedToolbarLocation('top')}
>
{__('Top', 'lcp')}
</Button>
{/* Bottom Location Button */}
<Button
isPrimary={selectedToolbarLocation === 'bottom'}
onClick={() => setSelectedToolbarLocation('bottom')}
>
{__('Bottom', 'lcp')}
</Button>
<LCPDimensionControl
unitTypes={['px']}
label={__('Legend Font Size', 'lcp')}
value={legendFontSize}
onChange={(value) => setAttributes({ legendFontSize: value })}
/>
</div>
<div>
{/* Left Alignment Button */}
<Button
@ -172,6 +249,7 @@ const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
onChange={(value) => setAttributes({ allowDownloadJson: value })}
/>
</PanelBody>
{/* Tooltips and Popups Panel */}
<PanelBody title={__('Tooltips and Popups', 'lcp')} initialOpen={false}>
<LCPHTMLModal />