Added support for hierarchical bar graphs

blocks/bar-graph/src/edit.js

@@ -12,7 +12,8 @@ import {
     TabPanel,
     TextControl,
     Button,
-	Popover	
+	Popover,
+    TextareaControl
 } from '@wordpress/components';
 
 import {useState} from '@wordpress/element';
@@ -50,7 +51,9 @@ export default function Edit({ attributes, setAttributes }) {
         xAxisLabel,
         yAxisLabel,
         chartColorSource,
-        chartCustomColors    } = attributes;
+        chartCustomColors,
+        enableHierarchicalView,
+        selectedParentId    } = attributes;
 
     const blockProps = useBlockProps();
 
@@ -163,6 +166,43 @@ export default function Edit({ attributes, setAttributes }) {
     // Debug log to check chartData
     console.log('Chart data:', chartData);
 
+    // Ensure chartData is an object
+    if (!attributes.chartData || typeof attributes.chartData !== 'object') {
+        setAttributes({ chartData: {} });
+    }
+
+    const updateChartData = (value) => {
+        try {
+            // Attempt to parse the JSON input
+            const parsedData = JSON.parse(value);
+            
+            // Validate the structure
+            if (typeof parsedData === 'object' && parsedData !== null) {
+                // Check if the data follows our expected format
+                let isValid = true;
+                Object.entries(parsedData).forEach(([dataset, items]) => {
+                    if (!Array.isArray(items)) {
+                        isValid = false;
+                    } else {
+                        items.forEach(item => {
+                            if (!item.id || typeof item.id !== 'string') {
+                                isValid = false;
+                            }
+                        });
+                    }
+                });
+
+                if (isValid) {
+                    setAttributes({ chartData: parsedData });
+                } else {
+                    console.error('Invalid data structure');
+                }
+            }
+        } catch (e) {
+            console.error('Invalid JSON:', e);
+        }
+    };
+
     return (
         <div {...blockProps}>
             <InspectorControls>
@@ -192,6 +232,7 @@ export default function Edit({ attributes, setAttributes }) {
                             return (
                                 <Panel>	
 									<PanelBody title="Data Settings">
+
 										<LCPDataSelector
 											value={chartData}
 											onChange={handleDataChange}
@@ -200,6 +241,17 @@ export default function Edit({ attributes, setAttributes }) {
 										/>
 									</PanelBody>
 									<PanelBody title="Chart Settings">
+										<ToggleControl
+											label={__('Enable Hierarchical View', 'lcp')}
+											help={__('Display data hierarchically. Click bars to show their children.', 'lcp')}
+											checked={attributes.enableHierarchicalView}
+											onChange={(value) => {
+                                                setAttributes({ 
+                                                    enableHierarchicalView: value,
+                                                    selectedParentId: null // Reset when toggling
+                                                });
+                                            }}
+										/>
 										<ToggleControl
 											label={__('Display Chart Title', 'lcp')}
 											checked={displayChartTitle}
@@ -439,17 +491,18 @@ export default function Edit({ attributes, setAttributes }) {
                     showGridX={showGridX}
                     showGridY={showGridY}
                     yGridColor={yGridColor}
-					xGridColor={xGridColor}
+                    xGridColor={xGridColor}
                     xGridWidth={xGridWidth}
                     yGridWidth={yGridWidth}
                     title={displayChartTitle ? chartTitle : ''}
-                    showSorting={showSorting}
-                    showFiltering={showFiltering}
                     showBarValues={showBarValues}
                     xAxisLabel={xAxisLabel}
                     yAxisLabel={yAxisLabel}
                     colorSource={chartColorSource}
                     customColors={chartCustomColors}
+                    enableHierarchicalView={enableHierarchicalView}
+                    selectedParentId={selectedParentId}
+                    setAttributes={setAttributes}
                 />
             ) : (
                 <div