Added tabbed interface for mutliple LCPDataGrid.js components
This commit is contained in:
Jeremy Rangel
@ -3,12 +3,14 @@ import { AgGridReact } from 'ag-grid-react';
|
||||
import 'ag-grid-community/styles/ag-grid.css';
|
||||
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
||||
|
||||
const LCPDataGrid = () => {
|
||||
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 LCPDataGrid = ({dataset}) => {
|
||||
// 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
|
||||
const getDataType = (value) => {
|
||||
if (typeof value === 'number' && !isNaN(value)) {
|
||||
|
||||
69
blocks/components/LCPDataGridHeader.js
Normal file
69
blocks/components/LCPDataGridHeader.js
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const LCPDataGridHeader = (props) => {
|
||||
const { displayName, column, updateData, sort, menu } = props;
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [newHeader, setNewHeader] = useState(displayName);
|
||||
const colId = column.colId;
|
||||
const handleEditClick = () => {
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
setEditing(false);
|
||||
if (updateData && typeof updateData === 'function') {
|
||||
updateData(newHeader); // Save the new header name
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
setNewHeader(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="custom-header">
|
||||
|
||||
{/* Column ID
|
||||
<div>
|
||||
<span style={{ marginRight: '8px' }}>
|
||||
<strong>{colId}</strong>
|
||||
</span>
|
||||
</div>*/}
|
||||
{/* Editable Header Text */}
|
||||
{/* Icon */}
|
||||
<span style={{ marginRight: '8px' }}>
|
||||
<img src="your-icon-path.svg" alt="icon" style={{ width: '20px', height: '20px' }} />
|
||||
</span>
|
||||
{editing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={newHeader}
|
||||
onBlur={handleBlur}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '14px', padding: '2px 5px', width: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={handleEditClick}
|
||||
style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: '16px' }}
|
||||
>
|
||||
{newHeader}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Sorting *
|
||||
<span style={{ marginLeft: '8px' }}>
|
||||
{sort === 'asc' && <span>↑</span>}
|
||||
{sort === 'desc' && <span>↓</span>}
|
||||
</span> */}
|
||||
|
||||
{/* Additional Menu *
|
||||
<span style={{ marginLeft: '8px' }}>
|
||||
<button onClick={menu}>Menu</button>
|
||||
</span> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LCPDataGridHeader;
|
||||
@ -1,344 +1,69 @@
|
||||
import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
|
||||
import { TextControl, Button, Modal, SelectControl, ToggleControl } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { Button, Modal } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import LCPDataGrid from './LCPDataGrid';
|
||||
import LCPDataUploader from './LCPDataUploader';
|
||||
|
||||
const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes, chartType }) => {
|
||||
const LCPDatasetBuilder = ({ attributes }) => {
|
||||
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 = getAvailableColumns();
|
||||
setOptions(columns.map(col => ({
|
||||
label: col.name,
|
||||
value: col.key
|
||||
})));
|
||||
}
|
||||
}, [chartData]);
|
||||
|
||||
// Get available columns from chartData
|
||||
const getAvailableColumns = () => {
|
||||
if (!chartData.length) return [];
|
||||
|
||||
// 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
|
||||
const getColumnOptions = (columns, typeFilter = null) => {
|
||||
return columns
|
||||
.filter(col => {
|
||||
if (!typeFilter) return true;
|
||||
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.name, // Use the column name from first row
|
||||
value: col.key // Use the field key for internal reference
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDataChange = (newData) => {
|
||||
console.log('DatasetBuilder updating chartData:', newData);
|
||||
onChange(newData);
|
||||
};
|
||||
|
||||
const downloadCSV = useCallback(() => {
|
||||
if (!chartData || chartData.length === 0) return;
|
||||
|
||||
// Get all columns except internal ones
|
||||
const columns = Object.keys(chartData[0]).filter(key => !['ID', 'Parent'].includes(key));
|
||||
|
||||
// Create CSV header
|
||||
const header = columns.join(',');
|
||||
|
||||
// Create CSV rows
|
||||
const rows = chartData.map(row =>
|
||||
columns.map(col => {
|
||||
let value = row[col] || '';
|
||||
// Handle special characters in CSV
|
||||
if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
|
||||
value = `"${value.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return value;
|
||||
}).join(',')
|
||||
).join('\n');
|
||||
|
||||
// Combine header and rows
|
||||
const csv = `${header}\n${rows}`;
|
||||
|
||||
// Create and trigger download
|
||||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', 'chart-data.csv');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}, [chartData]);
|
||||
|
||||
// Get default value for valueColumn
|
||||
const defaultValueColumn = useMemo(() => {
|
||||
return attributes.valueColumn || (options[0]?.value || '');
|
||||
}, [attributes.valueColumn, options]);
|
||||
|
||||
// Get all available columns
|
||||
const availableColumns = getAvailableColumns();
|
||||
|
||||
// Get all column options
|
||||
const allOptions = getColumnOptions(availableColumns);
|
||||
|
||||
// Get numeric column options for bar chart value
|
||||
const numericOptions = getColumnOptions(availableColumns, 'number');
|
||||
|
||||
// Determine which options to use for value column
|
||||
const valueColumnOptions = chartType === 'bar' ? numericOptions : allOptions;
|
||||
|
||||
// Add "None" option for optional fields
|
||||
const optionalOptions = [{ label: __('None', 'lcp-visualize'), value: '' }, ...allOptions];
|
||||
const [activeTab, setActiveTab] = useState(0); // Track the active tab
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleEditClick}
|
||||
onClick={() => setIsOpen(true)}
|
||||
style={{ marginBottom: '10px', width: '100%' }}
|
||||
>
|
||||
{__('Edit Dataset', 'lcp-visualize')}
|
||||
</Button>
|
||||
|
||||
{isOpen && (
|
||||
<Modal
|
||||
onRequestClose={() => setIsOpen(false)}
|
||||
title="Dataset Builder"
|
||||
title={__('Dataset Builder', 'lcp-visualize')}
|
||||
style={{ width: '90vw', height: '90vh' }}
|
||||
>
|
||||
<div style={{ height: 'calc(90vh - 40px)', padding: '20px', display: 'flex', gap: '20px', marginBottom: '20px' }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<LCPDataGrid
|
||||
chartData={chartData}
|
||||
onDataChange={handleDataChange}
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
columnTypes={attributes.columnTypes}
|
||||
onColumnTypeChange={(field, type) => {
|
||||
const newColumnTypes = {
|
||||
...attributes.columnTypes,
|
||||
[field]: type
|
||||
};
|
||||
|
||||
setAttributes({
|
||||
columnTypes: newColumnTypes,
|
||||
// If we're changing from a numeric type and this is the value column, reset it
|
||||
valueColumn: field === attributes.valueColumn &&
|
||||
type !== 'number' &&
|
||||
chartType === 'bar' ? '' : attributes.valueColumn
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '300px',
|
||||
padding: '16px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px'
|
||||
}}>
|
||||
<SelectControl
|
||||
label={__('Value Column', 'lcp-visualize')}
|
||||
help={chartType === 'bar' ?
|
||||
__('Select a numeric column for bar heights', 'lcp-visualize') :
|
||||
__('Column to use for values', 'lcp-visualize')
|
||||
}
|
||||
value={attributes.valueColumn || ''}
|
||||
options={valueColumnOptions}
|
||||
onChange={(value) => setAttributes({ valueColumn: value })}
|
||||
/>
|
||||
{chartType === 'bar' && valueColumnOptions.length === 0 && (
|
||||
<div style={{ color: '#cc1818', marginTop: '4px' }}>
|
||||
{__('Please set at least one column type to Number to use as the value column', 'lcp-visualize')}
|
||||
</div>
|
||||
)}
|
||||
<SelectControl
|
||||
label={__('Labels Column', 'lcp-visualize')}
|
||||
help={__('Column to use for bar labels', 'lcp-visualize')}
|
||||
value={attributes.labelsColumn || (options[0]?.value || '')}
|
||||
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')}
|
||||
help={__('Column containing bar colors (optional)', 'lcp-visualize')}
|
||||
value={attributes.colorColumn || ''}
|
||||
options={optionalOptions}
|
||||
onChange={(value) => setAttributes({ colorColumn: value })}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Popover Content Column', 'lcp-visualize')}
|
||||
help={__('Column containing HTML content for popovers (optional)', 'lcp-visualize')}
|
||||
value={attributes.popoverColumn || ''}
|
||||
options={optionalOptions}
|
||||
onChange={(value) => setAttributes({ popoverColumn: value })}
|
||||
/>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={downloadCSV}
|
||||
icon={
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style={{ fill: 'currentColor' }}>
|
||||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||||
</svg>
|
||||
}
|
||||
<div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
|
||||
{/* Tabs */}
|
||||
<div style={{ display: 'flex', marginBottom: '20px' }}>
|
||||
{attributes.datasets.map((dataset, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveTab(index)} // Set the active tab
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
margin: '0 5px',
|
||||
backgroundColor: activeTab === index ? '#007cba' : '#f1f1f1',
|
||||
color: activeTab === index ? 'white' : 'black',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.3s ease',
|
||||
}}
|
||||
>
|
||||
{__('Download CSV', 'lcp-visualize')}
|
||||
</Button>
|
||||
</div>
|
||||
{dataset.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Render all the LCPDataGrid components */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{attributes.datasets.map((dataset, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: activeTab === index ? 'block' : 'none', // Show only the active tab
|
||||
transition: 'display 0.3s ease',
|
||||
}}
|
||||
>
|
||||
<LCPDataGrid dataset={dataset.data} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user