PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.6.1
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.6.1
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 +368 -6 3.1.03.6.1 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,327 @@
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 + do_action( 'visualizer_chart_settings', get_class( $this ), $this->_data, 'general', array( 'generic' => true ) );
255 +
256 + self::_renderGroupEnd();
257 + }
258 +
259 + /**
260 + * Renders animation settings section.
261 + *
262 + * @access protected
263 + */
264 + protected function _renderAnimationSettings() {
265 + if ( ! $this->_supportsAnimation ) {
266 + return;
267 + }
268 +
269 + self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
270 +
271 + self::_renderCheckboxItem(
272 + esc_html__( 'Animate on startup', 'visualizer' ),
273 + 'animation[startup]',
274 + isset( $this->animation['startup'] ) ? $this->animation['startup'] : 0,
275 + true,
276 + esc_html__( 'Determines if the chart will animate on the initial draw.', 'visualizer' )
277 + );
278 +
279 + self::_renderTextItem(
280 + esc_html__( 'Duration', 'visualizer' ),
281 + 'animation[duration]',
282 + isset( $this->animation['duration'] ) ? $this->animation['duration'] : 0,
283 + esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
284 + 0,
285 + 'number'
286 + );
287 +
288 + self::_renderSelectItem(
289 + esc_html__( 'Easing', 'visualizer' ),
290 + 'animation[easing]',
291 + isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
292 + array(
293 + 'linear' => esc_html__( 'Constant speed', 'visualizer' ),
294 + 'in' => esc_html__( 'Start slow and speed up', 'visualizer' ),
295 + 'out' => esc_html__( 'Start fast and slow down', 'visualizer' ),
296 + 'inAndOut' => esc_html__( 'Start slow, speed up, then slow down', 'visualizer' ),
297 + ),
298 + esc_html__( 'The easing function applied to the animation.', 'visualizer' )
299 + );
300 +
301 + self::_renderSectionEnd();
302 +
303 + }
304 +
305 + /**
306 + * Renders tooltip settings section.
307 + *
308 + * @since 1.4.0
309 + *
310 + * @access protected
311 + */
312 + protected function _renderTooltipSettigns() {
313 + self::_renderSelectItem(
314 + esc_html__( 'Trigger', 'visualizer' ),
315 + 'tooltip[trigger]',
316 + isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
317 + array(
318 + '' => '',
319 + 'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
320 + 'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', 'visualizer' ),
321 + 'none' => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
322 + ),
323 + esc_html__( 'Determines the user interaction that causes the tooltip to be displayed.', 'visualizer' )
324 + );
325 +
326 + self::_renderSelectItem(
327 + esc_html__( 'Show Color Code', 'visualizer' ),
328 + 'tooltip[showColorCode]',
329 + isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
330 + $this->_yesno,
331 + esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', 'visualizer' )
332 + );
333 + }
334 +
335 + /**
336 + * Renders chart view settings group.
337 + *
338 + * @since 1.0.0
339 + *
340 + * @access protected
341 + */
342 + protected function _renderViewSettings() {
343 + self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
344 + self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
345 + 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' ) );
346 +
347 + echo '<div class="viz-section-item">';
348 + echo '<a class="more-info" href="javascript:;">[?]</a>';
349 + echo '<b>', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '</b>';
350 +
351 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
352 + echo '<tr>';
353 + echo '<td class="viz-section-table-column">';
354 + echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
355 + echo '</td>';
356 + echo '<td class="viz-section-table-column">';
357 + echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
358 + echo '</td>';
359 + echo '</tr>';
360 + echo '</table>';
361 +
362 + echo '<p class="viz-section-description">';
363 + esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
364 + echo '</p>';
365 + echo '</div>';
366 +
367 + echo '<div class="viz-section-delimiter"></div>';
368 +
369 + self::_renderSectionDescription( esc_html__( 'Configure the background color for the main area of the chart and the chart border width and color.', 'visualizer' ) );
370 +
371 + self::_renderTextItem(
372 + esc_html__( 'Stroke Width', 'visualizer' ),
373 + 'backgroundColor[strokeWidth]',
374 + isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
375 + esc_html__( 'The chart border width in pixels.', 'visualizer' ),
376 + '0'
377 + );
378 +
379 + self::_renderColorPickerItem(
380 + esc_html__( 'Stroke Color', 'visualizer' ),
381 + 'backgroundColor[stroke]',
382 + ! empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
383 + '#666'
384 + );
385 +
386 + $background_color = ! empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
387 + self::_renderColorPickerItem(
388 + esc_html__( 'Background Color', 'visualizer' ),
389 + 'backgroundColor[fill]',
390 + $background_color,
391 + '#fff'
392 + );
393 +
394 + echo '<div class="viz-section-item">';
395 + echo '<label>';
396 + echo '<input type="checkbox" class="control-checkbox" name="backgroundColor[fill]" value="transparent"', checked( $background_color, 'transparent', false ), '> ';
397 + esc_html_e( 'Transparent background', 'visualizer' );
398 + echo '</label>';
399 + echo '</div>';
400 + self::_renderSectionEnd();
401 +
402 + self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
403 + 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' ) );
404 +
405 + echo '<div class="viz-section-item">';
406 + echo '<a class="more-info" href="javascript:;">[?]</a>';
407 + echo '<b>', esc_html__( 'Left And Top Margins', 'visualizer' ), '</b>';
408 +
409 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
410 + echo '<tr>';
411 + echo '<td class="viz-section-table-column">';
412 + $chartarea_left = isset( $this->chartArea['left'] ) ? $this->chartArea['left'] : '';
413 + echo '<input type="text" name="chartArea[left]" class="control-text" value="', $chartarea_left || '0' === $chartarea_left ? esc_attr( $chartarea_left ) : '', '" placeholder="20%">';
414 + echo '</td>';
415 + echo '<td class="viz-section-table-column">';
416 + $chartarea_top = isset( $this->chartArea['top'] ) ? $this->chartArea['top'] : '';
417 + echo '<input type="text" name="chartArea[top]" class="control-text" value="', $chartarea_top || '0' === $chartarea_top ? esc_attr( $chartarea_top ) : '', '" placeholder="20%">';
418 + echo '</td>';
419 + echo '</tr>';
420 + echo '</table>';
421 +
422 + echo '<p class="viz-section-description">';
423 + esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
424 + echo '</p>';
425 + echo '</div>';
426 +
427 + echo '<div class="viz-section-item">';
428 + echo '<a class="more-info" href="javascript:;">[?]</a>';
429 + echo '<b>', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '</b>';
430 +
431 + echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
432 + echo '<tr>';
433 + echo '<td class="viz-section-table-column">';
434 + echo '<input type="text" name="chartArea[width]" class="control-text" value="', ! empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
435 + echo '</td>';
436 + echo '<td class="viz-section-table-column">';
437 + echo '<input type="text" name="chartArea[height]" class="control-text" value="', ! empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
438 + echo '</td>';
439 + echo '</tr>';
440 + echo '</table>';
441 +
442 + echo '<p class="viz-section-description">';
443 + esc_html_e( 'Determines the width and hight of the chart area.', 'visualizer' );
444 + echo '</p>';
445 + echo '</div>';
446 + self::_renderSectionEnd();
447 + self::_renderGroupEnd();
448 + }
87 449 }