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

Fix for updating datasets from Datasetbuilder

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-27 09:32:19 -08:00
parent a274fe32e9
commit 05664f161a
5 changed files with 55 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -114,22 +114,22 @@
"name": "Main",
"data": [
{
"Department": "Sheriffs Office",
"Budget": 1,
"Department": "Sheriff",
"Budget": 100000,
"MeetAt": "2025-01-26T14:30:00Z",
"preferredColor": "red",
"PostContent": "<div> </div>"
},
{
"Department": "Assessor",
"Budget": 2,
"Budget": 20000,
"MeetAt": "2025-01-26T14:30:00Z",
"preferredColor": "#232323",
"PostContent": "<div> </div>"
},
{
"Department": "Treasurer",
"Budget": 3,
"Budget": 30000,
"MeetAt": "2025-01-26T14:30:00Z",
"preferredColor": "#E72323",
"PostContent": "<div> </div>"
@ -141,47 +141,26 @@
"data": [
{
"State": "California",
"Coordinates": "150,000",
"Coordinates": "",
"MeetAt": "2025-01-26T14:30:00Z",
"PreferredColor": "#e0e0e0",
"PostContent": "<div> </div>"
},
{
"State": "Texas",
"Coordinates": "100,000",
"Coordinates": "",
"MeetAt": "2025-01-26T14:30:00Z",
"PreferredColor": "#e0e0e0",
"PostContent": "<div> </div>"
},
{
"State": "Florida",
"Coordinates": "50,000",
"Coordinates": "",
"MeetAt": "2025-01-26T14:30:00Z",
"PreferredColor": "#e0e0e0",
"PostContent": "<div> </div>"
}
]
},
{
"name": "Dataset 3",
"data": [
{
"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"
}
]
}
]
},

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', 'wp-primitives'), 'version' => '7a75b5732cbc1928c7a2');
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '81e2f5a896da526cb195');

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

File diff suppressed because one or more lines are too long

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

@ -115,24 +115,17 @@
"default": [{
"name": "Main",
"data": [
{ "Department": "Sheriffs Office", "Budget": 1, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
{ "Department": "Assessor", "Budget": 2, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
{ "Department": "Treasurer", "Budget": 3, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
{ "Department": "Sheriff", "Budget": 100000, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
{ "Department": "Assessor", "Budget": 20000, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
{ "Department": "Treasurer", "Budget": 30000, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
]
},
{
"name": "Locations",
"data": [
{ "State": "California", "Coordinates": "150,000", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
{ "State": "Texas", "Coordinates": "100,000", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
{ "State": "Florida", "Coordinates": "50,000", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" }
]
},
{
"name": "Dataset 3",
"data": [
{ "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" }
{ "State": "California", "Coordinates": "", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
{ "State": "Texas", "Coordinates": "", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
{ "State": "Florida", "Coordinates": "", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" }
]
}
]

70
blocks/components/LCPDatasetBuilder.js
View File

@ -1,4 +1,4 @@
import { useState } from '@wordpress/element';
import { useState, useEffect } from '@wordpress/element';
import { Button, Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LCPDataGrid from './LCPDataGrid';
@ -6,33 +6,43 @@ import LCPDataGrid from './LCPDataGrid';
const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
const [isOpen, setIsOpen] = useState(false);
const [activeTab, setActiveTab] = useState(0); // Track the active tab
const [datasets, setDatasets] = useState(attributes.datasets); // Use useState for datasets
// Sync state with attributes if they change outside the component
useEffect(() => {
setDatasets(attributes.datasets);
}, [attributes.datasets]);
const handleUpdateDataset = (index, newData) => {
// Log the newData in a readable format
console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
// Make a shallow copy of the datasets to avoid mutation
const datasets = [...attributes.datasets];
// Ensure the data structure is correct before replacing
if (newData && newData.data) {
// Replace the data array at the specified index with the new data
datasets[0].data = newData.data;
// Log the datasets before the update
console.log("Before Update:", JSON.stringify(datasets, null, 2));
// Update the attributes with the modified datasets
setAttributes({
datasets: datasets
// console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
// Check if newData.data is an array
if (Array.isArray(newData.data)) {
// Create a new reference for the datasets array
const updatedDatasets = datasets.map((dataset, i) => {
if (i === index) {
// If this is the dataset we're updating, replace it with a new object
return {
...dataset, // Copy the existing dataset
data: [...newData.data], // Deep copy the data array
};
}
return dataset; // Leave other datasets unchanged
});
// Log the updated attributes (you can check this after re-rendering)
console.log("After Update:", JSON.stringify(datasets, null, 2));
// console.log("Updated Datasets:", JSON.stringify(updatedDatasets, null, 2));
// Call setAttributes with the updated datasets
setAttributes({
...attributes, // Ensure we're not overriding other attributes accidentally
datasets: updatedDatasets, // Set the new datasets array
});
// console.log("Attributes after setAttributes:", JSON.stringify({ ...attributes, datasets: updatedDatasets }, null, 2));
} else {
console.error("Invalid data format:", newData);
// console.error("Invalid data format in newData:", newData);
}
};
return (
<>
@ -53,7 +63,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
<div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
{/* Tabs */}
<div style={{ display: 'flex', marginBottom: '20px' }}>
{attributes.datasets.map((dataset, index) => (
{datasets.map((dataset, index) => (
<button
key={index}
onClick={() => setActiveTab(index)} // Set the active tab
@ -75,7 +85,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
{/* Render all the LCPDataGrid components */}
<div style={{ display: 'flex', flexDirection: 'column' }}>
{attributes.datasets.map((dataset, index) => (
{datasets.map((dataset, index) => (
<div
key={index}
style={{
@ -83,11 +93,11 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
transition: 'display 0.3s ease',
}}
>
<LCPDataGrid
dataset={dataset.data} // Pass the specific dataset data (only the data, not the entire dataset)
index={index}
updateDataset={handleUpdateDataset} // Function defined outside of class context
/>
<LCPDataGrid
dataset={dataset.data} // Pass the specific dataset data (only the data, not the entire dataset)
index={index}
updateDataset={handleUpdateDataset} // Function defined outside of class context
/>
</div>
))}
</div>