Initial
This commit is contained in:
Jeremy Rangel
15
.gitignore
vendored
Normal file
15
.gitignore
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
# Ignore node_modules
|
||||
node_modules/
|
||||
|
||||
**/node_modules/
|
||||
# Ignore logs
|
||||
logs/
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Ignore build files
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Ignore .env files (for sensitive data like API keys)
|
||||
.env
|
||||
18
blocks/bar-graph/.editorconfig
Normal file
18
blocks/bar-graph/.editorconfig
Normal file
@ -0,0 +1,18 @@
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
# WordPress Coding Standards
|
||||
# https://make.wordpress.org/core/handbook/coding-standards/
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = tab
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
30
blocks/bar-graph/.gitignore
vendored
Normal file
30
blocks/bar-graph/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Output of `npm pack`
|
||||
*.tgz
|
||||
|
||||
# Output of `wp-scripts plugin-zip`
|
||||
*.zip
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
74
blocks/bar-graph/lcp-bar-graph.php
Normal file
74
blocks/bar-graph/lcp-bar-graph.php
Normal file
@ -0,0 +1,74 @@
|
||||
<?php
|
||||
/**
|
||||
* Bar Graph Block Registration
|
||||
*
|
||||
* @package LCP-Data-Blocks
|
||||
*/
|
||||
|
||||
if (!defined('ABSPATH')) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block using the metadata loaded from the `block.json` file.
|
||||
*/
|
||||
function lcp_bar_graph_block_init() {
|
||||
// Register the block using the metadata loaded from the `block.json` file.
|
||||
register_block_type(
|
||||
__DIR__ . '/build',
|
||||
array(
|
||||
'render_callback' => 'lcp_render_bar_graph_block'
|
||||
)
|
||||
);
|
||||
}
|
||||
add_action('init', 'lcp_bar_graph_block_init');
|
||||
|
||||
/**
|
||||
* Register D3.js as a dependency
|
||||
*/
|
||||
function lcp_register_d3() {
|
||||
wp_register_script(
|
||||
'd3',
|
||||
'https://d3js.org/d3.v7.min.js',
|
||||
array(),
|
||||
'7.0.0',
|
||||
true
|
||||
);
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'lcp_register_d3');
|
||||
add_action('enqueue_block_editor_assets', 'lcp_register_d3');
|
||||
|
||||
/**
|
||||
* Renders the block on the server.
|
||||
*
|
||||
* @param array $attributes Block attributes.
|
||||
* @param string $content Block default content.
|
||||
* @return string Returns the block content.
|
||||
*/
|
||||
function lcp_render_bar_graph_block($attributes, $content) {
|
||||
if (!is_array($attributes)) {
|
||||
$attributes = array();
|
||||
}
|
||||
|
||||
// Get attributes with defaults
|
||||
$chart_height = $attributes['chartHeight'] ?? '400px';
|
||||
$background_color = $attributes['backgroundColor'] ?? '#ffffff';
|
||||
$bar_color = $attributes['barColor'] ?? '#0073aa';
|
||||
$bar_opacity = $attributes['barOpacity'] ?? 1;
|
||||
$show_grid_y = $attributes['showGridY'] ?? true;
|
||||
$grid_color = $attributes['gridColor'] ?? '#e0e0e0';
|
||||
|
||||
// Enqueue D3.js
|
||||
wp_enqueue_script('d3');
|
||||
|
||||
// Return the block's container
|
||||
return sprintf(
|
||||
'<div class="wp-block-lcp-bar-graph"><div class="lcp-bar-graph" style="height: %s; background-color: %s;" data-bar-color="%s" data-bar-opacity="%f" data-show-grid="%s" data-grid-color="%s"></div></div>',
|
||||
esc_attr($chart_height),
|
||||
esc_attr($background_color),
|
||||
esc_attr($bar_color),
|
||||
esc_attr($bar_opacity),
|
||||
esc_attr($show_grid_y ? 'true' : 'false'),
|
||||
esc_attr($grid_color)
|
||||
);
|
||||
}
|
||||
20608
blocks/bar-graph/package-lock.json
generated
Normal file
20608
blocks/bar-graph/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
blocks/bar-graph/package.json
Normal file
23
blocks/bar-graph/package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "lcp-bar-graph",
|
||||
"version": "0.1.0",
|
||||
"description": "Bar Graph block for LCP Data Blocks plugin",
|
||||
"author": "CoosGuide",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^7.8.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.8.1"
|
||||
}
|
||||
}
|
||||
55
blocks/bar-graph/readme.txt
Normal file
55
blocks/bar-graph/readme.txt
Normal file
@ -0,0 +1,55 @@
|
||||
=== Todo List ===
|
||||
Contributors: The WordPress Contributors
|
||||
Tags: block
|
||||
Tested up to: 6.7
|
||||
Stable tag: 0.1.0
|
||||
License: GPL-2.0-or-later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
Example block scaffolded with Create Block tool.
|
||||
|
||||
== Description ==
|
||||
|
||||
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
|
||||
|
||||
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
|
||||
Markdown parsed.
|
||||
|
||||
== Installation ==
|
||||
|
||||
This section describes how to install the plugin and get it working.
|
||||
|
||||
e.g.
|
||||
|
||||
1. Upload the plugin files to the `/wp-content/plugins/todo-list` directory, or install the plugin through the WordPress plugins screen directly.
|
||||
1. Activate the plugin through the 'Plugins' screen in WordPress
|
||||
|
||||
|
||||
== Frequently Asked Questions ==
|
||||
|
||||
= A question that someone might have =
|
||||
|
||||
An answer to that question.
|
||||
|
||||
= What about foo bar? =
|
||||
|
||||
Answer to foo bar dilemma.
|
||||
|
||||
== Screenshots ==
|
||||
|
||||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
|
||||
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
|
||||
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
|
||||
(or jpg, jpeg, gif).
|
||||
2. This is the second screen shot
|
||||
|
||||
== Changelog ==
|
||||
|
||||
= 0.1.0 =
|
||||
* Release
|
||||
|
||||
== Arbitrary section ==
|
||||
|
||||
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
|
||||
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
|
||||
"installation." Arbitrary sections will be shown below the built-in sections outlined above.
|
||||
104
blocks/bar-graph/src/block.json
Normal file
104
blocks/bar-graph/src/block.json
Normal file
@ -0,0 +1,104 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"name": "lcp/bar-graph",
|
||||
"version": "0.1.0",
|
||||
"title": "LCP Bar Graph",
|
||||
"category": "widgets",
|
||||
"icon": "chart-bar",
|
||||
"description": "Display data in a bar graph format.",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js",
|
||||
"attributes": {
|
||||
"showBarValues": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"chartHeight": {
|
||||
"type": "string",
|
||||
"default": "400px"
|
||||
},
|
||||
"chartWidth": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"chartTitle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"displayChartTitle": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"allowDownload": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"downloadMaxWidth": {
|
||||
"type": "string",
|
||||
"default": "2000px"
|
||||
},
|
||||
"showSorting": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showFiltering": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"chartData": {
|
||||
"type": "object",
|
||||
"default": {}
|
||||
},
|
||||
"dataSource": {
|
||||
"type": "string",
|
||||
"default": "manual_json"
|
||||
},
|
||||
"barColor": {
|
||||
"type": "string",
|
||||
"default": "#0073aa"
|
||||
},
|
||||
"barOpacity": {
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"showGridX": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showGridY": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"gridColor": {
|
||||
"type": "string",
|
||||
"default": "#e0e0e0"
|
||||
},
|
||||
"gridWidth": {
|
||||
"type": "number",
|
||||
"default": 1
|
||||
},
|
||||
"xAxisLabel": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"yAxisLabel": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"gridOpacity": {
|
||||
"type": "number",
|
||||
"default": 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
184
blocks/bar-graph/src/components/BarGraph.js
Normal file
184
blocks/bar-graph/src/components/BarGraph.js
Normal file
@ -0,0 +1,184 @@
|
||||
import { useEffect, useRef } from '@wordpress/element';
|
||||
import * as d3 from 'd3';
|
||||
|
||||
const BarGraph = ({
|
||||
data,
|
||||
width = '100%',
|
||||
height = '400px',
|
||||
backgroundColor,
|
||||
title,
|
||||
showGridX,
|
||||
showGridY,
|
||||
gridColor,
|
||||
gridWidth,
|
||||
showBarValues,
|
||||
xAxisLabel,
|
||||
yAxisLabel
|
||||
}) => {
|
||||
const svgRef = useRef();
|
||||
const containerRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (!data || !svgRef.current || !containerRef.current) return;
|
||||
|
||||
// Clear previous content
|
||||
d3.select(svgRef.current).selectAll("*").remove();
|
||||
|
||||
// Convert data to simple array
|
||||
const chartData = [];
|
||||
for (const [dataset, items] of Object.entries(data)) {
|
||||
for (const item of items) {
|
||||
chartData.push({
|
||||
dataset,
|
||||
label: item.label,
|
||||
value: parseInt(item.value, 10),
|
||||
color: item.color || '#FF6384'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Get container dimensions
|
||||
const containerWidth = containerRef.current.clientWidth;
|
||||
const containerHeight = containerRef.current.clientHeight;
|
||||
|
||||
// Basic dimensions with extra margin for axis labels
|
||||
const margin = {
|
||||
top: title ? 40 : 20,
|
||||
right: 20,
|
||||
bottom: xAxisLabel ? 50 : 30,
|
||||
left: yAxisLabel ? 60 : 40
|
||||
};
|
||||
const innerWidth = containerWidth - margin.left - margin.right;
|
||||
const innerHeight = containerHeight - margin.top - margin.bottom;
|
||||
|
||||
// Create SVG
|
||||
const svg = d3.select(svgRef.current)
|
||||
.attr('width', containerWidth)
|
||||
.attr('height', containerHeight);
|
||||
|
||||
// Add title if present
|
||||
if (title) {
|
||||
svg.append('text')
|
||||
.attr('x', containerWidth / 2)
|
||||
.attr('y', 20)
|
||||
.attr('text-anchor', 'middle')
|
||||
.style('font-size', '16px')
|
||||
.text(title);
|
||||
}
|
||||
|
||||
// Create main group
|
||||
const g = svg.append('g')
|
||||
.attr('transform', `translate(${margin.left},${margin.top})`);
|
||||
|
||||
// Create scales
|
||||
const xScale = d3.scaleBand()
|
||||
.domain(chartData.map(d => d.label))
|
||||
.range([0, innerWidth])
|
||||
.padding(0.1);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(chartData, d => d.value)])
|
||||
.range([innerHeight, 0]);
|
||||
|
||||
// Add X grid
|
||||
if (showGridX) {
|
||||
g.append('g')
|
||||
.attr('class', 'grid x-grid')
|
||||
.attr('transform', `translate(0,${innerHeight})`)
|
||||
.call(d3.axisBottom(xScale)
|
||||
.tickSize(-innerHeight)
|
||||
.tickFormat(''))
|
||||
.call(g => g.selectAll('.tick line')
|
||||
.attr('stroke', gridColor)
|
||||
.attr('stroke-width', gridWidth)
|
||||
.attr('opacity', 0.5));
|
||||
}
|
||||
|
||||
// Add Y grid
|
||||
if (showGridY) {
|
||||
g.append('g')
|
||||
.attr('class', 'grid y-grid')
|
||||
.call(d3.axisLeft(yScale)
|
||||
.tickSize(-innerWidth)
|
||||
.tickFormat(''))
|
||||
.call(g => g.selectAll('.tick line')
|
||||
.attr('stroke', gridColor)
|
||||
.attr('stroke-width', gridWidth)
|
||||
.attr('opacity', 0.5));
|
||||
}
|
||||
|
||||
// Add bars
|
||||
const bars = g.selectAll('rect')
|
||||
.data(chartData)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('x', d => xScale(d.label))
|
||||
.attr('y', d => yScale(d.value))
|
||||
.attr('width', xScale.bandwidth())
|
||||
.attr('height', d => innerHeight - yScale(d.value))
|
||||
.attr('fill', d => d.color);
|
||||
|
||||
// Add bar values
|
||||
if (showBarValues) {
|
||||
g.selectAll('.bar-value')
|
||||
.data(chartData)
|
||||
.enter()
|
||||
.append('text')
|
||||
.attr('class', 'bar-value')
|
||||
.attr('x', d => xScale(d.label) + xScale.bandwidth() / 2)
|
||||
.attr('y', d => yScale(d.value) - 5)
|
||||
.attr('text-anchor', 'middle')
|
||||
.text(d => d.value);
|
||||
}
|
||||
|
||||
// Add X axis
|
||||
g.append('g')
|
||||
.attr('transform', `translate(0,${innerHeight})`)
|
||||
.call(d3.axisBottom(xScale));
|
||||
|
||||
// Add Y axis
|
||||
g.append('g')
|
||||
.call(d3.axisLeft(yScale));
|
||||
|
||||
// Add X axis label
|
||||
if (xAxisLabel) {
|
||||
g.append('text')
|
||||
.attr('class', 'x-axis-label')
|
||||
.attr('x', innerWidth / 2)
|
||||
.attr('y', innerHeight + 40)
|
||||
.attr('text-anchor', 'middle')
|
||||
.style('font-size', '12px')
|
||||
.text(xAxisLabel);
|
||||
}
|
||||
|
||||
// Add Y axis label
|
||||
if (yAxisLabel) {
|
||||
g.append('text')
|
||||
.attr('class', 'y-axis-label')
|
||||
.attr('transform', 'rotate(-90)')
|
||||
.attr('x', -innerHeight / 2)
|
||||
.attr('y', -45)
|
||||
.attr('text-anchor', 'middle')
|
||||
.style('font-size', '12px')
|
||||
.text(yAxisLabel);
|
||||
}
|
||||
|
||||
}, [data, width, height, title, showGridX, showGridY, gridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="bar-graph"
|
||||
style={{
|
||||
width,
|
||||
height,
|
||||
backgroundColor,
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<svg ref={svgRef}></svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BarGraph;
|
||||
341
blocks/bar-graph/src/edit.js
Normal file
341
blocks/bar-graph/src/edit.js
Normal file
@ -0,0 +1,341 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||||
import {
|
||||
PanelBody,
|
||||
Panel,
|
||||
ColorPicker,
|
||||
RangeControl,
|
||||
ToggleControl,
|
||||
TabPanel,
|
||||
TextControl,
|
||||
Button
|
||||
} from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import LCPDataSelector from '../../../components/LCPDataSelector';
|
||||
import BarGraph from './components/BarGraph';
|
||||
import LCPDimensionControl from '../../../components/LCPDimensionControl';
|
||||
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const {
|
||||
chartHeight,
|
||||
chartWidth,
|
||||
barColor,
|
||||
barOpacity,
|
||||
backgroundColor,
|
||||
showGridY,
|
||||
gridColor,
|
||||
chartData,
|
||||
dataSource,
|
||||
displayChartTitle,
|
||||
chartTitle,
|
||||
allowDownload,
|
||||
downloadMaxWidth,
|
||||
showSorting,
|
||||
showFiltering,
|
||||
showBarValues,
|
||||
showGridX,
|
||||
gridWidth,
|
||||
xAxisLabel,
|
||||
yAxisLabel
|
||||
} = attributes;
|
||||
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
const handleDataChange = (newData) => {
|
||||
console.log('New data:', newData); // Debug log
|
||||
setAttributes({ chartData: newData });
|
||||
};
|
||||
|
||||
const handleDataSourceChange = (newSource) => {
|
||||
setAttributes({
|
||||
dataSource: newSource,
|
||||
chartData: {} // Reset data when source changes
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
// Get the SVG element
|
||||
const svg = document.querySelector('.bar-graph svg');
|
||||
if (!svg) return;
|
||||
|
||||
// Create a canvas
|
||||
const canvas = document.createElement('canvas');
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const DOMURL = window.URL || window.webkitURL || window;
|
||||
const url = DOMURL.createObjectURL(svgBlob);
|
||||
const img = new Image();
|
||||
|
||||
img.onload = () => {
|
||||
// Set canvas dimensions
|
||||
canvas.width = svg.width.baseVal.value;
|
||||
canvas.height = svg.height.baseVal.value;
|
||||
|
||||
// Draw background
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = backgroundColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw the image
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// Convert to blob and download
|
||||
canvas.toBlob((blob) => {
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = downloadUrl;
|
||||
a.download = 'bar-graph.png';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
DOMURL.revokeObjectURL(url);
|
||||
}, 'image/png');
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
};
|
||||
|
||||
// Debug log to check chartData
|
||||
console.log('Chart data:', chartData);
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InspectorControls>
|
||||
<TabPanel
|
||||
className="lcp-tab-panel"
|
||||
activeClass="active-tab"
|
||||
tabs={[
|
||||
{
|
||||
name: 'data',
|
||||
title: __('Data Settings', 'lcp'),
|
||||
className: 'tab-data',
|
||||
},
|
||||
{
|
||||
name: 'appearance',
|
||||
title: __('Appearance', 'lcp'),
|
||||
className: 'tab-appearance',
|
||||
},
|
||||
{
|
||||
name: 'tools',
|
||||
title: __('Tools Settings', 'lcp'),
|
||||
className: 'tab-tools',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{(tab) => {
|
||||
if (tab.name === 'data') {
|
||||
return (
|
||||
<Panel>
|
||||
<PanelBody title="Data Settings">
|
||||
<LCPDataSelector
|
||||
value={chartData}
|
||||
onChange={handleDataChange}
|
||||
dataSource={dataSource}
|
||||
onDataSourceChange={handleDataSourceChange}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody title="Chart Settings">
|
||||
<ToggleControl
|
||||
label={__('Display Chart Title', 'lcp')}
|
||||
checked={displayChartTitle}
|
||||
onChange={(value) => setAttributes({ displayChartTitle: value })}
|
||||
/>
|
||||
{displayChartTitle && (
|
||||
<TextControl
|
||||
label={__('Chart Title', 'lcp')}
|
||||
value={chartTitle}
|
||||
onChange={(value) => setAttributes({ chartTitle: value })}
|
||||
/>
|
||||
)}
|
||||
<LCPDimensionControl
|
||||
label={__('Chart Width', 'lcp')}
|
||||
value={chartWidth}
|
||||
onChange={(value) => setAttributes({ chartWidth: value })}
|
||||
/>
|
||||
<LCPDimensionControl
|
||||
label={__('Chart Height', 'lcp')}
|
||||
value={chartHeight}
|
||||
onChange={(value) => setAttributes({ chartHeight: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody title="Appearance">
|
||||
<div className="components-base-control">
|
||||
<label className="components-base-control__label">
|
||||
{__('Bar Color', 'lcp')}
|
||||
</label>
|
||||
<ColorPicker
|
||||
color={barColor}
|
||||
onChangeComplete={(color) => setAttributes({ barColor: color.hex })}
|
||||
/>
|
||||
</div>
|
||||
<RangeControl
|
||||
label={__('Bar Opacity', 'lcp')}
|
||||
value={barOpacity}
|
||||
onChange={(value) => setAttributes({ barOpacity: value })}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.1}
|
||||
/>
|
||||
<div className="components-base-control">
|
||||
<label className="components-base-control__label">
|
||||
{__('Background Color', 'lcp')}
|
||||
</label>
|
||||
<ColorPicker
|
||||
color={backgroundColor}
|
||||
onChangeComplete={(color) => setAttributes({ backgroundColor: color.hex })}
|
||||
/>
|
||||
</div>
|
||||
<ToggleControl
|
||||
label={__('Show Bar Values', 'lcp')}
|
||||
checked={showBarValues}
|
||||
onChange={(value) => setAttributes({ showBarValues: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody title="Grid Settings">
|
||||
<TextControl
|
||||
label={__('X-Axis Label', 'lcp')}
|
||||
value={xAxisLabel}
|
||||
onChange={(value) => setAttributes({ xAxisLabel: value })}
|
||||
/>
|
||||
<TextControl
|
||||
label={__('Y-Axis Label', 'lcp')}
|
||||
value={yAxisLabel}
|
||||
onChange={(value) => setAttributes({ yAxisLabel: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Show X-Axis Grid', 'lcp')}
|
||||
checked={showGridX}
|
||||
onChange={(value) => setAttributes({ showGridX: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Show Y-Axis Grid', 'lcp')}
|
||||
checked={showGridY}
|
||||
onChange={(value) => setAttributes({ showGridY: value })}
|
||||
/>
|
||||
{(showGridX || showGridY) && (
|
||||
<>
|
||||
<div className="components-base-control">
|
||||
<label className="components-base-control__label">
|
||||
{__('Grid Color', 'lcp')}
|
||||
</label>
|
||||
<ColorPicker
|
||||
color={gridColor}
|
||||
onChangeComplete={(color) => setAttributes({ gridColor: color.hex })}
|
||||
/>
|
||||
</div>
|
||||
<RangeControl
|
||||
label={__('Grid Width', 'lcp')}
|
||||
value={gridWidth}
|
||||
onChange={(value) => setAttributes({ gridWidth: value })}
|
||||
min={1}
|
||||
max={5}
|
||||
step={1}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
if (tab.name === 'appearance') {
|
||||
return (
|
||||
<PanelBody>
|
||||
|
||||
</PanelBody>
|
||||
);
|
||||
}
|
||||
if (tab.name === 'tools') {
|
||||
return (
|
||||
<PanelBody>
|
||||
<ToggleControl
|
||||
label={__('Allow Download', 'lcp')}
|
||||
checked={allowDownload}
|
||||
onChange={(value) => setAttributes({ allowDownload: value })}
|
||||
/>
|
||||
{allowDownload && (
|
||||
<TextControl
|
||||
type="number"
|
||||
label={__('Max Download Width (px)', 'lcp')}
|
||||
value={parseInt(downloadMaxWidth)}
|
||||
onChange={(value) => setAttributes({ downloadMaxWidth: `${value}px` })}
|
||||
min={100}
|
||||
max={5000}
|
||||
/>
|
||||
)}
|
||||
<ToggleControl
|
||||
label={__('Show Sorting Options', 'lcp')}
|
||||
checked={showSorting}
|
||||
onChange={(value) => setAttributes({ showSorting: value })}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Show Filtering Options', 'lcp')}
|
||||
checked={showFiltering}
|
||||
onChange={(value) => setAttributes({ showFiltering: value })}
|
||||
/>
|
||||
</PanelBody>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</TabPanel>
|
||||
</InspectorControls>
|
||||
|
||||
{allowDownload && (
|
||||
<div className="lcp-bar-graph-toolbar">
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={handleDownload}
|
||||
icon="download"
|
||||
>
|
||||
{__('Download Graph', 'lcp')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{chartData && Object.keys(chartData).length > 0 ? (
|
||||
<BarGraph
|
||||
data={chartData}
|
||||
height={chartHeight}
|
||||
width={chartWidth}
|
||||
backgroundColor={backgroundColor}
|
||||
defaultBarColor={barColor}
|
||||
barOpacity={barOpacity}
|
||||
showGridX={showGridX}
|
||||
showGridY={showGridY}
|
||||
gridColor={gridColor}
|
||||
gridWidth={gridWidth}
|
||||
title={displayChartTitle ? chartTitle : ''}
|
||||
showSorting={showSorting}
|
||||
showFiltering={showFiltering}
|
||||
showBarValues={showBarValues}
|
||||
xAxisLabel={xAxisLabel}
|
||||
yAxisLabel={yAxisLabel}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="lcp-bar-graph-placeholder"
|
||||
style={{
|
||||
height: chartHeight,
|
||||
width: chartWidth,
|
||||
backgroundColor: backgroundColor,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '2px dashed #ccc',
|
||||
borderRadius: '4px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
{__('Please add data using the Data Settings panel', 'lcp')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
blocks/bar-graph/src/editor.scss
Normal file
68
blocks/bar-graph/src/editor.scss
Normal file
@ -0,0 +1,68 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-todo-list {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
|
||||
.wp-block-lcp-bar-graph {
|
||||
margin: 1em 0;
|
||||
|
||||
.lcp-bar-graph-container {
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
|
||||
svg {
|
||||
overflow: visible;
|
||||
|
||||
.bar {
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.grid line {
|
||||
stroke-opacity: 0.1;
|
||||
}
|
||||
|
||||
.domain,
|
||||
.tick line {
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
.tick text {
|
||||
fill: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lcp-bar-graph-placeholder {
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Data Selector Styles
|
||||
.lcp-data-selector {
|
||||
.components-base-control {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.lcp-data-selector-error {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
border-left: 4px solid #cc1818;
|
||||
background-color: #f8d7da;
|
||||
}
|
||||
}
|
||||
39
blocks/bar-graph/src/index.js
Normal file
39
blocks/bar-graph/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
35
blocks/bar-graph/src/save.js
Normal file
35
blocks/bar-graph/src/save.js
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function save({ attributes }) {
|
||||
const {
|
||||
chartHeight,
|
||||
backgroundColor,
|
||||
} = attributes;
|
||||
|
||||
return (
|
||||
<div { ...useBlockProps.save() }>
|
||||
<div
|
||||
className="lcp-bar-graph"
|
||||
style={{
|
||||
height: chartHeight,
|
||||
backgroundColor: backgroundColor,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
blocks/bar-graph/src/style.scss
Normal file
12
blocks/bar-graph/src/style.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-todo-list {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
blocks/bar-graph/src/view.js
Normal file
25
blocks/bar-graph/src/view.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Use this file for JavaScript code that you want to run in the front-end
|
||||
* on posts/pages that contain this block.
|
||||
*
|
||||
* When this file is defined as the value of the `viewScript` property
|
||||
* in `block.json` it will be enqueued on the front end of the site.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```js
|
||||
* {
|
||||
* "viewScript": "file:./view.js"
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If you're not making any changes to this file because your project doesn't need any
|
||||
* JavaScript running in the front-end, then you should delete this file and remove
|
||||
* the `viewScript` property from `block.json`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-todo-list block)' );
|
||||
/* eslint-enable no-console */
|
||||
254
components/LCPDataSelector.js
Normal file
254
components/LCPDataSelector.js
Normal file
@ -0,0 +1,254 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { SelectControl, TextareaControl, Button, TextControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from '@wordpress/element';
|
||||
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
|
||||
|
||||
const DEFAULT_COLORS = [
|
||||
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
|
||||
'#FF9F40', '#FF6384', '#C9CBCF', '#4BC0C0', '#FF9F40'
|
||||
];
|
||||
|
||||
/**
|
||||
* LCPDataSelector Component
|
||||
*
|
||||
* @param {Object} props Component properties
|
||||
* @param {Object} props.value Current data value
|
||||
* @param {Function} props.onChange Callback function when data changes
|
||||
* @param {string} props.dataSource Current data source type
|
||||
* @param {Function} props.onDataSourceChange Callback function when data source changes
|
||||
*/
|
||||
const LCPDataSelector = ({ value, onChange, dataSource, onDataSourceChange }) => {
|
||||
const [csvUrl, setCsvUrl] = useState('');
|
||||
const [jsonData, setJsonData] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Initialize component state with existing data
|
||||
useEffect(() => {
|
||||
if (value && Object.keys(value).length > 0) {
|
||||
if (dataSource === 'manual_json') {
|
||||
setJsonData(JSON.stringify(value, null, 2));
|
||||
} else if (dataSource === 'csv_url') {
|
||||
const storedUrl = value[Object.keys(value)[0]]?.[0]?.sourceUrl;
|
||||
if (storedUrl) {
|
||||
setCsvUrl(storedUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const dataSourceOptions = [
|
||||
{ label: __('Manual JSON', 'lcp'), value: 'manual_json' },
|
||||
{ label: __('CSV Upload', 'lcp'), value: 'csv_upload' },
|
||||
{ label: __('CSV URL', 'lcp'), value: 'csv_url' },
|
||||
];
|
||||
|
||||
const validateJsonData = (jsonString) => {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonString);
|
||||
if (typeof parsed !== 'object' || Array.isArray(parsed)) {
|
||||
throw new Error('Data must be an object with dataset names as keys');
|
||||
}
|
||||
|
||||
// Validate each dataset
|
||||
Object.entries(parsed).forEach(([datasetName, dataset]) => {
|
||||
if (!Array.isArray(dataset)) {
|
||||
throw new Error(`Dataset "${datasetName}" must be an array`);
|
||||
}
|
||||
|
||||
dataset.forEach((item, index) => {
|
||||
if (!item.label || !item.value) {
|
||||
throw new Error(`Item at index ${index} in dataset "${datasetName}" is missing required fields (label or value)`);
|
||||
}
|
||||
// Add default color if not provided
|
||||
if (!item.color) {
|
||||
item.color = DEFAULT_COLORS[index % DEFAULT_COLORS.length];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setError('');
|
||||
return parsed;
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleJsonChange = (newJsonData) => {
|
||||
setJsonData(newJsonData);
|
||||
const validData = validateJsonData(newJsonData);
|
||||
if (validData) {
|
||||
onChange(validData);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCsvUpload = (media) => {
|
||||
const sourceUrl = media.url;
|
||||
fetch(media.url)
|
||||
.then(response => response.text())
|
||||
.then(csvText => {
|
||||
const data = parseCsvToJson(csvText, sourceUrl);
|
||||
if (data) {
|
||||
onChange(data);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
setError('Error reading CSV file: ' + err.message);
|
||||
});
|
||||
};
|
||||
|
||||
const handleCsvUrlChange = (url) => {
|
||||
setCsvUrl(url);
|
||||
if (url) {
|
||||
fetch(url)
|
||||
.then(response => response.text())
|
||||
.then(csvText => {
|
||||
const data = parseCsvToJson(csvText, url);
|
||||
if (data) {
|
||||
onChange(data);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
setError('Error fetching CSV file: ' + err.message);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const parseCsvToJson = (csvText, sourceUrl = '') => {
|
||||
try {
|
||||
const lines = csvText.split('\n');
|
||||
if (lines.length < 2) {
|
||||
throw new Error('CSV must have at least a header row and one data row');
|
||||
}
|
||||
|
||||
const headers = lines[0].split(',').map(h => h.trim());
|
||||
if (!headers.includes('label') || !headers.includes('value')) {
|
||||
throw new Error('CSV must have "label" and "value" columns');
|
||||
}
|
||||
|
||||
// Create a single dataset from CSV
|
||||
const dataset = lines.slice(1)
|
||||
.filter(line => line.trim())
|
||||
.map((line, index) => {
|
||||
const values = line.split(',').map(v => v.trim());
|
||||
const item = {};
|
||||
headers.forEach((header, i) => {
|
||||
if (header === 'color' && !values[i]) {
|
||||
item[header] = DEFAULT_COLORS[index % DEFAULT_COLORS.length];
|
||||
} else {
|
||||
item[header] = values[i];
|
||||
}
|
||||
});
|
||||
if (sourceUrl) {
|
||||
item.sourceUrl = sourceUrl;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
// Create the new data structure
|
||||
const data = {
|
||||
'Dataset 1': dataset
|
||||
};
|
||||
|
||||
setError('');
|
||||
return data;
|
||||
} catch (e) {
|
||||
setError('Error parsing CSV: ' + e.message);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="lcp-data-selector">
|
||||
<SelectControl
|
||||
label={__('Data Source', 'lcp')}
|
||||
value={dataSource}
|
||||
options={dataSourceOptions}
|
||||
onChange={onDataSourceChange}
|
||||
/>
|
||||
|
||||
{dataSource === 'manual_json' && (
|
||||
<TextareaControl
|
||||
label={__('JSON Data', 'lcp')}
|
||||
help={__('Enter datasets with arrays containing objects with label and value properties. Color is optional.', 'lcp')}
|
||||
value={jsonData}
|
||||
onChange={handleJsonChange}
|
||||
placeholder={`{
|
||||
"Dataset 1": [
|
||||
{
|
||||
"label": "Label 1",
|
||||
"value": 100,
|
||||
"color": "red"
|
||||
},
|
||||
{
|
||||
"label": "Label 2",
|
||||
"value": 200
|
||||
}
|
||||
],
|
||||
"Dataset 2": [
|
||||
{
|
||||
"label": "Label 3",
|
||||
"value": 300,
|
||||
"color": "green"
|
||||
}
|
||||
]
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dataSource === 'csv_upload' && (
|
||||
<MediaUploadCheck>
|
||||
<MediaUpload
|
||||
onSelect={handleCsvUpload}
|
||||
allowedTypes={['text/csv']}
|
||||
render={({ open }) => (
|
||||
<div>
|
||||
<Button onClick={open} isPrimary>
|
||||
{__('Upload CSV File', 'lcp')}
|
||||
</Button>
|
||||
{value && Object.keys(value).length > 0 && value[Object.keys(value)[0]]?.[0]?.sourceUrl && (
|
||||
<div className="current-file" style={{ marginTop: '10px' }}>
|
||||
{__('Current file:', 'lcp')} {value[Object.keys(value)[0]][0].sourceUrl.split('/').pop()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</MediaUploadCheck>
|
||||
)}
|
||||
|
||||
{dataSource === 'csv_url' && (
|
||||
<TextControl
|
||||
label={__('CSV URL', 'lcp')}
|
||||
value={csvUrl}
|
||||
onChange={handleCsvUrlChange}
|
||||
help={__('Enter URL of a CSV file with label and value columns. Color column is optional.', 'lcp')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="lcp-data-selector-error" style={{ color: 'red', marginTop: '10px' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{value && Object.keys(value).length > 0 && (
|
||||
<div className="data-preview" style={{ marginTop: '15px' }}>
|
||||
<h4>{__('Current Data Preview:', 'lcp')}</h4>
|
||||
<div style={{ fontSize: '12px', color: '#666' }}>
|
||||
{Object.entries(value).map(([datasetName, dataset]) => (
|
||||
<div key={datasetName}>
|
||||
{datasetName}: {dataset.length} {__('data points', 'lcp')}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LCPDataSelector;
|
||||
49
components/LCPDimensionControl.js
Normal file
49
components/LCPDimensionControl.js
Normal file
@ -0,0 +1,49 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { SelectControl, TextControl } from '@wordpress/components';
|
||||
|
||||
const LCPDimensionControl = ({ label, value, onChange }) => {
|
||||
// Parse the current value into number and unit
|
||||
const parseValue = (val) => {
|
||||
const match = val?.match(/^(\d+)(.*)$/);
|
||||
return match ? {
|
||||
number: parseInt(match[1], 10),
|
||||
unit: match[2] || 'px'
|
||||
} : { number: 300, unit: 'px' };
|
||||
};
|
||||
|
||||
const { number, unit } = parseValue(value);
|
||||
|
||||
const units = [
|
||||
{ label: 'Pixels (px)', value: 'px' },
|
||||
{ label: 'Percentage (%)', value: '%' },
|
||||
{ label: 'Viewport Width (vw)', value: 'vw' },
|
||||
{ label: 'Viewport Height (vh)', value: 'vh' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="lcp-dimension-control">
|
||||
<label className="components-base-control__label">{label}</label>
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
|
||||
<TextControl
|
||||
type="number"
|
||||
value={number}
|
||||
onChange={(newNumber) => {
|
||||
onChange(`${newNumber}${unit}`);
|
||||
}}
|
||||
min={0}
|
||||
style={{ width: '80px' }}
|
||||
/>
|
||||
<SelectControl
|
||||
value={unit}
|
||||
options={units}
|
||||
onChange={(newUnit) => {
|
||||
onChange(`${number}${newUnit}`);
|
||||
}}
|
||||
style={{ minWidth: '100px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LCPDimensionControl;
|
||||
6
components/package-lock.json
generated
Normal file
6
components/package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "components",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
223
lcp-data-blocks.php
Normal file
223
lcp-data-blocks.php
Normal file
@ -0,0 +1,223 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: LCP Data Blocks
|
||||
* Plugin URI: https://coosguide.com
|
||||
* Description: A plugin for displaying various charts and graphs in Local Content Pro
|
||||
* Version: 1.0.0
|
||||
* Author: CoosGuide
|
||||
* Author URI: https://coosguide.com
|
||||
* License: GPL v2 or later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
* Text Domain: lcp
|
||||
*/
|
||||
|
||||
if (!defined('ABSPATH')) {
|
||||
exit; // Exit if accessed directly
|
||||
}
|
||||
|
||||
// Include block files
|
||||
require_once plugin_dir_path(__FILE__) . 'blocks/bar-graph/lcp-bar-graph.php';
|
||||
|
||||
/**
|
||||
* Add custom category for LCP blocks
|
||||
*/
|
||||
function lcp_block_categories($categories) {
|
||||
return array_merge(
|
||||
$categories,
|
||||
array(
|
||||
array(
|
||||
'slug' => 'lcp-blocks',
|
||||
'title' => __('LCP Blocks', 'lcp'),
|
||||
'icon' => 'chart-bar',
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
add_filter('block_categories_all', 'lcp_block_categories', 10, 1);
|
||||
|
||||
// Register the Data Collection Custom Post Type
|
||||
function lcp_register_data_collection_post_type() {
|
||||
$labels = array(
|
||||
'name' => _x('Data Collections', 'Post type general name', 'lcp-data'),
|
||||
'singular_name' => _x('Data Collection', 'Post type singular name', 'lcp-data'),
|
||||
'menu_name' => _x('Data Collections', 'Admin Menu text', 'lcp-data'),
|
||||
'name_admin_bar' => _x('Data Collection', 'Add New on Toolbar', 'lcp-data'),
|
||||
'add_new' => __('Add New', 'lcp-data'),
|
||||
'add_new_item' => __('Add New Data Collection', 'lcp-data'),
|
||||
'new_item' => __('New Data Collection', 'lcp-data'),
|
||||
'edit_item' => __('Edit Data Collection', 'lcp-data'),
|
||||
'view_item' => __('View Data Collection', 'lcp-data'),
|
||||
'all_items' => __('All Data Collections', 'lcp-data'),
|
||||
'search_items' => __('Search Data Collections', 'lcp-data'),
|
||||
'parent_item_colon' => __('Parent Data Collections:', 'lcp-data'),
|
||||
'not_found' => __('No data collections found.', 'lcp-data'),
|
||||
'not_found_in_trash' => __('No data collections found in Trash.', 'lcp-data'),
|
||||
'featured_image' => _x('Data Collection Cover Image', 'Overrides the "Featured Image" phrase', 'lcp-data'),
|
||||
'set_featured_image' => _x('Set cover image', 'Overrides the "Set featured image" phrase', 'lcp-data'),
|
||||
'remove_featured_image'=> _x('Remove cover image', 'Overrides the "Remove featured image" phrase', 'lcp-data'),
|
||||
'use_featured_image' => _x('Use as cover image', 'Overrides the "Use as featured image" phrase', 'lcp-data'),
|
||||
'archives' => _x('Data Collection archives', 'The post type archive label used in nav menus', 'lcp-data'),
|
||||
'insert_into_item' => _x('Insert into data collection', 'Overrides the "Insert into post" phrase', 'lcp-data'),
|
||||
'uploaded_to_this_item'=> _x('Uploaded to this data collection', 'Overrides the "Uploaded to this post" phrase', 'lcp-data'),
|
||||
'filter_items_list' => _x('Filter data collections list', 'Screen reader text for the filter links', 'lcp-data'),
|
||||
'items_list_navigation'=> _x('Data Collections list navigation', 'Screen reader text for the pagination', 'lcp-data'),
|
||||
'items_list' => _x('Data Collections list', 'Screen reader text for the items list', 'lcp-data'),
|
||||
);
|
||||
|
||||
$args = array(
|
||||
'labels' => $labels,
|
||||
'public' => true,
|
||||
'publicly_queryable' => true,
|
||||
'show_ui' => true,
|
||||
'show_in_menu' => true,
|
||||
'query_var' => true,
|
||||
'rewrite' => array('slug' => 'data-collection'),
|
||||
'capability_type' => 'post',
|
||||
'has_archive' => true,
|
||||
'hierarchical' => false,
|
||||
'menu_position' => null,
|
||||
'menu_icon' => 'dashicons-chart-area',
|
||||
'supports' => array('title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields'),
|
||||
'show_in_rest' => true, // Enable Gutenberg editor
|
||||
);
|
||||
|
||||
register_post_type('lcp-data-collection', $args);
|
||||
}
|
||||
add_action('init', 'lcp_register_data_collection_post_type');
|
||||
|
||||
// Register meta field for datasets
|
||||
function lcp_register_meta_fields() {
|
||||
register_post_meta('lcp-data-collection', 'lcp_datasets', array(
|
||||
'show_in_rest' => true,
|
||||
'single' => true,
|
||||
'type' => 'array',
|
||||
'auth_callback' => function() {
|
||||
return current_user_can('edit_posts');
|
||||
},
|
||||
'sanitize_callback' => function($meta_value) {
|
||||
if (!is_array($meta_value)) {
|
||||
return array();
|
||||
}
|
||||
|
||||
$sanitized = array();
|
||||
foreach ($meta_value as $key => $dataset) {
|
||||
$sanitized[$key] = array(
|
||||
'dataset_name' => sanitize_text_field($dataset['dataset_name']),
|
||||
'dataset_source' => sanitize_text_field($dataset['dataset_source']),
|
||||
'dataset_json' => json_decode(wp_unslash($dataset['dataset_json']), true)
|
||||
);
|
||||
}
|
||||
return $sanitized;
|
||||
}
|
||||
));
|
||||
}
|
||||
add_action('init', 'lcp_register_meta_fields');
|
||||
|
||||
// Add meta box for datasets
|
||||
function lcp_add_datasets_meta_box() {
|
||||
add_meta_box(
|
||||
'lcp_datasets_meta_box',
|
||||
'Datasets',
|
||||
'lcp_render_datasets_meta_box',
|
||||
'lcp-data-collection',
|
||||
'normal',
|
||||
'high'
|
||||
);
|
||||
}
|
||||
add_action('add_meta_boxes', 'lcp_add_datasets_meta_box');
|
||||
|
||||
// Render the meta box
|
||||
function lcp_render_datasets_meta_box($post) {
|
||||
// Get existing datasets
|
||||
$datasets = get_post_meta($post->ID, 'lcp_datasets', true);
|
||||
|
||||
// Ensure it's an array
|
||||
if (!is_array($datasets)) {
|
||||
$datasets = array();
|
||||
}
|
||||
|
||||
// Convert PHP array to JSON for the React component
|
||||
$datasets_json = json_encode($datasets);
|
||||
|
||||
// Add nonce for verification
|
||||
wp_nonce_field('lcp_datasets_meta_box', 'lcp_datasets_meta_box_nonce');
|
||||
|
||||
// Add hidden input for data
|
||||
?>
|
||||
<input type="hidden" id="lcp_datasets_data" name="lcp_datasets_data" value="<?php echo esc_attr($datasets_json); ?>" />
|
||||
<div id="lcp-datasets-repeater" data-datasets="<?php echo esc_attr($datasets_json); ?>"></div>
|
||||
<?php
|
||||
}
|
||||
|
||||
// Save the meta box data
|
||||
function lcp_save_datasets_meta($post_id) {
|
||||
// Check if our nonce is set and verify it
|
||||
if (!isset($_POST['lcp_datasets_meta_box_nonce']) ||
|
||||
!wp_verify_nonce($_POST['lcp_datasets_meta_box_nonce'], 'lcp_datasets_meta_box')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If this is an autosave, don't do anything
|
||||
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check the user's permissions
|
||||
if (!current_user_can('edit_post', $post_id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Save the data
|
||||
if (isset($_POST['lcp_datasets_data'])) {
|
||||
$datasets = json_decode(wp_unslash($_POST['lcp_datasets_data']), true);
|
||||
if (is_array($datasets)) {
|
||||
update_post_meta($post_id, 'lcp_datasets', $datasets);
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action('save_post_lcp-data-collection', 'lcp_save_datasets_meta');
|
||||
|
||||
// Enqueue scripts and styles for the admin
|
||||
function lcp_enqueue_admin_scripts($hook) {
|
||||
global $post;
|
||||
|
||||
// Only enqueue on our custom post type edit screen
|
||||
if ($hook == 'post-new.php' || $hook == 'post.php') {
|
||||
if (is_object($post) && $post->post_type == 'lcp-data-collection') {
|
||||
// Enqueue React and dependencies
|
||||
wp_enqueue_script('wp-element');
|
||||
wp_enqueue_script('wp-components');
|
||||
wp_enqueue_script('wp-data');
|
||||
|
||||
// Enqueue our custom scripts
|
||||
wp_enqueue_script(
|
||||
'lcp-form-repeater',
|
||||
plugins_url('build/index.js', __FILE__),
|
||||
array('wp-element', 'wp-components', 'wp-data'),
|
||||
filemtime(plugin_dir_path(__FILE__) . 'build/index.js'),
|
||||
true
|
||||
);
|
||||
|
||||
// Pass data to JavaScript
|
||||
wp_localize_script('lcp-form-repeater', 'lcpDataSettings', array(
|
||||
'root' => esc_url_raw(rest_url()),
|
||||
'nonce' => wp_create_nonce('wp_rest'),
|
||||
'postId' => $post->ID
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'lcp_enqueue_admin_scripts');
|
||||
|
||||
// Flush rewrite rules on plugin activation
|
||||
function lcp_data_activate() {
|
||||
lcp_register_data_collection_post_type();
|
||||
flush_rewrite_rules();
|
||||
}
|
||||
register_activation_hook(__FILE__, 'lcp_data_activate');
|
||||
|
||||
// Flush rewrite rules on plugin deactivation
|
||||
function lcp_data_deactivate() {
|
||||
flush_rewrite_rules();
|
||||
}
|
||||
register_deactivation_hook(__FILE__, 'lcp_data_deactivate');
|
||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "lcp-data-blocks",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
Reference in New Issue
Block a user