Added basics of LCPLegend and more controls for blocks. Added boilerplate for lcp/line-graph
This commit is contained in:
Jeremy Rangel
198
blocks/line-graph/src/block.json
Normal file
198
blocks/line-graph/src/block.json
Normal file
@ -0,0 +1,198 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/line-graph",
|
||||
"version": "1.0.0",
|
||||
"title": "Line Graph",
|
||||
"category": "widgets",
|
||||
"icon": "chart-line",
|
||||
"description": "Display data as a line graph using D3.js",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"columnTypes": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"ID": "lcpText",
|
||||
"Label": "lcpText",
|
||||
"Value": "lcpNumber",
|
||||
"Color": "lcpColor",
|
||||
"Content": "lcpText",
|
||||
"Parent": "lcpText"
|
||||
}
|
||||
},
|
||||
"enableStackedBars": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"enableDrillDown": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"enableHierachical": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"hierarchicalSource": {
|
||||
"type": "string",
|
||||
"default": "parent"
|
||||
},
|
||||
"hierarchicalColumnOrder": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"hierachicalDepth": {
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"chartData": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"chartHeight": {
|
||||
"type": "string",
|
||||
"default": "400px"
|
||||
},
|
||||
"chartWidth": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"idColumn": {
|
||||
"type": "string",
|
||||
"default": "ID"
|
||||
},
|
||||
"barColor": {
|
||||
"type": "string",
|
||||
"default": "#007cba"
|
||||
},
|
||||
"valueColumn": {
|
||||
"type": "string",
|
||||
"default": "Value"
|
||||
},
|
||||
"labelsColumn": {
|
||||
"type": "string",
|
||||
"default": "Label"
|
||||
},
|
||||
"colorColumn": {
|
||||
"type": "string",
|
||||
"default": "color"
|
||||
},
|
||||
"popoverColumn": {
|
||||
"type": "string",
|
||||
"default": "content"
|
||||
},
|
||||
"renderLegend": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"legendFontSize": {
|
||||
"type": "string",
|
||||
"default": "16px"
|
||||
},
|
||||
"legendLocation": {
|
||||
"type": "string",
|
||||
"default": "top"
|
||||
},
|
||||
"legendAlignment": {
|
||||
"type": "string",
|
||||
"default": "left"
|
||||
},
|
||||
"allowDownloadImage": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"downloadImageMaxWidth": {
|
||||
"type": "string",
|
||||
"default": "2000px"
|
||||
},
|
||||
"allowDownloadCsv": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"allowDownloadJson": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"allowFilter": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"allowSorting": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"renderFooter": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"footerContent": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"chartTitle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"chartSubtitle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"toolbarLocation": {
|
||||
"type": "string",
|
||||
"default": "top"
|
||||
},
|
||||
"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",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css"
|
||||
}
|
||||
90
blocks/line-graph/src/edit.js
Normal file
90
blocks/line-graph/src/edit.js
Normal file
@ -0,0 +1,90 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import { ToggleControl, TextControl, PanelBody, ColorPicker, SelectControl, __experimentalNumberControl as NumberControl} from '@wordpress/components';
|
||||
import './editor.scss';
|
||||
import LCPDatasetBuilder from '../../components/LCPDatasetBuilder';
|
||||
import LCPChartBlockSettings from '../../components/LCPChartBlockSettings';
|
||||
import LCPDimensionControl from '../../components/LCPDimensionControl';
|
||||
import LCPLegend from '../../components/LCPLegend';
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const {
|
||||
chartHeight = '400px',
|
||||
chartWidth = '100%',
|
||||
valueColumn = 'Value',
|
||||
labelsColumn = 'Label',
|
||||
colorColumn = 'color',
|
||||
popoverColumn = 'content',
|
||||
chartData = [],
|
||||
renderLegend = false,
|
||||
toolbarLocation = 'top'
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
// Sample legend items (you'll want to generate this from your data)
|
||||
const items = [
|
||||
{ Label: "Category 1", color: "#ff0000" },
|
||||
{ Label: "Category 2", color: "#00ff00" },
|
||||
{ Label: "Category 3", color: "#0000ff" }
|
||||
];
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InspectorControls>
|
||||
{/* Line Graph-specific Settings */}
|
||||
<PanelBody title={__('Chart Settings', 'lcp')}>
|
||||
<LCPDatasetBuilder
|
||||
chartType="line"
|
||||
chartData={chartData}
|
||||
onChange={(newData) => setAttributes({ chartData: newData })}
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
/>
|
||||
<LCPDimensionControl
|
||||
label={__('Chart Height', 'lcp')}
|
||||
value={chartHeight}
|
||||
onChange={(value) => setAttributes({ chartHeight: value })}
|
||||
/>
|
||||
<LCPDimensionControl
|
||||
label={__('Chart Width', 'lcp')}
|
||||
value={chartWidth}
|
||||
onChange={(value) => setAttributes({ chartWidth: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
|
||||
{/* Common Chart Settings */}
|
||||
<LCPChartBlockSettings
|
||||
attributes={attributes}
|
||||
setAttributes={setAttributes}
|
||||
/>
|
||||
</InspectorControls>
|
||||
|
||||
<div className="lcp-line-graph-container">
|
||||
{toolbarLocation === 'top' && (
|
||||
<div className="lcp-visualizer-toolbar">
|
||||
<span>Toolbar</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{renderLegend && (
|
||||
<LCPLegend
|
||||
items={items}
|
||||
itemSize={15}
|
||||
spacing={8}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="lcp-line-graph-placeholder">
|
||||
{__('Line Graph Visualization Will Appear Here', 'lcp')}
|
||||
</div>
|
||||
|
||||
{toolbarLocation === 'bottom' && (
|
||||
<div className="lcp-visualizer-toolbar">
|
||||
<span>Toolbar</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
0
blocks/line-graph/src/editor.scss
Normal file
0
blocks/line-graph/src/editor.scss
Normal file
12
blocks/line-graph/src/index.js
Normal file
12
blocks/line-graph/src/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import 'ag-grid-community/styles/ag-grid.css';
|
||||
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
||||
import './style.scss';
|
||||
import Edit from './edit';
|
||||
import metadata from './block.json';
|
||||
|
||||
registerBlockType(metadata.name, {
|
||||
...metadata,
|
||||
edit: Edit,
|
||||
save: () => null, // Dynamic block, rendered in PHP
|
||||
});
|
||||
0
blocks/line-graph/src/style.scss
Normal file
0
blocks/line-graph/src/style.scss
Normal file
Reference in New Issue
Block a user