Revert "Revert "935 trend legend (#3434)" (#3487)"

This reverts commit 5784f90.

frontend/src/lib/components/PHCheckbox.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+interface Props {
+    checked: boolean
+    onChange: () => void
+    color: string
+    disabled?: boolean
+}
+
+export const PHCheckbox = ({ checked, color = 'blue', disabled = false, ...props }: Props): JSX.Element => (
+    <div
+        style={{
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            cursor: disabled ? undefined : 'pointer',
+        }}
+    >
+        <div
+            style={{
+                display: 'inline-block',
+                width: '16px',
+                height: '16px',
+                background: checked ? color : 'lightgray',
+                borderRadius: '3px',
+                transition: 'all 150ms',
+            }}
+            onClick={!disabled ? props.onChange : () => {}}
+        >
+            <svg
+                style={{
+                    visibility: checked ? 'visible' : 'hidden',
+                    fill: 'none',
+                    stroke: 'white',
+                    strokeWidth: '2px',
+                }}
+                viewBox="0 0 24 24"
+            >
+                <polyline points="20 6 9 17 4 12" />
+            </svg>
+        </div>
+    </div>
+)

frontend/src/lib/constants.tsx

@@ -0,0 +1,180 @@
+import React from 'react'
+
+export const ACTIONS_LINE_GRAPH_LINEAR = 'ActionsLineGraph'
+export const ACTIONS_LINE_GRAPH_CUMULATIVE = 'ActionsLineGraphCumulative'
+export const ACTIONS_TABLE = 'ActionsTable'
+export const ACTIONS_PIE_CHART = 'ActionsPie'
+export const ACTIONS_BAR_CHART = 'ActionsBar'
+export const ACTIONS_BAR_CHART_VALUE = 'ActionsBarValue'
+export const PATHS_VIZ = 'PathsViz'
+export const FUNNEL_VIZ = 'FunnelViz'
+
+export const VOLUME = 'Volume'
+export const STICKINESS = 'Stickiness'
+export const LIFECYCLE = 'Lifecycle'
+
+export enum OrganizationMembershipLevel {
+    Member = 1,
+    Admin = 8,
+    Owner = 15,
+}
+
+export const organizationMembershipLevelToName = new Map<number, string>([
+    [OrganizationMembershipLevel.Member, 'member'],
+    [OrganizationMembershipLevel.Admin, 'administrator'],
+    [OrganizationMembershipLevel.Owner, 'owner'],
+])
+
+export enum AnnotationScope {
+    DashboardItem = 'dashboard_item',
+    Project = 'project',
+    Organization = 'organization',
+}
+
+export const annotationScopeToName = new Map<string, string>([
+    [AnnotationScope.DashboardItem, 'dashboard item'],
+    [AnnotationScope.Project, 'project'],
+    [AnnotationScope.Organization, 'organization'],
+])
+
+export const PERSON_DISTINCT_ID_MAX_SIZE = 3
+
+export const PAGEVIEW = '$pageview'
+export const AUTOCAPTURE = '$autocapture'
+export const SCREEN = '$screen'
+export const CUSTOM_EVENT = 'custom_event'
+
+export const ACTION_TYPE = 'action_type'
+export const EVENT_TYPE = 'event_type'
+
+export enum ShownAsValue {
+    VOLUME = 'Volume',
+    STICKINESS = 'Stickiness',
+    LIFECYCLE = 'Lifecycle',
+}
+
+export const PROPERTY_MATH_TYPE = 'property'
+export const EVENT_MATH_TYPE = 'event'
+
+export const MATHS: Record<string, any> = {
+    total: {
+        name: 'Total volume',
+        description: (
+            <>
+                Total event volume.
+                <br />
+                If a user performs an event 3 times in a given day/week/month, it counts as 3.
+            </>
+        ),
+        onProperty: false,
+        type: EVENT_MATH_TYPE,
+    },
+    dau: {
+        name: 'Active users',
+        description: (
+            <>
+                Users active in the time interval.
+                <br />
+                If a user performs an event 3 times in a given day/week/month, it counts only as 1.
+            </>
+        ),
+        onProperty: false,
+        type: EVENT_MATH_TYPE,
+    },
+    sum: {
+        name: 'Sum',
+        description: (
+            <>
+                Event property sum.
+                <br />
+                For example 3 events captured with property <code>amount</code> equal to 10, 12 and 20, result in 42.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+    avg: {
+        name: 'Average',
+        description: (
+            <>
+                Event property average.
+                <br />
+                For example 3 events captured with property <code>amount</code> equal to 10, 12 and 20, result in 14.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+    min: {
+        name: 'Minimum',
+        description: (
+            <>
+                Event property minimum.
+                <br />
+                For example 3 events captured with property <code>amount</code> equal to 10, 12 and 20, result in 10.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+    max: {
+        name: 'Maximum',
+        description: (
+            <>
+                Event property maximum.
+                <br />
+                For example 3 events captured with property <code>amount</code> equal to 10, 12 and 20, result in 20.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+    median: {
+        name: 'Median',
+        description: (
+            <>
+                Event property median (50th percentile).
+                <br />
+                For example 100 events captured with property <code>amount</code> equal to 101..200, result in 150.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+    p90: {
+        name: '90th percentile',
+        description: (
+            <>
+                Event property 90th percentile.
+                <br />
+                For example 100 events captured with property <code>amount</code> equal to 101..200, result in 190.
+            </>
+        ),
+        onProperty: true,
+        type: 'property',
+    },
+    p95: {
+        name: '95th percentile',
+        description: (
+            <>
+                Event property 95th percentile.
+                <br />
+                For example 100 events captured with property <code>amount</code> equal to 101..200, result in 195.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+    p99: {
+        name: '99th percentile',
+        description: (
+            <>
+                Event property 90th percentile.
+                <br />
+                For example 100 events captured with property <code>amount</code> equal to 101..200, result in 199.
+            </>
+        ),
+        onProperty: true,
+        type: PROPERTY_MATH_TYPE,
+    },
+}

frontend/src/lib/utils.test.js

@@ -37,7 +37,7 @@ describe('formatLabel()', () => {
     given('action', () => ({}))
 
     it('formats the label', () => {
-        expect(given.subject).toEqual('some_event (Total) ')
+        expect(given.subject).toEqual('some_event')
     })
 
     describe('DAU queries', () => {
@@ -60,7 +60,7 @@ describe('formatLabel()', () => {
         given('action', () => ({ properties: [{ value: 'hello' }, { operator: 'gt', value: 5 }] }))
 
         it('is formatted', () => {
-            expect(given.subject).toEqual('some_event (Total)  (= hello, > 5)')
+            expect(given.subject).toEqual('some_event (= hello, > 5)')
         })
     })
 })

frontend/src/lib/utils.tsx

@@ -241,8 +241,6 @@ export function formatLabel(
         label += ` (Active Users) `
     } else if (['sum', 'avg', 'min', 'max', 'median', 'p90', 'p95', 'p99'].includes(action.math)) {
         label += ` (${action.math} of ${action.math_property}) `
-    } else {
-        label += ' (Total) '
     }
     if (action?.properties?.length) {
         label += ` (${action.properties