change pie chart colors (re getredash#240)

Incorporates: fix pie chart multiple colors changed (re getredash#242)
washort · Jul 30, 2018 · db948e5 · db948e5
1 parent dc228cc
commit db948e5
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 18 deletions.
diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
@@ -9,11 +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 == 'dataLabels'}" ng-if="options.globalSeriesType != 'custom'">
       <a ng-click="changeTab('dataLabels')">Data Labels</a>
+    <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">
@@ -329,4 +332,35 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
         placeholder="(auto)">
     </div>
   </div>
-</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>
+
diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
@@ -156,19 +156,48 @@ function ChartEditor(ColorPalette, clientConfig) {
       }
 
       function refreshSeries() {
-        const seriesNames = map(scope.queryResult.getChartData(scope.options.columnMapping), i => i.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 = map(scope.queryResult.getChartData(scope.options.columnMapping), i => i.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) {
@@ -200,6 +229,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) => {
@@ -209,7 +240,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/utils.js b/client/app/visualizations/chart/plotly/utils.js
@@ -252,10 +252,18 @@ function preparePieData(seriesList, options) {
 
     return {
       values: map(serie.data, i => i.y),
-      labels: map(serie.data, row => (hasX ? normalizeValue(row.x) : `Slice ${index}`)),
+      labels: map(serie.data, (row, rowIdx) => {
+
+        const rowX = hasX ? normalizeValue(row.x) : `Slice ${index}`;
+        const rowOpts = options.seriesOptions[rowX];
+        if (rowOpts) {
+          colorPalette[rowIdx] = rowOpts.color;
+        }
+        return rowX;
+      }),
       type: 'pie',
       hole: 0.4,
-      marker: { colors: ColorPaletteArray },
+      marker: { colors: colorPalette },
       hoverinfo,
       text: [],
       textinfo: options.showDataLabels ? 'percent' : 'none',