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

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

@ -22,7 +22,11 @@
"Parent": "lcpText"
}
},
"enableStacked": {
"enableStackedBars": {
"type": "boolean",
"default": false
},
"enableDrillDown": {
"type": "boolean",
"default": false
},
@ -30,6 +34,18 @@
"type": "boolean",
"default": false
},
"hierarchicalSource": {
"type": "string",
"default": "parent"
},
"hierarchicalColumnOrder": {
"type": "string",
"default": ""
},
"hierachicalDepth": {
"type": "number",
"default": 1
},
"chartData": {
"type": "array",
"default": [
@ -48,30 +64,6 @@
"Color": "#ff0000",
"Content": "<p>Second item</p>",
"Parent": "lcpDatapoint-1"
},
{
"ID": "lcpDatapoint-3",
"Label": "Sample 3",
"Value": 30,
"Color": "#00ff00",
"Content": "<p>Third item</p>",
"Parent": ""
},
{
"ID": "lcpDatapoint-4",
"Label": "Sample 4",
"Value": 20,
"Color": "#0000ff",
"Content": "<p>Fourth item</p>",
"Parent": ""
},
{
"ID": "lcpDatapoint-5",
"Label": "Sample 5",
"Value": 80,
"Color": "#800080",
"Content": "<p>Fifth item</p>",
"Parent": ""
}
]
},
@ -111,6 +103,10 @@
"type": "boolean",
"default": true
},
"legendFontSize": {
"type": "string",
"default": "16px"
},
"legendLocation": {
"type": "string",
"default": "top"
@ -166,6 +162,50 @@
"toolbarAlignment": {
"type": "string",
"default": "left"
},
"enableDatapointTooltip": {
"type": "boolean",
"default": false
},
"enableDatapointPopup": {
"type": "boolean",
"default": false
},
"showXAxisLabel": {
"type": "boolean",
"default": true
},
"xAxisLabel": {
"type": "string",
"default": ""
},
"showYAxisLabel": {
"type": "boolean",
"default": true
},
"yAxisLabel": {
"type": "string",
"default": ""
},
"barsColorSource": {
"type": "string",
"default": "default"
},
"renderXGrid": {
"type": "boolean",
"default": false
},
"xGridColor": {
"type": "string",
"default": "blue"
},
"renderYGrid": {
"type": "boolean",
"default": false
},
"yGridColor": {
"type": "string",
"default": "#e0e0e0"
}
},
"textdomain": "lcp-visualize",

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' => '32e6baadcfdb2c5e9a4b');
<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '97d348e4919de980ad6b');

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

File diff suppressed because one or more lines are too long

9
blocks/bar-graph/package-lock.json generated
View File

@ -15,7 +15,8 @@
"@wordpress/i18n": "^4.0.0",
"ag-grid-community": "^31.0.1",
"ag-grid-react": "^31.0.1",
"d3": "^7.8.5"
"d3": "^7.8.5",
"papaparse": "^5.5.1"
},
"devDependencies": {
"@wordpress/scripts": "^26.0.0"
@ -16917,6 +16918,12 @@
"node": ">= 14"
}
},
"node_modules/papaparse": {
"version": "5.5.1",
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.1.tgz",
"integrity": "sha512-EuEKUhyxrHVozD7g3/ztsJn6qaKse8RPfR6buNB2dMJvdtXNhcw8jccVi/LxNEY3HVrV6GO6Z4OoeCG9Iy9wpA==",
"license": "MIT"
},
"node_modules/param-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",

3
blocks/bar-graph/package.json
View File

@ -14,7 +14,8 @@
"@wordpress/i18n": "^4.0.0",
"ag-grid-community": "^31.0.1",
"ag-grid-react": "^31.0.1",
"d3": "^7.8.5"
"d3": "^7.8.5",
"papaparse": "^5.5.1"
},
"devDependencies": {
"@wordpress/scripts": "^26.0.0"

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

@ -22,7 +22,11 @@
"Parent": "lcpText"
}
},
"enableStacked": {
"enableStackedBars": {
"type": "boolean",
"default": false
},
"enableDrillDown": {
"type": "boolean",
"default": false
},
@ -30,14 +34,23 @@
"type": "boolean",
"default": false
},
"hierarchicalSource": {
"type": "string",
"default": "parent"
},
"hierarchicalColumnOrder": {
"type": "string",
"default": ""
},
"hierachicalDepth": {
"type": "number",
"default": 1
},
"chartData": {
"type": "array",
"default": [
{ "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" },
{ "ID": "lcpDatapoint-3", "Label": "Sample 3", "Value": 30, "Color": "#00ff00", "Content": "<p>Third item</p>" , "Parent": ""},
{ "ID": "lcpDatapoint-4", "Label": "Sample 4", "Value": 20, "Color": "#0000ff", "Content": "<p>Fourth item</p>" , "Parent": ""},
{ "ID": "lcpDatapoint-5", "Label": "Sample 5", "Value": 80, "Color": "#800080", "Content": "<p>Fifth item</p>" , "Parent": ""}
{ "ID": "lcpDatapoint-2", "Label": "Sample 2", "Value": 50, "Color": "#ff0000", "Content": "<p>Second item</p>", "Parent": "lcpDatapoint-1" }
]
},
"chartHeight": {
@ -76,6 +89,10 @@
"type": "boolean",
"default": true
},
"legendFontSize": {
"type": "string",
"default": "16px"
},
"legendLocation": {
"type": "string",
"default": "top"
@ -131,6 +148,50 @@
"toolbarAlignment": {
"type": "string",
"default": "left"
},
"enableDatapointTooltip": {
"type": "boolean",
"default": false
},
"enableDatapointPopup": {
"type": "boolean",
"default": false
},
"showXAxisLabel": {
"type": "boolean",
"default": true
},
"xAxisLabel": {
"type": "string",
"default": ""
},
"showYAxisLabel": {
"type": "boolean",
"default": true
},
"yAxisLabel": {
"type": "string",
"default": ""
},
"barsColorSource" :{
"type": "string",
"default": "default"
},
"renderXGrid": {
"type": "boolean",
"default": false
},
"xGridColor" :{
"type": "string",
"default": "blue"
},
"renderYGrid": {
"type": "boolean",
"default": false
},
"yGridColor" :{
"type": "string",
"default": "#e0e0e0"
}
},
"textdomain": "lcp-visualize",

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

@ -1,13 +1,53 @@
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ColorPicker } 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';
import LCPDimensionControl from '../../components/LCPDimensionControl';
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
import LCPLegend from '../../components/LCPLegend';
export default function Edit({ attributes, setAttributes }) {
const items = [
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 1", color: "#ff0000" },
{ Label: "Category 2", color: "#00ff00" },
{ Label: "Category 3", color: "#0000ff" }
];
const {
chartHeight = '400px',
chartWidth = '100%',
@ -17,7 +57,14 @@ export default function Edit({ attributes, setAttributes }) {
labelsColumn = 'Label',
colorColumn = 'color',
popoverColumn = 'content',
barsColorSource = 'default',
hierachicalDepth = 1,
enableDrillDown = false,
enableStackedBars = false,
hierarchicalSource = 'parent',
hierarchicalColumnOrder = '',
renderLegend = false,
toolbarLocation = 'top'
} = attributes;
const blockProps = useBlockProps();
@ -33,7 +80,7 @@ export default function Edit({ attributes, setAttributes }) {
<div {...blockProps}>
<InspectorControls>
{/* Bar Graph-specific Settings */}
<PanelBody title={__('Chart Settings', 'lcp-visualize')}>
<PanelBody title={__('Chart Settings', 'lcp')}>
<LCPDatasetBuilder
chartType="bar"
chartData={chartData}
@ -41,18 +88,62 @@ export default function Edit({ attributes, setAttributes }) {
attributes={attributes}
setAttributes={setAttributes}
/>
{/* Select the source of the hierarchies */}
<SelectControl
label={__('Color Source', 'lcp')}
help={__('Select the logic for setting the colors', 'lcp')}
value={hierarchicalSource || 'parent'}
options={[
{ label: 'Parent Column', value: 'parent' },
{ label: 'Column Order', value: 'columnOrder' }
]}
onChange={(value) => setAttributes({ hierarchicalSource: value })}
/>
{hierarchicalSource === 'columnOrder' && (
<TextControl
label={__('Hierarchical Column Order', 'lcp')}
value={hierarchicalColumnOrder}
onChange={(value) => setAttributes({ hierarchicalColumnOrder: value })}
/>
)}
{/* Enable Drilling Down through hierarchies */}
<ToggleControl
label={__('Enable Drill Down', 'lcp')}
checked={enableDrillDown}
onChange={(value) => setAttributes({ enableDrillDown: value })}
/>
<ToggleControl
label={__('Enable Stacked Bars', 'lcp')}
checked={enableStackedBars}
onChange={(value) => setAttributes({ enableStackedBars: value })}
/>
<LCPDimensionControl
label={__('Chart Height', 'lcp-visualize')}
label={__('Chart Height', 'lcp')}
value={chartHeight}
onChange={(value) => setAttributes({ chartHeight: value })}
/>
<LCPDimensionControl
label={__('Chart Width', 'lcp-visualize')}
label={__('Chart Width', 'lcp')}
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: 'Swatch', value: 'swatch' }
]}
onChange={(value) => setAttributes({ barsColorSource: value })}
/>
</PanelBody>
{/* Common Chart Settings */}
<LCPChartBlockSettings
attributes={attributes}
@ -62,6 +153,21 @@ export default function Edit({ attributes, setAttributes }) {
</InspectorControls>
<div className="lcp-bar-graph-container">
{toolbarLocation === 'top' && (
<div className="lcp-visualizer-toolbar">
<span>Toolbar</span>
</div>
)}
{renderLegend && (
<LCPLegend
items={items}
width={300}
height={150}
itemSize={15}
spacing={8}
/>
)}
<BarGraph
chartData={chartData}
height={chartHeight}
@ -72,7 +178,13 @@ export default function Edit({ attributes, setAttributes }) {
popoverColumn={popoverColumn}
defaultBarColor={barColor}
/>
{toolbarLocation === 'bottom' && (
<div className="lcp-visualizer-toolbar">
<span>Toolbar</span>
</div>
)}
</div>
</div>
);
}