feat: allow sorting Lifecycle graph bars (#16542)

PostHog · Jul 31, 2023 · 1f3d2d6 · 1f3d2d6
1 parent ec15c51
commit 1f3d2d6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/frontend/src/scenes/trends/trendsDataLogic.test.ts b/frontend/src/scenes/trends/trendsDataLogic.test.ts
@@ -117,24 +117,24 @@ describe('trendsDataLogic', () => {
                     builtDataNodeLogic.actions.loadDataSuccess(insight)
                 }).toMatchValues({
                     indexedResults: [
-                        expect.objectContaining({
-                            count: 35346.0,
-                            status: 'new',
-                            id: 0,
-                            seriesIndex: 0,
-                        }),
                         expect.objectContaining({
                             count: -50255.0,
                             status: 'dormant',
-                            id: 1,
+                            id: 0,
                             seriesIndex: 1,
                         }),
                         expect.objectContaining({
                             count: 11612.0,
                             status: 'resurrecting',
-                            id: 2,
+                            id: 1,
                             seriesIndex: 3,
                         }),
+                        expect.objectContaining({
+                            count: 35346.0,
+                            status: 'new',
+                            id: 2,
+                            seriesIndex: 0,
+                        }),
                     ],
                 })
             })

diff --git a/frontend/src/scenes/trends/trendsDataLogic.ts b/frontend/src/scenes/trends/trendsDataLogic.ts
@@ -76,16 +76,25 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
         indexedResults: [
             (s) => [s.results, s.display, s.lifecycleFilter],
             (results, display, lifecycleFilter): IndexedTrendResult[] => {
+                const defaultLifecyclesOrder = ['new', 'resurrecting', 'returning', 'dormant']
                 let indexedResults = results.map((result, index) => ({ ...result, seriesIndex: index }))
                 if (
                     display &&
                     (display === ChartDisplayType.ActionsBarValue || display === ChartDisplayType.ActionsPie)
                 ) {
                     indexedResults.sort((a, b) => b.aggregated_value - a.aggregated_value)
-                } else if (lifecycleFilter && lifecycleFilter.toggledLifecycles) {
-                    indexedResults = indexedResults.filter((result) =>
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        lifecycleFilter.toggledLifecycles!.includes(String(result.status) as LifecycleToggle)
+                } else if (lifecycleFilter) {
+                    if (lifecycleFilter.toggledLifecycles) {
+                        indexedResults = indexedResults.filter((result) =>
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            lifecycleFilter.toggledLifecycles!.includes(String(result.status) as LifecycleToggle)
+                        )
+                    }
+
+                    indexedResults = indexedResults.sort(
+                        (a, b) =>
+                            defaultLifecyclesOrder.indexOf(String(b.status)) -
+                            defaultLifecyclesOrder.indexOf(String(a.status))
                     )
                 }
                 return indexedResults.map((result, index) => ({ ...result, id: index }))