chartcrafter.php

<?php
/**
 * Plugin Name: ChartCrafter – JSON to Beautiful Charts
 * Plugin URI: https://github.com/TableCrafter/wp-data-visualizer
 * Description: Transform JSON data into stunning, interactive charts. Supports line, bar, pie, doughnut, and more chart types.
 * Version: 1.0.0
 * Author: Fahd Murtaza
 * Author URI: https://github.com/fahdi
 * License: GPLv2 or later
 * Text Domain: wp-data-visualizer
 * Tested up to: 6.9
 */

if (!defined('ABSPATH')) {
    exit;
}

define('CHARTCRAFTER_VERSION', '1.0.0');
define('CHARTCRAFTER_URL', plugin_dir_url(__FILE__));
define('CHARTCRAFTER_PATH', plugin_dir_path(__FILE__));

class ChartCrafter {
    
    private static $instance = null;
    
    /**
     * Get singleton instance.
     * 
     * @return ChartCrafter
     */
    public static function get_instance() {
        if (self::$instance === null) {
            self::$instance = new self();
        }
        return self::$instance;
    }
    
    /**
     * Constructor.
     */
    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
    }

    /**
     * Add admin menu page.
     */
    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
        );
    }

    /**
     * Render the admin dashboard page.
     */
    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
    }

    
    /**
     * Register assets.
     */
    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
        );
    }

    
    /**
     * Shortcode to render the chart container.
     * 
     * @param array $atts Shortcode attributes.
     * @return string HTML output.
     */
    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();
    }

    /**
     * Register Gutenberg block
     */
    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',
        ));
    }

    /**
     * Block Render Callback
     */
    public function render_block_callback($attributes) {
        return $this->render_chart($attributes);
    }

}

ChartCrafter::get_instance();