PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 1.7.5
Visualizer – Tables & Charts Manager with Built-in AI Generator v1.7.5
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
visualizer / classes / Visualizer / Render / Sidebar.php

Sidebar.php in Visualizer – Tables & Charts Manager with Built-in AI Generator 1.7.5, at classes/Visualizer/Render/Sidebar.php

560 lines 19.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 // +----------------------------------------------------------------------+
4 // | Copyright 2013 Madpixels (email : visualizer@madpixels.net) |
5 // +----------------------------------------------------------------------+
6 // | This program is free software; you can redistribute it and/or modify |
7 // | it under the terms of the GNU General Public License, version 2, as |
8 // | published by the Free Software Foundation. |
9 // | |
10 // | This program is distributed in the hope that it will be useful, |
11 // | but WITHOUT ANY WARRANTY; without even the implied warranty of |
12 // | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
13 // | GNU General Public License for more details. |
14 // | |
15 // | You should have received a copy of the GNU General Public License |
16 // | along with this program; if not, write to the Free Software |
17 // | Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, |
18 // | MA 02110-1301 USA |
19 // +----------------------------------------------------------------------+
20 // | Author: Eugene Manuilov <eugene@manuilov.org> |
21 // +----------------------------------------------------------------------+
22 /**
23 * Base class for all chart sidebar groups.
24 *
25 * @category Visualizer
26 * @package Render
27 *
28 * @since 1.0.0
29 * @abstract
30 */
31 abstract class Visualizer_Render_Sidebar extends Visualizer_Render {
32
33 /**
34 * The array of font families accepted by visualization API.
35 *
36 * @since 1.0.0
37 *
38 * @static
39 * @access protected
40 * @var array
41 */
42 protected static $_fontFamilies = array(
43 'Arial' => 'Arial',
44 'Sans Serif' => 'Sans Serif',
45 'serif' => 'Serif',
46 'Arial black' => 'Wide',
47 'Arial Narrow' => 'Narrow',
48 'Comic Sans MS' => 'Comic Sans MS',
49 'Courier New' => 'Courier New',
50 'Garamond' => 'Garamond',
51 'Georgia' => 'Georgia',
52 'Tahoma' => 'Tahoma',
53 'Verdana' => 'Verdana',
54 );
55
56 /**
57 * The Yes/No array.
58 *
59 * @since 1.0.0
60 *
61 * @access protected
62 * @var array
63 */
64 protected $_yesno;
65
66 /**
67 * The array of available legend positions.
68 *
69 * @since 1.0.0
70 *
71 * @access protected
72 * @var array
73 */
74 protected $_legendPositions;
75
76 /**
77 * The array of available alignments.
78 *
79 * @since 1.0.0
80 *
81 * @access protected
82 * @var array
83 */
84 protected $_alignments;
85
86 /**
87 * Constructor.
88 *
89 * @since 1.0.0
90 *
91 * @access public
92 * @param array $data The data what has to be associated with this render.
93 */
94 public function __construct( $data = array() ) {
95 parent::__construct( $data );
96
97 $this->_legendPositions = array(
98 '' => '',
99 'left' => esc_html__( 'Left of the chart', 'visualizer' ),
100 'right' => esc_html__( 'Right of the chart', 'visualizer' ),
101 'top' => esc_html__( 'Above the chart', 'visualizer' ),
102 'bottom' => esc_html__( 'Below the chart', 'visualizer' ),
103 'in' => esc_html__( 'Inside the chart', 'visualizer' ),
104 'none' => esc_html__( 'Omit the legend', 'visualizer' ),
105 );
106
107 $this->_alignments = array(
108 '' => '',
109 'start' => esc_html__( 'Aligned to the start of the allocated area', 'visualizer' ),
110 'center' => esc_html__( 'Centered in the allocated area', 'visualizer' ),
111 'end' => esc_html__( 'Aligned to the end of the allocated area', 'visualizer' ),
112 );
113
114 $this->_yesno = array(
115 '' => '',
116 '1' => esc_html__( 'Yes', 'visualizer' ),
117 '0' => esc_html__( 'No', 'visualizer' ),
118 );
119 }
120
121 /**
122 * Renders chart title settings.
123 *
124 * @since 1.0.0
125 *
126 * @access protected
127 */
128 protected function _renderChartTitleSettings() {
129 self::_renderTextItem(
130 esc_html__( 'Chart Title', 'visualizer' ),
131 'title',
132 $this->title,
133 esc_html__( 'Text to display above the chart.', 'visualizer' )
134 );
135
136 self::_renderColorPickerItem(
137 esc_html__( 'Chart Title Color', 'visualizer' ),
138 'titleTextStyle[color]',
139 isset( $this->titleTextStyle['color'] ) ? $this->titleTextStyle['color'] : null,
140 '#000'
141 );
142 }
143
144 /**
145 * Renders chart general settings group.
146 *
147 * @since 1.0.0
148 *
149 * @access protected
150 */
151 protected function _renderGeneralSettings() {
152 self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
153 self::_renderSectionStart();
154 self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', 'visualizer' ) );
155 self::_renderSectionEnd();
156
157 self::_renderSectionStart( esc_html__( 'Title', 'visualizer' ), false );
158 $this->_renderChartTitleSettings();
159 self::_renderSectionEnd();
160
161 self::_renderSectionStart( esc_html__( 'Font Styles', 'visualizer' ), false );
162 echo '<div class="section-item">';
163 echo '<a class="more-info" href="javascript:;">[?]</a>';
164 echo '<b>', esc_html__( 'Family And Size', 'visualizer' ), '</b>';
165
166 echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
167 echo '<tr>';
168 echo '<td class="section-table-column">';
169 echo '<select name="fontName" class="control-select">';
170 echo '<option></option>';
171 foreach ( self::$_fontFamilies as $font => $label ) {
172 echo '<option value="', $font, '"', selected( $font, $this->fontName, false ), '>';
173 echo $label;
174 echo '</option>';
175 }
176 echo '</select>';
177 echo '</td>';
178 echo '<td class="section-table-column">';
179 echo '<select name="fontSize" class="control-select">';
180 echo '<option></option>';
181 for ( $i = 7; $i <= 20; $i++ ) {
182 echo '<option value="', $i, '"', selected( $i, $this->fontSize, false ), '>', $i, '</option>';
183 }
184 echo '</select>';
185 echo '</td>';
186 echo '</tr>';
187 echo '</table>';
188
189 echo '<p class="section-description">';
190 esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
191 echo '</p>';
192 echo '</div>';
193 self::_renderSectionEnd();
194
195 self::_renderSectionStart( esc_html__( 'Legend', 'visualizer' ), false );
196 self::_renderSelectItem(
197 esc_html__( 'Position', 'visualizer' ),
198 'legend[position]',
199 $this->legend['position'],
200 $this->_legendPositions,
201 esc_html__( 'Determines where to place the legend, compared to the chart area.', 'visualizer' )
202 );
203
204 self::_renderSelectItem(
205 esc_html__( 'Alignment', 'visualizer' ),
206 'legend[alignment]',
207 $this->legend['alignment'],
208 $this->_alignments,
209 esc_html__( 'Determines the alignment of the legend.', 'visualizer' )
210 );
211
212 self::_renderColorPickerItem(
213 esc_html__( 'Font Color', 'visualizer' ),
214 'legend[textStyle][color]',
215 isset( $this->legend['textStyle']['color'] ) ? $this->legend['textStyle']['color'] : null,
216 '#000'
217 );
218 self::_renderSectionEnd();
219
220 self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
221 $this->_renderTooltipSettigns();
222 self::_renderSectionEnd();
223 self::_renderGroupEnd();
224 }
225
226 /**
227 * Renders tooltip settings section.
228 *
229 * @since 1.4.0
230 *
231 * @access protected
232 */
233 protected function _renderTooltipSettigns() {
234 self::_renderSelectItem(
235 esc_html__( 'Trigger', 'visualizer' ),
236 'tooltip[trigger]',
237 isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
238 array(
239 '' => '',
240 'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
241 'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', 'visualizer' ),
242 'none' => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
243 ),
244 esc_html__( 'Determines the user interaction that causes the tooltip to be displayed.', 'visualizer' )
245 );
246
247 self::_renderSelectItem(
248 esc_html__( 'Show Color Code', 'visualizer' ),
249 'tooltip[showColorCode]',
250 isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
251 $this->_yesno,
252 esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', 'visualizer' )
253 );
254 }
255
256 /**
257 * Renders chart view settings group.
258 *
259 * @since 1.0.0
260 *
261 * @access protected
262 */
263 protected function _renderViewSettings() {
264 self::_renderGroupStart( esc_html__( 'Layout & Chart Area', 'visualizer' ) );
265 self::_renderSectionStart( esc_html__( 'Layout', 'visualizer' ), false );
266 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' ) );
267
268 echo '<div class="section-item">';
269 echo '<a class="more-info" href="javascript:;">[?]</a>';
270 echo '<b>', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '</b>';
271
272 echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
273 echo '<tr>';
274 echo '<td class="section-table-column">';
275 echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
276 echo '</td>';
277 echo '<td class="section-table-column">';
278 echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
279 echo '</td>';
280 echo '</tr>';
281 echo '</table>';
282
283 echo '<p class="section-description">';
284 esc_html_e( 'Determines the total width and height of the chart.', 'visualizer' );
285 echo '</p>';
286 echo '</div>';
287
288 echo '<div class="section-delimiter"></div>';
289
290 self::_renderSectionDescription( esc_html__( 'Configure the background color for the main area of the chart and the chart border width and color.', 'visualizer' ) );
291
292 self::_renderTextItem(
293 esc_html__( 'Stroke Width', 'visualizer' ),
294 'backgroundColor[strokeWidth]',
295 isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
296 esc_html__( 'The chart border width in pixels.', 'visualizer' ),
297 '0'
298 );
299
300 self::_renderColorPickerItem(
301 esc_html__( 'Stroke Color', 'visualizer' ),
302 'backgroundColor[stroke]',
303 ! empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
304 '#666'
305 );
306
307 $background_color = ! empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
308 self::_renderColorPickerItem(
309 esc_html__( 'Background Color', 'visualizer' ),
310 'backgroundColor[fill]',
311 $background_color,
312 '#fff'
313 );
314
315 echo '<div class="section-item">';
316 echo '<label>';
317 echo '<input type="checkbox" class="control-checkbox" name="backgroundColor[fill]" value="transparent"', checked( $background_color, 'transparent', false ), '> ';
318 esc_html_e( 'Transparent background', 'visualizer' );
319 echo '</label>';
320 echo '</div>';
321 self::_renderSectionEnd();
322
323 self::_renderSectionStart( esc_html__( 'Chart Area', 'visualizer' ), false );
324 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' ) );
325
326 echo '<div class="section-item">';
327 echo '<a class="more-info" href="javascript:;">[?]</a>';
328 echo '<b>', esc_html__( 'Left And Top Margins', 'visualizer' ), '</b>';
329
330 echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
331 echo '<tr>';
332 echo '<td class="section-table-column">';
333 echo '<input type="text" name="chartArea[left]" class="control-text" value="', $this->chartArea['left'] || $this->chartArea['left'] === '0' ? esc_attr( $this->chartArea['left'] ) : '', '" placeholder="20%">';
334 echo '</td>';
335 echo '<td class="section-table-column">';
336 echo '<input type="text" name="chartArea[top]" class="control-text" value="', $this->chartArea['top'] || $this->chartArea['top'] === '0' ? esc_attr( $this->chartArea['top'] ) : '', '" placeholder="20%">';
337 echo '</td>';
338 echo '</tr>';
339 echo '</table>';
340
341 echo '<p class="section-description">';
342 esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
343 echo '</p>';
344 echo '</div>';
345
346 echo '<div class="section-item">';
347 echo '<a class="more-info" href="javascript:;">[?]</a>';
348 echo '<b>', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '</b>';
349
350 echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
351 echo '<tr>';
352 echo '<td class="section-table-column">';
353 echo '<input type="text" name="chartArea[width]" class="control-text" value="', ! empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
354 echo '</td>';
355 echo '<td class="section-table-column">';
356 echo '<input type="text" name="chartArea[height]" class="control-text" value="', ! empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
357 echo '</td>';
358 echo '</tr>';
359 echo '</table>';
360
361 echo '<p class="section-description">';
362 esc_html_e( 'Determines the width and hight of the chart area.', 'visualizer' );
363 echo '</p>';
364 echo '</div>';
365 self::_renderSectionEnd();
366 self::_renderGroupEnd();
367 }
368
369 /**
370 * Renders select item.
371 *
372 * @since 1.0.0
373 *
374 * @static
375 * @access protected
376 * @param string $title The title of the select item.
377 * @param string $name The name of the select item.
378 * @param string $value The actual value of the select item.
379 * @param array $options The array of select options.
380 * @param string $desc The description of the select item.
381 */
382 protected static function _renderSelectItem( $title, $name, $value, array $options, $desc ) {
383 echo '<div class="section-item">';
384 echo '<a class="more-info" href="javascript:;">[?]</a>';
385 echo '<b>', $title, '</b>';
386 echo '<select class="control-select" name="', $name, '">';
387 foreach ( $options as $key => $label ) {
388 echo '<option value="', $key, '"', selected( $key, $value, false ), '>';
389 echo $label;
390 echo '</option>';
391 }
392 echo '</select>';
393 echo '<p class="section-description">', $desc, '</p>';
394 echo '</div>';
395 }
396
397 /**
398 * Renders color picker item.
399 *
400 * @since 1.0.0
401 *
402 * @static
403 * @access protected
404 * @param string $title The title of the select item.
405 * @param string $name The name of the select item.
406 * @param string $value The actual value of the select item.
407 * @param string $default The default value of the color picker.
408 */
409 protected static function _renderColorPickerItem( $title, $name, $value, $default ) {
410 echo '<div class="section-item">';
411 echo '<b>', $title, '</b>';
412 echo '<div>';
413 echo '<input type="text" class="color-picker-hex" name="', $name, '" maxlength="7" placeholder="', esc_attr__( 'Hex Value', 'visualizer' ), '" value="', is_null( $value ) ? $default : esc_attr( $value ), '" data-default-color="', $default, '">';
414 echo '</div>';
415 echo '</div>';
416 }
417
418 /**
419 * Renders text item.
420 *
421 * @since 1.0.0
422 *
423 * @static
424 * @access protected
425 * @param string $title The title of the select item.
426 * @param string $name The name of the select item.
427 * @param string $value The actual value of the select item.
428 * @param string $desc The description of the select item.
429 * @param string $placeholder The placeholder for the input.
430 */
431 protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '' ) {
432 echo '<div class="section-item">';
433 echo '<a class="more-info" href="javascript:;">[?]</a>';
434 echo '<b>', $title, '</b>';
435 echo '<input type="text" class="control-text" name="', $name, '" value="', esc_attr( $value ), '" placeholder="', $placeholder, '">';
436 echo '<p class="section-description">', $desc, '</p>';
437 echo '</div>';
438 }
439
440 /**
441 * Renders the beginning of a group.
442 *
443 * @since 1.0.0
444 *
445 * @static
446 * @access protected
447 * @param string $title The title of this group.
448 */
449 protected static function _renderGroupStart( $title ) {
450 echo '<li class="group">';
451 echo '<h3 class="group-title">', $title, '</h3>';
452 echo '<ul class="group-content">';
453 }
454
455 /**
456 * Renders the ending of a group.
457 *
458 * @since 1.0.0
459 *
460 * @static
461 * @access protected
462 */
463 protected static function _renderGroupEnd() {
464 echo '</ul>';
465 echo '</li>';
466 }
467
468 /**
469 * Renders the beginning of a section.
470 *
471 * @since 1.0.0
472 *
473 * @static
474 * @access protected
475 * @param string $title The title of this section. If the title is empty, no title will be displayed.
476 * @param boolean $open Determines whether the section items block has to be expanded or collapsed.
477 */
478 protected static function _renderSectionStart( $title = false, $open = true ) {
479 echo '<li>';
480 if ( ! empty( $title ) ) {
481 echo '<span class="section-title">', $title, '</span>';
482 }
483 echo '<div class="section-items', $open ? ' open' : '', '">';
484 }
485
486 /**
487 * Renders the ending of a section.
488 *
489 * @since 1.0.0
490 *
491 * @static
492 * @access protected
493 */
494 protected static function _renderSectionEnd() {
495 echo '</div>';
496 echo '</li>';
497 }
498
499 /**
500 * Renders section description block.
501 *
502 * @since 1.0.0
503 *
504 * @static
505 * @access protected
506 * @param string $description The description text.
507 */
508 protected static function _renderSectionDescription( $description ) {
509 echo '<div class="section-item">';
510 echo '<div class="section-description">', $description, '</div>';
511 echo '</div>';
512 }
513
514 /**
515 * Renders format field according to series type.
516 *
517 * @since 1.3.0
518 *
519 * @access protected
520 * @param int $index The index of the series.
521 */
522 protected function _renderFormatField( $index = 0 ) {
523 switch ( $this->__series[ $index + 1 ]['type'] ) {
524 case 'number':
525 self::_renderTextItem(
526 esc_html__( 'Number Format', 'visualizer' ),
527 'series[' . $index . '][format]',
528 isset( $this->series[ $index ]['format'] ) ? $this->series[ $index ]['format'] : '',
529 sprintf( esc_html__( 'Enter custom format pattern to apply to this series value, similar to the %1$sICU pattern set%2$s. Use something like #,### to get 1,234 as output, or $# to add dollar sign before digits. Pay attention that if you use &#37; percentage format then your values will be multiplied by 100.', 'visualizer' ), '<a href="http://icu-project.org/apiref/icu4c/classDecimalFormat.html#_details" target="_blank">', '</a>' ),
530 '#,###.##'
531 );
532 break;
533 case 'date':
534 case 'datetime':
535 case 'timeofday':
536 self::_renderTextItem(
537 esc_html__( 'Date Format', 'visualizer' ),
538 'series[' . $index . '][format]',
539 isset( $this->series[ $index ]['format'] ) ? $this->series[ $index ]['format'] : '',
540 sprintf( esc_html__( 'Enter custom format pattern to apply to this series value, similar to the %1$sICU date and time format%2$s.', 'visualizer' ), '<a href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">', '</a>' ),
541 'eeee, dd LLLL yyyy'
542 );
543 break;
544 }
545 }
546
547 /**
548 * Render a checkbox item
549 */
550 protected static function _renderCheckboxItem( $title, $name, $value, $default, $desc ) {
551 echo '<div class="section-item">';
552 echo '<a class="more-info" href="javascript:;">[?]</a>';
553 echo '<b>', $title, '</b>';
554 echo '<input type="checkbox" class="control-check" value="', $default, '" name="', $name, '" ', ($value == $default ? 'checked' : ''), '>';
555 echo '<p class="section-description">', $desc, '</p>';
556 echo '</div>';
557 }
558
559 }
560