← All changes | classes/Visualizer/Render/Sidebar/Google.php +350 -6 3.1.3 → 3.4.10 View file →

		@@ -31,13 +31,59 @@
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	+ '' => '',
	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	+ );
	85	+
40	86	}
41	87
42	88	/**
43	89	* Registers additional hooks.
		@@ -53,15 +99,14 @@
53	99	/**
54	100	* Loads the assets.
55	101	*/
56	102	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 );
	103	+ wp_register_script( 'google-jsapi', '//www.gstatic.com/charts/loader.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',
64	109	),
65	110	Visualizer_Plugin::VERSION,
66	111	true
67	112	);
		@@ -76,12 +121,311 @@
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	+ ),
	152	+ sprintf( 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' ), '<a href="https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available" target="_blank">', '</a>', '<a href="https://docs.themeisle.com/article/1160-roles-for-series-visualizer" target="_blank">', '</a>' )
	153	+ );
	154	+ }
86	155
	156	+ /**
	157	+ * Renders chart general settings group.
	158	+ *
	159	+ * @since 1.0.0
	160	+ *
	161	+ * @access protected
	162	+ */
	163	+ protected function _renderGeneralSettings() {
	164	+ self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
	165	+ self::_renderSectionStart();
	166	+ self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', 'visualizer' ) );
	167	+ self::_renderSectionEnd();
	168	+
	169	+ self::_renderSectionStart( esc_html__( 'Title', 'visualizer' ), false );
	170	+ $this->_renderChartTitleSettings();
	171	+ self::_renderSectionEnd();
	172	+
	173	+ self::_renderSectionStart( esc_html__( 'Font Styles', 'visualizer' ), false );
	174	+ echo '<div class="viz-section-item">';
	175	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	176	+ echo '<b>', esc_html__( 'Family And Size', 'visualizer' ), '</b>';
	177	+
	178	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	179	+ echo '<tr>';
	180	+ echo '<td class="viz-section-table-column">';
	181	+ echo '<select name="fontName" class="control-select">';
	182	+ echo '<option></option>';
	183	+ foreach ( self::$_fontFamilies as $font => $label ) {
	184	+ echo '<option value="', $font, '"', selected( $font, $this->fontName, false ), '>';
	185	+ echo $label;
	186	+ echo '</option>';
	187	+ }
	188	+ echo '</select>';
	189	+ echo '</td>';
	190	+ echo '<td class="viz-section-table-column">';
	191	+ echo '<select name="fontSize" class="control-select">';
	192	+ echo '<option></option>';
	193	+ for ( $i = 7; $i <= 20; $i++ ) {
	194	+ echo '<option value="', $i, '"', selected( $i, $this->fontSize, false ), '>', $i, '</option>';
	195	+ }
	196	+ echo '</select>';
	197	+ echo '</td>';
	198	+ echo '</tr>';
	199	+ echo '</table>';
	200	+
	201	+ echo '<p class="viz-section-description">';
	202	+ esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
	203	+ echo '</p>';
	204	+ echo '</div>';
	205	+ self::_renderSectionEnd();
	206	+
	207	+ self::_renderSectionStart( esc_html__( 'Legend', 'visualizer' ), false );
	208	+ self::_renderSelectItem(
	209	+ esc_html__( 'Position', 'visualizer' ),
	210	+ 'legend[position]',
	211	+ $this->legend['position'],
	212	+ $this->_legendPositions,
	213	+ esc_html__( 'Determines where to place the legend, compared to the chart area.', 'visualizer' )
	214	+ );
	215	+
	216	+ self::_renderSelectItem(
	217	+ esc_html__( 'Alignment', 'visualizer' ),
	218	+ 'legend[alignment]',
	219	+ $this->legend['alignment'],
	220	+ $this->_alignments,
	221	+ esc_html__( 'Determines the alignment of the legend.', 'visualizer' )
	222	+ );
	223	+
	224	+ self::_renderColorPickerItem(
	225	+ esc_html__( 'Font Color', 'visualizer' ),
	226	+ 'legend[textStyle][color]',
	227	+ isset( $this->legend['textStyle']['color'] ) ? $this->legend['textStyle']['color'] : null,
	228	+ '#000'
	229	+ );
	230	+ self::_renderSectionEnd();
	231	+
	232	+ self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
	233	+ $this->_renderTooltipSettigns();
	234	+ self::_renderSectionEnd();
	235	+
	236	+ $this->_renderAnimationSettings();
	237	+
	238	+ do_action( 'visualizer_chart_settings', get_class( $this ), $this->_data, 'general', array( 'generic' => true ) );
	239	+
	240	+ self::_renderGroupEnd();
	241	+ }
	242	+
	243	+ /**
	244	+ * Renders animation settings section.
	245	+ *
	246	+ * @access protected
	247	+ */
	248	+ protected function _renderAnimationSettings() {
	249	+ if ( ! $this->_supportsAnimation ) {
	250	+ return;
	251	+ }
	252	+
	253	+ self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
	254	+
	255	+ self::_renderCheckboxItem(
	256	+ esc_html__( 'Animate on startup', 'visualizer' ),
	257	+ 'animation[startup]',
	258	+ isset( $this->animation['startup'] ) ? $this->animation['startup'] : 0,
	259	+ true,
	260	+ esc_html__( 'Determines if the chart will animate on the initial draw.', 'visualizer' )
	261	+ );
	262	+
	263	+ self::_renderTextItem(
	264	+ esc_html__( 'Duration', 'visualizer' ),
	265	+ 'animation[duration]',
	266	+ isset( $this->animation['duration'] ) ? $this->animation['duration'] : 0,
	267	+ esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
	268	+ 0,
	269	+ 'number'
	270	+ );
	271	+
	272	+ self::_renderSelectItem(
	273	+ esc_html__( 'Easing', 'visualizer' ),
	274	+ 'animation[easing]',
	275	+ isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
	276	+ array(
	277	+ 'linear' => esc_html__( 'Constant speed', 'visualizer' ),
	278	+ 'in' => esc_html__( 'Start slow and speed up', 'visualizer' ),
	279	+ 'out' => esc_html__( 'Start fast and slow down', 'visualizer' ),
	280	+ 'inAndOut' => esc_html__( 'Start slow, speed up, then slow down', 'visualizer' ),
	281	+ ),
	282	+ esc_html__( 'The easing function applied to the animation.', 'visualizer' )
	283	+ );
	284	+
	285	+ self::_renderSectionEnd();
	286	+
	287	+ }
	288	+
	289	+ /**
	290	+ * Renders tooltip settings section.
	291	+ *
	292	+ * @since 1.4.0
	293	+ *
	294	+ * @access protected
	295	+ */
	296	+ protected function _renderTooltipSettigns() {
	297	+ self::_renderSelectItem(
	298	+ esc_html__( 'Trigger', 'visualizer' ),
	299	+ 'tooltip[trigger]',
	300	+ isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
	301	+ array(
	302	+ '' => '',
	303	+ 'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
	304	+ 'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', 'visualizer' ),
	305	+ 'none' => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
	306	+ ),
	307	+ esc_html__( 'Determines the user interaction that causes the tooltip to be displayed.', 'visualizer' )
	308	+ );
	309	+
	310	+ self::_renderSelectItem(
	311	+ esc_html__( 'Show Color Code', 'visualizer' ),
	312	+ 'tooltip[showColorCode]',
	313	+ isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
	314	+ $this->_yesno,
	315	+ esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', 'visualizer' )
	316	+ );
	317	+ }
	318	+
	319	+ /**
	320	+ * Renders chart view settings group.
	321	+ *
	322	+ * @since 1.0.0
	323	+ *
	324	+ * @access protected
	325	+ */
	326	+ protected function _renderViewSettings() {
	327	+ self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
	328	+ self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
	329	+ 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' ) );
	330	+
	331	+ echo '<div class="viz-section-item">';
	332	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	333	+ echo '<b>', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '</b>';
	334	+
	335	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	336	+ echo '<tr>';
	337	+ echo '<td class="viz-section-table-column">';
	338	+ echo '<input type="text" name="width" class="control-text" value="', esc_attr( $this->width ), '" placeholder="100%">';
	339	+ echo '</td>';
	340	+ echo '<td class="viz-section-table-column">';
	341	+ echo '<input type="text" name="height" class="control-text" value="', esc_attr( $this->height ), '" placeholder="400">';
	342	+ echo '</td>';
	343	+ echo '</tr>';
	344	+ echo '</table>';
	345	+
	346	+ echo '<p class="viz-section-description">';
	347	+ esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
	348	+ echo '</p>';
	349	+ echo '</div>';
	350	+
	351	+ echo '<div class="viz-section-delimiter"></div>';
	352	+
	353	+ self::_renderSectionDescription( esc_html__( 'Configure the background color for the main area of the chart and the chart border width and color.', 'visualizer' ) );
	354	+
	355	+ self::_renderTextItem(
	356	+ esc_html__( 'Stroke Width', 'visualizer' ),
	357	+ 'backgroundColor[strokeWidth]',
	358	+ isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
	359	+ esc_html__( 'The chart border width in pixels.', 'visualizer' ),
	360	+ '0'
	361	+ );
	362	+
	363	+ self::_renderColorPickerItem(
	364	+ esc_html__( 'Stroke Color', 'visualizer' ),
	365	+ 'backgroundColor[stroke]',
	366	+ ! empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
	367	+ '#666'
	368	+ );
	369	+
	370	+ $background_color = ! empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
	371	+ self::_renderColorPickerItem(
	372	+ esc_html__( 'Background Color', 'visualizer' ),
	373	+ 'backgroundColor[fill]',
	374	+ $background_color,
	375	+ '#fff'
	376	+ );
	377	+
	378	+ echo '<div class="viz-section-item">';
	379	+ echo '<label>';
	380	+ echo '<input type="checkbox" class="control-checkbox" name="backgroundColor[fill]" value="transparent"', checked( $background_color, 'transparent', false ), '> ';
	381	+ esc_html_e( 'Transparent background', 'visualizer' );
	382	+ echo '</label>';
	383	+ echo '</div>';
	384	+ self::_renderSectionEnd();
	385	+
	386	+ self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
	387	+ 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' ) );
	388	+
	389	+ echo '<div class="viz-section-item">';
	390	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	391	+ echo '<b>', esc_html__( 'Left And Top Margins', 'visualizer' ), '</b>';
	392	+
	393	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	394	+ echo '<tr>';
	395	+ echo '<td class="viz-section-table-column">';
	396	+ echo '<input type="text" name="chartArea[left]" class="control-text" value="', $this->chartArea['left'] || $this->chartArea['left'] === '0' ? esc_attr( $this->chartArea['left'] ) : '', '" placeholder="20%">';
	397	+ echo '</td>';
	398	+ echo '<td class="viz-section-table-column">';
	399	+ echo '<input type="text" name="chartArea[top]" class="control-text" value="', $this->chartArea['top'] || $this->chartArea['top'] === '0' ? esc_attr( $this->chartArea['top'] ) : '', '" placeholder="20%">';
	400	+ echo '</td>';
	401	+ echo '</tr>';
	402	+ echo '</table>';
	403	+
	404	+ echo '<p class="viz-section-description">';
	405	+ esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
	406	+ echo '</p>';
	407	+ echo '</div>';
	408	+
	409	+ echo '<div class="viz-section-item">';
	410	+ echo '<a class="more-info" href="javascript:;">[?]</a>';
	411	+ echo '<b>', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '</b>';
	412	+
	413	+ echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
	414	+ echo '<tr>';
	415	+ echo '<td class="viz-section-table-column">';
	416	+ echo '<input type="text" name="chartArea[width]" class="control-text" value="', ! empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
	417	+ echo '</td>';
	418	+ echo '<td class="viz-section-table-column">';
	419	+ echo '<input type="text" name="chartArea[height]" class="control-text" value="', ! empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
	420	+ echo '</td>';
	421	+ echo '</tr>';
	422	+ echo '</table>';
	423	+
	424	+ echo '<p class="viz-section-description">';
	425	+ esc_html_e( 'Determines the width and hight of the chart area.', 'visualizer' );
	426	+ echo '</p>';
	427	+ echo '</div>';
	428	+ self::_renderSectionEnd();
	429	+ self::_renderGroupEnd();
	430	+ }
87	431	}