visualizer / classes / Visualizer / Render / Sidebar / ChartJS.php

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

436 lines 13.2 KB

Raw Download Zip

1	<?php
2
3	/**
4	* Base class for sidebar settigns of ChartJS based charts.
5	*
6	* @category Visualizer
7	* @package Render
8	* @subpackage Sidebar
9	*
10	* @since 3.2.0
11	* @abstract
12	*/
13	abstract class Visualizer_Render_Sidebar_ChartJS extends Visualizer_Render_Sidebar {
14
15	/**
16	* The array of available legend positions.
17	*
18	* @since 1.0.0
19	*
20	* @access protected
21	* @var array
22	*/
23	protected $_legendPositions;
24
25
26	/**
27	* The constructor.
28	*/
29	public function __construct( $data = array() ) {
30	$this->_library = 'chartjs';
31	parent::__construct( $data );
32
33	$this->_legendPositions = array(
34	'left' => esc_html__( 'Left of the chart', 'visualizer' ),
35	'right' => esc_html__( 'Right of the chart', 'visualizer' ),
36	'top' => esc_html__( 'Above the chart', 'visualizer' ),
37	'bottom' => esc_html__( 'Below the chart', 'visualizer' ),
38	);
39
40	}
41
42	/**
43	* Renders concrete series settings for the Bar chart.
44	*
45	* @since 3.3.0
46	*
47	* @access protected
48	* @param int $index The series index.
49	*/
50	protected function _renderChartTypeSeries( $index ) {
51	// empty.
52	}
53
54	/**
55	* Renders settings specific to the Bar chart.
56	*
57	* @since 3.3.0
58	*
59	* @access protected
60	*/
61	protected function _renderChartTypeSettings() {
62	// empty
63	}
64
65	/**
66	* Registers additional hooks.
67	*
68	* @access protected
69	*/
70	protected function hooks() {
71	if ( $this->_library === 'chartjs' ) {
72	add_filter( 'visualizer_assets_render', array( $this, 'load_chartjs_assets' ), 10, 2 );
73	}
74	}
75
76	/**
77	* Loads the assets.
78	*/
79	function load_chartjs_assets( $deps, $is_frontend ) {
80	$this->load_dependent_assets( array( 'moment', 'numeral' ) );
81
82	wp_register_script( 'chartjs', VISUALIZER_ABSURL . 'js/lib/chartjs.min.js', array( 'numeral', 'moment' ), null, true );
83	wp_register_script(
84	'visualizer-render-chartjs-lib',
85	VISUALIZER_ABSURL . 'js/render-chartjs.js',
86	array(
87	'chartjs',
88	),
89	Visualizer_Plugin::VERSION,
90	true
91	);
92
93	return array_merge(
94	$deps,
95	array( 'visualizer-render-chartjs-lib' )
96	);
97
98	}
99
100	/**
101	* Renders series settings group.
102	*
103	* @since 3.3.0
104	*
105	* @access protected
106	*/
107	protected function _renderSeriesSettings() {
108	self::_renderGroupStart( esc_html__( 'Series Settings', 'visualizer' ) );
109	self::_renderSectionStart();
110	self::_renderSectionDescription( esc_html__( 'If you have just updated/modified the chart data, you may need to save it before the new data reflects in the settings.', 'visualizer' ), 'viz-info-msg' );
111	self::_renderSectionEnd();
112
113	for ( $i = 1, $cnt = count( $this->__series ); $i < $cnt; $i++ ) {
114	if ( ! empty( $this->__series[ $i ]['label'] ) ) {
115	self::_renderSectionStart( esc_html( $this->__series[ $i ]['label'] ), false );
116	$this->_renderSeries( $i - 1 );
117	self::_renderSectionEnd();
118	}
119	}
120	self::_renderGroupEnd();
121	}
122
123	/**
124	* Renders concrete series settings.
125	*
126	* @since 3.3.0
127	*
128	* @access protected
129	* @param int $index The series index.
130	*/
131	protected function _renderSeries( $index ) {
132	$this->_renderFormatField( $index );
133	$this->_renderChartTypeSeries( $index );
134
135	}
136
137	/**
138	* Renders template.
139	*
140	* @since 3.3.0
141	*
142	* @access protected
143	*/
144	protected function _toHTML() {
145	$this->_renderGeneralSettings();
146	$this->_renderAxesSettings();
147	$this->_renderChartTypeSettings();
148	$this->_renderSeriesSettings();
149	$this->_renderViewSettings();
150	$this->_renderAdvancedSettings();
151	}
152
153	/**
154	* Renders chart title settings.
155	*
156	* @since 3.3.0
157	*
158	* @access protected
159	*/
160	protected function _renderChartTitleSettings() {
161	self::_renderTextItem(
162	esc_html__( 'Chart Title', 'visualizer' ),
163	'title[text]',
164	isset( $this->title['text'] ) ? $this->title['text'] : '',
165	esc_html__( 'Text to display above the chart.', 'visualizer' )
166	);
167
168	self::_renderColorPickerItem(
169	esc_html__( 'Chart Title Color', 'visualizer' ),
170	'title[fontColor]',
171	isset( $this->title['fontColor'] ) ? $this->title['fontColor'] : '',
172	'#000'
173	);
174
175	echo '<div class="viz-section-delimiter"></div>';
176
177	self::_renderTextAreaItem(
178	esc_html__( 'Chart Description', 'visualizer' ),
179	'description',
180	$this->description,
181	sprintf( esc_html__( 'Description to display in the structured data schema as explained %1$shere%2$s', 'visualizer' ), '<a href="https://developers.google.com/search/docs/data-types/dataset#dataset" target="_blank">', '</a>' )
182	);
183
184	}
185
186	/**
187	* Renders chart general settings group.
188	*
189	* @since 3.3.0
190	*
191	* @access protected
192	*/
193	protected function _renderGeneralSettings() {
194	self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
195	self::_renderSectionStart();
196	self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', 'visualizer' ) );
197	self::_renderSectionEnd();
198
199	self::_renderSectionStart( esc_html__( 'Title', 'visualizer' ), false );
200	$this->_renderChartTitleSettings();
201	self::_renderSectionEnd();
202
203	self::_renderSectionStart( esc_html__( 'Font Styles', 'visualizer' ), false );
204	echo '<div class="viz-section-item">';
205	echo '<a class="more-info" href="javascript:;">[?]</a>';
206	echo '<b>', esc_html__( 'Family And Size', 'visualizer' ), '</b>';
207
208	echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
209	echo '<tr>';
210	echo '<td class="viz-section-table-column">';
211	echo '<select name="fontName" class="control-select">';
212	echo '<option></option>';
213	foreach ( self::$_fontFamilies as $font => $label ) {
214	echo '<option value="', $font, '"', selected( $font, $this->fontName, false ), '>';
215	echo $label;
216	echo '</option>';
217	}
218	echo '</select>';
219	echo '</td>';
220	echo '<td class="viz-section-table-column">';
221	echo '<select name="fontSize" class="control-select">';
222	echo '<option></option>';
223	for ( $i = 7; $i <= 20; $i++ ) {
224	echo '<option value="', $i, '"', selected( $i, $this->fontSize, false ), '>', $i, '</option>';
225	}
226	echo '</select>';
227	echo '</td>';
228	echo '</tr>';
229	echo '</table>';
230
231	echo '<p class="viz-section-description">';
232	esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
233	echo '</p>';
234	echo '</div>';
235	self::_renderSectionEnd();
236
237	self::_renderSectionStart( esc_html__( 'Legend', 'visualizer' ), false );
238	self::_renderSelectItem(
239	esc_html__( 'Position', 'visualizer' ),
240	'legend[position]',
241	// let's have a default otherwise the chart behaves weird when hovering in edit mode
242	isset( $this->legend['position'] ) ? $this->legend['position'] : 'top',
243	$this->_legendPositions,
244	esc_html__( 'Determines where to place the legend, compared to the chart area.', 'visualizer' )
245	);
246
247	self::_renderCheckboxItem(
248	esc_html__( 'Show datasets in reverse order', 'visualizer' ),
249	'legend[reverse]',
250	isset( $this->legend['reverse'] ) ? $this->legend['reverse'] : false,
251	'true',
252	esc_html__( 'Legend will show datasets in reverse order.', 'visualizer' )
253	);
254
255	echo '<div class="viz-section-item">';
256	echo '<a class="more-info" href="javascript:;">[?]</a>';
257	echo '<b>', esc_html__( 'Family And Size', 'visualizer' ), '</b>';
258
259	echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
260	echo '<tr>';
261	echo '<td class="viz-section-table-column">';
262	echo '<select name="legend[labels][fontName]" class="control-select">';
263	echo '<option></option>';
264	foreach ( self::$_fontFamilies as $font => $label ) {
265	echo '<option value="', $font, '"', selected( $font, $this->legend['labels']['fontName'], false ), '>';
266	echo $label;
267	echo '</option>';
268	}
269	echo '</select>';
270	echo '</td>';
271	echo '<td class="viz-section-table-column">';
272	echo '<select name="legend[labels][fontSize]" class="control-select">';
273	echo '<option></option>';
274	for ( $i = 7; $i <= 20; $i++ ) {
275	echo '<option value="', $i, '"', selected( $i, $this->legend['labels']['fontSize'], false ), '>', $i, '</option>';
276	}
277	echo '</select>';
278	echo '</td>';
279	echo '</tr>';
280	echo '</table>';
281
282	self::_renderColorPickerItem(
283	esc_html__( 'Font Color', 'visualizer' ),
284	'legend[labels][fontColor]',
285	isset( $this->legend['labels']['fontColor'] ) ? $this->legend['labels']['fontColor'] : null,
286	'#000'
287	);
288
289	echo '</div>';
290
291	self::_renderSectionEnd();
292
293	self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
294	$this->_renderTooltipSettigns();
295	self::_renderSectionEnd();
296
297	$this->_renderAnimationSettings();
298
299	self::_renderSectionStart( esc_html__( 'License & Creator', 'visualizer' ), false );
300	self::_renderTextItem(
301	esc_html__( 'License', 'visualizer' ),
302	'license',
303	$this->license,
304	''
305	);
306	self::_renderTextItem(
307	esc_html__( 'Creator', 'visualizer' ),
308	'creator',
309	$this->creator,
310	''
311	);
312	self::_renderSectionEnd();
313
314	self::_renderChartImageSettings();
315
316	self::_renderGroupEnd();
317	}
318
319	/**
320	* Renders animation settings section.
321	*
322	* @access protected
323	*/
324	protected function _renderAnimationSettings() {
325	if ( ! $this->_supportsAnimation ) {
326	return;
327	}
328
329	self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
330
331	self::_renderTextItem(
332	esc_html__( 'Duration', 'visualizer' ),
333	'animation[duration]',
334	isset( $this->animation['duration'] ) ? $this->animation['duration'] : 1000,
335	esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
336	1000,
337	'number',
338	array( 'min' => 1000 )
339	);
340
341	self::_renderSelectItem(
342	esc_html__( 'Easing', 'visualizer' ),
343	'animation[easing]',
344	isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
345	array(
346	'linear' => esc_html__( 'Constant speed', 'visualizer' ),
347	'easeInQuad' => esc_html__( 'easeInQuad', 'visualizer' ),
348	'easeOutQuad' => esc_html__( 'easeOutQuad', 'visualizer' ),
349	'easeInOutQuad' => esc_html__( 'easeInOutQuad', 'visualizer' ),
350	'easeInCubic' => esc_html__( 'easeInCubic', 'visualizer' ),
351	'easeOutCubic' => esc_html__( 'easeOutCubic', 'visualizer' ),
352	'easeInOutCubic' => esc_html__( 'easeInOutCubic', 'visualizer' ),
353	'easeInQuart' => esc_html__( 'easeInQuart', 'visualizer' ),
354	'easeOutQuart' => esc_html__( 'easeOutQuart', 'visualizer' ),
355	'easeInOutQuart' => esc_html__( 'easeInOutQuart', 'visualizer' ),
356	'easeInQuint' => esc_html__( 'easeInQuint', 'visualizer' ),
357	'easeOutQuint' => esc_html__( 'easeOutQuint', 'visualizer' ),
358	),
359	esc_html__( 'The easing function applied to the animation.', 'visualizer' )
360	);
361
362	self::_renderSectionEnd();
363
364	}
365
366	/**
367	* Renders tooltip settings section.
368	*
369	* @since 1.4.0
370	*
371	* @access protected
372	*/
373	protected function _renderTooltipSettigns() {
374	self::_renderCheckboxItem(
375	esc_html__( 'Trigger', 'visualizer' ),
376	'tooltip[intersect]',
377	$this->tooltip['intersect'],
378	1,
379	esc_html__( 'Determines if the tooltip should only display when the mouse intersects with an element.', 'visualizer' )
380	);
381	}
382
383	/**
384	* Add the correct description for the manual configuration box.
385	*/
386	protected function _renderManualConfigDescription() {
387	self::_renderSectionStart();
388	self::_renderSectionDescription( '<span class="viz-gvlink">' . sprintf( __( 'Configure the graph by providing configuration variables right from the %1$sChartJS API%2$s. You can refer to to some examples %3$shere%4$s.', 'visualizer' ), '<a href="https://www.chartjs.org/docs/latest/configuration/" target="_blank">', '</a>', '<a href="https://docs.themeisle.com/article/728-manual-configuration" target="_blank">', '</a>' ) . '</span>' );
389	}
390
391	/**
392	* Add the correct example for the manual configuration box.
393	*/
394	protected function _renderManualConfigExample() {
395	return '{
396	"cutoutPercentage": 5,
397	"rotation": 60
398	}';
399	}
400
401	/**
402	* Renders chart view settings group.
403	*
404	* @since 3.3.0
405	*
406	* @access protected
407	*/
408	protected function _renderViewSettings() {
409	self::_renderGroupStart( esc_html__( 'Chart Size', 'visualizer' ) );
410	self::_renderSectionStart();
411	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' ) );
412
413	echo '<div class="viz-section-item">';
414	echo '<a class="more-info" href="javascript:;">[?]</a>';
415	echo '<b>', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '</b>';
416
417	echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
418	echo '<tr>';
419	echo '<td class="viz-section-table-column">';
420	echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
421	echo '</td>';
422	echo '<td class="viz-section-table-column">';
423	echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
424	echo '</td>';
425	echo '</tr>';
426	echo '</table>';
427
428	echo '<p class="viz-section-description">';
429	esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
430	echo '</p>';
431	echo '</div>';
432	self::_renderSectionEnd();
433	self::_renderGroupEnd();
434	}
435	}
436