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

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