manual configuration example specific to the library

Author: contactashish13

classes/Visualizer/Render/Sidebar.php

@@ -167,6 +167,21 @@ protected function _renderManualConfigDescription() {
 			self::_renderSectionDescription( '<span class="viz-gvlink">' . sprintf( __( 'Configure the graph by providing configuration variables right from the %1$sGoogle Visualization API%2$s. You can refer to to some examples %3$shere%4$s.', 'visualizer' ), '<a href="https://developers.google.com/chart/interactive/docs/gallery/?#configuration-options" target="_blank">', '</a>', '<a href="https://docs.themeisle.com/article/728-manual-configuration" target="_blank">', '</a>' ) . '</span>' );
 	}
 
+	/**
+	 * Add the correct example for the manual configuration box.
+	 */
+	protected function _renderManualConfigExample() {
+		return '{
+			"vAxis": {
+				"ticks": [5, 10, 15, 20],
+				"titleTextStyle": {
+					"color": "red"
+				},
+				"textPosition": "in"
+			}
+		}';
+	}
+
 	/**
 	 * Renders chart advanced settings group.
 	 *
@@ -183,24 +198,13 @@ protected function _renderAdvancedSettings() {
 
 		self::_renderGroupStart( esc_html__( 'Manual Configuration', 'visualizer' ) );
 			$this->_renderManualConfigDescription();
-			$example    = '
-{
-	"vAxis": {
-		"ticks": [5, 10, 15, 20],
-		"titleTextStyle": {
-			"color": "red"
-		},
-		"textPosition": "in"
-	}
-}';
-
 			self::_renderTextAreaItem(
 				esc_html__( 'Configuration', 'visualizer' ),
 				'manual',
 				$this->manual,
 				sprintf(
 					esc_html__( 'One per line in valid JSON (key:value) format e.g. %s', 'visualizer' ),
-					'<br><code>' . $example . '</code>'
+					'<br><code>' . $this->_renderManualConfigExample() . '</code>'
 				),
 				'',
 				array( 'rows' => 5 )

classes/Visualizer/Render/Sidebar/ChartJS.php

@@ -347,6 +347,16 @@ protected function _renderManualConfigDescription() {
 			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>' );
 	}
 
+	/**
+	 * Add the correct example for the manual configuration box.
+	 */
+	protected function _renderManualConfigExample() {
+		return '{
+			"cutoutPercentage": 5,
+			"rotation": 60
+		}';
+	}
+
 	/**
 	 * Renders chart view settings group.
 	 *