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

Added basics of LCPLegend and more controls for blocks. Added boilerplate for lcp/line-graph

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-22 02:34:10 -08:00
parent dd4bd0caf5
commit 23944b0052
29 changed files with 24323 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
blocks/components/LCPDatasetBuilder.js
View File

@ -1,12 +1,19 @@
import { useState, useEffect, useMemo } from '@wordpress/element';
import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
import { Button, Modal, SelectControl, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDataGrid from './LCPDataGrid';
import LCPDataUploader from './LCPDataUploader';
const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes, chartType }) => {
const [isOpen, setIsOpen] = useState(false);
const [options, setOptions] = useState([]);
// Function to update chartData attribute with parsed JSON data from CSV
const handleJsonDataUpdate = (newData) => {
console.log('Received new data from CSV:', newData);
setAttributes({ chartData: newData });
};
useEffect(() => {
if (chartData && chartData.length > 0) {
const columns = Object.keys(chartData[0]).filter(key => key !== 'lcpId');
@ -42,9 +49,11 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
onChange(newData);
};
const downloadCSV = () => {
// Get all columns except lcpId
const columns = getAvailableColumns().map(col => col.value);
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(',');
@ -53,14 +62,18 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
const rows = chartData.map(row =>
columns.map(col => {
let value = row[col] || '';
if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
// 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');
@ -70,7 +83,7 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
}, [chartData]);
// Get default value for valueColumn
const defaultValueColumn = useMemo(() => {
@ -163,6 +176,7 @@ const LCPDatasetBuilder = ({ chartData = [], onChange, attributes, setAttributes
options={options}
onChange={(value) => setAttributes({ labelsColumn: value })}
/>
<LCPDataUploader onJsonDataUpdate={handleJsonDataUpdate} />
<SelectControl
label={__('Color Column', 'lcp-visualize')}
help={__('Column containing bar colors (optional)', 'lcp-visualize')}