Merge pull request #202 from contactashish13/helpscout-141153

advanced manual JSON configuration for overriding settings

Author: selul

classes/Visualizer/Render/Sidebar.php

@@ -154,6 +154,35 @@ protected function _renderAdvancedSettings() {
 
 			$this->_renderActionSettings();
 		self::_renderGroupEnd();
+
+		self::_renderGroupStart( esc_html__( 'Manual Configuration', 'visualizer' ) );
+			self::_renderSectionStart();
+				self::_renderSectionDescription( esc_html__( 'Configure the graph by providing values.', 'visualizer' ) );
+			self::_renderSectionEnd();
+
+			$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><pre>' . $example . '</pre>'
+				),
+				'',
+				array( 'rows' => 5 )
+			);
+		self::_renderGroupEnd();
+
 	}
 
 	/**
@@ -633,4 +662,22 @@ protected static function _renderCheckboxItem( $title, $name, $value, $default,
 		echo '</div>';
 	}
 
+	/**
+	 * Render a textarea item.
+	 */
+	protected static function _renderTextAreaItem( $title, $name, $value, $desc, $placeholder = '', $custom_attributes = array() ) {
+		$attributes     = '';
+		if ( $custom_attributes ) {
+			foreach ( $custom_attributes as $k => $v ) {
+				$attributes .= ' ' . $k . '="' . esc_attr( $v ) . '"';
+			}
+		}
+		echo '<div class="section-item">';
+			echo '<a class="more-info" href="javascript:;">[?]</a>';
+			echo '<b>', $title, '</b>';
+			echo '<textarea class="control-text" ', $attributes, ' name="', $name, '" placeholder="', $placeholder, '">', $value, '</textarea>';
+			echo '<p class="section-description">', $desc, '</p>';
+		echo '</div>';
+	}
+
 }

js/preview.js

@@ -1,4 +1,5 @@
 /* global visualizer */
+/* global console */
 (function($, v) {
 	var timeout;
 
@@ -20,12 +21,23 @@
 			}, 1000);
 		}
 
+        function validateJSON() {
+            $('#visualizer-error-manual').remove();
+            try{
+                var options = JSON.parse($(this).val());
+            }catch(error){
+                $('<div class="visualizer-error" id="visualizer-error-manual">Invalid JSON: ' + error + '</div>').insertAfter($(this));
+            }
+        }
+
 		$('.control-text').change(updateChart).keyup(updateChart);
 		$('.control-select, .control-checkbox').change(updateChart);
 		$('.color-picker-hex').wpColorPicker({
 			change: updateChart,
 			clear: updateChart
 		});
+		$('textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
+
 	});
 })(jQuery, visualizer);
 

js/render.js

@@ -1,5 +1,6 @@
 /* global google */
 /* global visualizer */
+/* global console */
 (function(v, g) {
 	var gv;
 
@@ -198,9 +199,23 @@
             formatter.format(table, 1);
         }
 
+        v.override(settings);
+
         render.draw(table, settings);
 	};
 
+    v.override = function(settings) {
+        if (settings.manual) {
+            try{
+                var options = JSON.parse(settings.manual);
+                jQuery.extend(settings, options);
+                delete settings.manual;
+            }catch(error){
+                console.error("Error while adding manual configuration override " + settings.manual);
+            }
+        }
+    };
+
 	v.render = function() {
 		for (var id in (v.charts || {})) {
 			v.renderChart(id);