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