From 41d528c3f8b18ed15a740c24694ce540c6791563 Mon Sep 17 00:00:00 2001
From: Alison <github@bankofknowledge.net>
Date: Thu, 22 Jun 2017 10:02:11 -0500
Subject: [PATCH] give warning/error msg on inaccurate graph config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#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. :(
---
 .../edit-visualization-dialog.html             | 10 +++++++++-
 .../edit-visualization-dialog.js               | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/app/visualizations/edit-visualization-dialog.html b/client/app/visualizations/edit-visualization-dialog.html
index ac2a32a405..088008412f 100644
--- a/client/app/visualizations/edit-visualization-dialog.html
+++ b/client/app/visualizations/edit-visualization-dialog.html
@@ -33,10 +33,18 @@ <h4 class="modal-title">Visualization Editor</h4>
       <div class="col-md-7" style="border: 1px solid #eee;">
         <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult"></visualization-renderer>
       </div>
+      <div class="col-md-7">  
+        <div class="bg-warning" ng-if="$ctrl.visualization.options.series.stacking == null && $ctrl.has3plusColumnsFunction()" style="padding:2%;" 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" style="padding:2%;"></div> 
+        </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-default" ng-click="$ctrl.closeDialog()">Close</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>
diff --git a/client/app/visualizations/edit-visualization-dialog.js b/client/app/visualizations/edit-visualization-dialog.js
index c021be54ca..969e5da044 100644
--- a/client/app/visualizations/edit-visualization-dialog.js
+++ b/client/app/visualizations/edit-visualization-dialog.js
@@ -19,6 +19,9 @@ const EditVisualizationDialog = {
     this.visualization = copy(this.originalVisualization);
     this.visTypes = Visualization.visualizationTypes;
 
+    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 = () =>
       ({
         type: Visualization.defaultVisualization.type,
@@ -45,6 +48,21 @@ const EditVisualizationDialog = {
       }
     };
 
+    this.has3plusColumnsFunction = () => {
+      let has3plusColumns = false;
+      if ((JSON.stringify(this.visualization.options.columnMapping).match(/,/g) || []).length > 1) {
+        has3plusColumns = true;
+      }
+      return has3plusColumns;
+    };
+
+    this.disableSubmit = () => {
+      if (this.has3plusColumnsFunction() && 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 });