From 80aaf942cf8836e101ad8821bea2922c1593a7b5 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 (re #57)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../edit-visualization-dialog.css             |  5 +++++
 .../edit-visualization-dialog.html            | 10 ++++++++-
 .../edit-visualization-dialog.js              | 21 +++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 client/app/visualizations/edit-visualization-dialog.css

diff --git a/client/app/visualizations/edit-visualization-dialog.css b/client/app/visualizations/edit-visualization-dialog.css
new file mode 100644
index 0000000000..3e84b755b2
--- /dev/null
+++ b/client/app/visualizations/edit-visualization-dialog.css
@@ -0,0 +1,5 @@
+/* Edit Visualization Dialog specific CSS */
+
+.slight-padding {
+	padding: 5px;
+}
\ No newline at end of file
diff --git a/client/app/visualizations/edit-visualization-dialog.html b/client/app/visualizations/edit-visualization-dialog.html
index 28791ee2ca..4d9b531b5c 100644
--- a/client/app/visualizations/edit-visualization-dialog.html
+++ b/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>
diff --git a/client/app/visualizations/edit-visualization-dialog.js b/client/app/visualizations/edit-visualization-dialog.js
index c3d61b6b03..1d695de21d 100644
--- a/client/app/visualizations/edit-visualization-dialog.js
+++ b/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 = () => ({
       type: Visualization.defaultVisualization.type,
@@ -46,6 +49,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 });