give warning/error msg on inaccurate graph config (re getredash#57)

I tried to make
`JSON.stringify(this.visualization.options.columnMapping)` a variable
to avoid repeating it, but if I make it a `let` the linter throws an
error and if I make it a `const` then it doesn’t change with the UI and
the logic doesn’t work. :(

updated based on PR comments

client/app/visualizations/edit-visualization-dialog.css

@@ -0,0 +1,5 @@
+/* Edit Visualization Dialog specific CSS */
+
+.slight-padding {
+	padding: 5px;
+}

client/app/visualizations/edit-visualization-dialog.html

@@ -34,10 +34,18 @@ <h4 class="modal-title">Visualization Editor</h4>
       <div class="col-md-7 p-0 visualization-editor__right">
         <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult"></visualization-renderer>
       </div>
+      <div class="col-md-7">  
+        <div class="bg-warning slight-padding" ng-if="$ctrl.visualization.options.series.stacking == null && $ctrl.has3plusColumnsFunction()" ng-bind-html="$ctrl.warning_three_column_stacking"> 
+        </div>
+        <div ng-repeat="value in $ctrl.visualization.options.columnMapping">
+          <div ng-if="value == 'unused' && $ctrl.has3plusColumnsFunction()" ng-bind-html="$ctrl.warning_three_column_groupby" class="bg-danger slight-padding"></div> 
+        </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-default" ng-click="$ctrl.closeDialog()">Cancel</button>
-    <button type="button" class="btn btn-primary" ng-click="$ctrl.submit()">Save</button>
+    <button type="button" class="btn btn-primary" ng-click="$ctrl.submit()" ng-disabled="$ctrl.disableSubmit()">Save</button>
   </div>
 </div>

client/app/visualizations/edit-visualization-dialog.js

@@ -1,6 +1,7 @@
 import { map } from 'lodash';
 import { copy } from 'angular';
 import template from './edit-visualization-dialog.html';
+import './edit-visualization-dialog.css';
 
 const EditVisualizationDialog = {
   template,
@@ -21,6 +22,8 @@ const EditVisualizationDialog = {
 
     // Don't allow to change type after creating visualization
     this.canChangeType = !(this.visualization && this.visualization.id);
+    this.warning_three_column_groupby = '<b>You have more than 2 columns in your result set.</b> To ensure the chart is accurate, please do one of the following: <ul> <li>Change the SQL query to give 2 result columns. You can CONCAT() columns together if you wish.</li> <LI>Select column(s) to group by.</LI> </ul>';
+    this.warning_three_column_stacking = '<b>You have more than 2 columns in your result set.</b> You may wish to make the Stacking option equal to `Enabled` or `Percent`.';
 
     this.newVisualization = () =>
       ({
@@ -48,6 +51,24 @@ const EditVisualizationDialog = {
       }
     };
 
+    this.has3plusColumnsFunction = () => {
+      let has3plusColumns = false;
+      if ((JSON.stringify(this.visualization.options.columnMapping).match(/,/g) || []).length > 2) {
+        has3plusColumns = true;
+      }
+      return has3plusColumns;
+    };
+
+    this.disableSubmit = () => {
+      if (this.visualization.options.globalSeriesType === 'column'
+          && this.has3plusColumnsFunction()
+          && !JSON.stringify(this.visualization.options.columnMapping).includes('"":')
+          && JSON.stringify(this.visualization.options.columnMapping).includes('unused')) {
+        return true;
+      }
+      return false;
+    };
+
     this.submit = () => {
       if (this.visualization.id) {
         Events.record('update', 'visualization', this.visualization.id, { type: this.visualization.type });