visualizer / classes / Visualizer / Render / Sidebar.php

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

558 lines 20.0 KB

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