Changes to datagrid

blocks/bar-graph/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '81e2f5a896da526cb195');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '6c47b2075da54fd439aa');

blocks/bar-graph/src/block.json

@@ -45,6 +45,10 @@
             "type": "number",
             "default": 1
         },
+        "dataTypes" :{
+            "type": "object",
+            "default" :{}
+        },
         "gridColumnDefinitions": {
             "type": "array",
             "default": [

blocks/bar-graph/src/edit.js

@@ -64,12 +64,12 @@ export default function Edit({ attributes, setAttributes }) {
                         help={__('Select the logic for setting the colors', 'lcp')}
                         value={hierarchicalSource || 'parent'}
                         options={[
-                            { label: 'Parent Column', value: 'parent' },
+                            { label: 'Color Column', value: 'colorColumn' },
-                            { label: 'Column Order', value: 'columnOrder' }
+                            { label: 'Swatch', value: 'swatch' }
                         ]}
                         onChange={(value) => setAttributes({ hierarchicalSource: value })}
                     />
-                    {hierarchicalSource === 'columnOrder' && (
+                    {hierarchicalSource === 'swatch' && (
                         <TextControl
                             label={__('Hierarchical Column Order', 'lcp')}
                             value={hierarchicalColumnOrder}

blocks/components/LCPDataGrid.js

@@ -77,11 +77,7 @@ function lcpCellRenderer(params) {
             console.log('Grid is not ready yet');
         }
     };
-    // let gridData = [
+
-    //     { Department2: 'Sheriffs Office 2', Budget: '150000', MeetAt: '12/12/2025', PreferredColor: '#e0e0e0', PostContent: '<div> </div>' },
-    //     { Department2: 'Treasurer2', Budget: '10000', MeetAt: '12-05', PreferredColor: '#232323', PostContent: '<p> </p>' },
-    //     { Department2: 'Assessor2', Budget: '40000', MeetAt: 1737718512, PreferredColor: 'red', PostContent: '<h1> </h1>' },
-    // ];
 
     const gridData = dataset;
     // Helper function to detect the data type of a value
@@ -224,6 +220,15 @@ const isValidCSSColor = (value) => {
 
     return dataTypes;
 };
+
+    // Use useEffect to update dataTypes whenever data changes
+    useEffect(() => {
+        if (data && data.length > 0) {
+            const detectedDataTypes = detectDataTypes(data);
+            setAttributes({ dataTypes: detectedDataTypes });
+        }
+    }, [data, setAttributes]);
+    
     // Assuming gridData is already populated
     const gridDataTypes = detectDataTypes(gridData);  // This will detect the types of each field
 
@@ -315,11 +320,13 @@ const isValidCSSColor = (value) => {
 
             const columns = keys.map((key, index) => {
                 return {
+                    colId: getColumnLabel(index),  // 'A', 'B', 'C', ...
                     headerName: getColumnLabel(index),  // 'A', 'B', 'C', ...
                     field: key, // Field will match the key (Department2, Budget, etc.)
                     valueParser: lcpDataTypeParser,
                     cellRenderer: lcpCellRenderer, // Reference the custom cell renderer
-                    headerComponent: LCPDataGridHeader
+                    headerComponent: LCPDataGridHeader,
+                    lcpDataType: 'myCustomDataType'  // Add your custom parameter here
                     
                 };
             });
@@ -427,10 +434,10 @@ const isValidCSSColor = (value) => {
                 />
             </div>
 
-            {/* Button outside the grid */}
+            {/* Grid Footer */}
-            <div>
+            <div style={{padding:'15px 0px',display:'flex', flexDirection:'row', justifyContent:'space-between', background:'white'}}>
                 {/* Input to add multiple rows */}
-            <div>
+                <div style={{display:'flex', flexDirection:'row'}}>
                     <input
                         type="number"
                         value={rowsToAdd}

blocks/components/LCPDataGridHeader.js

@@ -4,6 +4,7 @@ import {Icon, calendar } from '@wordpress/icons'; // Make sure to use the correc
 const LCPDataGridHeader = (props) => {
     const { displayName, column, updateData, sort, menu } = props;
     const colId = column.colId;
+    const lcpDataType = column.getColDef().customDataType; // Retrieve custom data type
 
     // Sorting function
     const handleSort = () => {
@@ -20,6 +21,7 @@ const LCPDataGridHeader = (props) => {
             {/* Calendar Icon */}
             <span style={{ marginRight: '8px', display: 'inline-block' }}>
                 <Icon icon={ calendar } />
+                {lcpDataType}
 
             </span>
 
@@ -28,7 +30,7 @@ const LCPDataGridHeader = (props) => {
                 style={{ fontWeight: 'bold', fontSize: '16px' }}
                 onClick={handleSort} // Click header for sorting
             >
-                {displayName}
+               {colId}
             </span>
 
             {/* Sorting Indicators */}

blocks/components/LCPDatasetBuilder.js

@@ -1,4 +1,6 @@
 import { useState, useEffect } from '@wordpress/element';
+import {Icon, chevronDownSmall} from '@wordpress/icons';
+
 import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import LCPDataGrid from './LCPDataGrid';
@@ -49,7 +51,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
             <Button
                 variant="secondary"
                 onClick={() => setIsOpen(true)}
-                style={{ marginBottom: '10px', width: '100%' }}
+                style={{ marginBottom: '10px', width: '100%',  }}
             >
                 {__('Edit Dataset', 'lcp-visualize')}
             </Button>
@@ -58,27 +60,49 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
                 <Modal
                     onRequestClose={() => setIsOpen(false)}
                     title={__('Dataset Builder', 'lcp-visualize')}
-                    style={{ width: '90vw', height: '90vh' }}
+                    style={{ width: '90vw', height: '90vh',
+                        background:'#efefef',
+                        padding:'0px',
+                     }}
                 >
-                    <div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
+                    <div style={{ height: 'calc(90vh - 40px)', padding: '0px' }}>
                         {/* Tabs */}
-                        <div style={{ display: 'flex', marginBottom: '20px' }}>
+                        <div style={{ display: 'flex' }}>
                             {datasets.map((dataset, index) => (
                                 <button
                                     key={index}
+
                                     onClick={() => setActiveTab(index)} // Set the active tab
                                     style={{
-                                        padding: '10px 20px',
+                                        display: 'flex',
-                                        margin: '0 5px',
+                                        alignItems:'center',
-                                        backgroundColor: activeTab === index ? '#007cba' : '#f1f1f1',
+                                        justifyContent:'center',
+                                        position: 'relative',
+                                        minWidth: '100px',
+                                        height: '35px',
+                                        lineHeight: '35px',
+                                        padding: '0 10px',
+                                        margin: '0 3px',
+                                        backgroundColor: '#fff',
+                                        border: '1px solid #ccc',
+                                        borderBottomColor: activeTab === index ? '#fff' : '#ccc',
+                                        borderRadius: '3px',
                                         color: activeTab === index ? 'white' : 'black',
                                         border: '1px solid #ccc',
                                         borderRadius: '5px',
                                         cursor: 'pointer',
                                         transition: 'background-color 0.3s ease',
                                     }}
-                                >
+                                >   <span style={{
+                                    display: 'inline-block', 
+                                    marginRight: '5px',
+                                    color: activeTab === index ? '#333' : '#aaa',
+                                    fontWeight: 'bold'
+                                    }}>
                                         {dataset.name}
+                                    </span>
+                                    <Icon icon={ chevronDownSmall } style={{position:'relative',top:'0px'}} />
+                                    
                                 </button>
                             ))}
                         </div>