Render chart image for AMP theme #786

Author: girishpanchal30

classes/Visualizer/Module.php

@@ -248,6 +248,9 @@ public function _getDataAs( $chart_id, $type ) {
 				case 'print':
 					$final   = $this->_getHTML( $rows );
 					break;
+				case 'image':
+					$final   = $this->_getImage( $chart );
+					break;
 			}
 		}
 		return $final;
@@ -758,4 +761,23 @@ public static function get_chart_data( $chart, $type, $run_filter = true ) {
 		}
 		return $altered;
 	}
+
+	/**
+	 * Get chart image.
+	 *
+	 * @param object $chart Chart data.
+	 * @return string
+	 */
+	public function _getImage( $chart = null ) {
+		$image = '';
+		if ( $chart ) {
+			$chart_image = get_post_meta( $chart->ID, Visualizer_Plugin::CF_CHART_IMAGE, true );
+			if ( ! empty( $chart_image ) ) {
+				$image = wp_get_attachment_image( $chart_image, 'full' );
+			}
+		}
+		return array(
+			'csv'  => $image,
+		);
+	}
 }

classes/Visualizer/Module/AMP.php

@@ -94,7 +94,10 @@ public function get_chart( $chart, $data, $series, $settings ) {
 		if ( ! is_null( $view ) ) {
 			return $view;
 		}
-		$output = $this->_getDataAs( $chart->ID, 'print' );
+		$output = $this->_getDataAs( $chart->ID, 'image' );
+		if ( empty( $output['csv'] ) ) {
+			$output = $this->_getDataAs( $chart->ID, 'print' );
+		}
 		return $output['csv'];
 	}
 

classes/Visualizer/Module/Chart.php

@@ -527,6 +527,12 @@ public function renderChartPages() {
 			defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
 		}
 
+		if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {
+			$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id );
+			if ( $attachment_id ) {
+				update_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_IMAGE, $attachment_id );
+			}
+		}
 		$lib = $this->load_chart_type( $chart_id );
 
 		// the alpha color picker (RGBA) is not supported by google.
@@ -1417,4 +1423,48 @@ public function saveFilter() {
 			defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
 		}
 	}
+
+	/**
+	 * Save chart image.
+	 *
+	 * @param string $base64_img Chart image.
+	 * @param int    $chart_id Chart ID.
+	 * @return attachment ID
+	 */
+	public function save_chart_image( $base64_img, $chart_id ) {
+		// Upload dir.
+		$upload_dir  = wp_upload_dir();
+		$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;
+
+		$img             = str_replace( 'data:image/png;base64,', '', $base64_img );
+		$img             = str_replace( ' ', '+', $img );
+		$decoded         = base64_decode( $img );
+		$filename        = 'visualization-' . $chart_id . '.png';
+		$file_type       = 'image/png';
+		$hashed_filename = $filename;
+
+		// Save the image in the uploads directory.
+		require_once ABSPATH . '/wp-admin/includes/file.php';
+		\WP_Filesystem();
+		global $wp_filesystem;
+		$upload_file = $wp_filesystem->put_contents( $upload_path . $hashed_filename, $decoded );
+
+		// Delete old chart image.
+		$old_attachment_id = get_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_IMAGE, true );
+		if ( $old_attachment_id ) {
+			wp_delete_attachment( $old_attachment_id, true );
+		}
+
+		// Insert new chart image.
+		$attachment = array(
+			'post_mime_type' => $file_type,
+			'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $hashed_filename ) ),
+			'post_content'   => '',
+			'post_status'    => 'inherit',
+			'guid'           => $upload_dir['url'] . '/' . basename( $hashed_filename ),
+		);
+
+		$attach_id = wp_insert_attachment( $attachment, $upload_dir['path'] . '/' . $hashed_filename );
+		return $attach_id;
+	}
 }

classes/Visualizer/Plugin.php

@@ -34,6 +34,7 @@ class Visualizer_Plugin {
 	const CPT_VISUALIZER = 'visualizer';
 
 	// custom meta fields
+	const CF_CHART_IMAGE = 'visualizer-chart-image';
 	const CF_CHART_TYPE = 'visualizer-chart-type';
 	const CF_SOURCE = 'visualizer-source';
 	const CF_SERIES = 'visualizer-series';

classes/Visualizer/Render/Layout.php

@@ -583,6 +583,7 @@ public static function _renderTabAdvanced( $args ) {
 					<ul class="viz-group-content">
 						<ul class="viz-group-wrapper">
 						<form id="settings-form" action="<?php echo add_query_arg( 'nonce', wp_create_nonce() ); ?>" method="post">
+							<input type="hidden" id="chart-img" name="chart-img">
 							<?php echo $sidebar; ?>
 							<?php self::_renderPermissions( $args ); ?>
 							<input type="hidden" name="save" value="1">

js/render-google.js

@@ -313,6 +313,9 @@ var __visualizer_chart_images   = [];
                 var img = render.getImageURI();
                 __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
                 $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
+                if ( $( '#chart-img' ).length ) {
+                    $( '#chart-img' ).val( img );
+                }
             }catch(error){
                 console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
             }