visualizer / classes / Visualizer / Render / Sidebar.php

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

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