${ msg }
`; + return msg; + } +} + +// ── Palette (matches ChooserModal / WP-admin style) ─────────────────────────── +const C = { + bg: '#f6f7f7', + sidebar: '#f0f0f1', + border: '#dcdcde', + dark: '#1d2327', + gray1: '#646970', + gray2: '#8c8f94', + gray3: '#c3c4c7', + dim: '#f0f0f1', + teal: '#39c3d2', +}; + +const PROMPT_PRESETS = [ + __( 'Bar chart comparing totals by category, sorted descending', 'visualizer' ), + __( 'Line chart showing trend over time with markers', 'visualizer' ), + __( 'Stacked area chart to show part-to-whole over time', 'visualizer' ), + __( 'Scatter plot showing correlation between two numeric fields', 'visualizer' ), + __( 'Pie chart showing share by category with labels', 'visualizer' ), +]; + +// ── Helpers ─────────────────────────────────────────────────────────────────── + +/** Reconstruct a CSV string from Visualizer series/data arrays for display. */ +function buildCsvFromData( series, data ) { + if ( ! Array.isArray( series ) || ! series.length ) return ''; + const labels = series.map( ( s ) => s.label ).join( ',' ); + const types = series.map( ( s ) => s.type || 'string' ).join( ',' ); + const rows = ( data || [] ).map( ( row ) => row.join( ',' ) ); + return [ labels, types, ...rows ].join( '\n' ); +} + +// ── Step badge ──────────────────────────────────────────────────────────────── +function StepBadge( { num, active } ) { + return ( ++ { __( 'Choose how you want to build your chart.', 'visualizer' ) } +
+ ++ { __( 'We will open your selected builder by default next time.', 'visualizer' ) } +
++ { __( 'Visualizer', 'visualizer' ) } +
+No chart code found.
'; + return; + } + + const values = toD3Values( chart.series, chart.data ); + + function doRender() { + try { + // eslint-disable-next-line no-new-func + new Function( 'd3', 'topojson', 'container', 'data', code )( d3, topojson, container, values ); + } catch ( err ) { + container.innerHTML = 'Chart render error: ' + err.message + '
'; + } + } + + // Double requestAnimationFrame — ensures browser has completed layout before measuring. + requestAnimationFrame( () => requestAnimationFrame( doRender ) ); +} + +function ensurePngName( name ) { + if ( ! name ) return 'chart.png'; + return name.toLowerCase().endsWith( '.png' ) ? name : `${ name }.png`; +} + +function downloadDataUrl( dataUrl, name ) { + const link = document.createElement( 'a' ); + link.href = dataUrl; + link.download = ensurePngName( name ); + document.body.appendChild( link ); + link.click(); + link.remove(); +} + +function svgToPng( svg, callback ) { + const rect = svg.getBoundingClientRect(); + const width = parseFloat( svg.getAttribute( 'width' ) ) || rect.width || 800; + const height = parseFloat( svg.getAttribute( 'height' ) ) || rect.height || 600; + const clone = svg.cloneNode( true ); + clone.setAttribute( 'width', width ); + clone.setAttribute( 'height', height ); + const serializer = new XMLSerializer(); + const svgText = serializer.serializeToString( clone ); + const svgDataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent( svgText ); + + const img = new Image(); + img.onload = () => { + const canvas = document.createElement( 'canvas' ); + canvas.width = width; + canvas.height = height; + const ctx = canvas.getContext( '2d' ); + ctx.fillStyle = '#ffffff'; + ctx.fillRect( 0, 0, width, height ); + ctx.drawImage( img, 0, 0 ); + callback( canvas.toDataURL( 'image/png' ) ); + }; + img.onerror = () => callback( null ); + img.src = svgDataUrl; +} + +function handleImageAction( id, name, action ) { + const container = document.getElementById( id ); + if ( ! container ) return; + + const canvas = container.querySelector( 'canvas' ); + if ( canvas && typeof canvas.toDataURL === 'function' ) { + const img = canvas.toDataURL( 'image/png' ); + if ( action === 'print' ) { + const win = window.open(); + win.document.write( "' . esc_html__( 'Please select a chart from the widget settings.', 'visualizer' ) . '
'; + } + return; + } + + // Detect Elementor edit / preview context early — needed before do_shortcode(). + $is_editor = \Elementor\Plugin::$instance->editor->is_edit_mode() || + \Elementor\Plugin::$instance->preview->is_preview_mode(); + + // In the editor, force lazy-loading off so the chart renders immediately in the + // preview iframe without requiring a user-interaction event (scroll, hover, etc.). + // Also suppress action buttons (edit, export, etc.) — they are meaningless inside + // the Elementor preview and the edit link does nothing there. + if ( $is_editor ) { + add_filter( 'visualizer_lazy_load_chart', '__return_false' ); + add_filter( 'visualizer_pro_add_actions', '__return_empty_array' ); + } + + // Ensure visualizer-customization is registered before the shortcode enqueues + // visualizer-render-{library} which depends on it. wp_enqueue_scripts never fires + // in admin or AJAX contexts (Elementor editor / AJAX re-render), so we trigger the + // action manually. It is a no-op when already registered. + do_action( 'visualizer_enqueue_scripts' ); + + // Capture the shortcode output so we can parse the generated element ID. + $html = do_shortcode( '[visualizer id="' . $chart_id . '"]' ); + + if ( $is_editor ) { + remove_filter( 'visualizer_lazy_load_chart', '__return_false' ); + remove_filter( 'visualizer_pro_add_actions', '__return_empty_array' ); + + // The shortcode enqueues visualizer-render-{library} (render-facade.js). + // Dequeue it so Elementor's AJAX response doesn't inject it into the preview + // iframe. The preview page already loads render-google.js / render-chartjs.js + // via elementor/preview/enqueue_scripts; injecting render-facade.js would add + // a second visualizer:render:chart:start trigger causing duplicate renders. + foreach ( wp_scripts()->queue as $handle ) { + if ( 0 === strpos( $handle, 'visualizer-render-' ) + && 'visualizer-render-google-lib' !== $handle + && 'visualizer-render-chartjs-lib' !== $handle + && 'visualizer-render-datatables-lib' !== $handle ) { + wp_dequeue_script( $handle ); + } + } + } + + echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + + if ( ! $is_editor ) { + return; + } + + // Extract the element ID generated by the shortcode (visualizer-{id}-{rand}). + if ( ! preg_match( '/\bid="(visualizer-' . $chart_id . '-\d+)"/', $html, $matches ) ) { + return; + } + $element_id = $matches[1]; + + $chart = get_post( $chart_id ); + if ( ! $chart || Visualizer_Plugin::CPT_VISUALIZER !== $chart->post_type ) { + return; + } + + $type = get_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_TYPE, true ); + $series = get_post_meta( $chart_id, Visualizer_Plugin::CF_SERIES, true ); + $chart_settings = get_post_meta( $chart_id, Visualizer_Plugin::CF_SETTINGS, true ); + $chart_data = Visualizer_Module::get_chart_data( $chart, $type ); + + if ( empty( $chart_settings['height'] ) ) { + $chart_settings['height'] = '400'; + } + + // Read library from meta and normalise to the lowercase slugs that + // render-google.js / render-chartjs.js / render-datatables.js and + // elementor-widget-preview.js expect. + $library = get_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_LIBRARY, true ); + $library_map = array( + 'GoogleCharts' => 'google', + 'ChartJS' => 'chartjs', + 'DataTable' => 'datatables', + ); + if ( isset( $library_map[ $library ] ) ) { + $library = $library_map[ $library ]; + } elseif ( ! $library ) { + $library = 'google'; + } + + $series = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SERIES, $series, $chart_id, $type ); + $chart_settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $chart_settings, $chart_id, $type ); + $chart_settings = $this->apply_custom_css_class_names( $chart_settings, $chart_id ); + + $chart_entry = array( + 'type' => $type, + 'series' => $series, + 'settings' => $chart_settings, + 'data' => $chart_data, + 'library' => $library, + ); + + // Elementor injects widget HTML via innerHTML, so ', + esc_attr( $element_id ), + wp_json_encode( $chart_entry ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + ); + } + + /** + * Ensure custom CSS class mappings are present in settings for preview rendering. + * + * @param array| ' . esc_html__( 'ID', 'visualizer' ) . ' | '; + echo '' . esc_html__( 'Title', 'visualizer' ) . ' | '; + echo '' . esc_html__( 'Type', 'visualizer' ) . ' | '; + echo '' . esc_html__( 'Shortcode', 'visualizer' ) . ' | '; + echo '' . esc_html__( 'Actions', 'visualizer' ) . ' | '; + echo '
|---|
' . esc_html( $shortcode ) . '