Merge pull request apache#56 from tgunther-zerofox/ZFE-76991-new-funnel

Add visual sorting to funnel chart
rguerraZero · Oct 24, 2023 · 1fc7cf9 · 1fc7cf9
2 parents 0702905 + c09532a
commit 1fc7cf9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -63,7 +63,26 @@ const config: ControlPanelConfig = {
               type: 'CheckboxControl',
               label: t('Sort by metric'),
               description: t(
-                'Whether to sort results by the selected metric in descending order.',
+                'Whether to sort results of the query by the selected metric in descending order. It affects the ORDER BY on the SQL query.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'sort_visually',
+            config: {
+              type: 'SelectControl',
+              label: t('Visualization Sort'),
+              default: 'descending',
+              renderTrigger: true,
+              choices: [
+                ['ascending', t('Ascending')],
+                ['descending', t('Descending')],
+                ['none', t('None')],
+              ],
+              description: t(
+                'The order in which the funnel order is displayed. Please note that this will only affect the visualization of the data, not the query that loads the data.',
               ),
             },
           },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -100,7 +100,7 @@ export default function transformProps(
     colorScheme,
     groupby,
     orient,
-    sort,
+    sortVisually,
     gap,
     labelLine,
     labelType,
@@ -189,7 +189,7 @@ export default function transformProps(
       animation: true,
       minSize: '0%',
       maxSize: '100%',
-      sort,
+      sort: sortVisually,
       orient,
       gap,
       funnelAlign: 'center',