← All changes | classes/Visualizer/Render/Sidebar/Google.php +395 -8 3.1.3 → 4.0.8 View file →

		@@ -31,13 +31,58 @@
31	31	*/
32	32	abstract class Visualizer_Render_Sidebar_Google extends Visualizer_Render_Sidebar {
33	33
34	34	/**
	35	+ * The array of available legend positions.
	36	+ *
	37	+ * @since 1.0.0
	38	+ *
	39	+ * @access protected
	40	+ * @var array
	41	+ */
	42	+ protected $_legendPositions;
	43	+
	44	+ /**
	45	+ * The array of available alignments.
	46	+ *
	47	+ * @since 1.0.0
	48	+ *
	49	+ * @access protected
	50	+ * @var array
	51	+ */
	52	+ protected $_alignments;
	53	+
	54	+ /**
35	55	* The constructor.
36	56	*/
37	57	public function __construct( $data = array() ) {
38	58	$this->_library = 'google';
39	59	parent::__construct( $data );
	60	+
	61	+ $this->_legendPositions = array(
	62	+ '' => esc_html__( 'Default', 'visualizer' ),
	63	+ 'left' => esc_html__( 'Left of the chart', 'visualizer' ),
	64	+ 'right' => esc_html__( 'Right of the chart', 'visualizer' ),
	65	+ 'top' => esc_html__( 'Above the chart', 'visualizer' ),
	66	+ 'bottom' => esc_html__( 'Below the chart', 'visualizer' ),
	67	+ 'none' => esc_html__( 'Omit the legend', 'visualizer' ),
	68	+ );
	69	+
	70	+ $chart_type = $this->get_chart_type( false );
	71	+ if ( ! in_array( $chart_type, array( 'Pie' ), true ) ) {
	72	+ $this->_legendPositions['in'] = esc_html__( 'Inside the chart', 'visualizer' );
	73	+ }
	74	+
	75	+ if ( in_array( $chart_type, array( 'Bubble' ), true ) ) {
	76	+ unset( $this->_legendPositions['left'] );
	77	+ }
	78	+
	79	+ $this->_alignments = array(
	80	+ '' => '',
	81	+ 'start' => esc_html__( 'Aligned to the start of the allocated area', 'visualizer' ),
	82	+ 'center' => esc_html__( 'Centered in the allocated area', 'visualizer' ),
	83	+ 'end' => esc_html__( 'Aligned to the end of the allocated area', 'visualizer' ),
	84	+ );
40	85	}
41	86
42	87	/**
43	88	* Registers additional hooks.
		@@ -52,16 +97,17 @@
52	97
53	98	/**
54	99	* Loads the assets.
55	100	*/
56		- function load_google_assets( $deps, $is_frontend ) {
57		- wp_register_script( 'google-jsapi-new', '//www.gstatic.com/charts/loader.js', array(), null, true );
58		- wp_register_script( 'google-jsapi-old', '//www.google.com/jsapi', array( 'google-jsapi-new' ), null, true );
	101	+ public function load_google_assets( $deps, $is_frontend ) {
	102	+ wp_register_script( 'google-jsapi', '//www.gstatic.com/charts/loader.js', array(), null, true );
	103	+ wp_register_script( 'dom-to-image', VISUALIZER_ABSURL . 'js/lib/dom-to-image.min.js', array(), null, true );
59	104	wp_register_script(
60	105	'visualizer-render-google-lib',
61	106	VISUALIZER_ABSURL . 'js/render-google.js',
62	107	array(
63		- 'google-jsapi-old',
	108	+ 'google-jsapi',
	109	+ 'dom-to-image',
64	110	),
65	111	Visualizer_Plugin::VERSION,
66	112	true
67	113	);
		@@ -69,9 +115,8 @@
69	115	return array_merge(
70	116	$deps,
71	117	array( 'visualizer-render-google-lib' )
72	118	);
73		-
74	119	}
75	120
76	121	/**
77	122	* Enqueue assets.
		@@ -76,12 +121,354 @@
76	121	/**
77	122	* Enqueue assets.
78	123	*/
79	124	public static function enqueue_assets( $deps = array() ) {
80		- wp_enqueue_script( 'visualizer-google-jsapi-new', '//www.gstatic.com/charts/loader.js', array(), null, true );
81		- wp_enqueue_script( 'visualizer-google-jsapi-old', '//www.google.com/jsapi', array( 'visualizer-google-jsapi-new' ), null, true );
82		- wp_enqueue_script( 'visualizer-render-google-lib', VISUALIZER_ABSURL . 'js/render-google.js', array_merge( $deps, array( 'visualizer-google-jsapi-old' ) ), Visualizer_Plugin::VERSION, true );
	125	+ wp_enqueue_script( 'visualizer-google-jsapi', '//www.gstatic.com/charts/loader.js', array(), null, true );
	126	+ wp_enqueue_script( 'visualizer-render-google-lib', VISUALIZER_ABSURL . 'js/render-google.js', array_merge( $deps, array( 'visualizer-google-jsapi' ) ), Visualizer_Plugin::VERSION, true );
83	127	return 'visualizer-render-google-lib';
84	128	}
85	129
	130	+ /**
	131	+ * Renders the role field.
	132	+ *
	133	+ * @since 3.4.0
	134	+ *
	135	+ * @access protected
	136	+ */
	137	+ protected function _renderRoleField( $index ) {
	138	+ self::_renderSelectItem(
	139	+ esc_html__( 'Special Role', 'visualizer' ),
	140	+ 'series[' . $index . '][role]',
	141	+ isset( $this->series[ $index ]['role'] ) ? $this->series[ $index ]['role'] : '',
	142	+ array(
	143	+ '' => esc_html__( 'Default (Data)', 'visualizer' ),
	144	+ 'annotation' => esc_html__( 'Annotation', 'visualizer' ),
	145	+ 'annotationText' => esc_html__( 'Annotation Text', 'visualizer' ),
	146	+ 'certainty' => esc_html__( 'Certainty', 'visualizer' ),
	147	+ 'emphasis' => esc_html__( 'Emphasis', 'visualizer' ),
	148	+ 'scope' => esc_html__( 'Scope', 'visualizer' ),
	149	+ 'style' => esc_html__( 'Style', 'visualizer' ),
	150	+ 'tooltip' => esc_html__( 'Tooltip', 'visualizer' ),
	151	+ 'interval' => esc_html__( 'Interval', 'visualizer' ),
	152	+ ),
	153	+ sprintf(
	154	+ // translators: %1$s - HTML link tag, %2$s - HTML closing link tag, %3$s - HTML link tag, %4$s - HTML closing link tag
	155	+ esc_html__( 'Determines whether the series has to be used for a special role as mentioned in %1$shere%2$s. You can view a few examples %3$shere%4$s.', 'visualizer' ),
	156	+ '<a href="https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available" target="_blank">',
	157	+ '</a>',
	158	+ '<a href="https://docs.themeisle.com/article/1160-roles-for-series-visualizer" target="_blank">',
	159	+ '</a>'
	160	+ )
	161	+ );
	162	+ }
86	163
	164	+ /**
	165	+ * Renders chart general settings group.
	166	+ *
	167	+ * @since 1.0.0
	168	+ *
	169	+ * @access protected
	170	+ */
	171	+ protected function _renderGeneralSettings() {
	172	+ self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
	173	+ self::_renderSectionStart();
	174	+ self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', 'visualizer' ) );
	175	+ self::_renderSectionEnd();
	176	+
	177	+ self::_renderSectionStart( esc_html__( 'Title', 'visualizer' ), false );
	178	+ $this->_renderChartTitleSettings();
	179	+ self::_renderSectionEnd();
	180	+
	181	+ self::_renderSectionStart( esc_html__( 'Font Styles', 'visualizer' ), false );
	182	+ echo '<div class="viz-section-item">';
	183	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	184	+ echo '<b>', esc_html__( 'Font Family And Size', 'visualizer' ), '</b>';
	185	+
	186	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	187	+ echo '<tr>';
	188	+ echo '<td class="viz-section-table-column">';
	189	+ echo '<select name="fontName" class="control-select">';
	190	+ echo '<option></option>';
	191	+ foreach ( self::$_fontFamilies as $font => $label ) {
	192	+ echo '<option value="', $font, '"', selected( $font, $this->fontName, false ), '>';
	193	+ echo $label;
	194	+ echo '</option>';
	195	+ }
	196	+ echo '</select>';
	197	+ echo '</td>';
	198	+ echo '<td class="viz-section-table-column">';
	199	+ echo '<select name="fontSize" class="control-select">';
	200	+ echo '<option></option>';
	201	+ for ( $i = 7; $i <= 20; $i++ ) {
	202	+ echo '<option value="', $i, '"', selected( $i, $this->fontSize, false ), '>', $i, '</option>';
	203	+ }
	204	+ echo '</select>';
	205	+ echo '</td>';
	206	+ echo '</tr>';
	207	+ echo '</table>';
	208	+
	209	+ echo '<p class="viz-section-description">';
	210	+ esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
	211	+ echo '</p>';
	212	+ echo '</div>';
	213	+ self::_renderSectionEnd();
	214	+
	215	+ self::_renderSectionStart( esc_html__( 'Legend', 'visualizer' ), false );
	216	+ self::_renderSelectItem(
	217	+ esc_html__( 'Position', 'visualizer' ),
	218	+ 'legend[position]',
	219	+ isset( $this->legend['position'] ) ? $this->legend['position'] : '',
	220	+ $this->_legendPositions,
	221	+ esc_html__( 'Sets the legend position relative to the chart.', 'visualizer' )
	222	+ );
	223	+
	224	+ self::_renderSelectItem(
	225	+ esc_html__( 'Alignment', 'visualizer' ),
	226	+ 'legend[alignment]',
	227	+ isset( $this->legend['alignment'] ) ? $this->legend['alignment'] : '',
	228	+ $this->_alignments,
	229	+ esc_html__( 'Determines the alignment of the legend.', 'visualizer' )
	230	+ );
	231	+
	232	+ self::_renderColorPickerItem(
	233	+ esc_html__( 'Font Color', 'visualizer' ),
	234	+ 'legend[textStyle][color]',
	235	+ isset( $this->legend['textStyle']['color'] ) ? $this->legend['textStyle']['color'] : null,
	236	+ '#000'
	237	+ );
	238	+ self::_renderSectionEnd();
	239	+
	240	+ self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
	241	+ $this->_renderTooltipSettigns();
	242	+ self::_renderSectionEnd();
	243	+
	244	+ $this->_renderAnimationSettings();
	245	+ self::_renderSectionStart( esc_html__( 'License & Creator', 'visualizer' ), false );
	246	+ self::_renderTextItem(
	247	+ esc_html__( 'License', 'visualizer' ),
	248	+ 'license',
	249	+ $this->license,
	250	+ ''
	251	+ );
	252	+ self::_renderTextItem(
	253	+ esc_html__( 'Creator', 'visualizer' ),
	254	+ 'creator',
	255	+ $this->creator,
	256	+ ''
	257	+ );
	258	+ self::_renderSectionEnd();
	259	+
	260	+ self::_renderChartImageSettings();
	261	+
	262	+ do_action( 'visualizer_chart_settings', get_class( $this ), $this->_data, 'general', array( 'generic' => true ) );
	263	+
	264	+ self::_renderGroupEnd();
	265	+ }
	266	+
	267	+ /**
	268	+ * Renders animation settings section.
	269	+ *
	270	+ * @access protected
	271	+ */
	272	+ protected function _renderAnimationSettings() {
	273	+ if ( ! $this->_supportsAnimation ) {
	274	+ return;
	275	+ }
	276	+
	277	+ self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
	278	+
	279	+ self::_renderCheckboxItem(
	280	+ esc_html__( 'Animate on startup', 'visualizer' ),
	281	+ 'animation[startup]',
	282	+ isset( $this->animation['startup'] ) ? $this->animation['startup'] : 0,
	283	+ true,
	284	+ esc_html__( 'Determines if the chart will animate on the initial draw.', 'visualizer' )
	285	+ );
	286	+
	287	+ self::_renderTextItem(
	288	+ esc_html__( 'Duration', 'visualizer' ),
	289	+ 'animation[duration]',
	290	+ isset( $this->animation['duration'] ) ? $this->animation['duration'] : 0,
	291	+ esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
	292	+ 0,
	293	+ 'number'
	294	+ );
	295	+
	296	+ self::_renderSelectItem(
	297	+ esc_html__( 'Easing', 'visualizer' ),
	298	+ 'animation[easing]',
	299	+ isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
	300	+ array(
	301	+ 'linear' => esc_html__( 'Constant speed', 'visualizer' ),
	302	+ 'in' => esc_html__( 'Start slow and speed up', 'visualizer' ),
	303	+ 'out' => esc_html__( 'Start fast and slow down', 'visualizer' ),
	304	+ 'inAndOut' => esc_html__( 'Start slow, speed up, then slow down', 'visualizer' ),
	305	+ ),
	306	+ esc_html__( 'The easing function applied to the animation.', 'visualizer' )
	307	+ );
	308	+
	309	+ self::_renderSectionEnd();
	310	+ }
	311	+
	312	+ /**
	313	+ * Renders tooltip settings section.
	314	+ *
	315	+ * @since 1.4.0
	316	+ *
	317	+ * @access protected
	318	+ */
	319	+ protected function _renderTooltipSettigns() {
	320	+ self::_renderSelectItem(
	321	+ esc_html__( 'Trigger', 'visualizer' ),
	322	+ 'tooltip[trigger]',
	323	+ isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
	324	+ array(
	325	+ '' => esc_html__( 'Default', 'visualizer' ),
	326	+ 'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
	327	+ 'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element.', 'visualizer' ),
	328	+ 'none' => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
	329	+ ),
	330	+ esc_html__( 'Controls when the tooltip appears.', 'visualizer' )
	331	+ );
	332	+
	333	+ self::_renderSelectItem(
	334	+ esc_html__( 'Show Color Code', 'visualizer' ),
	335	+ 'tooltip[showColorCode]',
	336	+ isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
	337	+ $this->_yesno,
	338	+ esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', 'visualizer' )
	339	+ );
	340	+ }
	341	+
	342	+ /**
	343	+ * Renders chart view settings group.
	344	+ *
	345	+ * @since 1.0.0
	346	+ *
	347	+ * @access protected
	348	+ */
	349	+ protected function _renderViewSettings() {
	350	+ self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
	351	+ self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
	352	+ 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' ) );
	353	+
	354	+ echo '<div class="viz-section-item">';
	355	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	356	+ echo '<b>', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '</b>';
	357	+
	358	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	359	+ echo '<tr>';
	360	+ echo '<td class="viz-section-table-column">';
	361	+ echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
	362	+ echo '</td>';
	363	+ echo '<td class="viz-section-table-column">';
	364	+ echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
	365	+ echo '</td>';
	366	+ echo '</tr>';
	367	+ echo '</table>';
	368	+
	369	+ echo '<p class="viz-section-description">';
	370	+ esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
	371	+ echo '</p>';
	372	+ echo '</div>';
	373	+
	374	+ echo '<div class="viz-section-delimiter"></div>';
	375	+
	376	+ self::_renderSectionDescription( esc_html__( 'Set the chart\'s background color, border width, and border color.', 'visualizer' ) );
	377	+
	378	+ self::_renderTextItem(
	379	+ esc_html__( 'Stroke Width', 'visualizer' ),
	380	+ 'backgroundColor[strokeWidth]',
	381	+ isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
	382	+ esc_html__( 'The chart border width in pixels.', 'visualizer' ),
	383	+ '0'
	384	+ );
	385	+
	386	+ self::_renderColorPickerItem(
	387	+ esc_html__( 'Stroke Color', 'visualizer' ),
	388	+ 'backgroundColor[stroke]',
	389	+ ! empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
	390	+ '#666'
	391	+ );
	392	+
	393	+ $background_color = ! empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
	394	+ self::_renderColorPickerItem(
	395	+ esc_html__( 'Background Color', 'visualizer' ),
	396	+ 'backgroundColor[fill]',
	397	+ $background_color,
	398	+ '#fff'
	399	+ );
	400	+
	401	+ echo '<div class="viz-section-item">';
	402	+ echo '<label>';
	403	+ echo '<input type="checkbox" class="control-checkbox" name="backgroundColor[fill]" value="transparent"', checked( $background_color, 'transparent', false ), '> ';
	404	+ esc_html_e( 'Transparent background', 'visualizer' );
	405	+ echo '</label>';
	406	+ echo '</div>';
	407	+ self::_renderSectionEnd();
	408	+
	409	+ self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
	410	+ 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' ) );
	411	+
	412	+ echo '<div class="viz-section-item">';
	413	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	414	+ echo '<b>', esc_html__( 'Left And Top Margins', 'visualizer' ), '</b>';
	415	+
	416	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	417	+ echo '<tr>';
	418	+ echo '<td class="viz-section-table-column">';
	419	+ $chartarea_left = isset( $this->chartArea['left'] ) ? $this->chartArea['left'] : '';
	420	+ echo '<input type="text" name="chartArea[left]" class="control-text" value="', $chartarea_left || '0' === $chartarea_left ? esc_attr( $chartarea_left ) : '', '" placeholder="20%">';
	421	+ echo '</td>';
	422	+ echo '<td class="viz-section-table-column">';
	423	+ $chartarea_top = isset( $this->chartArea['top'] ) ? $this->chartArea['top'] : '';
	424	+ echo '<input type="text" name="chartArea[top]" class="control-text" value="', $chartarea_top || '0' === $chartarea_top ? esc_attr( $chartarea_top ) : '', '" placeholder="20%">';
	425	+ echo '</td>';
	426	+ echo '</tr>';
	427	+ echo '</table>';
	428	+
	429	+ echo '<p class="viz-section-description">';
	430	+ esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
	431	+ echo '</p>';
	432	+ echo '</div>';
	433	+
	434	+ echo '<div class="viz-section-item">';
	435	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	436	+ echo '<b>', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '</b>';
	437	+
	438	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	439	+ echo '<tr>';
	440	+ echo '<td class="viz-section-table-column">';
	441	+ echo '<input type="text" name="chartArea[width]" class="control-text" value="', ! empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
	442	+ echo '</td>';
	443	+ echo '<td class="viz-section-table-column">';
	444	+ echo '<input type="text" name="chartArea[height]" class="control-text" value="', ! empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
	445	+ echo '</td>';
	446	+ echo '</tr>';
	447	+ echo '</table>';
	448	+
	449	+ echo '<p class="viz-section-description">';
	450	+ esc_html_e( 'Determines the width and height of the chart area.', 'visualizer' );
	451	+ echo '</p>';
	452	+ echo '</div>';
	453	+ self::_renderSectionEnd();
	454	+ self::_renderGroupEnd();
	455	+ }
	456	+
	457	+ /**
	458	+ * Renders advanced settings and hidden inputs for programmatically-set keys
	459	+ * (e.g. the global-preset colors palette) that have no visible sidebar control.
	460	+ *
	461	+ * @access protected
	462	+ */
	463	+ protected function _renderAdvancedSettings(): void {
	464	+ parent::_renderAdvancedSettings();
	465	+
	466	+ // @phpstan-ignore-next-line (property accessed via magic __get from _data array)
	467	+ $colors = $this->colors;
	468	+ if ( ! empty( $colors ) && is_array( $colors ) ) {
	469	+ foreach ( $colors as $color ) {
	470	+ echo '<input type="hidden" name="colors[]" value="', esc_attr( $color ), '">';
	471	+ }
	472	+ }
	473	+ }
87	474	}