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

Added support for front-end rendering

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-15 03:48:59 -08:00
parent cb0ab8055d
commit 83f5cad36f
8 changed files with 394 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
blocks/bar-graph/lcp-bar-graph.php
View File

@ -51,24 +51,96 @@ function lcp_render_bar_graph_block($attributes, $content) {
}
// Get attributes with defaults
$chart_height = $attributes['chartHeight'] ?? '400px';
$chart_height = intval($attributes['chartHeight'] ?? 400);
$chart_width = intval($attributes['chartWidth'] ?? 600);
$background_color = $attributes['backgroundColor'] ?? '#ffffff';
$bar_color = $attributes['barColor'] ?? '#0073aa';
$bar_opacity = $attributes['barOpacity'] ?? 1;
$bar_opacity = floatval($attributes['barOpacity'] ?? 0.8);
$show_grid_y = $attributes['showGridY'] ?? true;
$grid_color = $attributes['gridColor'] ?? '#e0e0e0';
$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('d3');
wp_enqueue_script(
'lcp-d3',
'https://d3js.org/d3.v7.min.js',
array(),
'7.0.0',
true
);
// Return the block's container
// 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"><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)
'<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)
);
}