Add event (sum of event_property) to event labels on graphs

frontend/src/lib/utils.test.js

@@ -0,0 +1,44 @@
+import { formatLabel, identifierToHuman } from './utils'
+
+describe('identifierToHuman()', () => {
+    it('humanizes properly', () => {
+        expect(identifierToHuman('testIdentifier')).toEqual('Test Identifier')
+        expect(identifierToHuman('testIdentifierX')).toEqual('Test Identifier X')
+        expect(identifierToHuman('something     ')).toEqual('Something')
+        expect(identifierToHuman('  some_property')).toEqual('Some Property')
+        expect(identifierToHuman(' Number666')).toEqual('Number 666')
+        expect(identifierToHuman('7x')).toEqual('7x')
+        expect(identifierToHuman('7X')).toEqual('7 X')
+        expect(identifierToHuman('500')).toEqual('500')
+        expect(identifierToHuman(404)).toEqual('404')
+        expect(identifierToHuman('CreateProject')).toEqual('Create Project')
+    })
+})
+
+describe('formatLabel()', () => {
+    given('subject', () => formatLabel('some_event', given.action))
+
+    given('action', () => ({}))
+
+    it('formats the label', () => {
+        expect(given.subject).toEqual('some_event (Total) ')
+    })
+
+    it('handles DAU queries', () => {
+        given('action', () => ({ math: 'dau' }))
+
+        expect(given.subject).toEqual('some_event (DAU) ')
+    })
+
+    it('handles summing by property', () => {
+        given('action', () => ({ math: 'sum', math_property: 'event_property' }))
+
+        expect(given.subject).toEqual('some_event (sum of event_property) ')
+    })
+
+    it('handles action with properties', () => {
+        given('action', () => ({ properties: [{ value: 'hello' }, { operator: 'gt', value: 5 }] }))
+
+        expect(given.subject).toEqual('some_event (Total)  (= hello, > 5)')
+    })
+})

frontend/src/lib/utils.tsx

@@ -231,11 +231,12 @@ export function formatProperty(property: Record<string, any>): string {
 
 // Format a label that gets returned from the /insights api
 export function formatLabel(label: string, action: Record<string, any>): string {
-    const math = 'Total'
     if (action.math === 'dau') {
         label += ` (${action.math.toUpperCase()}) `
+    } else if (['sum', 'avg', 'min', 'max'].includes(action.math)) {
+        label += ` (${action.math} of ${action.math_property}) `
     } else {
-        label += ` (${math}) `
+        label += ' (Total) '
     }
     if (action?.properties?.length) {
         label += ` (${action.properties

jest.config.ts

@@ -128,7 +128,7 @@ export default {
     // setupFiles: [],
 
     // A list of paths to modules that run some code to configure or set up the testing framework before each test
-    // setupFilesAfterEnv: [],
+    setupFilesAfterEnv: ['given2/setup'],
 
     // The number of seconds after which a test is considered as slow and reported as such in the results.
     // slowTestThreshold: 5,

package.json

@@ -98,6 +98,7 @@
         "eslint-plugin-prettier": "^3.1.4",
         "eslint-plugin-react": "^7.20.3",
         "file-loader": "^6.1.0",
+        "given2": "^2.1.7",
         "html-webpack-harddisk-plugin": "^1.0.1",
         "html-webpack-plugin": "^4.4.1",
         "husky": "^4.3.0",

yarn.lock

@@ -4958,6 +4958,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+given2@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/given2/-/given2-2.1.7.tgz#4c2c7883d7ee1069d077c10551ef2e607943ebd3"
+  integrity sha512-fI3VamsjN2euNVguGpSt2uExyDSMfJoK+SwDxbmV+Thf3v4oF6KKZAFE3LHHuT+PYyMwCsJYXO01TW3euFdPGA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"