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

Unfinished support for updating attributes

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-27 02:56:29 -08:00
parent 3fe81a23ff
commit a274fe32e9
9 changed files with 319 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,10 @@
"html": false
},
"attributes": {
"selectedDataset": {
"type": "number",
"default": 1
},
"columnTypes": {
"type": "object",
"default": {}
@ -39,29 +43,93 @@
"type": "number",
"default": 1
},
"datasets": {
"gridColumnDefinitions": {
"type": "array",
"default": [
{
"name": "Data",
"columns": [
{
"field": "Department",
"dataType": "text",
"renderFormat": "text",
"sorted": "",
"width": 150,
"editable": true,
"position": 0
},
{
"field": "Budget",
"dataType": "number",
"renderFormat": "currency",
"sorted": "asc",
"width": 120,
"editable": true,
"position": 1
},
{
"field": "MeetAt",
"dataType": "date",
"renderFormat": "datetime",
"sorted": "",
"width": 150,
"editable": true,
"position": 2
}
]
},
{
"name": "Locations",
"columns": [
{
"field": "State",
"dataType": "text",
"renderFormat": "text",
"sorted": "",
"width": 150,
"editable": true,
"position": 0
},
{
"field": "Coordinates",
"dataType": "number",
"renderFormat": "number",
"sorted": "",
"width": 120,
"editable": true,
"position": 1
}
]
}
]
},
"test": {
"type": "string",
"default": ""
},
"datasets": {
"type": "array",
"default": [
{
"name": "Main",
"data": [
{
"Department": "Sheriffs Office",
"Budget": "150",
"Budget": 1,
"MeetAt": "2025-01-26T14:30:00Z",
"preferredColor": "red",
"PostContent": "<div> </div>"
},
{
"Department": "Assessor",
"Budget": "100",
"Budget": 2,
"MeetAt": "2025-01-26T14:30:00Z",
"preferredColor": "#232323",
"PostContent": "<div> </div>"
},
{
"Department": "Treasurer",
"Budget": "50",
"Budget": 3,
"MeetAt": "2025-01-26T14:30:00Z",
"preferredColor": "#E72323",
"PostContent": "<div> </div>"

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

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

File diff suppressed because one or more lines are too long

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

@ -11,6 +11,10 @@
"html": false
},
"attributes": {
"selectedDataset": {
"type": "number",
"default": 1
},
"columnTypes": {
"type": "object",
"default": {
@ -41,14 +45,79 @@
"type": "number",
"default": 1
},
"gridColumnDefinitions": {
"type": "array",
"default": [
{
"name": "Data",
"columns": [
{
"field": "Department",
"dataType": "text",
"renderFormat": "text",
"sorted": "",
"width": 150,
"editable": true,
"position": 0
},
{
"field": "Budget",
"dataType": "number",
"renderFormat": "currency",
"sorted": "asc",
"width": 120,
"editable": true,
"position": 1
},
{
"field": "MeetAt",
"dataType": "date",
"renderFormat": "datetime",
"sorted": "",
"width": 150,
"editable": true,
"position": 2
}
]
},
{
"name": "Locations",
"columns": [
{
"field": "State",
"dataType": "text",
"renderFormat": "text",
"sorted": "",
"width": 150,
"editable": true,
"position": 0
},
{
"field": "Coordinates",
"dataType": "number",
"renderFormat": "number",
"sorted": "",
"width": 120,
"editable": true,
"position": 1
}
]
}
]
},
"test": {
"type": "string",
"default": ""
},
"datasets": {
"type": "array",
"default": [{
"name": "Data",
"name": "Main",
"data": [
{ "Department": "Sheriffs Office", "Budget": "150", "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
{ "Department": "Assessor", "Budget": "100", "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
{ "Department": "Treasurer", "Budget": "50", "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
{ "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>" }
]
},
{

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

@ -1,6 +1,6 @@
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { ToggleControl, TextControl,PanelBody, ColorPicker, SelectControl, __experimentalNumberControl as NumberControl} from '@wordpress/components';
import { ToggleControl, TextControl, PanelBody, ColorPicker, SelectControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
import './editor.scss';
import BarGraph from './components/BarGraph';
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
@ -8,23 +8,18 @@ import LCPDimensionControl from '../../components/LCPDimensionControl';
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
import LCPLegend from '../../components/LCPLegend';
export default function Edit({ attributes, setAttributes }) {
const items = [
const items = [
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Categokhkjhkjhkjhky 2", color: "#00ff00" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Cat 2", color: "#00ff00" },
{ Label: "Coy 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
];
const {
@ -45,29 +40,23 @@ export default function Edit({ attributes, setAttributes }) {
renderLegend = false,
toolbarLocation = 'top',
enableGroupedBars = false,
groupedBarsColumn = ''
groupedBarsColumn = '',
datasets
} = attributes;
const blockProps = useBlockProps();
const handleDatasetChange = (newData) => {
setAttributes({ chartData: newData });
};
return (
<div {...blockProps}>
<InspectorControls>
{/* Bar Graph-specific Settings */}
<PanelBody title={__('Chart Settings', 'lcp')}>
<LCPDatasetBuilder
<LCPDatasetBuilder
chartType="bar"
chartData={chartData}
onChange={handleDatasetChange}
attributes={attributes}
setAttributes={setAttributes}
datasets={attributes.datasets} // Ensure datasets are passed to the component
attributes={attributes} // Pass the full attributes
setAttributes={setAttributes} // Pass setAttributes to LCPDatasetBuilder
/>
{/* Select the source of the hierarchies */}
<SelectControl
@ -75,7 +64,7 @@ export default function Edit({ attributes, setAttributes }) {
help={__('Select the logic for setting the colors', 'lcp')}
value={hierarchicalSource || 'parent'}
options={[
{ label: 'Parent Column', value: 'parent' },
{ label: 'Parent Column', value: 'parent' },
{ label: 'Column Order', value: 'columnOrder' }
]}
onChange={(value) => setAttributes({ hierarchicalSource: value })}
@ -87,7 +76,7 @@ export default function Edit({ attributes, setAttributes }) {
onChange={(value) => setAttributes({ hierarchicalColumnOrder: value })}
/>
)}
{/* Enable Drilling Down through hierarchies */}
{/* Enable Drilling Down through hierarchies */}
<ToggleControl
label={__('Enable Drill Down', 'lcp')}
checked={enableDrillDown}
@ -108,39 +97,37 @@ export default function Edit({ attributes, setAttributes }) {
value={chartWidth}
onChange={(value) => setAttributes({ chartWidth: value })}
/>
</PanelBody>
{/* Color Settings */}
<PanelBody title={__('Color Settings', 'lcp-visualize')} initialOpen={true}>
{/* Color Settings */}
{/* Select how the colors will be chosen */}
<SelectControl
label={__('Color Source', 'lcp')}
help={__('Select the logic for setting the colors', 'lcp')}
value={barsColorSource || 'default'}
options={[
{ label: 'Default', value: 'default' }, // Use the default color logic, value: 'option1' },
{ label: 'Default', value: 'default' },
{ label: 'Swatch', value: 'swatch' }
]}
onChange={(value) => setAttributes({ barsColorSource: value })}
/>
</PanelBody>
{/* Common Chart Settings */}
<LCPChartBlockSettings
attributes={attributes}
setAttributes={setAttributes}
setAttributes={setAttributes}
/>
</InspectorControls>
<div className="lcp-bar-graph-container">
{toolbarLocation === 'top' && (
<div className="lcp-visualizer-toolbar">
<span>Toolbar</span>
</div>
<div className="lcp-visualizer-toolbar">
<span>Toolbar</span>
</div>
)}
{renderLegend && (
<LCPLegend
<LCPLegend
items={items}
width={300}
height={150}
@ -165,7 +152,6 @@ export default function Edit({ attributes, setAttributes }) {
</div>
)}
</div>
</div>
);
}