147 lines
4.6 KiB
PHP
147 lines
4.6 KiB
PHP
<?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 = intval($attributes['chartHeight'] ?? 400);
|
|
$chart_width = intval($attributes['chartWidth'] ?? 600);
|
|
$background_color = $attributes['backgroundColor'] ?? '#ffffff';
|
|
$bar_color = $attributes['barColor'] ?? '#0073aa';
|
|
$bar_opacity = floatval($attributes['barOpacity'] ?? 0.8);
|
|
$show_grid_y = $attributes['showGridY'] ?? true;
|
|
$show_grid_x = $attributes['showGridX'] ?? true;
|
|
$x_grid_color = $attributes['xGridColor'] ?? '#e0e0e0';
|
|
$y_grid_color = $attributes['yGridColor'] ?? '#e0e0e0';
|
|
$x_grid_width = intval($attributes['xGridWidth'] ?? 1);
|
|
$y_grid_width = intval($attributes['yGridWidth'] ?? 1);
|
|
$show_bar_values = $attributes['showBarValues'] ?? false;
|
|
$display_chart_title = $attributes['displayChartTitle'] ?? false;
|
|
$chart_title = $attributes['chartTitle'] ?? '';
|
|
$x_axis_label = $attributes['xAxisLabel'] ?? '';
|
|
$y_axis_label = $attributes['yAxisLabel'] ?? '';
|
|
$chart_color_source = $attributes['chartColorSource'] ?? 'default';
|
|
$chart_data = $attributes['chartData'] ?? array();
|
|
$chart_custom_colors = $attributes['chartCustomColors'] ?? array();
|
|
|
|
// Ensure chart data is properly formatted
|
|
if (is_string($chart_data)) {
|
|
$chart_data = json_decode($chart_data, true) ?? array();
|
|
}
|
|
|
|
if (is_string($chart_custom_colors)) {
|
|
$chart_custom_colors = json_decode($chart_custom_colors, true) ?? array();
|
|
}
|
|
|
|
// Create unique ID for this graph instance
|
|
$block_id = 'bar-graph-' . uniqid();
|
|
|
|
// Prepare data for JavaScript
|
|
$graph_data = array(
|
|
'blockId' => $block_id,
|
|
'attributes' => array(
|
|
'chartHeight' => $chart_height,
|
|
'chartWidth' => $chart_width,
|
|
'backgroundColor' => $background_color,
|
|
'barColor' => $bar_color,
|
|
'barOpacity' => $bar_opacity,
|
|
'showGridY' => $show_grid_y,
|
|
'showGridX' => $show_grid_x,
|
|
'xGridColor' => $x_grid_color,
|
|
'yGridColor' => $y_grid_color,
|
|
'xGridWidth' => $x_grid_width,
|
|
'yGridWidth' => $y_grid_width,
|
|
'showBarValues' => $show_bar_values,
|
|
'displayChartTitle' => $display_chart_title,
|
|
'chartTitle' => $chart_title,
|
|
'xAxisLabel' => $x_axis_label,
|
|
'yAxisLabel' => $y_axis_label,
|
|
'chartColorSource' => $chart_color_source,
|
|
'chartData' => $chart_data,
|
|
'chartCustomColors' => $chart_custom_colors
|
|
)
|
|
);
|
|
|
|
// Enqueue D3.js
|
|
wp_enqueue_script(
|
|
'lcp-d3',
|
|
'https://d3js.org/d3.v7.min.js',
|
|
array(),
|
|
'7.0.0',
|
|
true
|
|
);
|
|
|
|
// Enqueue our view script
|
|
wp_enqueue_script(
|
|
'lcp-bar-graph-view',
|
|
plugins_url('build/view.js', __FILE__),
|
|
array('lcp-d3'),
|
|
filemtime(plugin_dir_path(__FILE__) . 'build/view.js'),
|
|
true
|
|
);
|
|
|
|
// Pass data to JavaScript
|
|
wp_add_inline_script(
|
|
'lcp-bar-graph-view',
|
|
'window.lcpBarGraphData = window.lcpBarGraphData || {};' .
|
|
'window.lcpBarGraphData["' . $block_id . '"] = ' . wp_json_encode($graph_data) . ';',
|
|
'before'
|
|
);
|
|
|
|
// Return the block's container with responsive width
|
|
return sprintf(
|
|
'<div class="wp-block-lcp-bar-graph" id="%s">
|
|
<div class="bar-graph-container" style="width: 100%%; height: %dpx;"></div>
|
|
</div>',
|
|
esc_attr($block_id),
|
|
esc_attr($chart_height)
|
|
);
|
|
}
|