From affdfa79f4b271ef36e97c3ca81cfb0bb337bf7f Mon Sep 17 00:00:00 2001
From: Alison <github@bankofknowledge.net>
Date: Fri, 18 Aug 2017 15:43:16 -0400
Subject: [PATCH] change pie chart colors (re #240)

Incorporates: fix pie chart multiple colors changed (re #242)
---
 .../visualizations/chart/chart-editor.html    | 66 ++++++++++++++-----
 client/app/visualizations/chart/index.js      | 58 ++++++++++++----
 client/app/visualizations/chart/plotly.js     |  6 +-
 3 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
index 50695a725e..13b37b4c74 100644
--- a/client/app/visualizations/chart/chart-editor.html
+++ b/client/app/visualizations/chart/chart-editor.html
@@ -9,9 +9,14 @@
     <li ng-class="{active: currentTab == 'yAxis'}" ng-if="options.globalSeriesType != 'custom'">
       <a ng-click="changeTab('yAxis')">Y Axis</a>
     </li>
-    <li ng-class="{active: currentTab == 'series'}" ng-if="options.globalSeriesType != 'custom'">
+    <li ng-class="{active: currentTab == 'series'}" 
+      ng-if="options.globalSeriesType != 'custom' && options.globalSeriesType != 'pie'">
       <a ng-click="changeTab('series')">Series</a>
     </li>
+    <li ng-class="{active: currentTab == 'colors'}"
+       ng-if="options.globalSeriesType == 'pie'">
+      <a ng-click="changeTab('colors')">Colors</a>
+    </li>
   </ul>
   <div ng-show="currentTab == 'general'">
     <div class="form-group">
@@ -32,7 +37,6 @@
       </div>
     </div>
 
-
     <div class="form-group" ng-class="{'has-error': chartEditor.xAxisColumn.$invalid}">
       <label class="control-label">X Column</label>
 
@@ -131,18 +135,18 @@
     </textarea>
   </div>
 
-  <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
-    <label>
-      <input type="checkbox" ng-model="options.enableConsoleLogs">
-      <i class="input-helper"></i> Show errors in the console
-    </label>
-  </div>
+    <div class="form-group" ng-if="options.globalSeriesType == 'custom'">
+      <label class="control-label">Custom code</label>
+      <textarea ng-model="options.customCode" class="form-control v-resizable" rows="10">
+      </textarea>
+    </div>
 
-  <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
-    <label>
-      <input type="checkbox" ng-model="options.autoRedraw">
-      <i class="input-helper"></i> Auto update graph
-    </label>
+    <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
+      <label>
+        <input type="checkbox" ng-model="options.enableConsoleLogs">
+        <i class="input-helper"></i> Show errors in the console
+      </label>
+    </div>
   </div>
 
   <div ng-show="currentTab == 'xAxis'">
@@ -209,7 +213,7 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
     </div>
   </div>
 
-  <div ng-show="currentTab=='series'">
+  <div ng-show="currentTab == 'series'">
     <table class="table table-condensed col-table">
       <thead>
       <th>zIndex</th>
@@ -222,7 +226,8 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
       <tbody ui-sortable ng-model="form.seriesList">
       <tr ng-repeat="name in form.seriesList">
         <td style="cursor: move;"><i class="fa fa-arrows-v"></i> <span
-          ng-bind="options.seriesOptions[name].zIndex + 1"></span></td>
+          ng-bind="options.seriesOptions[name].zIndex + 1"></span>
+        </td>
         <td>
           <input type="radio" ng-value="0" ng-model="options.seriesOptions[name].yAxis">
         </td>
@@ -262,3 +267,34 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
       </tbody>
     </table>
   </div>
+
+  <div ng-show="currentTab == 'colors'">
+    <table class="table table-condensed col-table">
+      <thead>
+      <th>zIndex</th>
+      <th>Label</th>
+      <th>Color</th>
+      </thead>
+      <tbody ui-sortable ng-model="form.colorsList">
+      <tr ng-repeat="name in form.colorsList track by name">
+        <td style="cursor: move;"><i class="fa fa-arrows-v"></i> <span
+          ng-bind="options.seriesOptions[name].zIndex + 1"></span>
+        </td>
+        <td style="padding: 3px; width: 300px;">
+          {{name}}
+        </td>
+        <td style="padding: 3px; width: 35px;">
+          <ui-select ng-model="options.seriesOptions[name].color">
+            <ui-select-match>
+              <color-box color="$select.selected.value"></color-box>
+            </ui-select-match>
+            <ui-select-choices repeat="color.value as (key, color) in colors">
+              <color-box color="color.value"></color-box>
+              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
+            </ui-select-choices>
+          </ui-select>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
index 45185f7991..d891c9647b 100644
--- a/client/app/visualizations/chart/index.js
+++ b/client/app/visualizations/chart/index.js
@@ -120,19 +120,48 @@ function ChartEditor(ColorPalette, clientConfig) {
       }
 
       function refreshSeries() {
-        const seriesNames = pluck(scope.queryResult.getChartData(scope.options.columnMapping), 'name');
-        const existing = keys(scope.options.seriesOptions);
-        each(difference(seriesNames, existing), (name) => {
-          scope.options.seriesOptions[name] = {
-            type: scope.options.globalSeriesType,
-            yAxis: 0,
-          };
-          scope.form.seriesList.push(name);
-        });
-        each(difference(existing, seriesNames), (name) => {
-          scope.form.seriesList = without(scope.form.seriesList, name);
-          delete scope.options.seriesOptions[name];
-        });
+        // for pie charts only get color list (x row) instead of series list (y column)
+        if (scope.options.globalSeriesType === 'pie') {
+          const seriesData = scope.queryResult.getData();
+          scope.form.colorsList = [];
+          const xColumnName = scope.form.xAxisColumn;
+          seriesData.forEach((rowOfData) => {
+            scope.form.colorsList.push(rowOfData[xColumnName]);
+          });
+
+          const colorNames = scope.form.colorsList;
+          let existing = [];
+          if (scope.options.colorOptions === undefined) {
+            existing = colorNames;
+          } else {
+            existing = keys(scope.options.colorOptions);
+          }
+          each(difference(colorNames, existing), (name) => {
+            scope.options.colorOptions[name] = {
+              type: scope.options.globalSeriesType,
+              yAxis: 0,
+            };
+            scope.form.colorsList.push(name);
+          });
+          each(difference(existing, colorNames), (name) => {
+            scope.form.colorsList = without(scope.form.colorsList, name);
+            delete scope.options.colorOptions[name];
+          });
+        } else {
+          const seriesNames = pluck(scope.queryResult.getChartData(scope.options.columnMapping), 'name');
+          const existing = keys(scope.options.seriesOptions);
+          each(difference(seriesNames, existing), (name) => {
+            scope.options.seriesOptions[name] = {
+              type: scope.options.globalSeriesType,
+              yAxis: 0,
+            };
+            scope.form.seriesList.push(name);
+          });
+          each(difference(existing, seriesNames), (name) => {
+            scope.form.seriesList = without(scope.form.seriesList, name);
+            delete scope.options.seriesOptions[name];
+          });
+        }
       }
 
       function setColumnRole(role, column) {
@@ -164,6 +193,8 @@ function ChartEditor(ColorPalette, clientConfig) {
         yAxisColumns: [],
         seriesList: sortBy(keys(scope.options.seriesOptions), name =>
           scope.options.seriesOptions[name].zIndex),
+        colorsList: sortBy(keys(scope.options.colorOptions), name =>
+          scope.options.colorOptions[name].zIndex),
       };
 
       scope.$watchCollection('form.seriesList', (value) => {
@@ -173,7 +204,6 @@ function ChartEditor(ColorPalette, clientConfig) {
         });
       });
 
-
       scope.$watchCollection('form.yAxisColumns', (value, old) => {
         each(old, unsetColumn);
         each(value, partial(setColumnRole, 'y'));
diff --git a/client/app/visualizations/chart/plotly.js b/client/app/visualizations/chart/plotly.js
index b1adc79e1b..1e7003d0c1 100644
--- a/client/app/visualizations/chart/plotly.js
+++ b/client/app/visualizations/chart/plotly.js
@@ -255,7 +255,7 @@ const PlotlyChart = () => ({
             labels: [],
             type: 'pie',
             hole: 0.4,
-            marker: { colors: ColorPaletteArray },
+            marker: { colors: ColorPaletteArray.slice() },
             text: series.name,
             textposition: 'inside',
             textfont: { color: '#f5f5f5' },
@@ -277,9 +277,11 @@ const PlotlyChart = () => ({
             });
           }
 
-          series.data.forEach((row) => {
+          each(series.data, (row, rowIdx) => {
             plotlySeries.values.push(row.y);
             plotlySeries.labels.push(hasX ? row.x : `Slice ${index}`);
+            const rowOpts = scope.options.seriesOptions[hasX ? row.x : `Slice ${index}`];
+            plotlySeries.marker.colors[rowIdx] = rowOpts ? rowOpts.color : getColor(rowIdx);
           });
 
           scope.data.push(plotlySeries);