visualizer / classes / Visualizer / Render / Sidebar.php

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

548 lines 19.5 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	'right' => esc_html__( 'Right of the chart', Visualizer_Plugin::NAME ),
102	'top' => esc_html__( 'Above the chart', Visualizer_Plugin::NAME ),
103	'bottom' => esc_html__( 'Below the chart', Visualizer_Plugin::NAME ),
104	'in' => esc_html__( 'Inside the chart', Visualizer_Plugin::NAME ),
105	'none' => esc_html__( 'Omit the legend', Visualizer_Plugin::NAME ),
106	);
107
108	$this->_alignments = array(
109	'' => '',
110	'start' => esc_html__( 'Aligned to the start of the allocated area', Visualizer_Plugin::NAME ),
111	'center' => esc_html__( 'Centered in the allocated area', Visualizer_Plugin::NAME ),
112	'end' => esc_html__( 'Aligned to the end of the allocated area', Visualizer_Plugin::NAME ),
113	);
114
115	$this->_yesno = array(
116	'' => '',
117	'1' => esc_html__( 'Yes', Visualizer_Plugin::NAME ),
118	'0' => esc_html__( 'No', Visualizer_Plugin::NAME ),
119	);
120	}
121
122	/**
123	* Renders chart title settings.
124	*
125	* @since 1.0.0
126	*
127	* @access protected
128	*/
129	protected function _renderChartTitleSettings() {
130	self::_renderTextItem(
131	esc_html__( 'Chart Title', Visualizer_Plugin::NAME ),
132	'title',
133	$this->title,
134	esc_html__( 'Text to display above the chart.', Visualizer_Plugin::NAME )
135	);
136
137	self::_renderColorPickerItem(
138	esc_html__( 'Chart Title Color', Visualizer_Plugin::NAME ),
139	'titleTextStyle[color]',
140	isset( $this->titleTextStyle['color'] ) ? $this->titleTextStyle['color'] : null,
141	'#000'
142	);
143	}
144
145	/**
146	* Renders chart general settings group.
147	*
148	* @since 1.0.0
149	*
150	* @access protected
151	*/
152	protected function _renderGeneralSettings() {
153	self::_renderGroupStart( esc_html__( 'General Settings', Visualizer_Plugin::NAME ) );
154	self::_renderSectionStart();
155	self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', Visualizer_Plugin::NAME ) );
156	self::_renderSectionEnd();
157
158	self::_renderSectionStart( esc_html__( 'Title', Visualizer_Plugin::NAME ), false );
159	$this->_renderChartTitleSettings();
160	self::_renderSectionEnd();
161
162	self::_renderSectionStart( esc_html__( 'Font Styles' ), false );
163	echo '<div class="section-item">';
164	echo '<a class="more-info" href="javascript:;">[?]</a>';
165	echo '<b>', esc_html__( 'Family And Size', Visualizer_Plugin::NAME ), '</b>';
166
167	echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
168	echo '<tr>';
169	echo '<td class="section-table-column">';
170	echo '<select name="fontName" class="control-select">';
171	echo '<option></option>';
172	foreach ( self::$_fontFamilies as $font => $label ) {
173	echo '<option value="', $font, '"', selected( $font, $this->fontName, false ), '>';
174	echo $label;
175	echo '</option>';
176	}
177	echo '</select>';
178	echo '</td>';
179	echo '<td class="section-table-column">';
180	echo '<select name="fontSize" class="control-select">';
181	echo '<option></option>';
182	for ( $i = 7; $i <= 20; $i++ ) {
183	echo '<option value="', $i, '"', selected( $i, $this->fontSize, false ), '>', $i, '</option>';
184	}
185	echo '</select>';
186	echo '</td>';
187	echo '</tr>';
188	echo '</table>';
189
190	echo '<p class="section-description">';
191	esc_html_e( 'The default font family and size for all text in the chart.', Visualizer_Plugin::NAME );
192	echo '</p>';
193	echo '</div>';
194	self::_renderSectionEnd();
195
196	self::_renderSectionStart( esc_html__( 'Legend', Visualizer_Plugin::NAME ), false );
197	self::_renderSelectItem(
198	esc_html__( 'Position', Visualizer_Plugin::NAME ),
199	'legend[position]',
200	$this->legend['position'],
201	$this->_legendPositions,
202	esc_html__( 'Determines where to place the legend, compared to the chart area.', Visualizer_Plugin::NAME )
203	);
204
205	self::_renderSelectItem(
206	esc_html__( 'Alignment', Visualizer_Plugin::NAME ),
207	'legend[alignment]',
208	$this->legend['alignment'],
209	$this->_alignments,
210	esc_html__( 'Determines the alignment of the legend.', Visualizer_Plugin::NAME )
211	);
212
213	self::_renderColorPickerItem(
214	esc_html__( 'Font Color', Visualizer_Plugin::NAME ),
215	'legend[textStyle][color]',
216	isset( $this->legend['textStyle']['color'] ) ? $this->legend['textStyle']['color'] : null,
217	'#000'
218	);
219	self::_renderSectionEnd();
220
221	self::_renderSectionStart( esc_html__( 'Tooltip', Visualizer_Plugin::NAME ), false );
222	$this->_renderTooltipSettigns();
223	self::_renderSectionEnd();
224	self::_renderGroupEnd();
225	}
226
227	/**
228	* Renders tooltip settings section.
229	*
230	* @since 1.4.0
231	*
232	* @access protected
233	*/
234	protected function _renderTooltipSettigns() {
235	self::_renderSelectItem(
236	esc_html__( 'Trigger', Visualizer_Plugin::NAME ),
237	'tooltip[trigger]',
238	isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
239	array(
240	'' => '',
241	'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', Visualizer_Plugin::NAME ),
242	'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', Visualizer_Plugin::NAME ),
243	'none' => esc_html__( 'The tooltip will not be displayed', Visualizer_Plugin::NAME ),
244	),
245	esc_html__( 'Determines the user interaction that causes the tooltip to be displayed.', Visualizer_Plugin::NAME )
246	);
247
248	self::_renderSelectItem(
249	esc_html__( 'Show Color Code', Visualizer_Plugin::NAME ),
250	'tooltip[showColorCode]',
251	isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
252	$this->_yesno,
253	esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', Visualizer_Plugin::NAME )
254	);
255	}
256
257	/**
258	* Renders chart view settings group.
259	*
260	* @since 1.0.0
261	*
262	* @access protected
263	*/
264	protected function _renderViewSettings() {
265	self::_renderGroupStart( esc_html__( 'Layout & Chart Area', Visualizer_Plugin::NAME ) );
266	self::_renderSectionStart( esc_html__( 'Layout', Visualizer_Plugin::NAME ), false );
267	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 ) );
268
269	echo '<div class="section-item">';
270	echo '<a class="more-info" href="javascript:;">[?]</a>';
271	echo '<b>', esc_html__( 'Width And Height Of Chart', Visualizer_Plugin::NAME ), '</b>';
272
273	echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
274	echo '<tr>';
275	echo '<td class="section-table-column">';
276	echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
277	echo '</td>';
278	echo '<td class="section-table-column">';
279	echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
280	echo '</td>';
281	echo '</tr>';
282	echo '</table>';
283
284	echo '<p class="section-description">';
285	esc_html_e( 'Determines the total width and height of the chart.', Visualizer_Plugin::NAME );
286	echo '</p>';
287	echo '</div>';
288
289	echo '<div class="section-delimiter"></div>';
290
291	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 ) );
292
293	self::_renderTextItem(
294	esc_html__( 'Stroke Width', Visualizer_Plugin::NAME ),
295	'backgroundColor[strokeWidth]',
296	isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
297	esc_html__( 'The chart border width in pixels.', Visualizer_Plugin::NAME ),
298	'0'
299	);
300
301	self::_renderColorPickerItem(
302	esc_html__( 'Stroke Color', Visualizer_Plugin::NAME ),
303	'backgroundColor[stroke]',
304	!empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
305	'#666'
306	);
307
308	$background_color = !empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
309	self::_renderColorPickerItem(
310	esc_html__( 'Background Color', Visualizer_Plugin::NAME ),
311	'backgroundColor[fill]',
312	$background_color,
313	'#fff'
314	);
315
316	echo '<div class="section-item">';
317	echo '<label>';
318	echo '<input type="checkbox" class="control-checkbox" name="backgroundColor[fill]" value="transparent"', checked( $background_color, 'transparent', false ), '> ';
319	esc_html_e( 'Transparent background' );
320	echo '</label>';
321	echo '</div>';
322	self::_renderSectionEnd();
323
324	self::_renderSectionStart( esc_html__( 'Chart Area', Visualizer_Plugin::NAME ), false );
325	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 ) );
326
327	echo '<div class="section-item">';
328	echo '<a class="more-info" href="javascript:;">[?]</a>';
329	echo '<b>', esc_html__( 'Left And Top Margins', Visualizer_Plugin::NAME ), '</b>';
330
331	echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
332	echo '<tr>';
333	echo '<td class="section-table-column">';
334	echo '<input type="text" name="chartArea[left]" class="control-text" value="', !empty( $this->chartArea['left'] ) ? esc_attr( $this->chartArea['left'] ) : '', '" placeholder="20%">';
335	echo '</td>';
336	echo '<td class="section-table-column">';
337	echo '<input type="text" name="chartArea[top]" class="control-text" value="', !empty( $this->chartArea['top'] ) ? esc_attr( $this->chartArea['top'] ) : '', '" placeholder="20%">';
338	echo '</td>';
339	echo '</tr>';
340	echo '</table>';
341
342	echo '<p class="section-description">';
343	esc_html_e( 'Determines how far to draw the chart from the left and top borders.', Visualizer_Plugin::NAME );
344	echo '</p>';
345	echo '</div>';
346
347	echo '<div class="section-item">';
348	echo '<a class="more-info" href="javascript:;">[?]</a>';
349	echo '<b>', esc_html__( 'Width And Height Of Chart Area', Visualizer_Plugin::NAME ), '</b>';
350
351	echo '<table class="section-table" cellspacing="0" cellpadding="0" border="0">';
352	echo '<tr>';
353	echo '<td class="section-table-column">';
354	echo '<input type="text" name="chartArea[width]" class="control-text" value="', !empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
355	echo '</td>';
356	echo '<td class="section-table-column">';
357	echo '<input type="text" name="chartArea[height]" class="control-text" value="', !empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
358	echo '</td>';
359	echo '</tr>';
360	echo '</table>';
361
362	echo '<p class="section-description">';
363	esc_html_e( 'Determines the width and hight of the chart area.', Visualizer_Plugin::NAME );
364	echo '</p>';
365	echo '</div>';
366	self::_renderSectionEnd();
367	self::_renderGroupEnd();
368	}
369
370	/**
371	* Renders select item.
372	*
373	* @since 1.0.0
374	*
375	* @static
376	* @access protected
377	* @param string $title The title of the select item.
378	* @param string $name The name of the select item.
379	* @param string $value The actual value of the select item.
380	* @param array $options The array of select options.
381	* @param string $desc The description of the select item.
382	*/
383	protected static function _renderSelectItem( $title, $name, $value, array $options, $desc ) {
384	echo '<div class="section-item">';
385	echo '<a class="more-info" href="javascript:;">[?]</a>';
386	echo '<b>', $title, '</b>';
387	echo '<select class="control-select" name="', $name, '">';
388	foreach ( $options as $key => $label ) {
389	echo '<option value="', $key, '"', selected( $key, $value, false ), '>';
390	echo $label;
391	echo '</option>';
392	}
393	echo '</select>';
394	echo '<p class="section-description">', $desc, '</p>';
395	echo '</div>';
396	}
397
398	/**
399	* Renders color picker item.
400	*
401	* @since 1.0.0
402	*
403	* @static
404	* @access protected
405	* @param string $title The title of the select item.
406	* @param string $name The name of the select item.
407	* @param string $value The actual value of the select item.
408	* @param string $default The default value of the color picker.
409	*/
410	protected static function _renderColorPickerItem( $title, $name, $value, $default ) {
411	echo '<div class="section-item">';
412	echo '<b>', $title, '</b>';
413	echo '<div>';
414	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, '">';
415	echo '</div>';
416	echo '</div>';
417	}
418
419	/**
420	* Renders text item.
421	*
422	* @since 1.0.0
423	*
424	* @static
425	* @access protected
426	* @param string $title The title of the select item.
427	* @param string $name The name of the select item.
428	* @param string $value The actual value of the select item.
429	* @param string $desc The description of the select item.
430	* @param string $placeholder The placeholder for the input.
431	*/
432	protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '' ) {
433	echo '<div class="section-item">';
434	echo '<a class="more-info" href="javascript:;">[?]</a>';
435	echo '<b>', $title, '</b>';
436	echo '<input type="text" class="control-text" name="', $name, '" value="', esc_attr( $value ), '" placeholder="', $placeholder, '">';
437	echo '<p class="section-description">', $desc, '</p>';
438	echo '</div>';
439	}
440
441	/**
442	* Renders the beginning of a group.
443	*
444	* @since 1.0.0
445	*
446	* @static
447	* @access protected
448	* @param string $title The title of this group.
449	*/
450	protected static function _renderGroupStart( $title ) {
451	echo '<li class="group">';
452	echo '<h3 class="group-title">', $title, '</h3>';
453	echo '<ul class="group-content">';
454	}
455
456	/**
457	* Renders the ending of a group.
458	*
459	* @since 1.0.0
460	*
461	* @static
462	* @access protected
463	*/
464	protected static function _renderGroupEnd() {
465	echo '</ul>';
466	echo '</li>';
467	}
468
469	/**
470	* Renders the beginning of a section.
471	*
472	* @since 1.0.0
473	*
474	* @static
475	* @access protected
476	* @param string $title The title of this section. If the title is empty, no title will be displayed.
477	* @param boolean $open Determines whether the section items block has to be expanded or collapsed.
478	*/
479	protected static function _renderSectionStart( $title = false, $open = true ) {
480	echo '<li>';
481	if ( !empty( $title ) ) {
482	echo '<span class="section-title">', $title, '</span>';
483	}
484	echo '<div class="section-items', $open ? ' open' : '', '">';
485	}
486
487	/**
488	* Renders the ending of a section.
489	*
490	* @since 1.0.0
491	*
492	* @static
493	* @access protected
494	*/
495	protected static function _renderSectionEnd() {
496	echo '</div>';
497	echo '</li>';
498	}
499
500	/**
501	* Renders section description block.
502	*
503	* @since 1.0.0
504	*
505	* @static
506	* @access protected
507	* @param string $description The description text.
508	*/
509	protected static function _renderSectionDescription( $description ) {
510	echo '<div class="section-item">';
511	echo '<div class="section-description">', $description, '</div>';
512	echo '</div>';
513	}
514
515	/**
516	* Renders format field according to series type.
517	*
518	* @since 1.3.0
519	*
520	* @access protected
521	* @param int $index The index of the series.
522	*/
523	protected function _renderFormatField( $index = 0 ) {
524	switch ( $this->__series[$index + 1]['type'] ) {
525	case 'number':
526	self::_renderTextItem(
527	esc_html__( 'Number Format', Visualizer_Plugin::NAME ),
528	'series[' . $index . '][format]',
529	isset( $this->series[$index]['format'] ) ? $this->series[$index]['format'] : '',
530	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>' ),
531	'#,###.##'
532	);
533	break;
534	case 'date':
535	case 'datetime':
536	case 'timeofday':
537	self::_renderTextItem(
538	esc_html__( 'Date Format', Visualizer_Plugin::NAME ),
539	'series[' . $index . '][format]',
540	isset( $this->series[$index]['format'] ) ? $this->series[$index]['format'] : '',
541	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>' ),
542	'eeee, dd LLLL yyyy'
543	);
544	break;
545	}
546	}
547
548	}