[Feature] Add direction option in Pie Chart (getredash#3762)

pushpay · Nov 14, 2019 · 9c8698e · 9c8698e
1 parent 0f25814
commit 9c8698e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
@@ -122,6 +122,17 @@
       </ui-select>
     </div>
 
+    <div class="form-group" ng-if="$ctrl.options.globalSeriesType === 'pie'">
+      <label class="control-label">Direction</label>
+
+      <ui-select ng-model="$ctrl.options.direction.type">
+        <ui-select-match placeholder="Choose Direction...">{{$select.selected.label}}</ui-select-match>
+        <ui-select-choices repeat="direction.value as direction in $ctrl.directions">
+          <div ng-bind-html="direction.label | highlight: $select.search"></div>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+
     <div class="checkbox" ng-if="['custom', 'heatmap'].indexOf($ctrl.options.globalSeriesType) == -1">
       <label>
         <input type="checkbox" ng-model="$ctrl.options.legend.enabled">

diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
@@ -20,6 +20,7 @@ const DEFAULT_OPTIONS = {
   seriesOptions: {},
   valuesOptions: {},
   columnMapping: {},
+  direction: { type: 'counterclockwise' },
 
   // showDataLabels: false, // depends on chart type
   numberFormat: '0,0[.]00000',
@@ -126,6 +127,11 @@ const ChartEditor = {
       this.chartTypes.custom = { name: 'Custom', icon: 'code' };
     }
 
+    this.directions = [
+      { label: 'Counterclockwise', value: 'counterclockwise' },
+      { label: 'Clockwise', value: 'clockwise' },
+    ];
+
     this.xAxisScales = [
       { label: 'Auto Detect', value: '-' },
       { label: 'Datetime', value: 'datetime' },

diff --git a/client/app/visualizations/chart/plotly/utils.js b/client/app/visualizations/chart/plotly/utils.js
@@ -262,6 +262,7 @@ function preparePieData(seriesList, options) {
       textposition: 'inside',
       textfont: { color: '#ffffff' },
       name: serie.name,
+      direction: options.direction.type,
       domain: {
         x: [xPosition, xPosition + cellWidth - xPadding],
         y: [yPosition, yPosition + cellHeight - yPadding],