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

Initial

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-21 18:41:51 -08:00
commit dd4bd0caf5
26 changed files with 70922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
blocks/components/LCPChartBlockSettings.js Normal file
View File

@ -0,0 +1,191 @@
import React, { useState, useEffect } from 'react';
import { Button, Icon, PanelBody, ToggleControl } 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)
const { renderLegend,
legendLocation,
legendAlignment,
allowDownloadImage,
downloadImageMaxWidth,
allowDownloadCsv,
allowDownloadJson,
allowSorting,
allowFiltering,
footerContent,
chartTitle,
chartSubtitle,
toolbarLocation,
toolbarAlignment
} = attributes;
// Set local state for legend location (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
useEffect(() => {
setAttributes({ legendAlignment: selectedLegendAlignment });
}, [selectedLegendAlignment, setAttributes]);
// Set local state for alignment (for UI updates)
const [selectedToolbarAlignment, setSelectedToolbarAlignment] = useState(toolbarAlignment);
// Update block attribute when alignment changes
useEffect(() => {
setAttributes({ toolbarAlignment: selectedToolbarAlignment });
}, [selectedToolbarAlignment, setAttributes]);
// Render the component
return (
<div>
{/* Legend Settings Panel */}
<PanelBody title={__('Legend', 'lcp')} initialOpen={false}>
<ToggleControl
label={__('Render Legend', 'lcp')}
checked={renderLegend}
onChange={(value) => setAttributes({ renderLegend: value })}
/>
{renderLegend && (
<div>
{/* Legend - Alignment Buttons */}
<div>
{/* Left Alignment Button */}
<Button
isPrimary={selectedLegendAlignment === 'left'}
onClick={() => setSelectedLegendAlignment('left')}
>
{__('Left', 'lcp')}
</Button>
{/* Center Alignment Button */}
<Button
isPrimary={selectedLegendAlignment === 'center'}
onClick={() => setSelectedLegendAlignment('center')}
>
{__('Center', 'lcp')}
</Button>
{/* Right Alignment Button */}
<Button
isPrimary={selectedLegendAlignment === 'right'}
onClick={() => setSelectedLegendAlignment('right')}
>
{__('Right', 'lcp')}
</Button>
</div>
{/* Legend - Location Buttons */}
<div>
{/* Top Location Button */}
<Button
isPrimary={selectedLegendLocation === 'top'}
onClick={() => setSelectedLegendLocation('top')}
>
{__('Top', 'lcp')}
</Button>
{/* Bottom Location Button */}
<Button
isPrimary={selectedLegendLocation === 'bottom'}
onClick={() => setSelectedLegendLocation('bottom')}
>
{__('Bottom', 'lcp')}
</Button>
</div>
</div>
)}
</PanelBody>
{/* Controls Settings Panel */}
<PanelBody title={__('Controls', 'lcp')} initialOpen={false}>
<div>
{/* Left Alignment Button */}
<Button
isPrimary={selectedToolbarAlignment === 'left'}
onClick={() => setSelectedToolbarAlignment('left')}
>
{__('Left', 'lcp')}
</Button>
{/* Center Alignment Button */}
<Button
isPrimary={selectedToolbarAlignment === 'center'}
onClick={() => setSelectedToolbarAlignment('center')}
>
{__('Center', 'lcp')}
</Button>
{/* Right Alignment Button */}
<Button
isPrimary={selectedToolbarAlignment === 'right'}
onClick={() => setSelectedToolbarAlignment('right')}
>
{__('Right', 'lcp')}
</Button>
</div>
<ToggleControl
label={__('Allow Filtering', 'lcp')}
checked={allowFiltering}
onChange={(value) => setAttributes({ allowFiltering: value })}
/>
<ToggleControl
label={__('Allow Sorting', 'lcp')}
checked={allowSorting}
onChange={(value) => setAttributes({ allowSorting: value })}
/>
<ToggleControl
label={__('Allow Download Image', 'lcp')}
checked={allowDownloadImage}
onChange={(value) => setAttributes({ allowDownloadImage: value })}
/>
{allowDownloadImage && (
<LCPDimensionControl
unitTypes={['px']}
label={__('Download Image Max Width', 'lcp')}
value={downloadImageMaxWidth}
onChange={(value) => setAttributes({ downloadImageMaxWidth: value })}
/>
)}
<ToggleControl
label={__('Allow Download CSV', 'lcp')}
checked={allowDownloadCsv}
onChange={(value) => setAttributes({ allowDownloadCsv: value })}
/>
<ToggleControl
label={__('Allow Download JSON', 'lcp')}
checked={allowDownloadJson}
onChange={(value) => setAttributes({ allowDownloadJson: value })}
/>
</PanelBody>
{/* Tooltips and Popups Panel */}
<PanelBody title={__('Tooltips and Popups', 'lcp')} initialOpen={false}>
<LCPHTMLModal />
</PanelBody>
{/* Header Settings Panel */}
<PanelBody title={__('Header', 'lcp')} initialOpen={false}>
</PanelBody>
{/* Footer Settings Panel */}
<PanelBody title={__('Footer', 'lcp')} initialOpen={false}>
<LCPHTMLModal />
</PanelBody>
</div>
);
};
export default LCPChartBlockSettings;