From e666f90e1ede7618905a996090de9e98cc7d2fa2 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 28 Oct 2024 15:43:07 +0100
Subject: [PATCH] feat: playground result count buckets (#8555)

---
 .../AdvancedPlaygroundResultsTable.tsx          |  4 ++--
 .../combinationCounter.test.ts                  | 11 ++++++++++-
 .../combinationCounter.ts                       | 17 +++++++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx
index a297662f55..f6888d413e 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx
@@ -30,7 +30,7 @@ import type {
 import { capitalizeFirst } from 'utils/capitalizeFirst';
 import { AdvancedPlaygroundEnvironmentDiffCell } from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { countCombinations } from './combinationCounter';
+import { countCombinations, getBucket } from './combinationCounter';
 
 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
@@ -54,7 +54,7 @@ export const AdvancedPlaygroundResultsTable = ({
         trackEvent('playground', {
             props: {
                 eventType: 'number-of-combinations',
-                count: countCombinations(features),
+                count: getBucket(countCombinations(features)),
             },
         });
     }
diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.test.ts b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.test.ts
index 565d5d82c2..4cfdcddd89 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.test.ts
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.test.ts
@@ -1,4 +1,4 @@
-import { countCombinations } from './combinationCounter';
+import { countCombinations, getBucket } from './combinationCounter';
 import type {
     AdvancedPlaygroundEnvironmentFeatureSchema,
     AdvancedPlaygroundFeatureSchema,
@@ -95,3 +95,12 @@ it('counts the correct number of combinations', () => {
     });
     assertCount(5, ['development'], { x: ['1', '2'] });
 });
+
+it('assigns bucket', () => {
+    expect(getBucket(-1)).toBe('invalid bucket');
+    expect(getBucket(0)).toBe('0-100');
+    expect(getBucket(100)).toBe('100-1000');
+    expect(getBucket(1000)).toBe('1000-10000');
+    expect(getBucket(10000)).toBe('10000-20000');
+    expect(getBucket(20000)).toBe('20000+');
+});
diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.ts b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.ts
index 56a139db48..c9ebaf7293 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.ts
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/combinationCounter.ts
@@ -11,3 +11,20 @@ export const countCombinations = (
             ).length,
         0,
     );
+
+export const getBucket = (value: number): string => {
+    if (value < 0) {
+        return 'invalid bucket';
+    }
+    if (value >= 20000) {
+        return '20000+';
+    } else if (value >= 10000) {
+        return '10000-20000';
+    } else if (value >= 1000) {
+        return '1000-10000';
+    } else if (value >= 100) {
+        return '100-1000';
+    } else {
+        return '0-100';
+    }
+};