-
- <>
-
+
{series.name ? series.name : '[No value]'}
{/* For now let's keep things simple and not allow too much configuration */}
diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
index ab8b30abc4f5e..67e7f9e7d8dc4 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -1,4 +1,5 @@
-import { LemonButton, LemonInput } from '@posthog/lemon-ui'
+import { IconInfo } from '@posthog/icons'
+import { LemonButton, LemonInput, Tooltip } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { ChartFilter } from 'lib/components/ChartFilter'
import { CompareFilter } from 'lib/components/CompareFilter/CompareFilter'
@@ -13,6 +14,7 @@ import { ReactNode } from 'react'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
import { axisLabel } from 'scenes/insights/aggregationAxisFormat'
import { PercentStackViewFilter } from 'scenes/insights/EditorFilters/PercentStackViewFilter'
+import { ResultCustomizationByPicker } from 'scenes/insights/EditorFilters/ResultCustomizationByPicker'
import { ScalePicker } from 'scenes/insights/EditorFilters/ScalePicker'
import { ShowAlertThresholdLinesFilter } from 'scenes/insights/EditorFilters/ShowAlertThresholdLinesFilter'
import { ShowLegendFilter } from 'scenes/insights/EditorFilters/ShowLegendFilter'
@@ -30,6 +32,7 @@ import { PathStepPicker } from 'scenes/insights/views/Paths/PathStepPicker'
import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
import { useDebouncedCallback } from 'use-debounce'
+import { resultCustomizationsModalLogic } from '~/queries/nodes/InsightViz/resultCustomizationsModalLogic'
import { isValidBreakdown } from '~/queries/utils'
import { ChartDisplayType } from '~/types'
@@ -52,6 +55,7 @@ export function InsightDisplayConfig(): JSX.Element {
supportsValueOnSeries,
showPercentStackView,
supportsPercentStackView,
+ supportsResultCustomizationBy,
yAxisScaleType,
isNonTimeSeriesDisplay,
compareFilter,
@@ -60,6 +64,7 @@ export function InsightDisplayConfig(): JSX.Element {
const { isTrendsFunnel, isStepsFunnel, isTimeToConvertFunnel, isEmptyFunnel } = useValues(
funnelDataLogic(insightProps)
)
+ const { hasInsightColors } = useValues(resultCustomizationsModalLogic(insightProps))
const { updateCompareFilter } = useActions(insightVizDataLogic(insightProps))
@@ -74,7 +79,7 @@ export function InsightDisplayConfig(): JSX.Element {
const { showValuesOnSeries, mightContainFractionalNumbers } = useValues(trendsDataLogic(insightProps))
const advancedOptions: LemonMenuItems = [
- ...(supportsValueOnSeries || supportsPercentStackView || hasLegend
+ ...(supportsValueOnSeries || supportsPercentStackView || hasLegend || supportsResultCustomizationBy
? [
{
title: 'Display',
@@ -87,6 +92,23 @@ export function InsightDisplayConfig(): JSX.Element {
},
]
: []),
+ ...(supportsResultCustomizationBy && hasInsightColors
+ ? [
+ {
+ title: (
+ <>
+
+ Color customization by{' '}
+
+
+
+
+
+ ),
+ items: [{ label: () =>
}],
+ },
+ ]
+ : []),
...(!showPercentStackView && isTrends
? [
{
diff --git a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
index 69a30e9e727f8..6f6531a3669ac 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
@@ -32,6 +32,7 @@ import { ExporterFormat, FunnelVizType, InsightType, ItemMode } from '~/types'
import { InsightDisplayConfig } from './InsightDisplayConfig'
import { InsightResultMetadata } from './InsightResultMetadata'
+import { ResultCustomizationsModal } from './ResultCustomizationsModal'
export function InsightVizDisplay({
disableHeader,
@@ -55,13 +56,13 @@ export function InsightVizDisplay({
context?: QueryContext
embedded: boolean
inSharedMode?: boolean
-}): JSX.Element {
+}): JSX.Element | null {
const { insightProps, canEditInsight } = useValues(insightLogic)
const { activeView } = useValues(insightNavLogic(insightProps))
const { hasFunnelResults } = useValues(funnelDataLogic(insightProps))
- const { isFunnelWithEnoughSteps, validationError } = useValues(insightVizDataLogic(insightProps))
+ const { isFunnelWithEnoughSteps, validationError, theme } = useValues(insightVizDataLogic(insightProps))
const {
isFunnels,
isPaths,
@@ -218,6 +219,10 @@ export function InsightVizDisplay({
const showComputationMetadata = !disableLastComputation || !!samplingFactor
+ if (!theme) {
+ return null
+ }
+
return (
<>
{/* These are filters that are reused between insight features. They each have generic logic that updates the url */}
@@ -265,12 +270,13 @@ export function InsightVizDisplay({
) : (
- renderActiveView()
+ <>{renderActiveView()}
)}