change pie chart colors (re getredash#240)

Incorporates: fix pie chart multiple colors changed (re getredash#242)

Author: alison985

client/app/visualizations/chart/chart-editor.html

@@ -9,9 +9,13 @@
     <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-if="currentTab == 'general'" class="m-t-10 m-b-10">
     <div class="form-group">
@@ -267,4 +271,36 @@ <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>
 </div>
+

client/app/visualizations/chart/index.js

@@ -123,19 +123,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) {
@@ -167,6 +196,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) => {
@@ -176,7 +207,6 @@ function ChartEditor(ColorPalette, clientConfig) {
         });
       });
 
-
       scope.$watchCollection('form.yAxisColumns', (value, old) => {
         each(old, unsetColumn);
         each(value, partial(setColumnRole, 'y'));

client/app/visualizations/chart/plotly/utils.js

@@ -183,9 +183,17 @@ function preparePieData(seriesList, options) {
   return map(seriesList, (serie, index) => {
     const xPosition = (index % cellsInRow) * cellWidth;
     const yPosition = Math.floor(index / cellsInRow) * cellHeight;
+    const labels = map(serie.data, (row, rowIdx) => {
+      const rowX = hasX ? row.x : `Slice ${index}`;
+      const rowOpts = options.seriesOptions[rowX];
+      if (rowOpts) {
+        colorPalette[rowIdx] = rowOpts.color;
+      }
+      return rowX;
+    });
     return {
       values: pluck(serie.data, 'y'),
-      labels: map(serie.data, row => (hasX ? row.x : `Slice ${index}`)),
+      labels: labels,
       type: 'pie',
       hole: 0.4,
       marker: { colors: ColorPaletteArray },