fix: histogram breakdown label for the null and other values (#22987)

PostHog · Jun 16, 2024 · a0eaff1 · a0eaff1
1 parent d9cbb4d
commit a0eaff1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/frontend/src/scenes/insights/utils.test.ts b/frontend/src/scenes/insights/utils.test.ts
@@ -250,6 +250,28 @@ describe('formatBreakdownLabel()', () => {
         expect(formatBreakdownLabel('[124.8,124.8]', breakdownFilter, [], identity)).toEqual('124.8')
     })
 
+    it('handles histogram breakdowns for "other" value', () => {
+        const breakdownFilter: BreakdownFilter = {
+            breakdown: '$browser_version',
+            breakdown_type: 'event',
+            breakdown_histogram_bin_count: 10,
+        }
+        expect(formatBreakdownLabel('$$_posthog_breakdown_other_$$', breakdownFilter, [], identity)).toEqual(
+            'Other (i.e. all remaining values)'
+        )
+    })
+
+    it('handles histogram breakdowns for "null" value', () => {
+        const breakdownFilter: BreakdownFilter = {
+            breakdown: '$browser_version',
+            breakdown_type: 'event',
+            breakdown_histogram_bin_count: 10,
+        }
+        expect(formatBreakdownLabel('$$_posthog_breakdown_null_$$', breakdownFilter, [], identity)).toEqual(
+            'None (i.e. no value)'
+        )
+    })
+
     it('handles numeric breakdowns', () => {
         const breakdownFilter: BreakdownFilter = {
             breakdown: 'coolness_factor',

diff --git a/frontend/src/scenes/insights/utils.tsx b/frontend/src/scenes/insights/utils.tsx
@@ -206,6 +206,15 @@ export function isNullBreakdown(breakdown_value: string | number | null | undefi
     )
 }
 
+function isValidJsonArray(maybeJson: string): boolean {
+    try {
+        const json = JSON.parse(maybeJson)
+        return Array.isArray(json)
+    } catch {
+        return false
+    }
+}
+
 export function formatBreakdownLabel(
     breakdown_value: BreakdownKeyType | undefined,
     breakdownFilter: BreakdownFilter | null | undefined,
@@ -215,7 +224,8 @@ export function formatBreakdownLabel(
     if (
         breakdownFilter?.breakdown_histogram_bin_count != null &&
         typeof breakdown_value === 'string' &&
-        breakdown_value.length > 0
+        breakdown_value.length > 0 &&
+        isValidJsonArray(breakdown_value)
     ) {
         // replace nan with null
         const bucketValues = breakdown_value.replace(/\bnan\b/g, 'null')