79 lines
2.7 KiB
JavaScript
79 lines
2.7 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
|
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
|
import { PanelBody, ColorPicker } from '@wordpress/components';
|
|
import './editor.scss';
|
|
import BarGraph from './components/BarGraph';
|
|
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
|
|
import LCPDimensionControl from '../../components/LCPDimensionControl';
|
|
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
|
|
|
|
export default function Edit({ attributes, setAttributes }) {
|
|
const {
|
|
chartHeight = '400px',
|
|
chartWidth = '100%',
|
|
barColor = '#007cba',
|
|
chartData = [],
|
|
valueColumn = 'Value',
|
|
labelsColumn = 'Label',
|
|
colorColumn = 'color',
|
|
popoverColumn = 'content',
|
|
|
|
} = attributes;
|
|
|
|
const blockProps = useBlockProps();
|
|
|
|
const handleDatasetChange = (newData) => {
|
|
setAttributes({ chartData: newData });
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div {...blockProps}>
|
|
<InspectorControls>
|
|
{/* Bar Graph-specific Settings */}
|
|
<PanelBody title={__('Chart Settings', 'lcp-visualize')}>
|
|
<LCPDatasetBuilder
|
|
chartType="bar"
|
|
chartData={chartData}
|
|
onChange={handleDatasetChange}
|
|
attributes={attributes}
|
|
setAttributes={setAttributes}
|
|
/>
|
|
<LCPDimensionControl
|
|
label={__('Chart Height', 'lcp-visualize')}
|
|
value={chartHeight}
|
|
onChange={(value) => setAttributes({ chartHeight: value })}
|
|
/>
|
|
<LCPDimensionControl
|
|
label={__('Chart Width', 'lcp-visualize')}
|
|
value={chartWidth}
|
|
onChange={(value) => setAttributes({ chartWidth: value })}
|
|
/>
|
|
|
|
</PanelBody>
|
|
{/* Common Chart Settings */}
|
|
<LCPChartBlockSettings
|
|
attributes={attributes}
|
|
setAttributes={setAttributes}
|
|
/>
|
|
|
|
</InspectorControls>
|
|
|
|
<div className="lcp-bar-graph-container">
|
|
<BarGraph
|
|
chartData={chartData}
|
|
height={chartHeight}
|
|
width={chartWidth}
|
|
valueColumn={valueColumn}
|
|
labelsColumn={labelsColumn}
|
|
colorColumn={colorColumn}
|
|
popoverColumn={popoverColumn}
|
|
defaultBarColor={barColor}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|