diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx index 1c5c897b291e7..8097e9e693393 100644 --- a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx @@ -20,7 +20,7 @@ export interface OperatorValueSelectProps { type?: PropertyFilterType propertyKey?: string operator?: PropertyOperator | null - value?: string | number | Array | null + value?: string | number | bigint | Array | null placeholder?: string endpoint?: string onChange: (operator: PropertyOperator, value: PropertyFilterValue) => void diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx index 5c668d29b7bc4..3d70a064fb4df 100644 --- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx @@ -7,11 +7,11 @@ import { useEffect, useState } from 'react' import { PropertyOperator } from '~/types' const dayJSMightParse = ( - candidateDateTimeValue: string | number | (string | number)[] | null | undefined + candidateDateTimeValue: string | number | bigint | (string | number | bigint)[] | null | undefined ): candidateDateTimeValue is string | number | undefined => ['string', 'number'].includes(typeof candidateDateTimeValue) const narrowToString = ( - candidateDateTimeValue: string | number | (string | number)[] | null | undefined + candidateDateTimeValue: string | number | bigint | (string | number | bigint)[] | null | undefined ): candidateDateTimeValue is string | null | undefined => candidateDateTimeValue == undefined || typeof candidateDateTimeValue === 'string' @@ -19,7 +19,7 @@ interface PropertyFilterDatePickerProps { autoFocus: boolean operator: PropertyOperator setValue: (newValue: PropertyValueProps['value']) => void - value: string | number | (string | number)[] | null | undefined + value: string | number | bigint | (string | number | bigint)[] | null | undefined } const dateAndTimeFormat = 'YYYY-MM-DD HH:mm:ss' diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx index 67dc2fed89a23..5344247507333 100644 --- a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx @@ -21,7 +21,7 @@ export interface PropertyValueProps { endpoint?: string // Endpoint to fetch options from placeholder?: string onSet: CallableFunction - value?: string | number | Array | null + value?: string | number | bigint | Array | null operator: PropertyOperator autoFocus?: boolean eventNames?: string[] diff --git a/frontend/src/scenes/insights/utils.test.ts b/frontend/src/scenes/insights/utils.test.ts index 87ae768a32226..98d18706952d9 100644 --- a/frontend/src/scenes/insights/utils.test.ts +++ b/frontend/src/scenes/insights/utils.test.ts @@ -400,6 +400,28 @@ describe('formatBreakdownLabel()', () => { expect(formatBreakdownLabel('661', breakdownFilter2, undefined, formatter, 0)).toEqual('661s') }) + it('handles large stringified numbers', () => { + const formatter = (_breakdown: any, v: any): any => `${v}s` + + const breakdownFilter1: BreakdownFilter = { + breakdown: '$session_duration', + breakdown_type: 'session', + } + expect(formatBreakdownLabel('661', breakdownFilter1, undefined, formatter)).toEqual('661s') + + const breakdownFilter2: BreakdownFilter = { + breakdowns: [ + { + property: '$session_duration', + type: 'session', + }, + ], + } + expect(formatBreakdownLabel('987654321012345678', breakdownFilter2, undefined, formatter, 0)).toEqual( + '987654321012345678s' + ) + }) + it('handles array first', () => { const formatter = (_: any, value: any, type: any): any => (type === 'session' ? `${value}s` : value) diff --git a/frontend/src/scenes/insights/utils.tsx b/frontend/src/scenes/insights/utils.tsx index c8e95fa6c6fa5..921ed998b0dc3 100644 --- a/frontend/src/scenes/insights/utils.tsx +++ b/frontend/src/scenes/insights/utils.tsx @@ -219,7 +219,7 @@ export function isOtherBreakdown(breakdown_value: string | number | null | undef ) } -export function isNullBreakdown(breakdown_value: string | number | null | undefined): boolean { +export function isNullBreakdown(breakdown_value: string | number | bigint | null | undefined): boolean { return ( breakdown_value === BREAKDOWN_NULL_STRING_LABEL || breakdown_value === BREAKDOWN_NULL_NUMERIC_LABEL || @@ -241,7 +241,7 @@ function isValidJsonArray(maybeJson: string): boolean { } function formatNumericBreakdownLabel( - breakdown_value: number, + breakdown_value: number | bigint, breakdownFilter: BreakdownFilter | null | undefined, formatPropertyValueForDisplay: FormatPropertyValueForDisplayFunction | undefined, multipleBreakdownIndex: number | undefined @@ -332,10 +332,14 @@ export function formatBreakdownLabel( ) } - const maybeNumericValue = Number(breakdown_value) - if (!Number.isNaN(maybeNumericValue)) { + // stringified numbers + if (!Number.isNaN(Number(breakdown_value))) { + const numericValue = + Number.isInteger(Number(breakdown_value)) && !Number.isSafeInteger(Number(breakdown_value)) + ? BigInt(breakdown_value!) + : Number(breakdown_value) return formatNumericBreakdownLabel( - maybeNumericValue, + numericValue, breakdownFilter, formatPropertyValueForDisplay, multipleBreakdownIndex diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.tsx b/frontend/src/scenes/web-analytics/webAnalyticsLogic.tsx index 209fe0997cc0a..68354965e68e2 100644 --- a/frontend/src/scenes/web-analytics/webAnalyticsLogic.tsx +++ b/frontend/src/scenes/web-analytics/webAnalyticsLogic.tsx @@ -332,7 +332,7 @@ export const webAnalyticsLogic = kea([ return f } const oldValue = (Array.isArray(f.value) ? f.value : [f.value]).filter(isNotNil) - let newValue: (string | number)[] + let newValue: (string | number | bigint)[] if (oldValue.includes(value)) { // If there are multiple values for this filter, reduce that to just the one being clicked if (oldValue.length > 1) { diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 7ca7617db51fe..863ff854c7fcb 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -663,7 +663,7 @@ export interface ToolbarProps extends ToolbarParams { export type PathCleaningFilter = { alias?: string; regex?: string } -export type PropertyFilterValue = string | number | (string | number)[] | null +export type PropertyFilterValue = string | number | bigint | (string | number | bigint)[] | null /** Sync with plugin-server/src/types.ts */ export enum PropertyOperator {