From 1f3d2d66b815ed76183141689f4e330f85dcd16a Mon Sep 17 00:00:00 2001
From: Nate Grift <69441127+nategrift@users.noreply.github.com>
Date: Mon, 31 Jul 2023 03:29:07 -0400
Subject: [PATCH] feat: allow sorting Lifecycle graph bars (#16542)

---
 .../src/scenes/trends/trendsDataLogic.test.ts   | 16 ++++++++--------
 frontend/src/scenes/trends/trendsDataLogic.ts   | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/scenes/trends/trendsDataLogic.test.ts b/frontend/src/scenes/trends/trendsDataLogic.test.ts
index 5da842ecedb29..b4e78196b18cd 100644
--- 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
index aa86128d99dd1..19f894d3b3245 100644
--- 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 }))