Sort by value column by default

getredash · Nov 13, 2019 · cf43983 · cf43983
1 parent 41d36b7
commit cf43983
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 36 deletions.
diff --git a/client/app/visualizations/funnel/Editor/GeneralSettings.jsx b/client/app/visualizations/funnel/Editor/GeneralSettings.jsx
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Select from 'antd/lib/select';
 import Input from 'antd/lib/input';
-import Switch from 'antd/lib/switch';
+import Checkbox from 'antd/lib/checkbox';
 import * as Grid from 'antd/lib/grid';
 import { EditorPropTypes } from '@/visualizations';
 
@@ -84,40 +84,62 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         </Grid.Col>
       </Grid.Row>
 
-      <Grid.Row type="flex" align="middle" className="m-b-15">
-        <Grid.Col span={12}>
-          <label htmlFor="funnel-editor-sort-column-name">Sort Column</label>
-        </Grid.Col>
-        <Grid.Col span={12}>
-          <Select
-            id="funnel-editor-sort-column-name"
-            className="w-100"
-            data-test="Funnel.SortColumn"
-            allowClear
-            placeholder="Choose column..."
-            defaultValue={options.sortKeyCol.colName || undefined}
-            onChange={colName => onOptionsChange({ sortKeyCol: { colName: colName || null } })}
-          >
-            {map(columnNames, col => (
-              <Select.Option key={col} data-test={`Funnel.SortColumn.${col}`}>{col}</Select.Option>
-            ))}
-          </Select>
-        </Grid.Col>
-      </Grid.Row>
 
-      <Grid.Row type="flex" align="middle" className="m-b-15">
-        <Grid.Col span={12}>
-          <label htmlFor="funnel-editor-sort-reverse">Reverse Order</label>
-        </Grid.Col>
-        <Grid.Col span={12}>
-          <Switch
-            id="funnel-editor-sort-reverse"
-            data-test="Funnel.SortReverse"
-            defaultChecked={options.sortKeyCol.reverse}
-            onChange={reverse => onOptionsChange({ sortKeyCol: { reverse } })}
+      <div className="m-b-15">
+        <label htmlFor="funnel-editor-custom-sort">
+          <Checkbox
+            id="funnel-editor-custom-sort"
+            data-test="Funnel.CustomSort"
+            checked={!options.autoSort}
+            onChange={event => onOptionsChange({ autoSort: !event.target.checked })}
           />
-        </Grid.Col>
-      </Grid.Row>
+          <span>Custom Sorting</span>
+        </label>
+      </div>
+
+      {!options.autoSort && (
+        <React.Fragment>
+          <Grid.Row type="flex" align="middle" className="m-b-15">
+            <Grid.Col span={12}>
+              <label htmlFor="funnel-editor-sort-column-name">Sort Column</label>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Select
+                id="funnel-editor-sort-column-name"
+                className="w-100"
+                data-test="Funnel.SortColumn"
+                allowClear
+                placeholder="Choose column..."
+                defaultValue={options.sortKeyCol.colName || undefined}
+                onChange={colName => onOptionsChange({ sortKeyCol: { colName: colName || null } })}
+              >
+                {map(columnNames, col => (
+                  <Select.Option key={col} data-test={`Funnel.SortColumn.${col}`}>{col}</Select.Option>
+                ))}
+              </Select>
+            </Grid.Col>
+          </Grid.Row>
+
+          <Grid.Row type="flex" align="middle" className="m-b-15">
+            <Grid.Col span={12}>
+              <label htmlFor="funnel-editor-sort-reverse">Sort Order</label>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Select
+                id="funnel-editor-sort-reverse"
+                className="w-100"
+                data-test="Funnel.SortDirection"
+                disabled={!options.sortKeyCol.colName}
+                defaultValue={options.sortKeyCol.reverse ? 'desc' : 'asc'}
+                onChange={order => onOptionsChange({ sortKeyCol: { reverse: order === 'desc' } })}
+              >
+                <Select.Option value="asc" data-test="Funnel.SortDirection.Ascending">ascending</Select.Option>
+                <Select.Option value="desc" data-test="Funnel.SortDirection.Descending">descending</Select.Option>
+              </Select>
+            </Grid.Col>
+          </Grid.Row>
+        </React.Fragment>
+      )}
     </React.Fragment>
   );
 }

diff --git a/client/app/visualizations/funnel/getOptions.js b/client/app/visualizations/funnel/getOptions.js
@@ -3,6 +3,7 @@ import { isFinite, map, merge, includes } from 'lodash';
 const DEFAULT_OPTIONS = {
   stepCol: { colName: null, displayAs: 'Steps' },
   valueCol: { colName: null, displayAs: 'Value' },
+  autoSort: true,
   sortKeyCol: { colName: null, reverse: false },
   itemsLimit: 100,
   percentValuesRange: { min: 0.01, max: 1000.0 },
@@ -32,9 +33,7 @@ export default function getOptions(options, { columns }) {
     options.itemsLimit = 2;
   }
 
-  // Backward compatibility
   if (options.autoSort) {
-    delete options.autoSort;
     options.sortKeyCol.colName = options.valueCol.colName;
     options.sortKeyCol.reverse = true;
   }

diff --git a/client/cypress/integration/visualizations/funnel_spec.js b/client/cypress/integration/visualizations/funnel_spec.js
@@ -45,9 +45,12 @@ describe('Funnel', () => {
       Funnel.StepColumn.a
       Funnel.ValueColumn
       Funnel.ValueColumn.b
+
+      Funnel.CustomSort
       Funnel.SortColumn
       Funnel.SortColumn.b
-      Funnel.SortReverse
+      Funnel.SortDirection
+      Funnel.SortDirection.Ascending
     `);
 
     cy.fillInputs({