Initial
This commit is contained in:
Jeremy Rangel
500
blocks/components/LCPDataGrid.js
Normal file
500
blocks/components/LCPDataGrid.js
Normal file
@ -0,0 +1,500 @@
|
||||
import { useMemo, useCallback, useRef, useState } from '@wordpress/element';
|
||||
import { Popover, Button, Modal, SelectControl } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { AgGridReact } from 'ag-grid-react';
|
||||
import 'ag-grid-community/styles/ag-grid.css';
|
||||
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
||||
|
||||
const generateId = () => {
|
||||
const randomStr = Math.random().toString(36).substring(2, 8);
|
||||
return `lcpDatapoint-${randomStr}`;
|
||||
};
|
||||
|
||||
// Helper function to determine text color based on background
|
||||
const getContrastColor = (hexcolor) => {
|
||||
if (!hexcolor) return 'inherit';
|
||||
const r = parseInt(hexcolor.slice(1, 3), 16);
|
||||
const g = parseInt(hexcolor.slice(3, 5), 16);
|
||||
const b = parseInt(hexcolor.slice(5, 7), 16);
|
||||
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
|
||||
return (yiq >= 128) ? 'black' : 'white';
|
||||
};
|
||||
|
||||
const ColorCellRenderer = (props) => {
|
||||
if (!props.value) return '';
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: props.value,
|
||||
color: getContrastColor(props.value),
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
{props.value}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const ParentCellRenderer = (props) => {
|
||||
if (!props.data || !props.data.ID) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Create options from all available rows except current
|
||||
const options = [
|
||||
{ label: __('None', 'lcp-visualize'), value: '' }
|
||||
];
|
||||
|
||||
// Get all rows from the grid
|
||||
props.api.forEachNode(node => {
|
||||
if (node.data &&
|
||||
node.data.ID &&
|
||||
node.data.ID !== props.data.ID) {
|
||||
options.push({
|
||||
label: node.data.Label || node.data.ID,
|
||||
value: node.data.ID
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleChange = (newValue) => {
|
||||
if (props.context && props.context.handleParentChange) {
|
||||
props.context.handleParentChange(props.data, newValue);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SelectControl
|
||||
value={props.data.Parent || ''}
|
||||
options={options}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const ColumnHeaderComponent = (props) => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [headerName, setHeaderName] = useState(props.displayName);
|
||||
|
||||
const dataTypeOptions = [
|
||||
{ label: __('Text', 'lcp'), value: 'lcpText' },
|
||||
{ label: __('Number', 'lcp'), value: 'lcpNumber' },
|
||||
{ label: __('Color', 'lcp'), value: 'lcpColor' },
|
||||
{ label: __('Date/Time', 'lcp'), value: 'lcpDate' }
|
||||
];
|
||||
|
||||
const handleTypeChange = (newType) => {
|
||||
props.setColumnType(props.column.colId, newType);
|
||||
};
|
||||
|
||||
const handleHeaderChange = (newHeader) => {
|
||||
if (props.onHeaderChange && newHeader !== props.displayName) {
|
||||
props.onHeaderChange(props.column.colId, newHeader);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
handleHeaderChange(headerName);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setHeaderName(props.displayName);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', height: '100%' }}>
|
||||
<span>{props.displayName}</span>
|
||||
<Button
|
||||
isSmall
|
||||
variant="tertiary"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
icon={
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ fill: 'currentColor' }}
|
||||
>
|
||||
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
{isModalOpen && (
|
||||
<Modal
|
||||
title={__('Column Settings', 'lcp')}
|
||||
onRequestClose={handleCancel}
|
||||
style={{ width: '400px' }}
|
||||
>
|
||||
<div style={{ padding: '20px' }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '8px' }}>
|
||||
{__('Column Header', 'lcp')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={headerName}
|
||||
onChange={(e) => setHeaderName(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #757575'
|
||||
}}
|
||||
disabled={props.column.colId === 'ID'}
|
||||
/>
|
||||
</div>
|
||||
<SelectControl
|
||||
label={__('Data Type', 'lcp')}
|
||||
value={props.currentType || 'lcpText'}
|
||||
options={dataTypeOptions}
|
||||
onChange={handleTypeChange}
|
||||
disabled={props.column.colId === 'ID'}
|
||||
/>
|
||||
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
{__('Cancel', 'lcp')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
>
|
||||
{__('Save', 'lcp-visualize')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LCPDataGrid = ({
|
||||
chartData = [],
|
||||
onDataChange,
|
||||
columnTypes,
|
||||
onColumnTypeChange,
|
||||
attributes,
|
||||
setAttributes
|
||||
}) => {
|
||||
const gridRef = useRef();
|
||||
const [contextMenu, setContextMenu] = useState(null);
|
||||
|
||||
// Helper function to guess column type based on value
|
||||
const guessColumnType = useCallback((value) => {
|
||||
if (typeof value === 'number') return 'lcpNumber';
|
||||
if (typeof value === 'string') {
|
||||
if (/^#([0-9A-F]{3}){1,2}$/i.test(value)) return 'lcpColor';
|
||||
if (!isNaN(Date.parse(value))) return 'lcpDate';
|
||||
}
|
||||
return 'lcpText';
|
||||
}, []);
|
||||
|
||||
// Handle parent change
|
||||
const handleParentChange = useCallback((data, newParent) => {
|
||||
const newData = chartData.map(item =>
|
||||
item.ID === data.ID ? { ...item, Parent: newParent } : item
|
||||
);
|
||||
onDataChange(newData);
|
||||
}, [chartData, onDataChange]);
|
||||
|
||||
// Use columnTypes from attributes if available, otherwise use direct columnTypes prop
|
||||
const effectiveColumnTypes = attributes?.columnTypes || columnTypes || {};
|
||||
|
||||
// Convert any old column types to new format
|
||||
const migratedColumnTypes = useMemo(() => {
|
||||
const typeMap = {
|
||||
'textColumn': 'lcpText',
|
||||
'numericColumn': 'lcpNumber',
|
||||
'colorColumn': 'lcpColor',
|
||||
'dateColumn': 'lcpDate'
|
||||
};
|
||||
|
||||
return Object.entries(effectiveColumnTypes).reduce((acc, [key, value]) => {
|
||||
acc[key] = typeMap[value] || value;
|
||||
return acc;
|
||||
}, {});
|
||||
}, [effectiveColumnTypes]);
|
||||
|
||||
const handleColumnTypeChange = useCallback((colId, newType) => {
|
||||
if (setAttributes) {
|
||||
setAttributes({
|
||||
columnTypes: {
|
||||
...migratedColumnTypes,
|
||||
[colId]: newType
|
||||
}
|
||||
});
|
||||
} else if (onColumnTypeChange) {
|
||||
onColumnTypeChange(colId, newType);
|
||||
}
|
||||
}, [migratedColumnTypes, setAttributes, onColumnTypeChange]);
|
||||
|
||||
// Define column type configurations
|
||||
const gridColumnTypes = useMemo(() => ({
|
||||
lcpNumber: {
|
||||
filter: 'agNumberColumnFilter',
|
||||
filterParams: {
|
||||
buttons: ['apply', 'reset'],
|
||||
closeOnApply: true
|
||||
},
|
||||
valueParser: params => {
|
||||
if (!params.newValue) return '';
|
||||
const parsed = parseFloat(params.newValue);
|
||||
return isNaN(parsed) ? '' : parsed;
|
||||
}
|
||||
},
|
||||
lcpText: {
|
||||
filter: 'agTextColumnFilter',
|
||||
filterParams: {
|
||||
buttons: ['apply', 'reset'],
|
||||
closeOnApply: true
|
||||
}
|
||||
},
|
||||
lcpColor: {
|
||||
filter: 'agTextColumnFilter',
|
||||
filterParams: {
|
||||
buttons: ['apply', 'reset'],
|
||||
closeOnApply: true
|
||||
},
|
||||
cellRenderer: ColorCellRenderer,
|
||||
valueParser: params => {
|
||||
if (!params.newValue) return '';
|
||||
return /^#([0-9A-F]{3}){1,2}$/i.test(params.newValue) ?
|
||||
params.newValue.toUpperCase() : '';
|
||||
}
|
||||
},
|
||||
lcpDate: {
|
||||
filter: 'agDateColumnFilter',
|
||||
filterParams: {
|
||||
buttons: ['apply', 'reset'],
|
||||
closeOnApply: true
|
||||
},
|
||||
valueParser: params => {
|
||||
if (!params.newValue) return '';
|
||||
const date = new Date(params.newValue);
|
||||
return isNaN(date.getTime()) ? '' : date.toISOString();
|
||||
}
|
||||
}
|
||||
}), []);
|
||||
|
||||
const handleHeaderChange = useCallback((oldHeader, newHeader) => {
|
||||
if (oldHeader === newHeader || !chartData.length) return;
|
||||
|
||||
// Update the chartData with the new header
|
||||
const newData = chartData.map(row => {
|
||||
const { [oldHeader]: value, ...rest } = row;
|
||||
return {
|
||||
...rest,
|
||||
[newHeader]: value
|
||||
};
|
||||
});
|
||||
|
||||
onDataChange(newData);
|
||||
}, [chartData, onDataChange]);
|
||||
|
||||
// Generate column definitions based on chartData
|
||||
const columnDefs = useMemo(() => {
|
||||
if (!chartData.length) return [];
|
||||
|
||||
// Get all unique keys from the data
|
||||
const allKeys = Array.from(new Set(
|
||||
chartData.flatMap(item => Object.keys(item))
|
||||
)).filter(key => key !== 'Parent'); // Remove Parent from regular columns
|
||||
|
||||
// Create column definitions for regular columns
|
||||
const regularColumns = allKeys.map(key => {
|
||||
const sampleValue = chartData.find(item => item[key] !== undefined)?.[key];
|
||||
const defaultType = guessColumnType(sampleValue);
|
||||
const currentType = migratedColumnTypes[key] || defaultType;
|
||||
|
||||
return {
|
||||
field: key,
|
||||
headerName: key,
|
||||
hide: key === 'ID',
|
||||
headerComponent: ColumnHeaderComponent,
|
||||
headerComponentParams: {
|
||||
displayName: key,
|
||||
onHeaderChange: handleHeaderChange,
|
||||
setColumnType: handleColumnTypeChange,
|
||||
currentType: currentType
|
||||
},
|
||||
type: currentType,
|
||||
editable: key !== 'ID',
|
||||
sortable: true,
|
||||
filter: true
|
||||
};
|
||||
});
|
||||
|
||||
// Add Parent column with ParentCellRenderer
|
||||
const parentColumn = {
|
||||
field: 'Parent',
|
||||
headerName: __('Parent', 'lcp-visualize'),
|
||||
cellRenderer: ParentCellRenderer,
|
||||
cellRendererParams: {
|
||||
context: {
|
||||
handleParentChange
|
||||
}
|
||||
},
|
||||
editable: false,
|
||||
sortable: true,
|
||||
filter: true,
|
||||
minWidth: 200
|
||||
};
|
||||
|
||||
return [...regularColumns, parentColumn];
|
||||
}, [chartData, migratedColumnTypes, handleColumnTypeChange, handleHeaderChange, guessColumnType, handleParentChange]);
|
||||
|
||||
const defaultColDef = useMemo(() => ({
|
||||
flex: 1,
|
||||
minWidth: 100,
|
||||
editable: true,
|
||||
sortable: true,
|
||||
filter: true,
|
||||
resizable: true
|
||||
}), []);
|
||||
|
||||
const rowData = useMemo(() => {
|
||||
return chartData.map(point => ({
|
||||
...point,
|
||||
ID: point.ID || generateId()
|
||||
}));
|
||||
}, [chartData]);
|
||||
|
||||
const handleContextMenu = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
const target = event.target;
|
||||
const rowCell = target.closest('.ag-cell');
|
||||
|
||||
if (!rowCell) return;
|
||||
|
||||
const rect = rowCell.getBoundingClientRect();
|
||||
const rowNode = gridRef.current.api.getRowNode(rowCell.parentElement.getAttribute('row-index'));
|
||||
if (!rowNode || !rowNode.data || !rowNode.data.ID) return;
|
||||
|
||||
setContextMenu({
|
||||
type: 'row',
|
||||
position: { top: rect.bottom, left: rect.left },
|
||||
rowIndex: rowNode.rowIndex,
|
||||
totalRows: gridRef.current.api.getDisplayedRowCount()
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleRowAction = useCallback((action, rowIndex) => {
|
||||
const newData = [...chartData];
|
||||
|
||||
// Create empty row with all existing columns
|
||||
const emptyRow = { ID: generateId() };
|
||||
if (chartData.length > 0) {
|
||||
// Get all columns from existing data
|
||||
const columns = Array.from(new Set(
|
||||
chartData.flatMap(item => Object.keys(item))
|
||||
));
|
||||
|
||||
// Initialize each column with an appropriate empty value
|
||||
columns.forEach(col => {
|
||||
if (col === 'ID') return; // Skip Id as it's already set
|
||||
|
||||
// Get a sample value to determine appropriate empty value
|
||||
const sampleValue = chartData.find(item => item[col] !== undefined)?.[col];
|
||||
|
||||
switch (typeof sampleValue) {
|
||||
case 'number':
|
||||
emptyRow[col] = 0;
|
||||
break;
|
||||
case 'boolean':
|
||||
emptyRow[col] = false;
|
||||
break;
|
||||
default:
|
||||
emptyRow[col] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
switch (action) {
|
||||
case 'add-above':
|
||||
newData.splice(rowIndex - 1, 0, emptyRow);
|
||||
break;
|
||||
case 'add-below':
|
||||
newData.splice(rowIndex, 0, emptyRow);
|
||||
break;
|
||||
case 'delete':
|
||||
newData.splice(rowIndex - 1, 1);
|
||||
break;
|
||||
}
|
||||
|
||||
onDataChange(newData);
|
||||
setContextMenu(null);
|
||||
}, [chartData, onDataChange]);
|
||||
|
||||
const handleCellValueChanged = useCallback((params) => {
|
||||
if (!params.data || !params.data.ID) return;
|
||||
|
||||
const newData = chartData.map(item =>
|
||||
item.ID === params.data.ID ? params.data : item
|
||||
);
|
||||
|
||||
onDataChange(newData);
|
||||
}, [chartData, onDataChange]);
|
||||
|
||||
return (
|
||||
<div className="ag-theme-alpine" style={{ height: '400px', width: '100%' }}>
|
||||
<AgGridReact
|
||||
ref={gridRef}
|
||||
rowData={rowData}
|
||||
columnDefs={columnDefs}
|
||||
defaultColDef={defaultColDef}
|
||||
columnTypes={gridColumnTypes}
|
||||
onCellValueChanged={handleCellValueChanged}
|
||||
suppressRowClickSelection={true}
|
||||
rowSelection="multiple"
|
||||
animateRows={true}
|
||||
context={{
|
||||
handleParentChange
|
||||
}}
|
||||
/>
|
||||
{contextMenu && (
|
||||
<Popover
|
||||
position="bottom left"
|
||||
onClose={() => setContextMenu(null)}
|
||||
anchorRect={{
|
||||
top: contextMenu.mouseEvent.clientY,
|
||||
left: contextMenu.mouseEvent.clientX,
|
||||
width: 0,
|
||||
height: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
const selectedRows = gridRef.current.api.getSelectedRows();
|
||||
const newData = chartData.filter(row => !selectedRows.includes(row));
|
||||
onDataChange(newData);
|
||||
setContextMenu(null);
|
||||
}}
|
||||
>
|
||||
{__('Delete Selected Rows', 'lcp-visualize')}
|
||||
</Button>
|
||||
</div>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LCPDataGrid;
|
||||
Reference in New Issue
Block a user