PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.7.9
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.7.9
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
← All changes | classes/Visualizer/Render/Sidebar/Google.php +371 -6 3.1.03.7.9 View file →
@@ -31,13 +31,59 @@
31 31 */
32 32 abstract class Visualizer_Render_Sidebar_Google extends Visualizer_Render_Sidebar {
33 33
34 34 /**
35 + * The array of available legend positions.
36 + *
37 + * @since 1.0.0
38 + *
39 + * @access protected
40 + * @var array
41 + */
42 + protected $_legendPositions;
43 +
44 + /**
45 + * The array of available alignments.
46 + *
47 + * @since 1.0.0
48 + *
49 + * @access protected
50 + * @var array
51 + */
52 + protected $_alignments;
53 +
54 + /**
35 55 * The constructor.
36 56 */
37 57 public function __construct( $data = array() ) {
38 58 $this->_library = 'google';
39 59 parent::__construct( $data );
60 +
61 + $this->_legendPositions = array(
62 + '' => '',
63 + 'left' => esc_html__( 'Left of the chart', 'visualizer' ),
64 + 'right' => esc_html__( 'Right of the chart', 'visualizer' ),
65 + 'top' => esc_html__( 'Above the chart', 'visualizer' ),
66 + 'bottom' => esc_html__( 'Below the chart', 'visualizer' ),
67 + 'none' => esc_html__( 'Omit the legend', 'visualizer' ),
68 + );
69 +
70 + $chart_type = $this->get_chart_type( false );
71 + if ( ! in_array( $chart_type, array( 'Pie' ), true ) ) {
72 + $this->_legendPositions['in'] = esc_html__( 'Inside the chart', 'visualizer' );
73 + }
74 +
75 + if ( in_array( $chart_type, array( 'Bubble' ), true ) ) {
76 + unset( $this->_legendPositions['left'] );
77 + }
78 +
79 + $this->_alignments = array(
80 + '' => '',
81 + 'start' => esc_html__( 'Aligned to the start of the allocated area', 'visualizer' ),
82 + 'center' => esc_html__( 'Centered in the allocated area', 'visualizer' ),
83 + 'end' => esc_html__( 'Aligned to the end of the allocated area', 'visualizer' ),
84 + );
85 +
40 86 }
41 87
42 88 /**
43 89 * Registers additional hooks.
@@ -53,15 +99,16 @@
53 99 /**
54 100 * Loads the assets.
55 101 */
56 102 function load_google_assets( $deps, $is_frontend ) {
57 - wp_register_script( 'google-jsapi-new', '//www.gstatic.com/charts/loader.js', array(), null, true );
58 - wp_register_script( 'google-jsapi-old', '//www.google.com/jsapi', array( 'google-jsapi-new' ), null, true );
103 + 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 );
59 105 wp_register_script(
60 106 'visualizer-render-google-lib',
61 107 VISUALIZER_ABSURL . 'js/render-google.js',
62 108 array(
63 - 'google-jsapi-old',
109 + 'google-jsapi',
110 + 'dom-to-image',
64 111 ),
65 112 Visualizer_Plugin::VERSION,
66 113 true
67 114 );
@@ -76,12 +123,330 @@
76 123 /**
77 124 * Enqueue assets.
78 125 */
79 126 public static function enqueue_assets( $deps = array() ) {
80 - wp_enqueue_script( 'visualizer-google-jsapi-new', '//www.gstatic.com/charts/loader.js', array(), null, true );
81 - wp_enqueue_script( 'visualizer-google-jsapi-old', '//www.google.com/jsapi', array( 'visualizer-google-jsapi-new' ), null, true );
82 - wp_enqueue_script( 'visualizer-render-google-lib', VISUALIZER_ABSURL . 'js/render-google.js', array_merge( $deps, array( 'visualizer-google-jsapi-old' ) ), Visualizer_Plugin::VERSION, true );
127 + wp_enqueue_script( 'visualizer-google-jsapi', '//www.gstatic.com/charts/loader.js', array(), null, true );
128 + wp_enqueue_script( 'visualizer-render-google-lib', VISUALIZER_ABSURL . 'js/render-google.js', array_merge( $deps, array( 'visualizer-google-jsapi' ) ), Visualizer_Plugin::VERSION, true );
83 129 return 'visualizer-render-google-lib';
84 130 }
85 131
132 + /**
133 + * Renders the role field.
134 + *
135 + * @since 3.4.0
136 + *
137 + * @access protected
138 + */
139 + protected function _renderRoleField( $index ) {
140 + self::_renderSelectItem(
141 + esc_html__( 'Special Role', 'visualizer' ),
142 + 'series[' . $index . '][role]',
143 + isset( $this->series[ $index ]['role'] ) ? $this->series[ $index ]['role'] : '',
144 + array(
145 + '' => esc_html__( 'Default (Data)', 'visualizer' ),
146 + 'annotation' => esc_html__( 'Annotation', 'visualizer' ),
147 + 'annotationText' => esc_html__( 'Annotation Text', 'visualizer' ),
148 + 'certainty' => esc_html__( 'Certainty', 'visualizer' ),
149 + 'emphasis' => esc_html__( 'Emphasis', 'visualizer' ),
150 + 'scope' => esc_html__( 'Scope', 'visualizer' ),
151 + 'style' => esc_html__( 'Style', 'visualizer' ),
152 + 'tooltip' => esc_html__( 'Tooltip', 'visualizer' ),
153 + 'interval' => esc_html__( 'Interval', 'visualizer' ),
154 + ),
155 + sprintf( esc_html__( 'Determines whether the series has to be used for a special role as mentioned in %1$shere%2$s. You can view a few examples %3$shere%4$s.', 'visualizer' ), '<a href="https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available" target="_blank">', '</a>', '<a href="https://docs.themeisle.com/article/1160-roles-for-series-visualizer" target="_blank">', '</a>' )
156 + );
157 + }
86 158
159 + /**
160 + * Renders chart general settings group.
161 + *
162 + * @since 1.0.0
163 + *
164 + * @access protected
165 + */
166 + protected function _renderGeneralSettings() {
167 + self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
168 + self::_renderSectionStart();
169 + self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', 'visualizer' ) );
170 + self::_renderSectionEnd();
171 +
172 + self::_renderSectionStart( esc_html__( 'Title', 'visualizer' ), false );
173 + $this->_renderChartTitleSettings();
174 + self::_renderSectionEnd();
175 +
176 + self::_renderSectionStart( esc_html__( 'Font Styles', 'visualizer' ), false );
177 + echo '<div class="viz-section-item">';
178 + echo '<a class="more-info" href="javascript:;">[?]</a>';
179 + echo '<b>', esc_html__( 'Family And Size', 'visualizer' ), '</b>';
180 +
181 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
182 + echo '<tr>';
183 + echo '<td class="viz-section-table-column">';
184 + echo '<select name="fontName" class="control-select">';
185 + echo '<option></option>';
186 + foreach ( self::$_fontFamilies as $font => $label ) {
187 + echo '<option value="', $font, '"', selected( $font, $this->fontName, false ), '>';
188 + echo $label;
189 + echo '</option>';
190 + }
191 + echo '</select>';
192 + echo '</td>';
193 + echo '<td class="viz-section-table-column">';
194 + echo '<select name="fontSize" class="control-select">';
195 + echo '<option></option>';
196 + for ( $i = 7; $i <= 20; $i++ ) {
197 + echo '<option value="', $i, '"', selected( $i, $this->fontSize, false ), '>', $i, '</option>';
198 + }
199 + echo '</select>';
200 + echo '</td>';
201 + echo '</tr>';
202 + echo '</table>';
203 +
204 + echo '<p class="viz-section-description">';
205 + esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
206 + echo '</p>';
207 + echo '</div>';
208 + self::_renderSectionEnd();
209 +
210 + self::_renderSectionStart( esc_html__( 'Legend', 'visualizer' ), false );
211 + self::_renderSelectItem(
212 + esc_html__( 'Position', 'visualizer' ),
213 + 'legend[position]',
214 + isset( $this->legend['position'] ) ? $this->legend['position'] : '',
215 + $this->_legendPositions,
216 + esc_html__( 'Determines where to place the legend, compared to the chart area.', 'visualizer' )
217 + );
218 +
219 + self::_renderSelectItem(
220 + esc_html__( 'Alignment', 'visualizer' ),
221 + 'legend[alignment]',
222 + isset( $this->legend['alignment'] ) ? $this->legend['alignment'] : '',
223 + $this->_alignments,
224 + esc_html__( 'Determines the alignment of the legend.', 'visualizer' )
225 + );
226 +
227 + self::_renderColorPickerItem(
228 + esc_html__( 'Font Color', 'visualizer' ),
229 + 'legend[textStyle][color]',
230 + isset( $this->legend['textStyle']['color'] ) ? $this->legend['textStyle']['color'] : null,
231 + '#000'
232 + );
233 + self::_renderSectionEnd();
234 +
235 + self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
236 + $this->_renderTooltipSettigns();
237 + self::_renderSectionEnd();
238 +
239 + $this->_renderAnimationSettings();
240 + self::_renderSectionStart( esc_html__( 'License & Creator', 'visualizer' ), false );
241 + self::_renderTextItem(
242 + esc_html__( 'License', 'visualizer' ),
243 + 'license',
244 + $this->license,
245 + ''
246 + );
247 + self::_renderTextItem(
248 + esc_html__( 'Creator', 'visualizer' ),
249 + 'creator',
250 + $this->creator,
251 + ''
252 + );
253 + self::_renderSectionEnd();
254 +
255 + self::_renderChartImageSettings();
256 +
257 + do_action( 'visualizer_chart_settings', get_class( $this ), $this->_data, 'general', array( 'generic' => true ) );
258 +
259 + self::_renderGroupEnd();
260 + }
261 +
262 + /**
263 + * Renders animation settings section.
264 + *
265 + * @access protected
266 + */
267 + protected function _renderAnimationSettings() {
268 + if ( ! $this->_supportsAnimation ) {
269 + return;
270 + }
271 +
272 + self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
273 +
274 + self::_renderCheckboxItem(
275 + esc_html__( 'Animate on startup', 'visualizer' ),
276 + 'animation[startup]',
277 + isset( $this->animation['startup'] ) ? $this->animation['startup'] : 0,
278 + true,
279 + esc_html__( 'Determines if the chart will animate on the initial draw.', 'visualizer' )
280 + );
281 +
282 + self::_renderTextItem(
283 + esc_html__( 'Duration', 'visualizer' ),
284 + 'animation[duration]',
285 + isset( $this->animation['duration'] ) ? $this->animation['duration'] : 0,
286 + esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
287 + 0,
288 + 'number'
289 + );
290 +
291 + self::_renderSelectItem(
292 + esc_html__( 'Easing', 'visualizer' ),
293 + 'animation[easing]',
294 + isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
295 + array(
296 + 'linear' => esc_html__( 'Constant speed', 'visualizer' ),
297 + 'in' => esc_html__( 'Start slow and speed up', 'visualizer' ),
298 + 'out' => esc_html__( 'Start fast and slow down', 'visualizer' ),
299 + 'inAndOut' => esc_html__( 'Start slow, speed up, then slow down', 'visualizer' ),
300 + ),
301 + esc_html__( 'The easing function applied to the animation.', 'visualizer' )
302 + );
303 +
304 + self::_renderSectionEnd();
305 +
306 + }
307 +
308 + /**
309 + * Renders tooltip settings section.
310 + *
311 + * @since 1.4.0
312 + *
313 + * @access protected
314 + */
315 + protected function _renderTooltipSettigns() {
316 + self::_renderSelectItem(
317 + esc_html__( 'Trigger', 'visualizer' ),
318 + 'tooltip[trigger]',
319 + isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
320 + array(
321 + '' => '',
322 + 'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
323 + 'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', 'visualizer' ),
324 + 'none' => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
325 + ),
326 + esc_html__( 'Determines the user interaction that causes the tooltip to be displayed.', 'visualizer' )
327 + );
328 +
329 + self::_renderSelectItem(
330 + esc_html__( 'Show Color Code', 'visualizer' ),
331 + 'tooltip[showColorCode]',
332 + isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
333 + $this->_yesno,
334 + esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', 'visualizer' )
335 + );
336 + }
337 +
338 + /**
339 + * Renders chart view settings group.
340 + *
341 + * @since 1.0.0
342 + *
343 + * @access protected
344 + */
345 + protected function _renderViewSettings() {
346 + self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
347 + self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
348 + self::_renderSectionDescription( esc_html__( 'Configure the total size of the chart. Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
349 +
350 + echo '<div class="viz-section-item">';
351 + echo '<a class="more-info" href="javascript:;">[?]</a>';
352 + echo '<b>', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '</b>';
353 +
354 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
355 + echo '<tr>';
356 + echo '<td class="viz-section-table-column">';
357 + echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
358 + echo '</td>';
359 + echo '<td class="viz-section-table-column">';
360 + echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
361 + echo '</td>';
362 + echo '</tr>';
363 + echo '</table>';
364 +
365 + echo '<p class="viz-section-description">';
366 + esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
367 + echo '</p>';
368 + echo '</div>';
369 +
370 + echo '<div class="viz-section-delimiter"></div>';
371 +
372 + self::_renderSectionDescription( esc_html__( 'Configure the background color for the main area of the chart and the chart border width and color.', 'visualizer' ) );
373 +
374 + self::_renderTextItem(
375 + esc_html__( 'Stroke Width', 'visualizer' ),
376 + 'backgroundColor[strokeWidth]',
377 + isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
378 + esc_html__( 'The chart border width in pixels.', 'visualizer' ),
379 + '0'
380 + );
381 +
382 + self::_renderColorPickerItem(
383 + esc_html__( 'Stroke Color', 'visualizer' ),
384 + 'backgroundColor[stroke]',
385 + ! empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
386 + '#666'
387 + );
388 +
389 + $background_color = ! empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
390 + self::_renderColorPickerItem(
391 + esc_html__( 'Background Color', 'visualizer' ),
392 + 'backgroundColor[fill]',
393 + $background_color,
394 + '#fff'
395 + );
396 +
397 + echo '<div class="viz-section-item">';
398 + echo '<label>';
399 + echo '<input type="checkbox" class="control-checkbox" name="backgroundColor[fill]" value="transparent"', checked( $background_color, 'transparent', false ), '> ';
400 + esc_html_e( 'Transparent background', 'visualizer' );
401 + echo '</label>';
402 + echo '</div>';
403 + self::_renderSectionEnd();
404 +
405 + self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
406 + self::_renderSectionDescription( esc_html__( 'Configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
407 +
408 + echo '<div class="viz-section-item">';
409 + echo '<a class="more-info" href="javascript:;">[?]</a>';
410 + echo '<b>', esc_html__( 'Left And Top Margins', 'visualizer' ), '</b>';
411 +
412 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
413 + echo '<tr>';
414 + echo '<td class="viz-section-table-column">';
415 + $chartarea_left = isset( $this->chartArea['left'] ) ? $this->chartArea['left'] : '';
416 + echo '<input type="text" name="chartArea[left]" class="control-text" value="', $chartarea_left || '0' === $chartarea_left ? esc_attr( $chartarea_left ) : '', '" placeholder="20%">';
417 + echo '</td>';
418 + echo '<td class="viz-section-table-column">';
419 + $chartarea_top = isset( $this->chartArea['top'] ) ? $this->chartArea['top'] : '';
420 + echo '<input type="text" name="chartArea[top]" class="control-text" value="', $chartarea_top || '0' === $chartarea_top ? esc_attr( $chartarea_top ) : '', '" placeholder="20%">';
421 + echo '</td>';
422 + echo '</tr>';
423 + echo '</table>';
424 +
425 + echo '<p class="viz-section-description">';
426 + esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
427 + echo '</p>';
428 + echo '</div>';
429 +
430 + echo '<div class="viz-section-item">';
431 + echo '<a class="more-info" href="javascript:;">[?]</a>';
432 + echo '<b>', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '</b>';
433 +
434 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
435 + echo '<tr>';
436 + echo '<td class="viz-section-table-column">';
437 + echo '<input type="text" name="chartArea[width]" class="control-text" value="', ! empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
438 + echo '</td>';
439 + echo '<td class="viz-section-table-column">';
440 + echo '<input type="text" name="chartArea[height]" class="control-text" value="', ! empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
441 + echo '</td>';
442 + echo '</tr>';
443 + echo '</table>';
444 +
445 + echo '<p class="viz-section-description">';
446 + esc_html_e( 'Determines the width and hight of the chart area.', 'visualizer' );
447 + echo '</p>';
448 + echo '</div>';
449 + self::_renderSectionEnd();
450 + self::_renderGroupEnd();
451 + }
87 452 }