Skip to content

Commit ba6845e

Browse files
selulselul
authored
Merge pull request #804 from Codeinwp/bugfix/786
Render chart image for AMP theme
2 parents a944634 + 9392dc3 commit ba6845e

File tree

10 files changed

+116
-5
lines changed

10 files changed

+116
-5
lines changed

‎classes/Visualizer/Module.php

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,9 @@ public function _getDataAs( $chart_id, $type ) {
248248
case 'print':
249249
$final = $this->_getHTML( $rows );
250250
break;
251+
case 'image':
252+
$final = $this->_getImage( $chart );
253+
break;
251254
}
252255
}
253256
return $final;
@@ -758,4 +761,23 @@ public static function get_chart_data( $chart, $type, $run_filter = true ) {
758761
}
759762
return $altered;
760763
}
764+
765+
/**
766+
* Get chart image.
767+
*
768+
* @param object $chart Chart data.
769+
* @return string
770+
*/
771+
public function _getImage( $chart = null ) {
772+
$image = '';
773+
if ( $chart ) {
774+
$chart_image = get_post_meta( $chart->ID, Visualizer_Plugin::CF_CHART_IMAGE, true );
775+
if ( ! empty( $chart_image ) ) {
776+
$image = wp_get_attachment_image( $chart_image, 'full' );
777+
}
778+
}
779+
return array(
780+
'csv' => $image,
781+
);
782+
}
761783
}

‎classes/Visualizer/Module/AMP.php

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,10 @@ public function get_chart( $chart, $data, $series, $settings ) {
9494
if ( ! is_null( $view ) ) {
9595
return $view;
9696
}
97-
$output = $this->_getDataAs( $chart->ID, 'print' );
97+
$output = $this->_getDataAs( $chart->ID, 'image' );
98+
if ( empty( $output['csv'] ) ) {
99+
$output = $this->_getDataAs( $chart->ID, 'print' );
100+
}
98101
return $output['csv'];
99102
}
100103

‎classes/Visualizer/Module/Chart.php

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,6 +527,12 @@ public function renderChartPages() {
527527
defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
528528
}
529529

530+
if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {
531+
$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id );
532+
if ( $attachment_id ) {
533+
update_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_IMAGE, $attachment_id );
534+
}
535+
}
530536
$lib = $this->load_chart_type( $chart_id );
531537

532538
// the alpha color picker (RGBA) is not supported by google.
@@ -1417,4 +1423,48 @@ public function saveFilter() {
14171423
defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
14181424
}
14191425
}
1426+
1427+
/**
1428+
* Save chart image.
1429+
*
1430+
* @param string $base64_img Chart image.
1431+
* @param int $chart_id Chart ID.
1432+
* @return attachment ID
1433+
*/
1434+
public function save_chart_image( $base64_img, $chart_id ) {
1435+
// Upload dir.
1436+
$upload_dir = wp_upload_dir();
1437+
$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;
1438+
1439+
$img = str_replace( 'data:image/png;base64,', '', $base64_img );
1440+
$img = str_replace( ' ', '+', $img );
1441+
$decoded = base64_decode( $img );
1442+
$filename = 'visualization-' . $chart_id . '.png';
1443+
$file_type = 'image/png';
1444+
$hashed_filename = $filename;
1445+
1446+
// Delete old chart image.
1447+
$old_attachment_id = get_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_IMAGE, true );
1448+
if ( $old_attachment_id ) {
1449+
wp_delete_attachment( $old_attachment_id, true );
1450+
}
1451+
1452+
// Save the image in the uploads directory.
1453+
require_once ABSPATH . '/wp-admin/includes/file.php';
1454+
\WP_Filesystem();
1455+
global $wp_filesystem;
1456+
$upload_file = $wp_filesystem->put_contents( $upload_path . $hashed_filename, $decoded );
1457+
1458+
// Insert new chart image.
1459+
$attachment = array(
1460+
'post_mime_type' => $file_type,
1461+
'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $hashed_filename ) ),
1462+
'post_content' => '',
1463+
'post_status' => 'inherit',
1464+
'guid' => $upload_dir['url'] . '/' . basename( $hashed_filename ),
1465+
);
1466+
1467+
$attach_id = wp_insert_attachment( $attachment, $upload_dir['path'] . '/' . $hashed_filename );
1468+
return $attach_id;
1469+
}
14201470
}

‎classes/Visualizer/Module/Frontend.php

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,10 +272,11 @@ public function renderChart( $atts ) {
272272
// set 'yes' to use the default intersection limit (300px)
273273
// OR set a number (e.g. 700) to use 700px as the intersection limit
274274
'lazy' => apply_filters( 'visualizer_lazy_by_default', false, $atts['id'] ),
275+
// Use image chart
276+
'use_image' => 'no',
275277
),
276278
$atts
277279
);
278-
279280
// if empty id or chart does not exists, then return empty string
280281
if ( ! $atts['id'] || ! ( $chart = get_post( $atts['id'] ) ) || $chart->post_type !== Visualizer_Plugin::CPT_VISUALIZER ) {
281282
return '';
@@ -340,7 +341,14 @@ public function renderChart( $atts ) {
340341

341342
$amp = Visualizer_Plugin::instance()->getModule( Visualizer_Module_AMP::NAME );
342343
if ( $amp && $amp->is_amp() ) {
343-
return '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '>' . $amp->get_chart( $chart, $data, $series, $settings ) . '</div>';
344+
return '<div data-amp-auto-lightbox-disable id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '>' . $amp->get_chart( $chart, $data, $series, $settings ) . '</div>';
345+
}
346+
347+
if ( 'yes' === $atts['use_image'] ) {
348+
$chart_image = get_post_meta( $chart->ID, Visualizer_Plugin::CF_CHART_IMAGE, true );
349+
if ( $chart_image ) {
350+
return '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '>' . wp_get_attachment_image( $chart_image, 'full' ) . '</div>';
351+
}
344352
}
345353

346354
// add chart to the array

‎classes/Visualizer/Plugin.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ class Visualizer_Plugin {
3434
const CPT_VISUALIZER = 'visualizer';
3535

3636
// custom meta fields
37+
const CF_CHART_IMAGE = 'visualizer-chart-image';
3738
const CF_CHART_TYPE = 'visualizer-chart-type';
3839
const CF_SOURCE = 'visualizer-source';
3940
const CF_SERIES = 'visualizer-series';

‎classes/Visualizer/Render/Layout.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,6 +583,7 @@ public static function _renderTabAdvanced( $args ) {
583583
<ul class="viz-group-content">
584584
<ul class="viz-group-wrapper">
585585
<form id="settings-form" action="<?php echo add_query_arg( 'nonce', wp_create_nonce() ); ?>" method="post">
586+
<input type="hidden" id="chart-img" name="chart-img">
586587
<?php echo $sidebar; ?>
587588
<?php self::_renderPermissions( $args ); ?>
588589
<input type="hidden" name="save" value="1">

‎classes/Visualizer/Render/Sidebar/Google.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,13 @@ protected function hooks() {
101101
*/
102102
function load_google_assets( $deps, $is_frontend ) {
103103
wp_register_script( 'google-jsapi', '//www.gstatic.com/charts/loader.js', array(), null, true );
104+
wp_register_script( 'dom-to-image', VISUALIZER_ABSURL . 'js/lib/dom-to-image.min.js', array(), null, true );
104105
wp_register_script(
105106
'visualizer-render-google-lib',
106107
VISUALIZER_ABSURL . 'js/render-google.js',
107108
array(
108109
'google-jsapi',
110+
'dom-to-image',
109111
),
110112
Visualizer_Plugin::VERSION,
111113
true

‎js/lib/dom-to-image.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/render-chartjs.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,15 @@
118118
labels: labels,
119119
datasets: datasets
120120
},
121-
options: settings
121+
options: settings,
122+
plugins: [{
123+
afterRender: function () {
124+
var canvas = $( 'canvas' )[0];
125+
if ( $( '#chart-img' ).length ) {
126+
$( '#chart-img' ).val( canvas.toDataURL() );
127+
}
128+
},
129+
}],
122130
});
123131

124132
// this line needs to be included twice. This is not an error.

‎js/render-google.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,8 +313,22 @@ var __visualizer_chart_images = [];
313313
var img = render.getImageURI();
314314
__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
315315
$('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
316+
if ( $( '#chart-img' ).length ) {
317+
$( '#chart-img' ).val( img );
318+
}
316319
}catch(error){
317-
console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
320+
var canvas = document.getElementById( 'canvas' );
321+
domtoimage.toPng(canvas)
322+
.then(function ( img ) {
323+
__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
324+
$('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
325+
if ( $( '#chart-img' ).length ) {
326+
$( '#chart-img' ).val( img );
327+
}
328+
})
329+
.catch(function (error) {
330+
console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
331+
});
318332
}
319333
});
320334

0 commit comments

Comments
 (0)