diff --git a/frontend/src/queries/nodes/InsightViz/resultCustomizationsModalLogic.ts b/frontend/src/queries/nodes/InsightViz/resultCustomizationsModalLogic.ts index 298e1828893..ed219f55bc7 100644 --- a/frontend/src/queries/nodes/InsightViz/resultCustomizationsModalLogic.ts +++ b/frontend/src/queries/nodes/InsightViz/resultCustomizationsModalLogic.ts @@ -9,6 +9,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils' import { getFunnelDatasetKey, + getFunnelResultCustomizationColorToken, getTrendResultCustomizationColorToken, getTrendResultCustomizationKey, } from 'scenes/insights/utils' @@ -38,7 +39,7 @@ export const resultCustomizationsModalLogic = kea localColorToken || colorTokenFromQuery, ], colorTokenFromQuery: [ - (s) => [s.resultCustomizationBy, s.resultCustomizations, s.getTheme, s.dataset], - (resultCustomizationBy, resultCustomizations, getTheme, dataset): DataColorToken | null => { + (s) => [ + s.isTrends, + s.isFunnels, + s.resultCustomizationBy, + s.trendsResultCustomizations, + s.funnelsResultCustomizations, + s.getTheme, + s.dataset, + ], + ( + isTrends, + isFunnels, + resultCustomizationBy, + trendsResultCustomizations, + funnelsResultCustomizations, + getTheme, + dataset + ): DataColorToken | null => { if (!dataset) { return null } const theme = getTheme('posthog') - return getTrendResultCustomizationColorToken( - resultCustomizationBy, - resultCustomizations, - theme, - dataset - ) + + if (isTrends) { + return getTrendResultCustomizationColorToken( + resultCustomizationBy, + trendsResultCustomizations, + theme, + dataset + ) + } else if (isFunnels) { + return getFunnelResultCustomizationColorToken(funnelsResultCustomizations, theme, dataset) + } + + return null }, ], resultCustomizationBy: [ (s) => [s.resultCustomizationByRaw], (resultCustomizationByRaw) => resultCustomizationByRaw || RESULT_CUSTOMIZATION_DEFAULT, ], + resultCustomizations: [ + (s) => [s.isTrends, s.isFunnels, s.trendsResultCustomizations, s.funnelsResultCustomizations], + (isTrends, isFunnels, trendsResultCustomizations, funnelsResultCustomizations) => { + if (isTrends) { + return trendsResultCustomizations + } else if (isFunnels) { + return funnelsResultCustomizations + } + + return null + }, + ], }), listeners(({ actions, values }) => ({ save: () => { - if (values.localColorToken == null) { + if (values.localColorToken == null || values.dataset == null) { actions.closeModal() return } @@ -111,17 +147,22 @@ export const resultCustomizationsModalLogic = kea + | Record } export const TRENDS_FILTER_PROPERTIES = new Set([ @@ -929,10 +937,6 @@ export interface TrendsQuery extends InsightsQueryBase { breakdownFilter?: BreakdownFilter /** Compare to date range */ compareFilter?: CompareFilter - /** Display configuration for the result datasets. */ - resultCustomizations?: - | Record - | Record } export type AssistantArrayPropertyFilterOperator = PropertyOperator.Exact | PropertyOperator.IsNot @@ -1409,8 +1413,7 @@ export type FunnelsFilter = { /** @default total */ funnelStepReference?: FunnelsFilterLegacy['funnel_step_reference'] useUdf?: boolean - - /** Display configuration for the result datasets. */ + /** Customizations for the appearance of result datasets. */ resultCustomizations?: Record } diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts index 859858e297d..9785827ef59 100644 --- a/frontend/src/scenes/insights/insightVizDataLogic.ts +++ b/frontend/src/scenes/insights/insightVizDataLogic.ts @@ -32,10 +32,6 @@ import { InsightQueryNode, Node, NodeKind, - numerical_key, - ResultCustomization, - ResultCustomizationByPosition, - ResultCustomizationByValue, TrendsFilter, TrendsQuery, } from '~/queries/schema' @@ -104,7 +100,6 @@ export const insightVizDataLogic = kea([ updateCompareFilter: (compareFilter: CompareFilter) => ({ compareFilter }), updateDisplay: (display: ChartDisplayType | undefined) => ({ display }), updateHiddenLegendIndexes: (hiddenLegendIndexes: number[] | undefined) => ({ hiddenLegendIndexes }), - updateResultCustomization: (key: number | string, config: ResultCustomization) => ({ key, config }), setTimedOutQueryId: (id: string | null) => ({ id }), }), @@ -458,16 +453,6 @@ export const insightVizDataLogic = kea([ actions.updateInsightFilter({ hiddenLegendIndexes }) }, - // legend entries - updateResultCustomization: ({ key, config }) => { - const update: Partial = { - resultCustomizations: { ...values.resultCustomizations, [key]: config } as - | Record - | Record, - } - actions.updateQuerySource(update) - }, - // data loading side effects i.e. diplaying loading screens for queries with longer duration loadData: async ({ queryId }, breakpoint) => { actions.setTimedOutQueryId(null) diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx index 5dba9ab8206..d4f117a91f2 100644 --- a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx +++ b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx @@ -38,6 +38,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import { getTrendResultCustomizationColorToken } from 'scenes/insights/utils' import { PieChart } from 'scenes/insights/views/LineGraph/PieChart' import { createTooltipData } from 'scenes/insights/views/LineGraph/tooltip-data' +import { trendsDataLogic } from 'scenes/trends/trendsDataLogic' import { ErrorBoundary } from '~/layout/ErrorBoundary' import { themeLogic } from '~/layout/navigation-3000/themeLogic' @@ -290,9 +291,8 @@ export function LineGraph_({ const { getTheme } = useValues(dataThemeLogic) const { insightProps, insight } = useValues(insightLogic) - const { timezone, isTrends, breakdownFilter, resultCustomizations, resultCustomizationBy } = useValues( - insightVizDataLogic(insightProps) - ) + const { timezone, isTrends, breakdownFilter } = useValues(insightVizDataLogic(insightProps)) + const { resultCustomizations, resultCustomizationBy } = useValues(trendsDataLogic(insightProps)) const canvasRef = useRef(null) const [myLineChart, setMyLineChart] = useState>() diff --git a/frontend/src/scenes/trends/trendsDataLogic.ts b/frontend/src/scenes/trends/trendsDataLogic.ts index 847c0d33656..3b3a33083ad 100644 --- a/frontend/src/scenes/trends/trendsDataLogic.ts +++ b/frontend/src/scenes/trends/trendsDataLogic.ts @@ -73,13 +73,7 @@ export const trendsDataLogic = kea([ ], actions: [ insightVizDataLogic(props), - [ - 'setInsightData', - 'updateInsightFilter', - 'updateBreakdownFilter', - 'updateHiddenLegendIndexes', - 'updateResultCustomization', - ], + ['setInsightData', 'updateInsightFilter', 'updateBreakdownFilter', 'updateHiddenLegendIndexes'], ], })), @@ -253,6 +247,7 @@ export const trendsDataLogic = kea([ return trendsFilter?.hiddenLegendIndexes || stickinessFilter?.hiddenLegendIndexes || [] }, ], + resultCustomizations: [(s) => [s.trendsFilter], (trendsFilter) => trendsFilter?.resultCustomizations], })), listeners(({ actions, values }) => ({ diff --git a/posthog/schema.py b/posthog/schema.py index c4900e326db..8707ed52634 100644 --- a/posthog/schema.py +++ b/posthog/schema.py @@ -1648,7 +1648,13 @@ class TrendsFilter(BaseModel): display: Optional[ChartDisplayType] = ChartDisplayType.ACTIONS_LINE_GRAPH formula: Optional[str] = None hiddenLegendIndexes: Optional[list[int]] = None - resultCustomizationBy: Optional[ResultCustomizationBy] = None + resultCustomizationBy: Optional[ResultCustomizationBy] = Field( + default=ResultCustomizationBy.VALUE, + description="Wether result datasets are associated by their values or by their order.", + ) + resultCustomizations: Optional[ + Union[dict[str, ResultCustomizationByValue], dict[str, ResultCustomizationByPosition]] + ] = Field(default=None, description="Customizations for the appearance of result datasets.") showAlertThresholdLines: Optional[bool] = False showLabelsOnSeries: Optional[bool] = None showLegend: Optional[bool] = False @@ -5872,7 +5878,7 @@ class FunnelsFilter(BaseModel): hiddenLegendBreakdowns: Optional[list[str]] = None layout: Optional[FunnelLayout] = FunnelLayout.VERTICAL resultCustomizations: Optional[dict[str, ResultCustomizationByValue]] = Field( - default=None, description="Display configuration for the result datasets." + default=None, description="Customizations for the appearance of result datasets." ) useUdf: Optional[bool] = None @@ -6090,9 +6096,6 @@ class TrendsQuery(BaseModel): ] ] = Field(default=[], description="Property filters for all series") response: Optional[TrendsQueryResponse] = None - resultCustomizations: Optional[ - Union[dict[str, ResultCustomizationByValue], dict[str, ResultCustomizationByPosition]] - ] = Field(default=None, description="Display configuration for the result datasets.") samplingFactor: Optional[float] = Field(default=None, description="Sampling rate") series: list[Union[EventsNode, ActionsNode, DataWarehouseNode]] = Field( ..., description="Events and actions to include"