Initial
This commit is contained in:
Jeremy Rangel
341
blocks/bar-graph/src/edit.js
Normal file
341
blocks/bar-graph/src/edit.js
Normal file
@ -0,0 +1,341 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import {
|
||||
PanelBody,
|
||||
Panel,
|
||||
ColorPicker,
|
||||
RangeControl,
|
||||
ToggleControl,
|
||||
TabPanel,
|
||||
TextControl,
|
||||
Button
|
||||
} from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import LCPDataSelector from '../../../components/LCPDataSelector';
|
||||
import BarGraph from './components/BarGraph';
|
||||
import LCPDimensionControl from '../../../components/LCPDimensionControl';
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const {
|
||||
chartHeight,
|
||||
chartWidth,
|
||||
barColor,
|
||||
barOpacity,
|
||||
backgroundColor,
|
||||
showGridY,
|
||||
gridColor,
|
||||
chartData,
|
||||
dataSource,
|
||||
displayChartTitle,
|
||||
chartTitle,
|
||||
allowDownload,
|
||||
downloadMaxWidth,
|
||||
showSorting,
|
||||
showFiltering,
|
||||
showBarValues,
|
||||
showGridX,
|
||||
gridWidth,
|
||||
xAxisLabel,
|
||||
yAxisLabel
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
const handleDataChange = (newData) => {
|
||||
console.log('New data:', newData); // Debug log
|
||||
setAttributes({ chartData: newData });
|
||||
};
|
||||
|
||||
const handleDataSourceChange = (newSource) => {
|
||||
setAttributes({
|
||||
dataSource: newSource,
|
||||
chartData: {} // Reset data when source changes
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
// Get the SVG element
|
||||
const svg = document.querySelector('.bar-graph svg');
|
||||
if (!svg) return;
|
||||
|
||||
// Create a canvas
|
||||
const canvas = document.createElement('canvas');
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const DOMURL = window.URL || window.webkitURL || window;
|
||||
const url = DOMURL.createObjectURL(svgBlob);
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
// Set canvas dimensions
|
||||
canvas.width = svg.width.baseVal.value;
|
||||
canvas.height = svg.height.baseVal.value;
|
||||
|
||||
// Draw background
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = backgroundColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw the image
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// Convert to blob and download
|
||||
canvas.toBlob((blob) => {
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = downloadUrl;
|
||||
a.download = 'bar-graph.png';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
DOMURL.revokeObjectURL(url);
|
||||
}, 'image/png');
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
};
|
||||
|
||||
// Debug log to check chartData
|
||||
console.log('Chart data:', chartData);
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InspectorControls>
|
||||
<TabPanel
|
||||
className="lcp-tab-panel"
|
||||
activeClass="active-tab"
|
||||
tabs={[
|
||||
{
|
||||
name: 'data',
|
||||
title: __('Data Settings', 'lcp'),
|
||||
className: 'tab-data',
|
||||
},
|
||||
{
|
||||
name: 'appearance',
|
||||
title: __('Appearance', 'lcp'),
|
||||
className: 'tab-appearance',
|
||||
},
|
||||
{
|
||||
name: 'tools',
|
||||
title: __('Tools Settings', 'lcp'),
|
||||
className: 'tab-tools',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{(tab) => {
|
||||
if (tab.name === 'data') {
|
||||
return (
|
||||
<Panel>
|
||||
<PanelBody title="Data Settings">
|
||||
<LCPDataSelector
|
||||
value={chartData}
|
||||
onChange={handleDataChange}
|
||||
dataSource={dataSource}
|
||||
onDataSourceChange={handleDataSourceChange}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody title="Chart Settings">
|
||||
<ToggleControl
|
||||
label={__('Display Chart Title', 'lcp')}
|
||||
checked={displayChartTitle}
|
||||
onChange={(value) => setAttributes({ displayChartTitle: value })}
|
||||
/>
|
||||
{displayChartTitle && (
|
||||
<TextControl
|
||||
label={__('Chart Title', 'lcp')}
|
||||
value={chartTitle}
|
||||
onChange={(value) => setAttributes({ chartTitle: value })}
|
||||
/>
|
||||
)}
|
||||
<LCPDimensionControl
|
||||
label={__('Chart Width', 'lcp')}
|
||||
value={chartWidth}
|
||||
onChange={(value) => setAttributes({ chartWidth: value })}
|
||||
/>
|
||||
<LCPDimensionControl
|
||||
label={__('Chart Height', 'lcp')}
|
||||
value={chartHeight}
|
||||
onChange={(value) => setAttributes({ chartHeight: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody title="Appearance">
|
||||
<div className="components-base-control">
|
||||
<label className="components-base-control__label">
|
||||
{__('Bar Color', 'lcp')}
|
||||
</label>
|
||||
<ColorPicker
|
||||
color={barColor}
|
||||
onChangeComplete={(color) => setAttributes({ barColor: color.hex })}
|
||||
/>
|
||||
</div>
|
||||
<RangeControl
|
||||
label={__('Bar Opacity', 'lcp')}
|
||||
value={barOpacity}
|
||||
onChange={(value) => setAttributes({ barOpacity: value })}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
/>
|
||||
<div className="components-base-control">
|
||||
<label className="components-base-control__label">
|
||||
{__('Background Color', 'lcp')}
|
||||
</label>
|
||||
<ColorPicker
|
||||
color={backgroundColor}
|
||||
onChangeComplete={(color) => setAttributes({ backgroundColor: color.hex })}
|
||||
/>
|
||||
</div>
|
||||
<ToggleControl
|
||||
label={__('Show Bar Values', 'lcp')}
|
||||
checked={showBarValues}
|
||||
onChange={(value) => setAttributes({ showBarValues: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody title="Grid Settings">
|
||||
<TextControl
|
||||
label={__('X-Axis Label', 'lcp')}
|
||||
value={xAxisLabel}
|
||||
onChange={(value) => setAttributes({ xAxisLabel: value })}
|
||||
/>
|
||||
<TextControl
|
||||
label={__('Y-Axis Label', 'lcp')}
|
||||
value={yAxisLabel}
|
||||
onChange={(value) => setAttributes({ yAxisLabel: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Show X-Axis Grid', 'lcp')}
|
||||
checked={showGridX}
|
||||
onChange={(value) => setAttributes({ showGridX: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Show Y-Axis Grid', 'lcp')}
|
||||
checked={showGridY}
|
||||
onChange={(value) => setAttributes({ showGridY: value })}
|
||||
/>
|
||||
{(showGridX || showGridY) && (
|
||||
<>
|
||||
<div className="components-base-control">
|
||||
<label className="components-base-control__label">
|
||||
{__('Grid Color', 'lcp')}
|
||||
</label>
|
||||
<ColorPicker
|
||||
color={gridColor}
|
||||
onChangeComplete={(color) => setAttributes({ gridColor: color.hex })}
|
||||
/>
|
||||
</div>
|
||||
<RangeControl
|
||||
label={__('Grid Width', 'lcp')}
|
||||
value={gridWidth}
|
||||
onChange={(value) => setAttributes({ gridWidth: value })}
|
||||
min={1}
|
||||
max={5}
|
||||
step={1}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
if (tab.name === 'appearance') {
|
||||
return (
|
||||
<PanelBody>
|
||||
|
||||
</PanelBody>
|
||||
);
|
||||
}
|
||||
if (tab.name === 'tools') {
|
||||
return (
|
||||
<PanelBody>
|
||||
<ToggleControl
|
||||
label={__('Allow Download', 'lcp')}
|
||||
checked={allowDownload}
|
||||
onChange={(value) => setAttributes({ allowDownload: value })}
|
||||
/>
|
||||
{allowDownload && (
|
||||
<TextControl
|
||||
type="number"
|
||||
label={__('Max Download Width (px)', 'lcp')}
|
||||
value={parseInt(downloadMaxWidth)}
|
||||
onChange={(value) => setAttributes({ downloadMaxWidth: `${value}px` })}
|
||||
min={100}
|
||||
max={5000}
|
||||
/>
|
||||
)}
|
||||
<ToggleControl
|
||||
label={__('Show Sorting Options', 'lcp')}
|
||||
checked={showSorting}
|
||||
onChange={(value) => setAttributes({ showSorting: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Show Filtering Options', 'lcp')}
|
||||
checked={showFiltering}
|
||||
onChange={(value) => setAttributes({ showFiltering: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</TabPanel>
|
||||
</InspectorControls>
|
||||
|
||||
{allowDownload && (
|
||||
<div className="lcp-bar-graph-toolbar">
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={handleDownload}
|
||||
icon="download"
|
||||
>
|
||||
{__('Download Graph', 'lcp')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{chartData && Object.keys(chartData).length > 0 ? (
|
||||
<BarGraph
|
||||
data={chartData}
|
||||
height={chartHeight}
|
||||
width={chartWidth}
|
||||
backgroundColor={backgroundColor}
|
||||
defaultBarColor={barColor}
|
||||
barOpacity={barOpacity}
|
||||
showGridX={showGridX}
|
||||
showGridY={showGridY}
|
||||
gridColor={gridColor}
|
||||
gridWidth={gridWidth}
|
||||
title={displayChartTitle ? chartTitle : ''}
|
||||
showSorting={showSorting}
|
||||
showFiltering={showFiltering}
|
||||
showBarValues={showBarValues}
|
||||
xAxisLabel={xAxisLabel}
|
||||
yAxisLabel={yAxisLabel}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="lcp-bar-graph-placeholder"
|
||||
style={{
|
||||
height: chartHeight,
|
||||
width: chartWidth,
|
||||
backgroundColor: backgroundColor,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '2px dashed #ccc',
|
||||
borderRadius: '4px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
{__('Please add data using the Data Settings panel', 'lcp')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user