diff --git a/frontend/src/lib/components/InsightLegend/InsightLegend.tsx b/frontend/src/lib/components/InsightLegend/InsightLegend.tsx index 30f1db7ac0245..fa7650e95cdba 100644 --- a/frontend/src/lib/components/InsightLegend/InsightLegend.tsx +++ b/frontend/src/lib/components/InsightLegend/InsightLegend.tsx @@ -1,12 +1,11 @@ import './InsightLegend.scss' import clsx from 'clsx' -import { useActions, useValues } from 'kea' +import { useValues } from 'kea' import { insightLogic } from 'scenes/insights/insightLogic' import { trendsDataLogic } from 'scenes/trends/trendsDataLogic' import { InsightLegendRow } from './InsightLegendRow' -import { shouldHighlightThisRow } from './utils' export interface InsightLegendProps { readOnly?: boolean @@ -15,11 +14,8 @@ export interface InsightLegendProps { } export function InsightLegend({ horizontal, inCardView, readOnly = false }: InsightLegendProps): JSX.Element | null { - const { insightProps, highlightedSeries, hiddenLegendKeys } = useValues(insightLogic) - const { toggleVisibility } = useActions(insightLogic) - const { indexedResults, compare, display, trendsFilter, hasLegend, isSingleSeries } = useValues( - trendsDataLogic(insightProps) - ) + const { insightProps } = useValues(insightLogic) + const { indexedResults, hasLegend } = useValues(trendsDataLogic(insightProps)) return hasLegend ? (
{indexedResults && - indexedResults.map((item, index) => ( - - ))} + indexedResults.map((item, index) => )}
) : null diff --git a/frontend/src/lib/components/InsightLegend/InsightLegendRow.tsx b/frontend/src/lib/components/InsightLegend/InsightLegendRow.tsx index cfdb3f7067bd1..e5546c8839374 100644 --- a/frontend/src/lib/components/InsightLegend/InsightLegendRow.tsx +++ b/frontend/src/lib/components/InsightLegend/InsightLegendRow.tsx @@ -1,45 +1,35 @@ -import { useValues } from 'kea' +import { useActions, useValues } from 'kea' import { getSeriesColor } from 'lib/colors' import { InsightLabel } from 'lib/components/InsightLabel' import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox' import { useEffect, useRef } from 'react' import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat' -import { isTrendsFilter } from 'scenes/insights/sharedUtils' +import { insightLogic } from 'scenes/insights/insightLogic' import { formatBreakdownLabel } from 'scenes/insights/utils' import { formatCompareLabel } from 'scenes/insights/views/InsightsTable/columns/SeriesColumn' +import { trendsDataLogic } from 'scenes/trends/trendsDataLogic' import { IndexedTrendResult } from 'scenes/trends/types' import { cohortsModel } from '~/models/cohortsModel' import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel' -import { TrendsFilter } from '~/queries/schema' import { ChartDisplayType } from '~/types' +import { shouldHighlightThisRow } from './utils' + type InsightLegendRowProps = { - hiddenLegendKeys: Record rowIndex: number item: IndexedTrendResult - hasMultipleSeries: boolean - toggleVisibility: (index: number) => void - compare?: boolean | null - display?: ChartDisplayType | null - trendsFilter?: TrendsFilter | null - highlighted: boolean } -export function InsightLegendRow({ - hiddenLegendKeys, - rowIndex, - item, - hasMultipleSeries, - toggleVisibility, - compare, - display, - trendsFilter, - highlighted, -}: InsightLegendRowProps): JSX.Element { +export function InsightLegendRow({ rowIndex, item }: InsightLegendRowProps): JSX.Element { const { cohorts } = useValues(cohortsModel) const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel) + const { insightProps, hiddenLegendKeys, highlightedSeries } = useValues(insightLogic) + const { toggleVisibility } = useActions(insightLogic) + const { compare, display, trendsFilter, breakdownFilter, isSingleSeries } = useValues(trendsDataLogic(insightProps)) + + const highlighted = shouldHighlightThisRow(hiddenLegendKeys, rowIndex, highlightedSeries) const highlightStyle: Record = highlighted ? { style: { backgroundColor: getSeriesColor(item.seriesIndex, false, true) }, @@ -54,12 +44,10 @@ export function InsightLegendRow({ }, [highlighted]) const formattedBreakdownValue = formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, item.breakdown_value, - item.filter?.breakdown, - item.filter?.breakdown_type, - item.filter && isTrendsFilter(item.filter) && item.filter?.breakdown_histogram_bin_count !== undefined + breakdownFilter, + cohorts, + formatPropertyValueForDisplay ) return ( @@ -77,10 +65,10 @@ export function InsightLegendRow({ seriesColor={getSeriesColor(item.seriesIndex, compare)} action={item.action} fallbackName={item.breakdown_value === '' ? 'None' : item.label} - hasMultipleSeries={hasMultipleSeries} + hasMultipleSeries={!isSingleSeries} breakdownValue={formattedBreakdownValue} compareValue={compare ? formatCompareLabel(item) : undefined} - pillMidEllipsis={item?.filter?.breakdown === '$current_url'} // TODO: define set of breakdown values that would benefit from mid ellipsis truncation + pillMidEllipsis={breakdownFilter?.breakdown === '$current_url'} // TODO: define set of breakdown values that would benefit from mid ellipsis truncation hideIcon /> } diff --git a/frontend/src/scenes/funnels/FunnelTooltip.tsx b/frontend/src/scenes/funnels/FunnelTooltip.tsx index 4144d3c5446c4..7def251b4c5ab 100644 --- a/frontend/src/scenes/funnels/FunnelTooltip.tsx +++ b/frontend/src/scenes/funnels/FunnelTooltip.tsx @@ -56,11 +56,10 @@ export function FunnelTooltip({ • {formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, series.breakdown_value, - series.breakdown, - breakdownFilter?.breakdown_type + breakdownFilter, + cohorts, + formatPropertyValueForDisplay )} diff --git a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx index 2893e0f74adad..d5155e873fdee 100644 --- a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx +++ b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx @@ -31,38 +31,6 @@ const data = { label: '$pageview', color: '#1d4aff', count: 1, - filter: { - breakdown_attribution_type: 'first_touch', - date_from: '-7d', - display: 'ActionsLineGraph', - events: [ - { - id: '$pageview', - type: 'events', - order: 0, - name: '$pageview', - custom_name: null, - math: 'dau', - math_property: null, - math_group_type_index: null, - properties: {}, - }, - { - id: 'filter added', - type: 'events', - order: 1, - name: 'filter added', - custom_name: null, - math: null, - math_property: null, - math_group_type_index: null, - properties: {}, - }, - ], - insight: 'TRENDS', - interval: 'day', - smoothing_intervals: 1, - }, }, { id: 1, @@ -83,38 +51,6 @@ const data = { label: 'filter added', color: '#621da6', count: 1, - filter: { - breakdown_attribution_type: 'first_touch', - date_from: '-7d', - display: 'ActionsLineGraph', - events: [ - { - id: '$pageview', - type: 'events', - order: 0, - name: '$pageview', - custom_name: null, - math: 'dau', - math_property: null, - math_group_type_index: null, - properties: {}, - }, - { - id: 'filter added', - type: 'events', - order: 1, - name: 'filter added', - custom_name: null, - math: null, - math_property: null, - math_group_type_index: null, - properties: {}, - }, - ], - insight: 'TRENDS', - interval: 'day', - smoothing_intervals: 1, - }, }, ], } diff --git a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.tsx b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.tsx index 740260b0a4eb5..5a83cad0c9c8e 100644 --- a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.tsx +++ b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.tsx @@ -87,6 +87,7 @@ export function InsightTooltip({ colCutoff = COL_CUTOFF, showHeader = true, groupTypeLabel = 'people', + breakdownFilter, }: InsightTooltipProps): JSX.Element { // If multiple entities exist (i.e., pageview + autocapture) and there is a breakdown/compare/multi-group happening, itemize entities as columns to save vertical space.. // If only a single entity exists, itemize entity counts as rows. @@ -109,7 +110,7 @@ export function InsightTooltip({ if (itemizeEntitiesAsColumns) { hideColorCol = true - const dataSource = invertDataSource(seriesData) + const dataSource = invertDataSource(seriesData, breakdownFilter) const columns: LemonTableColumns = [ { key: 'datum', diff --git a/frontend/src/scenes/insights/InsightTooltip/insightTooltipUtils.tsx b/frontend/src/scenes/insights/InsightTooltip/insightTooltipUtils.tsx index 59dafe64bdde1..ee127ea92f7c4 100644 --- a/frontend/src/scenes/insights/InsightTooltip/insightTooltipUtils.tsx +++ b/frontend/src/scenes/insights/InsightTooltip/insightTooltipUtils.tsx @@ -1,9 +1,9 @@ import { dayjs } from 'lib/dayjs' import { capitalizeFirstLetter, midEllipsis, pluralize } from 'lib/utils' -import { isTrendsFilter } from 'scenes/insights/sharedUtils' import { cohortsModel } from '~/models/cohortsModel' import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel' +import { BreakdownFilter } from '~/queries/schema' import { ActionFilter, CompareLabelType, FilterType, IntervalType } from '~/types' import { formatBreakdownLabel } from '../utils' @@ -56,6 +56,7 @@ export interface InsightTooltipProps extends Omit ( - + ) diff --git a/frontend/src/scenes/insights/utils.test.ts b/frontend/src/scenes/insights/utils.test.ts index 9306f43c34db7..d5565d1cfbe6f 100644 --- a/frontend/src/scenes/insights/utils.test.ts +++ b/frontend/src/scenes/insights/utils.test.ts @@ -197,7 +197,7 @@ describe('formatAggregationValue', () => { }) describe('formatBreakdownLabel()', () => { - const identity = (x: any): any => x + const identity = (_breakdown: any, breakdown_value: any): any => breakdown_value const cohort = { id: 5, @@ -205,13 +205,113 @@ describe('formatBreakdownLabel()', () => { } it('handles cohort breakdowns', () => { - expect(formatBreakdownLabel([cohort as any], identity, cohort.id, [cohort.id], 'cohort')).toEqual(cohort.name) - expect(formatBreakdownLabel([], identity, 3, [3], 'cohort')).toEqual('3') + const breakdownFilter1: BreakdownFilter = { + breakdown: [cohort.id], + breakdown_type: 'cohort', + } + expect(formatBreakdownLabel(cohort.id, breakdownFilter1, [cohort as any], identity)).toEqual(cohort.name) + + const breakdownFilter2: BreakdownFilter = { + breakdown: [3], + breakdown_type: 'cohort', + } + expect(formatBreakdownLabel(3, breakdownFilter2, [], identity)).toEqual('3') }) it('handles cohort breakdowns with all users', () => { - expect(formatBreakdownLabel([], identity, 'all', ['all'], 'cohort')).toEqual('All Users') - expect(formatBreakdownLabel([], identity, 0, [0], 'cohort')).toEqual('All Users') + const breakdownFilter1: BreakdownFilter = { + breakdown: ['all'], + breakdown_type: 'cohort', + } + expect(formatBreakdownLabel('all', breakdownFilter1, [], identity)).toEqual('All Users') + + const breakdownFilter2: BreakdownFilter = { + breakdown: [0], + breakdown_type: 'cohort', + } + expect(formatBreakdownLabel(0, breakdownFilter2, [], identity)).toEqual('All Users') + }) + + it('handles histogram breakdowns', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: '$browser_version', + breakdown_type: 'event', + breakdown_histogram_bin_count: 10, + } + expect(formatBreakdownLabel('[124.8,125.01]', breakdownFilter, [], identity)).toEqual('124.8 – 125.01') + }) + + it('handles histogram breakdowns for start and end values', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: '$browser_version', + breakdown_type: 'event', + breakdown_histogram_bin_count: 10, + } + expect(formatBreakdownLabel('[124.8,124.8]', breakdownFilter, [], identity)).toEqual('124.8') + }) + + it('handles numeric breakdowns', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: 'coolness_factor', + breakdown_type: 'event', + } + expect(formatBreakdownLabel(42, breakdownFilter, [], identity)).toEqual('42') + }) + + it('handles numeric breakdowns for "other" value', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: 'coolness_factor', + breakdown_type: 'event', + } + expect(formatBreakdownLabel(9007199254740991, breakdownFilter, [], identity)).toEqual( + 'Other (i.e. all remaining values)' + ) + }) + + it('handles numeric breakdowns for "null" value', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: 'coolness_factor', + breakdown_type: 'event', + } + expect(formatBreakdownLabel(9007199254740990, breakdownFilter, [], identity)).toEqual('None (i.e. no value)') + }) + + it('handles string breakdowns', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: 'demographic', + breakdown_type: 'event', + } + expect(formatBreakdownLabel('millenial', breakdownFilter, [], identity)).toEqual('millenial') + }) + + it('handles string breakdowns for "other" value', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: 'demographic', + breakdown_type: 'event', + } + expect(formatBreakdownLabel('$$_posthog_breakdown_other_$$', breakdownFilter, [], identity)).toEqual( + 'Other (i.e. all remaining values)' + ) + }) + + it('handles string breakdowns for "null" value', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: 'demographic', + breakdown_type: 'event', + } + expect(formatBreakdownLabel('$$_posthog_breakdown_null_$$', breakdownFilter, [], identity)).toEqual( + 'None (i.e. no value)' + ) + }) + + it('handles multi-breakdowns', () => { + const breakdownFilter: BreakdownFilter = { + breakdown: ['demographic', '$browser'], + breakdown_type: 'event', + } + expect(formatBreakdownLabel(['millenial', 'Chrome'], breakdownFilter, [], identity)).toEqual( + 'millenial::Chrome' + ) }) }) diff --git a/frontend/src/scenes/insights/utils.tsx b/frontend/src/scenes/insights/utils.tsx index 1a05f91f51f0b..72f16ae2e6199 100644 --- a/frontend/src/scenes/insights/utils.tsx +++ b/frontend/src/scenes/insights/utils.tsx @@ -14,7 +14,6 @@ import { ActionFilter, AnyPartialFilterType, BreakdownKeyType, - BreakdownType, ChartDisplayType, CohortType, EntityFilter, @@ -208,37 +207,32 @@ export function isNullBreakdown(breakdown_value: string | number | null | undefi } export function formatBreakdownLabel( - cohorts: CohortType[] | undefined, - formatPropertyValueForDisplay: FormatPropertyValueForDisplayFunction | undefined, breakdown_value: BreakdownKeyType | undefined, - breakdown: BreakdownKeyType | undefined, - breakdown_type: BreakdownType | null | undefined, - isHistogram?: boolean + breakdownFilter: BreakdownFilter | null | undefined, + cohorts: CohortType[] | undefined, + formatPropertyValueForDisplay: FormatPropertyValueForDisplayFunction | undefined ): string { - if (isHistogram && typeof breakdown_value === 'string') { + if (breakdownFilter?.breakdown_histogram_bin_count != null && typeof breakdown_value === 'string') { // replace nan with null const bucketValues = breakdown_value.replace(/\bnan\b/g, 'null') const [bucketStart, bucketEnd] = JSON.parse(bucketValues) const formattedBucketStart = formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, bucketStart, - breakdown, - breakdown_type + breakdownFilter, + cohorts, + formatPropertyValueForDisplay ) const formattedBucketEnd = formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, bucketEnd, - breakdown, - breakdown_type + breakdownFilter, + cohorts, + formatPropertyValueForDisplay ) if (formattedBucketStart === formattedBucketEnd) { return formattedBucketStart } return `${formattedBucketStart} – ${formattedBucketEnd}` - } - if (breakdown_type === 'cohort') { + } else if (breakdownFilter?.breakdown_type === 'cohort') { // :TRICKY: Different endpoints represent the all users cohort breakdown differently if (breakdown_value === 0 || breakdown_value === 'all') { return 'All Users' @@ -250,7 +244,7 @@ export function formatBreakdownLabel( : isNullBreakdown(breakdown_value) ? BREAKDOWN_NULL_DISPLAY : formatPropertyValueForDisplay - ? formatPropertyValueForDisplay(breakdown, breakdown_value)?.toString() ?? 'None' + ? formatPropertyValueForDisplay(breakdownFilter?.breakdown, breakdown_value)?.toString() ?? 'None' : String(breakdown_value) } else if (typeof breakdown_value == 'string') { return isOtherBreakdown(breakdown_value) || breakdown_value === 'nan' @@ -260,9 +254,7 @@ export function formatBreakdownLabel( : breakdown_value } else if (Array.isArray(breakdown_value)) { return breakdown_value - .map((v) => - formatBreakdownLabel(cohorts, formatPropertyValueForDisplay, v, breakdown, breakdown_type, isHistogram) - ) + .map((v) => formatBreakdownLabel(v, breakdownFilter, cohorts, formatPropertyValueForDisplay)) .join('::') } return '' diff --git a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx index 35989f90d16b0..bce29e83078a1 100644 --- a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx +++ b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx @@ -35,7 +35,7 @@ function useBoldNumberTooltip({ isTooltipShown: boolean }): React.RefObject { const { insightProps } = useValues(insightLogic) - const { series, insightData, trendsFilter } = useValues(insightVizDataLogic(insightProps)) + const { series, insightData, trendsFilter, breakdownFilter } = useValues(insightVizDataLogic(insightProps)) const { aggregationLabel } = useValues(groupsModel) const divRef = useRef(null) @@ -60,6 +60,7 @@ function useBoldNumberTooltip({ count: seriesResult?.aggregated_value, }, ]} + breakdownFilter={breakdownFilter} showHeader={false} renderSeries={(value: React.ReactNode) => {value}} hideColorCol diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx index f098e334d33cd..7233638856cf7 100644 --- a/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx +++ b/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx @@ -82,8 +82,7 @@ export function FunnelConversionWindowFilter({ insightProps }: Pick { setLocalConversionWindow((state) => ({ ...state, diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx index 723c50737c63e..9c5c67f07f51b 100644 --- a/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx +++ b/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx @@ -83,11 +83,10 @@ export function FunnelStepsTable(): JSX.Element | null { ? breakdown.breakdown_value[0] : breakdown.breakdown_value const label = formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, value, - breakdown.breakdown, - breakdownFilter?.breakdown_type + breakdownFilter, + cohorts, + formatPropertyValueForDisplay ) return isOnlySeries ? ( {label} diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx index 694b4984f6532..5197cc749fd43 100644 --- a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx +++ b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx @@ -6,7 +6,6 @@ import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable' import { compare as compareFn } from 'natural-orderby' import { insightLogic } from 'scenes/insights/insightLogic' import { insightSceneLogic } from 'scenes/insights/insightSceneLogic' -import { isTrendsFilter } from 'scenes/insights/sharedUtils' import { formatBreakdownLabel } from 'scenes/insights/utils' import { trendsDataLogic } from 'scenes/trends/trendsDataLogic' import { IndexedTrendResult } from 'scenes/trends/types' @@ -131,14 +130,7 @@ export function InsightsTable({ if (breakdownFilter?.breakdown) { const formatItemBreakdownLabel = (item: IndexedTrendResult): string => - formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, - item.breakdown_value, - item.filter?.breakdown, - item.filter?.breakdown_type, - item.filter && isTrendsFilter(item.filter) && item.filter?.breakdown_histogram_bin_count !== undefined - ) + formatBreakdownLabel(item.breakdown_value, breakdownFilter, cohorts, formatPropertyValueForDisplay) columns.push({ title: , diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx index 115a0beb6fc57..bda288ea745e1 100644 --- a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx +++ b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx @@ -279,7 +279,7 @@ export function LineGraph_({ const { isDarkModeOn } = useValues(themeLogic) const { insightProps, insight } = useValues(insightLogic) - const { timezone, isTrends } = useValues(insightVizDataLogic(insightProps)) + const { timezone, isTrends, breakdownFilter } = useValues(insightVizDataLogic(insightProps)) const canvasRef = useRef(null) const [myLineChart, setMyLineChart] = useState>() @@ -479,6 +479,7 @@ export function LineGraph_({ date={dataset?.days?.[tooltip.dataPoints?.[0]?.dataIndex]} timezone={timezone} seriesData={seriesData} + breakdownFilter={breakdownFilter} renderSeries={(value, datum) => { const hasBreakdown = datum.breakdown_value !== undefined && !!datum.breakdown_value diff --git a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx index b6a1613fd6a79..d4f9af6d6da90 100644 --- a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx +++ b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx @@ -30,6 +30,7 @@ import { createTooltipData } from 'scenes/insights/views/LineGraph/tooltip-data' import { areObjectValuesEmpty } from '~/lib/utils' import { groupsModel } from '~/models/groupsModel' +import { BreakdownFilter } from '~/queries/schema' import { GraphType } from '~/types' let timer: NodeJS.Timeout | null = null @@ -53,6 +54,7 @@ function getPercentageForDataPoint(context: Context): number { } export interface PieChartProps extends LineGraphProps { + breakdownFilter?: BreakdownFilter | null | undefined showLabelOnSeries?: boolean | null disableHoverOffset?: boolean | null } @@ -65,6 +67,7 @@ export function PieChart({ onClick, ['data-attr']: dataAttr, trendsFilter, + breakdownFilter, formula, showValuesOnSeries, showLabelOnSeries, @@ -216,6 +219,7 @@ export function PieChart({ tooltipRoot.render( { diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx index 1c529e9e111f7..73499d609400a 100644 --- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx +++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx @@ -25,7 +25,7 @@ const WORLD_MAP_TOOLTIP_OFFSET_PX = 8 function useWorldMapTooltip(showPersonsModal: boolean): React.RefObject { const { insightProps } = useValues(insightLogic) - const { series, trendsFilter, isTooltipShown, currentTooltip, tooltipCoordinates } = useValues( + const { series, trendsFilter, breakdownFilter, isTooltipShown, currentTooltip, tooltipCoordinates } = useValues( worldMapLogic(insightProps) ) const { aggregationLabel } = useValues(groupsModel) @@ -52,6 +52,7 @@ function useWorldMapTooltip(showPersonsModal: boolean): React.RefObject typeof datum.breakdown_value === 'string' && (
diff --git a/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx b/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx index 1b9f62ed57c40..e2bc2dfb32e1b 100644 --- a/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx +++ b/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx @@ -11,7 +11,10 @@ export const worldMapLogic = kea([ key(keyForInsightLogicProps('new')), path((key) => ['scenes', 'insights', 'WorldMap', 'worldMapLogic', key]), connect((props: InsightLogicProps) => ({ - values: [insightVizDataLogic(props), ['insightData', 'trendsFilter', 'series', 'querySource']], + values: [ + insightVizDataLogic(props), + ['insightData', 'trendsFilter', 'breakdownFilter', 'series', 'querySource'], + ], })), actions({ showTooltip: (countryCode: string, countrySeries: TrendResult | null) => ({ countryCode, countrySeries }), diff --git a/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx b/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx index 0a317c32ca041..38b15a0b81636 100644 --- a/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx +++ b/frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx @@ -32,6 +32,7 @@ export function ActionsHorizontalBar({ showPersonsModal = true }: ChartParams): showValuesOnSeries, isDataWarehouseSeries, querySource, + breakdownFilter, } = useValues(trendsDataLogic(insightProps)) function updateData(): void { @@ -47,12 +48,10 @@ export function ActionsHorizontalBar({ showPersonsModal = true }: ChartParams): breakdownValues: _data.map((item) => item.breakdown_value), breakdownLabels: _data.map((item) => { return formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, item.breakdown_value, - item.filter?.breakdown, - item.filter?.breakdown_type, - false + breakdownFilter, + cohorts, + formatPropertyValueForDisplay ) }), compareLabels: _data.map((item) => item.compare_label), diff --git a/frontend/src/scenes/trends/viz/ActionsPie.tsx b/frontend/src/scenes/trends/viz/ActionsPie.tsx index 495258c180fd5..5bdb5b8ea8c8c 100644 --- a/frontend/src/scenes/trends/viz/ActionsPie.tsx +++ b/frontend/src/scenes/trends/viz/ActionsPie.tsx @@ -42,6 +42,7 @@ export function ActionsPie({ pieChartVizOptions, isDataWarehouseSeries, querySource, + breakdownFilter, } = useValues(trendsDataLogic(insightProps)) const renderingMetadata = context?.chartRenderingMetadata?.[ChartDisplayType.ActionsPie] @@ -61,12 +62,10 @@ export function ActionsPie({ breakdownValues: indexedResults.map((item) => item.breakdown_value), breakdownLabels: indexedResults.map((item) => { return formatBreakdownLabel( - cohorts, - formatPropertyValueForDisplay, item.breakdown_value, - item.filter?.breakdown, - item.filter?.breakdown_type, - false + breakdownFilter, + cohorts, + formatPropertyValueForDisplay ) }), compareLabels: indexedResults.map((item) => item.compare_label),