Initial

2025-01-21 18:41:51 -08:00
commit dd4bd0caf5
26 changed files with 70922 additions and 0 deletions
--- a/blocks/bar-graph/src/edit.js
+++ b/blocks/bar-graph/src/edit.js
@ -0,0 +1,78 @@
+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>
+    );
+}