private static $instance = null;

/**

public static function get_instance() {

if (self::$instance === null) {

self::$instance = new self();

}

return self::$instance;

}

/**

private function __construct() {

add_action('init', array($this, 'register_assets'));

add_action('init', array($this, 'register_block'));

add_shortcode('wp-data-visualizer', array($this, 'render_chart'));

add_action('admin_menu', array($this, 'add_admin_menu'));

// AJAX proxy

add_action('wp_ajax_chc_proxy_fetch', array($this, 'ajax_proxy_fetch'));

add_action('wp_ajax_nopriv_chc_proxy_fetch', array($this, 'ajax_proxy_fetch')); // For frontend, if needed

}

/**

public function add_admin_menu() {

add_menu_page(

__('ChartCrafter', 'wp-data-visualizer'),

__('ChartCrafter', 'wp-data-visualizer'),

'manage_options',

'wp-data-visualizer',

array($this, 'render_admin_page'),

'dashicons-chart-area',

22

);

}

/**

public function render_admin_page() {

wp_enqueue_script('chartcrafter-admin');

wp_enqueue_style('chartcrafter-style');

$sales_url = CHARTCRAFTER_URL . 'demo-data/sales.json';

$traffic_url = CHARTCRAFTER_URL . 'demo-data/traffic.json';

$revenue_url = CHARTCRAFTER_URL . 'demo-data/revenue.json';

?>

<div class="wrap">

<h1 class="wp-heading-inline"><?php esc_html_e('ChartCrafter', 'wp-data-visualizer'); ?></h1>

<p><?php esc_html_e('Transform JSON data into beautiful, interactive charts.', 'wp-data-visualizer'); ?></p>

<hr class="wp-header-end">

<div class="chc-admin-layout" style="display: flex; gap: 20px; margin-top: 20px; align-items: flex-start;">

<!-- Sidebar Controls -->

<div class="chc-sidebar" style="flex: 0 0 350px;">

<!-- Configuration Card -->

<div class="card" style="margin: 0 0 20px 0; max-width: none;">

<h2><?php esc_html_e('Settings', 'wp-data-visualizer'); ?></h2>

<div style="margin-bottom: 15px;">

<label for="chc-preview-url" style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Data Source URL', 'wp-data-visualizer'); ?></label>

<input type="text" id="chc-preview-url" class="widefat" placeholder="https://api.example.com/data.json">

<p class="description"><?php esc_html_e('Must be a publicly accessible JSON endpoint.', 'wp-data-visualizer'); ?></p>

</div>

<div style="margin-bottom: 15px;">

<label for="chc-type" style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Chart Type', 'wp-data-visualizer'); ?></label>

<select id="chc-type" class="widefat">

<option value="line"><?php esc_html_e('Line Chart', 'wp-data-visualizer'); ?></option>

<option value="bar"><?php esc_html_e('Bar Chart', 'wp-data-visualizer'); ?></option>

<option value="pie"><?php esc_html_e('Pie Chart', 'wp-data-visualizer'); ?></option>

<option value="doughnut"><?php esc_html_e('Doughnut Chart', 'wp-data-visualizer'); ?></option>

<option value="radar"><?php esc_html_e('Radar Chart', 'wp-data-visualizer'); ?></option>

<option value="polarArea"><?php esc_html_e('Polar Area Chart', 'wp-data-visualizer'); ?></option>

</select>

</div>

<div style="margin-bottom: 15px;">

<label for="chc-height" style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Chart Height', 'wp-data-visualizer'); ?></label>

<select id="chc-height" class="widefat">

<option value="300">300px</option>

<option value="400" selected>400px</option>

<option value="500">500px</option>

<option value="600">600px</option>

</select>

</div>

<div style="display: flex; gap: 10px; margin-top: 15px;">

<button id="chc-preview-btn" class="button button-primary button-large" style="flex: 1;"><?php esc_html_e('Preview Chart', 'wp-data-visualizer'); ?></button>

</div>

</div>

<!-- Usage info -->

<div class="card" style="margin: 0 0 20px 0; max-width: none;">

<h2><?php esc_html_e('Usage', 'wp-data-visualizer'); ?></h2>

<p><?php esc_html_e('Copy the shortcode below:', 'wp-data-visualizer'); ?></p>

<code id="chc-shortcode-display" style="display: block; padding: 10px; background: #f0f0f1; margin: 10px 0; font-size: 12px; word-break: break-all;">[wp-data-visualizer source="..."]</code>

<button id="chc-copy-shortcode" class="button button-secondary" style="width: 100%;"><?php esc_html_e('Copy Shortcode', 'wp-data-visualizer'); ?></button>

</div>

<!-- Demos -->

<div class="card" style="margin: 0; max-width: none;">

<h2><?php esc_html_e('Quick Demos', 'wp-data-visualizer'); ?></h2>

<p><?php esc_html_e('Click a dataset to load:', 'wp-data-visualizer'); ?></p>

<ul class="chc-demo-links" style="margin: 0;">

<li style="margin-bottom: 8px;"><a href="#" class="button" style="width: 100%; text-align: left;" data-url="<?php echo esc_url($sales_url); ?>" data-type="bar">📊 <?php esc_html_e('Monthly Sales (Bar)', 'wp-data-visualizer'); ?></a></li>

<li style="margin-bottom: 8px;"><a href="#" class="button" style="width: 100%; text-align: left;" data-url="<?php echo esc_url($traffic_url); ?>" data-type="line">📈 <?php esc_html_e('Website Traffic (Line)', 'wp-data-visualizer'); ?></a></li>

<li style="margin-bottom: 0;"><a href="#" class="button" style="width: 100%; text-align: left;" data-url="<?php echo esc_url($revenue_url); ?>" data-type="doughnut">🍩 <?php esc_html_e('Revenue Sources (Doughnut)', 'wp-data-visualizer'); ?></a></li>

</ul>

</div>

</div>

<!-- Main Preview Area -->

<div class="chc-preview-area" style="flex: 1; min-width: 0;">

<div class="card" style="margin: 0; max-width: none; min-height: 500px; display: flex; flex-direction: column;">

<h2 style="border-bottom: 1px solid #f0f0f1; padding-bottom: 15px; margin-bottom: 15px; margin-top: 0;"><?php esc_html_e('Live Preview', 'wp-data-visualizer'); ?></h2>

<div id="chc-preview-wrap" style="flex: 1; overflow: auto; background: #fff; padding: 20px;">

<div id="chc-preview-container" style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">

<div style="text-align: center;">

<span class="dashicons dashicons-chart-area" style="font-size: 48px; width: 48px; height: 48px; color: #ddd;"></span>

<p><?php esc_html_e('Select a demo or enter a URL to generate a chart.', 'wp-data-visualizer'); ?></p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<?php

}

/**

public function register_assets() {

// Chart.js - bundled locally for compliance.

wp_register_script(

'chartjs',

CHARTCRAFTER_URL . 'assets/js/libs/chart.umd.min.js',

array(),

'4.4.1',

true

);

wp_register_script(

'chartcrafter-lib',

CHARTCRAFTER_URL . 'assets/js/chartcrafter.js',

array('chartjs'),

CHARTCRAFTER_VERSION,

true

);

wp_register_script(

'chartcrafter-block',

CHARTCRAFTER_URL . 'assets/js/block.js',

array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-server-side-render', 'chartcrafter-lib'),

CHARTCRAFTER_VERSION,

true

);

wp_localize_script('chartcrafter-block', 'chartcrafterData', array(

'ajaxUrl' => admin_url('admin-ajax.php'),

'nonce' => wp_create_nonce('chc_proxy_nonce'),

'demoUrls' => array(

array('label' => __('Select a demo...', 'wp-data-visualizer'), 'value' => ''),

array('label' => __('Monthly Sales', 'wp-data-visualizer'), 'value' => CHARTCRAFTER_URL . 'demo-data/sales.json'),

array('label' => __('Website Traffic', 'wp-data-visualizer'), 'value' => CHARTCRAFTER_URL . 'demo-data/traffic.json'),

array('label' => __('Revenue Sources', 'wp-data-visualizer'), 'value' => CHARTCRAFTER_URL . 'demo-data/revenue.json'),

)

));

wp_register_script(

'chartcrafter-admin',

CHARTCRAFTER_URL . 'assets/js/admin.js',

array('chartcrafter-lib'),

CHARTCRAFTER_VERSION,

true

);

wp_localize_script('chartcrafter-admin', 'chartcrafterAdmin', array(

'ajaxUrl' => admin_url('admin-ajax.php'),

'nonce' => wp_create_nonce('chc_proxy_nonce'),

'i18n' => array(

'validUrl' => __('Please enter a valid URL', 'wp-data-visualizer'),

'loading' => __('Loading chart...', 'wp-data-visualizer'),

'libNotLoaded' => __('ChartCrafter library not loaded.', 'wp-data-visualizer'),

'copyFailed' => __('Failed to copy. Please copy manually.', 'wp-data-visualizer'),

'copied' => __('Copied!', 'wp-data-visualizer')

)

));

wp_register_script(

'chartcrafter-frontend',

CHARTCRAFTER_URL . 'assets/js/frontend.js',

array('chartcrafter-lib'),

CHARTCRAFTER_VERSION,

true

);

wp_localize_script('chartcrafter-frontend', 'chartcrafterData', array(

'ajaxUrl' => admin_url('admin-ajax.php'),

'nonce' => wp_create_nonce('chc_proxy_nonce')

));

wp_register_style(

'chartcrafter-style',

CHARTCRAFTER_URL . 'assets/css/chartcrafter.css',

array(),

CHARTCRAFTER_VERSION

);

}

/**

public function render_chart($atts) {

$atts = shortcode_atts(array(

'source' => '',

'id' => 'chc-' . uniqid(),

'type' => 'bar',

'height' => 400,

'title' => '',

'labels_field' => 'labels',

'data_field' => 'data',

'datasets_field' => 'datasets'

), $atts, 'wp-data-visualizer');

$source_url = esc_url_raw($atts['source']);

if (empty($source_url)) {

return '';

}

// SWR Caching

$cache_key = 'chc_cache_' . md5($source_url);

$data = get_transient($cache_key);

if ($data === false) {

// Background fetch for next time (SWR pattern)

$response = wp_remote_get($source_url, array('timeout' => 5, 'sslverify' => false));

if (!is_wp_error($response)) {

$body = wp_remote_retrieve_body($response);

$data = json_decode($body, true);

if ($data) {

set_transient($cache_key, $data, HOUR_IN_SECONDS);

}

}

}

wp_enqueue_script('chartcrafter-frontend');

wp_enqueue_style('chartcrafter-style');

$config = array(

'source' => $source_url,

'type' => $atts['type'],

'height' => (int)$atts['height'],

'title' => $atts['title'],

'fields' => array(

'labels' => $atts['labels_field'],

'data' => $atts['data_field'],

'datasets' => $atts['datasets_field']

)

);

ob_start();

?>

<div id="<?php echo esc_attr($atts['id']); ?>"

class="chartcrafter-container"

style="height: <?php echo esc_attr($atts['height']); ?>px;"

data-config='<?php echo esc_attr(wp_json_encode($config)); ?>'>

<?php if ($data): ?>

<script type="application/json" class="chc-initial-data"><?php echo wp_json_encode($data); ?></script>

<?php endif; ?>

<div class="chc-loading">

<div class="chc-spinner"></div>

<p><?php esc_html_e('Loading chart...', 'wp-data-visualizer'); ?></p>

</div>

</div>

<?php

return ob_get_clean();

}

/**

public function register_block() {

if (!function_exists('register_block_type')) {

return;

}

register_block_type('chartcrafter/visualizer', array(

'editor_script' => 'chartcrafter-block',

'editor_style' => 'chartcrafter-style',

));

}

/**

public function render_block_callback($attributes) {

return $this->render_chart($attributes);

}