Added support for zooming X-Axis on bar graph

components/LCPDatasetBuilder.js

@@ -10,6 +10,7 @@ import {
     Card,
     CardBody,
     Popover,
+    TextareaControl
 } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
@@ -22,6 +23,7 @@ const ItemTypes = {
 
 const DatasetItem = ({ item, datasetKey, moveItem, updateItem, items, onDelete }) => {
     const [showColorPicker, setShowColorPicker] = useState(false);
+    const [showHtmlEditor, setShowHtmlEditor] = useState(false);
     const ref = useRef(null);
 
     const [{ isDragging }, drag] = useDrag({
@@ -133,6 +135,13 @@ const DatasetItem = ({ item, datasetKey, moveItem, updateItem, items, onDelete }
                                     </Popover>
                                 )}
                             </div>
+                            <Button
+                                variant="secondary"
+                                isSmall
+                                onClick={() => setShowHtmlEditor(true)}
+                            >
+                                {__('HTML', 'lcp-data-blocks')}
+                            </Button>
                             <Button
                                 variant="secondary"
                                 isDestructive
@@ -149,6 +158,23 @@ const DatasetItem = ({ item, datasetKey, moveItem, updateItem, items, onDelete }
                     </CardBody>
                 </Card>
             </div>
+            {showHtmlEditor && (
+                <Modal
+                    title={__('Edit HTML Content', 'lcp-data-blocks')}
+                    onRequestClose={() => setShowHtmlEditor(false)}
+                >
+                    <div style={{ padding: '20px' }}>
+                        <TextareaControl
+                            value={item.popoverHtml || ''}
+                            onChange={(content) => {
+                                updateItem(datasetKey, item.id, 'popoverHtml', content);
+                            }}
+                            rows={10}
+                            style={{ width: '100%', minHeight: '200px', fontFamily: 'monospace' }}
+                        />
+                    </div>
+                </Modal>
+            )}
             {/* Render child items */}
             {childItems.map(childItem => (
                 <DatasetItem