jrangel/lcp-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored LCPDataGrid

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-24 03:06:04 -08:00
parent 23944b0052
commit be3a4fb9ff
12 changed files with 427 additions and 689 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
blocks/bar-graph/build/block.json
View File

@ -13,14 +13,7 @@
"attributes": {
"columnTypes": {
"type": "object",
"default": {
"ID": "lcpText",
"Label": "lcpText",
"Value": "lcpNumber",
"Color": "lcpColor",
"Content": "lcpText",
"Parent": "lcpText"
}
"default": {}
},
"enableStackedBars": {
"type": "boolean",
@ -67,6 +60,14 @@
}
]
},
"enableGroupedBars": {
"type": "boolean",
"default": false
},
"groupedBarsColumn": {
"type": "string",
"default": ""
},
"chartHeight": {
"type": "string",
"default": "400px"
@ -206,6 +207,14 @@
"yGridColor": {
"type": "string",
"default": "#e0e0e0"
},
"includeDataChart": {
"type": "boolean",
"default": false
},
"allowChartDataDownload": {
"type": "boolean",
"default": false
}
},
"textdomain": "lcp-visualize",

2
blocks/bar-graph/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '97d348e4919de980ad6b');
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'a5fc7ad18ecfe8ed81b6');

2
blocks/bar-graph/build/index.js
View File

File diff suppressed because one or more lines are too long

23
blocks/bar-graph/src/block.json
View File

@ -14,12 +14,7 @@
"columnTypes": {
"type": "object",
"default": {
"ID": "lcpText",
"Label": "lcpText",
"Value": "lcpNumber",
"Color": "lcpColor",
"Content": "lcpText",
"Parent": "lcpText"
}
},
"enableStackedBars": {
@ -53,6 +48,14 @@
{ "ID": "lcpDatapoint-2", "Label": "Sample 2", "Value": 50, "Color": "#ff0000", "Content": "<p>Second item</p>", "Parent": "lcpDatapoint-1" }
]
},
"enableGroupedBars": {
"type": "boolean",
"default": false
},
"groupedBarsColumn": {
"type": "string",
"default": ""
},
"chartHeight": {
"type": "string",
"default": "400px"
@ -192,6 +195,14 @@
"yGridColor" :{
"type": "string",
"default": "#e0e0e0"
},
"includeDataChart" :{
"type": "boolean",
"default": false
},
"allowChartDataDownload" :{
"type": "boolean",
"default": false
}
},
"textdomain": "lcp-visualize",

33
blocks/bar-graph/src/edit.js
View File

@ -18,34 +18,13 @@ export default function Edit({ attributes, setAttributes }) {
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Categokhkjhkjhkjhky 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 3", color: "#0000ff" }
{ Label: "Cat 2", color: "#00ff00" },
{ Label: "Coy 1", color: "#ff0000" },
];
const {
@ -64,7 +43,9 @@ export default function Edit({ attributes, setAttributes }) {
hierarchicalSource = 'parent',
hierarchicalColumnOrder = '',
renderLegend = false,
toolbarLocation = 'top'
toolbarLocation = 'top',
enableGroupedBars = false,
groupedBarsColumn = ''
} = attributes;
const blockProps = useBlockProps();

23
blocks/components/LCPChartBlockSettings.js
View File

@ -28,7 +28,9 @@ const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
renderYGrid,
xGridColor,
yGridColor,
legendFontSize
legendFontSize,
includeDataChart,
allowChartDataDownload
} = attributes;
// Set local state for legend location and alignment (for UI updates)
@ -53,7 +55,24 @@ const LCPChartBlockSettings = ({ attributes, setAttributes }) => {
// Render the component
return (
<div>
{/* Grid Settings Panel */}
{/* Front-end Chart Settings */}
<PanelBody title={__('Grid', 'lcp')} initialOpen={false}>
{/* Render the chart on the front-end */}
<ToggleControl
label={__('Include Data Chart', 'lcp')}
checked={includeDataChart}
onChange={(value) =>
setAttributes({ includeDataChart: value })}
/>
{/* Allow chart data download */}
<ToggleControl
label={__('Allow Chart Data Download', 'lcp')}
checked={allowChartDataDownload}
onChange={(value) =>
setAttributes({ allowChartDataDownload: value })}
/>
</PanelBody>
{/* Grid Settings Panel */}
<PanelBody title={__('Grid', 'lcp')} initialOpen={false}>
{/* Render X-Grid */}
<ToggleControl

703
blocks/components/LCPDataGrid.js
View File

@ -1,594 +1,179 @@
import { useMemo, useCallback, useRef, useState } from '@wordpress/element';
import { Popover, Button, Modal, SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useRef, useEffect } from '@wordpress/element';
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}`;
};
const LCPDataGrid = () => {
const gridData = [
{ Department2: 'Sheriffs Office 2', Budget: '150000' },
{ Department2: 'Treasurer2', Budget: '10000' },
{ Department2: 'Assessor2', Budget: '40000' },
];
// 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';
};
// Helper function to convert index to letters, accounting for 'A1', 'B1', 'C1', etc.
const getColumnLabel = (index) => {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let label = '';
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>
);
};
while (index >= 0) {
label = alphabet[index % 26] + label;
index = Math.floor(index / 26) - 1;
}
return label;
};
const ParentCellRenderer = (props) => {
if (!props.data || !props.data.ID) {
return null;
function lcpDataTypeParser(params) {
if (params.node.rowPinned) {
return params.newValue;
} else {
return Number(params.newValue);
}
}
// 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
// Create columnDefs dynamically
const [columnDefs, setColumnDefs] = useState([]);
const [pinnedTopRowData, setPinnedTopRowData] = useState([]);
useEffect(() => {
if (columnDefs.length > 0) return; // Prevent rerun if columnDefs already set
if (gridData.length > 0) {
const keys = Object.keys(gridData[0]); // Get the keys from the first row (Department2, Budget, etc.)
const columns = keys.map((key, index) => {
return {
headerName: getColumnLabel(index), // 'A', 'B', 'C', ...
field: key, // Field will match the key (Department2, Budget, etc.)
valueParser: lcpDataTypeParser,
};
});
}
});
const handleChange = (newValue) => {
if (props.context && props.context.handleParentChange) {
props.context.handleParentChange(props.data, newValue);
}
};
// Set the pinned top row data with the actual field names (like 'Department2', 'Budget')
const topRowData = keys.reduce((acc, key) => {
acc[key] = key; // Set key as the value in top row (use field names)
return acc;
}, {});
return (
<SelectControl
value={props.data.Parent || ''}
options={options}
onChange={handleChange}
/>
);
};
// Ensure pinnedTopRowData is set with correct data
setPinnedTopRowData([topRowData]);
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
// Add the row number column as the first column
const rowNumberColumn = {
headerName: '',
valueGetter: (params) => {
const rowIndex = params.node.rowPinned ? params.node.rowIndex + 1 : params.node.rowIndex + 2;
return rowIndex;
},
type: currentType,
editable: key !== 'ID',
sortable: true,
filter: true
suppressMovable: true,
editable: false,
filter: false,
sortable: false,
width: 45,
resizable: false,
flex: 0,
cellStyle: { backgroundColor: '#e0e0e0' },
};
});
// 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
};
setColumnDefs([rowNumberColumn, ...columns]); // Set columns along with row number column
}
}, [gridData, columnDefs]); // R
return [...regularColumns, parentColumn];
}, [chartData, migratedColumnTypes, handleColumnTypeChange, handleHeaderChange, guessColumnType, handleParentChange]);
const [rowData] = useState(gridData);
const defaultColDef = useMemo(() => ({
// AG Grid instance reference
const gridRef = useRef(null);
const [gridApi, setGridApi] = useState(null); // Store grid API in state
// Button click handler to add a new row
const addRow = () => {
if (gridApi) {
const newRow = {}; // Empty Row
// Use the grid API to add the new row
gridApi.applyTransaction({ add: [newRow] });
} else {
console.log('Grid is not ready yet');
}
};
// Default Column Properties
const defaultColDef = {
flex: 1,
minWidth: 100,
editable: true,
minWidth: 45,
editable: (params) => {
if (params.node.rowPinned) {
return false;
} else {
return 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');
const headerCell = target.closest('.ag-header-cell');
if (rowCell) {
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: event.clientY,
left: event.clientX,
},
rowIndex: rowNode.rowIndex,
totalRows: gridRef.current.api.getDisplayedRowCount()
});
} else if (headerCell) {
const rect = headerCell.getBoundingClientRect();
const colId = headerCell.getAttribute('col-id');
if (!colId) return;
setContextMenu({
type: 'column',
position: {
top: event.clientY,
left: event.clientX,
},
colId: colId
});
suppressMovable: true,
cellDataType: false, //By default column can be any data type
cellStyle: (params) => {
if (params.node.rowPinned) {
return { backgroundColor: 'rgb(197, 219, 229)' };
}
}
}, []);
};
const handleRowAction = useCallback((action) => {
const newData = [...chartData];
const rowIndex = contextMenu.rowIndex;
// Create empty row with all existing columns
const emptyRow = { ID: generateId() };
if (chartData.length > 0) {
const columns = Array.from(new Set(
chartData.flatMap(item => Object.keys(item))
));
columns.forEach(col => {
if (col === 'ID') return;
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] = '';
}
});
const gridOptions = {
rowDragManaged: true,
animateRows: true,
rowHeight: 35,
getRowStyle: (params) => {
if (params.node.rowPinned) {
return { backgroundColor: 'rgb(197, 219, 229)' }; // Light gray for pinned rows
}
return null; // No special style for non-pinned rows
}
};
switch (action) {
case 'add-above':
newData.splice(rowIndex, 0, emptyRow);
break;
case 'add-below':
newData.splice(rowIndex + 1, 0, emptyRow);
break;
case 'delete':
newData.splice(rowIndex, 1);
break;
}
const onGridReady = (params) => {
// Store the grid API when the grid is ready
setGridApi(params.api);
};
onDataChange(newData);
setContextMenu(null);
}, [chartData, onDataChange, contextMenu]);
// Reset row number on sorted
const onSortChanged = (e) => {
e.api.refreshCells();
};
const handleColumnAction = useCallback((action) => {
if (!contextMenu || !contextMenu.colId) return;
const newData = [...chartData];
const colId = contextMenu.colId;
switch (action) {
case 'delete':
// Remove the column from all rows
newData.forEach(row => {
const { [colId]: removed, ...rest } = row;
Object.assign(row, rest);
});
break;
case 'add-left':
case 'add-right':
// Get all existing column names
const existingColumns = Object.keys(chartData[0] || {});
// Find the next available column number
let nextNumber = 1;
while (existingColumns.includes(`Column${nextNumber}`)) {
nextNumber++;
}
const newColId = `Column${nextNumber}`;
const insertIndex = columnDefs.findIndex(col => col.field === colId);
const finalIndex = action === 'add-right' ? insertIndex + 1 : insertIndex;
// Add the new column to all rows
newData.forEach(row => {
row[newColId] = '';
});
break;
}
onDataChange(newData);
setContextMenu(null);
}, [chartData, onDataChange, contextMenu, columnDefs]);
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]);
// Reset row number on filtered
const onFilterChanged = (e) => {
e.api.refreshCells();
};
return (
<div
className="ag-theme-alpine"
style={{ height: '400px', width: '100%' }}
onContextMenu={handleContextMenu}
>
<div>
<div
id="lcp-data-grid"
className="ag-theme-alpine"
style={{ width: '100%', height: '300px' }}
>
<AgGridReact
ref={gridRef}
columnDefs={columnDefs}
rowData={rowData}
defaultColDef={defaultColDef}
gridOptions={gridOptions}
pinnedTopRowData={pinnedTopRowData}
pinnedLeftColCount={1}
onSortChanged={onSortChanged}
onFilterChanged={onFilterChanged}
onGridReady={onGridReady}
/>
</div>
<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.position.top,
left: contextMenu.position.left,
width: 0,
height: 0,
}}
>
<div style={{ padding: '8px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
{contextMenu.type === 'row' && (
<>
<Button
variant="secondary"
onClick={() => handleRowAction('add-above')}
>
{__('Add Row Above', 'lcp-visualize')}
</Button>
<Button
variant="secondary"
onClick={() => handleRowAction('add-below')}
>
{__('Add Row Below', 'lcp-visualize')}
</Button>
<Button
variant="secondary"
onClick={() => handleRowAction('delete')}
>
{__('Delete Row', 'lcp-visualize')}
</Button>
</>
)}
{contextMenu.type === 'column' && (
<>
<Button
variant="secondary"
onClick={() => handleColumnAction('add-left')}
>
{__('Add Column Left', 'lcp-visualize')}
</Button>
<Button
variant="secondary"
onClick={() => handleColumnAction('add-right')}
>
{__('Add Column Right', 'lcp-visualize')}
</Button>
<Button
variant="secondary"
onClick={() => handleColumnAction('delete')}
>
{__('Delete Column', 'lcp-visualize')}
</Button>
</>
)}
</div>
</Popover>
)}
{/* Button outside the grid */}
<div>
<button onClick={addRow}>Add Row</button>
</div>
</div>
);
};
export default LCPDataGrid;
export default LCPDataGrid;

162
blocks/components/LCPDatasetBuilder.js
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
import { Button, Modal, SelectControl, ToggleControl } from '@wordpress/components';
import { TextControl, Button, Modal, SelectControl, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDataGrid from './LCPDataGrid';
import LCPDataUploader from './LCPDataUploader';
@ -8,16 +8,133 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
const [isOpen, setIsOpen] = useState(false);
const [options, setOptions] = useState([]);
// List of CSS color names
const CSS_COLOR_NAMES = [
'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black',
'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse',
'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan',
'darkgoldenrod', 'darkgray', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen',
'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue',
'darkslategray', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray',
'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite',
'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred',
'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon',
'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen',
'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightsteelblue',
'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue',
'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen',
'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid',
'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff',
'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue',
'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle',
'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen'
];
// Helper function to check if a string is a valid hex color
const isHexColor = (str) => {
return /^#([0-9A-F]{3}){1,2}$/i.test(str) || /^#[0-9A-F]{6}$/i.test(str);
};
// Helper function to check if a string is a valid color name
const isColorName = (str) => {
return CSS_COLOR_NAMES.includes(str.toLowerCase());
};
// Helper function to guess column type based on value
const guessColumnType = useCallback((value) => {
if (value === null || value === undefined) return 'text';
// Handle numeric values
if (typeof value === 'number') return 'number';
if (typeof value === 'string') {
const trimmedValue = value.trim();
// Try parsing as number first
if (!isNaN(trimmedValue) && !isNaN(parseFloat(trimmedValue))) {
return 'number';
}
// Check for colors (hex or named)
if (isHexColor(trimmedValue) || isColorName(trimmedValue)) {
return 'lcpColor';
}
// Check for date
if (!isNaN(Date.parse(trimmedValue))) {
return 'lcpDate';
}
// Check for HTML
if (/<[a-z][\s\S]*>/i.test(trimmedValue)) {
return 'html';
}
}
return 'text';
}, []);
// Function to analyze and update column types
const analyzeColumnTypes = useCallback((data) => {
if (!data || !data.length) return {};
// Get all unique keys except special columns
const keys = Array.from(new Set(
data.flatMap(item => Object.keys(item))
)).filter(key => !['ID', 'Parent'].includes(key));
// For each key, collect all values and determine type
const newTypes = keys.reduce((acc, key) => {
const values = data.map(item => item[key]).filter(v => v != null);
// Try to determine the most appropriate type
const types = values.map(guessColumnType);
// If any value is a number, treat the whole column as number
if (types.includes('number')) {
acc[key] = 'number';
} else {
// Otherwise use the most common type
const typeCounts = types.reduce((counts, type) => {
counts[type] = (counts[type] || 0) + 1;
return counts;
}, {});
acc[key] = Object.entries(typeCounts)
.sort(([,a], [,b]) => b - a)[0][0];
}
return acc;
}, {});
return newTypes;
}, [guessColumnType]);
// Function to update chartData attribute with parsed JSON data from CSV
const handleJsonDataUpdate = (newData) => {
console.log('Received new data from CSV:', newData);
// Update chartData
setAttributes({ chartData: newData });
// Analyze and update column types
const newTypes = analyzeColumnTypes(newData);
setAttributes({ columnTypes: newTypes });
};
// Handle Edit Dataset button click
const handleEditClick = useCallback(() => {
// Update column types before opening the editor
if (chartData?.length > 0) {
const newTypes = analyzeColumnTypes(chartData);
setAttributes({ columnTypes: newTypes });
}
setIsOpen(true);
}, [chartData, analyzeColumnTypes, setAttributes]);
useEffect(() => {
if (chartData && chartData.length > 0) {
const columns = Object.keys(chartData[0]).filter(key => key !== 'lcpId');
setOptions(columns.map(col => ({ label: col, value: col })));
const columns = getAvailableColumns();
setOptions(columns.map(col => ({
label: col.name,
value: col.key
})));
}
}, [chartData]);
@ -25,12 +142,12 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
const getAvailableColumns = () => {
if (!chartData.length) return [];
// Get all unique keys from the data
const columns = Array.from(new Set(
chartData.flatMap(item => Object.keys(item))
)).filter(key => key !== 'lcpId'); // Exclude lcpId column
return columns;
// Get the first row which contains our column names
const columnNames = Object.entries(chartData[0])
.filter(([key]) => !['ID', 'Parent'].includes(key))
.map(([key, value]) => ({ key, name: value }));
return columnNames;
};
// Get column options based on type filter
@ -38,10 +155,17 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
return columns
.filter(col => {
if (!typeFilter) return true;
const columnType = attributes.columnTypes?.[col];
const columnType = attributes.columnTypes?.[col.key];
// Handle both 'number' and 'lcpNumber' for backward compatibility
if (typeFilter === 'number') {
return columnType === 'number';
}
return columnType === typeFilter;
})
.map(col => ({ label: col, value: col }));
.map(col => ({
label: col.name, // Use the column name from first row
value: col.key // Use the field key for internal reference
}));
};
const handleDataChange = (newData) => {
@ -97,7 +221,7 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
const allOptions = getColumnOptions(availableColumns);
// Get numeric column options for bar chart value
const numericOptions = getColumnOptions(availableColumns, 'lcpNumber');
const numericOptions = getColumnOptions(availableColumns, 'number');
// Determine which options to use for value column
const valueColumnOptions = chartType === 'bar' ? numericOptions : allOptions;
@ -107,9 +231,9 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
return (
<div>
<Button
variant="secondary"
onClick={() => setIsOpen(true)}
<Button
variant="secondary"
onClick={handleEditClick}
style={{ marginBottom: '10px', width: '100%' }}
>
{__('Edit Dataset', 'lcp-visualize')}
@ -138,7 +262,7 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
columnTypes: newColumnTypes,
// If we're changing from a numeric type and this is the value column, reset it
valueColumn: field === attributes.valueColumn &&
type !== 'lcpNumber' &&
type !== 'number' &&
chartType === 'bar' ? '' : attributes.valueColumn
});
}}
@ -176,6 +300,12 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
options={options}
onChange={(value) => setAttributes({ labelsColumn: value })}
/>
<TextControl
label={__('Hierarchical Columns', 'lcp')}
help={__('Categorical columns', 'lcp')}
value={attributes.hierarchicalColumnOrder || ''}
onChange={(value) => setAttributes({ hierarchicalColumnOrder: value })}
/>
<LCPDataUploader onJsonDataUpdate={handleJsonDataUpdate} />
<SelectControl
label={__('Color Column', 'lcp-visualize')}

110
blocks/components/LCPLegend.js
View File

@ -16,10 +16,18 @@ const LCPLegend = ({
// Update the container's width when it changes
useEffect(() => {
if (svgRef.current) {
setContainerWidth(svgRef.current.clientWidth);
}
}, [svgRef.current]);
const handleResize = () => {
if (svgRef.current) {
setContainerWidth(svgRef.current.clientWidth); // Measure the width of the container
}
};
handleResize(); // Initial measurement
window.addEventListener('resize', handleResize); // Update on resize
return () => {
window.removeEventListener('resize', handleResize); // Cleanup on component unmount
};
}, []);
useEffect(() => {
if (!items.length || !svgRef.current || containerWidth === 0) return;
@ -27,19 +35,37 @@ const LCPLegend = ({
// Clear any existing content
d3.select(svgRef.current).selectAll("*").remove();
// Variables for item dimensions and row management
const rowHeight = itemSize + spacing;
let currentX = 0;
let currentY = 0;
// Calculate item widths first
const itemWidths = items.map(item => {
const labelWidth = item.Label.length * fontSize * 0.6;
return itemSize + spacing + labelWidth;
});
// Calculate the maximum number of items that can fit per row
const itemWidth = itemSize + spacing + fontSize * 0.6; // Item width (rect + label)
const itemsPerRow = Math.floor(containerWidth / itemWidth); // Items per row based on container width
// Calculate total width of all items
const totalWidth = itemWidths.reduce((sum, width) => sum + width + spacing, 0);
// Calculate optimal number of rows
const availableWidth = containerWidth - (startX * 2);
const minRows = Math.ceil(totalWidth / availableWidth);
// Create arrays to store items for each row
const rows = Array(minRows).fill().map(() => []);
let rowWidths = Array(minRows).fill(0);
// Distribute items across rows to minimize empty space
itemWidths.forEach((width, index) => {
// Find the row with the most remaining space
const rowIndex = rowWidths
.map((rowWidth, i) => ({ width: rowWidth, index: i }))
.sort((a, b) => a.width - b.width)[0].index;
rows[rowIndex].push(index);
rowWidths[rowIndex] += width + spacing;
});
// Create the SVG container
const svg = d3.select(svgRef.current)
.attr('width', '100%')
.style('height', null) // Let height be dynamic
.style('overflow', 'visible');
// Create the legend items group
@ -47,45 +73,39 @@ const LCPLegend = ({
.attr('class', 'legend-group')
.attr('transform', `translate(${startX}, ${startY})`);
// Loop over items to position them
items.forEach((item, i) => {
// Calculate the width of each item (rect + label)
const labelWidth = item.Label.length * fontSize * 0.6; // Approximate label width
const itemWidth = itemSize + spacing + labelWidth; // Total width of the item (rect + label)
// Place items in their calculated positions
rows.forEach((rowItems, rowIndex) => {
let currentX = 0;
const currentY = rowIndex * (itemSize + spacing);
// If the item doesn't fit in the current row, move to the next row
if (i % itemsPerRow === 0 && i !== 0) {
currentX = 0; // Reset X position
currentY += rowHeight; // Move down to next row
}
rowItems.forEach((itemIndex) => {
const item = items[itemIndex];
const labelWidth = item.Label.length * fontSize * 0.6;
// Create the rectangle
legend.append('rect')
.attr('x', currentX)
.attr('y', currentY)
.attr('width', itemSize)
.attr('height', itemSize)
.style('fill', item.color || '#cccccc');
// Create the rectangle (swatch)
legend.append('rect')
.attr('x', currentX)
.attr('y', currentY)
.attr('width', itemSize)
.attr('height', itemSize)
.style('fill', item.color || '#cccccc');
// Create the label
legend.append('text')
.attr('x', currentX + itemSize + spacing)
.attr('y', currentY + itemSize / 2)
.text(item.Label || '')
.style('font-family', fontFamily)
.style('font-size', `${fontSize}px`)
.style('dominant-baseline', 'middle')
.style('fill', '#333333');
// Create the label
legend.append('text')
.attr('x', currentX + itemSize + spacing)
.attr('y', currentY + itemSize / 2)
.text(item.Label || '')
.style('font-family', fontFamily)
.style('font-size', `${fontSize}px`)
.style('dominant-baseline', 'middle')
.style('fill', '#333333');
// Update the current X position for the next item
currentX += itemWidth;
currentX += itemSize + spacing + labelWidth + spacing;
});
});
// Calculate the height of the SVG element based on the number of rows
const totalRows = Math.ceil(items.length / itemsPerRow);
const calculatedHeight = totalRows * rowHeight + startY * 2;
// Set the correct height based on totalRows
// Set the SVG height based on the number of rows
const calculatedHeight = (minRows * (itemSize + spacing)) + (startY * 2);
svg.attr('height', calculatedHeight);
}, [items, containerWidth, itemSize, spacing, startX, startY, fontFamily, fontSize]);

29
blocks/line-graph/build/block.json
View File

@ -5,7 +5,7 @@
"version": "1.0.0",
"title": "Line Graph",
"category": "widgets",
"icon": "chart-bar",
"icon": "chart-line",
"description": "Display data as a line graph using D3.js",
"supports": {
"html": false
@ -48,24 +48,7 @@
},
"chartData": {
"type": "array",
"default": [
{
"ID": "lcpDatapoint-1",
"Label": "Sample 1",
"Value": 100,
"Color": "#007cba",
"Content": "<p>First item</p>",
"Parent": ""
},
{
"ID": "lcpDatapoint-2",
"Label": "Sample 2",
"Value": 50,
"Color": "#ff0000",
"Content": "<p>Second item</p>",
"Parent": "lcpDatapoint-1"
}
]
"default": []
},
"chartHeight": {
"type": "string",
@ -93,15 +76,15 @@
},
"colorColumn": {
"type": "string",
"default": "Color"
"default": "color"
},
"popoverColumn": {
"type": "string",
"default": "Content"
"default": "content"
},
"renderLegend": {
"type": "boolean",
"default": true
"default": false
},
"legendFontSize": {
"type": "string",
@ -157,7 +140,7 @@
},
"toolbarLocation": {
"type": "string",
"default": "bottom"
"default": "top"
},
"toolbarAlignment": {
"type": "string",

2
blocks/line-graph/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '7d02545764a85b66ef48');
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '10f66260923a977161c2');

2
blocks/line-graph/build/index.js
View File

File diff suppressed because one or more lines are too long