feat: Improved Legend for Lifecycle charts (#21915)

frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts

@@ -433,6 +433,7 @@ export const stickinessFilterToQuery = (filters: Record<string, any>): Stickines
 
 export const lifecycleFilterToQuery = (filters: Record<string, any>): LifecycleFilter => {
     return objectCleanWithEmpty({
+        showLegend: filters.show_legend,
         toggledLifecycles: filters.toggledLifecycles,
         showValuesOnSeries: filters.show_values_on_series,
     })

frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts

@@ -295,6 +295,8 @@ export const queryNodeToFilter = (query: InsightQueryNode): Partial<FilterType>
         delete queryCopy.stickinessFilter?.showValuesOnSeries
     } else if (isLifecycleQuery(queryCopy)) {
         camelCasedLifecycleProps.show_values_on_series = queryCopy.lifecycleFilter?.showValuesOnSeries
+        camelCasedLifecycleProps.show_legend = queryCopy.lifecycleFilter?.showLegend
+        delete queryCopy.lifecycleFilter?.showLegend
         delete queryCopy.lifecycleFilter?.showValuesOnSeries
     }
     Object.assign(filters, camelCasedTrendsProps)

frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx

@@ -63,7 +63,7 @@ export function InsightDisplayConfig(): JSX.Element {
         !trendsFilter?.compare &&
         (!display || display === ChartDisplayType.ActionsLineGraph)
 
-    const { showValueOnSeries, mightContainFractionalNumbers } = useValues(trendsDataLogic(insightProps))
+    const { showValuesOnSeries, mightContainFractionalNumbers } = useValues(trendsDataLogic(insightProps))
 
     const advancedOptions: LemonMenuItems = [
         ...(supportsValueOnSeries || supportsPercentStackView || hasLegend
@@ -96,7 +96,7 @@ export function InsightDisplayConfig(): JSX.Element {
             : []),
     ]
     const advancedOptionsCount: number =
-        (supportsValueOnSeries && showValueOnSeries ? 1 : 0) +
+        (supportsValueOnSeries && showValuesOnSeries ? 1 : 0) +
         (showPercentStackView ? 1 : 0) +
         (!showPercentStackView &&
         isTrends &&

frontend/src/queries/nodes/InsightViz/utils.ts

@@ -89,11 +89,13 @@ export const getShowLegend = (query: InsightQueryNode): boolean | undefined => {
         return query.stickinessFilter?.showLegend
     } else if (isTrendsQuery(query)) {
         return query.trendsFilter?.showLegend
+    } else if (isLifecycleQuery(query)) {
+        return query.lifecycleFilter?.showLegend
     }
     return undefined
 }
 
-export const getShowValueOnSeries = (query: InsightQueryNode): boolean | undefined => {
+export const getShowValuesOnSeries = (query: InsightQueryNode): boolean | undefined => {
     if (isLifecycleQuery(query)) {
         return query.lifecycleFilter?.showValuesOnSeries
     } else if (isStickinessQuery(query)) {

frontend/src/queries/schema.json

@@ -3179,6 +3179,9 @@
         "LifecycleFilter": {
             "additionalProperties": false,
             "properties": {
+                "showLegend": {
+                    "type": "boolean"
+                },
                 "showValuesOnSeries": {
                     "type": "boolean"
                 },
@@ -3195,6 +3198,9 @@
             "additionalProperties": false,
             "description": "`LifecycleFilterType` minus everything inherited from `FilterType`",
             "properties": {
+                "show_legend": {
+                    "type": "boolean"
+                },
                 "show_values_on_series": {
                     "type": "boolean"
                 },

frontend/src/queries/schema.ts

@@ -860,6 +860,7 @@ export type LifecycleFilterLegacy = Omit<LifecycleFilterType, keyof FilterType |
 export type LifecycleFilter = {
     showValuesOnSeries?: LifecycleFilterLegacy['show_values_on_series']
     toggledLifecycles?: LifecycleFilterLegacy['toggledLifecycles']
+    showLegend?: LifecycleFilterLegacy['show_legend']
 }
 
 export interface QueryRequest {

frontend/src/scenes/insights/EditorFilters/ValueOnSeriesFilter.tsx

@@ -6,15 +6,15 @@ import { insightLogic } from '../insightLogic'
 
 export function ValueOnSeriesFilter(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
-    const { valueOnSeries } = useValues(insightVizDataLogic(insightProps))
     const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
+    const { showValuesOnSeries } = useValues(insightVizDataLogic(insightProps))
 
     return (
         <LemonCheckbox
             className="p-1 px-2"
-            checked={valueOnSeries}
-            onChange={(checked) => {
-                updateInsightFilter({ showValuesOnSeries: checked })
+            checked={!!showValuesOnSeries}
+            onChange={() => {
+                updateInsightFilter({ showValuesOnSeries: !showValuesOnSeries })
             }}
             label={<span className="font-normal">Show values on series</span>}
             size="small"

frontend/src/scenes/insights/InsightNav/insightNavLogic.tsx

@@ -10,7 +10,7 @@ import { filterTestAccountsDefaultsLogic } from 'scenes/settings/project/filterT
 
 import { examples, TotalEventsTable } from '~/queries/examples'
 import { insightMap } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
-import { getDisplay, getShowPercentStackView, getShowValueOnSeries } from '~/queries/nodes/InsightViz/utils'
+import { getDisplay, getShowPercentStackView, getShowValuesOnSeries } from '~/queries/nodes/InsightViz/utils'
 import {
     ActionsNode,
     DataWarehouseNode,
@@ -87,10 +87,9 @@ const cleanSeriesEntityMath = (
     } else if (mathAvailability === MathAvailability.ActorsOnly) {
         // return entity with default actors only availability math set
         return { ...baseEntity, math: BaseMathType.UniqueUsers }
-    } else {
-        // return entity without math properties for insights that don't support it
-        return baseEntity
     }
+    // return entity without math properties for insights that don't support it
+    return baseEntity
 }
 
 const cleanSeriesMath = (
@@ -154,15 +153,12 @@ export const insightNavLogic = kea<insightNavLogicType>([
                             return InsightType.SQL
                         } else if (isInsightVizNode(query)) {
                             return insightMap[query.source.kind] || InsightType.TRENDS
-                        } else {
-                            return InsightType.JSON
                         }
-                    } else {
-                        return filters.insight || InsightType.TRENDS
+                        return InsightType.JSON
                     }
-                } else {
-                    return userSelectedView
+                    return filters.insight || InsightType.TRENDS
                 }
+                return userSelectedView
             },
         ],
         tabs: [
@@ -401,7 +397,7 @@ const mergeCachedProperties = (query: InsightQueryNode, cache: QueryPropertyCach
             // TODO: fix an issue where switching between trends and funnels with the option enabled would
             // result in an error before uncommenting
             // ...(getCompare(node) ? { compare: getCompare(node) } : {}),
-            ...(getShowValueOnSeries(node) ? { showValuesOnSeries: getShowValueOnSeries(node) } : {}),
+            ...(getShowValuesOnSeries(node) ? { showValuesOnSeries: getShowValuesOnSeries(node) } : {}),
             ...(getShowPercentStackView(node) ? { showPercentStackView: getShowPercentStackView(node) } : {}),
             ...(getDisplay(node) ? { display: getDisplay(node) } : {}),
         }

frontend/src/scenes/insights/insightVizDataLogic.ts

@@ -29,7 +29,7 @@ import {
     getShowLabelsOnSeries,
     getShowLegend,
     getShowPercentStackView,
-    getShowValueOnSeries,
+    getShowValuesOnSeries,
 } from '~/queries/nodes/InsightViz/utils'
 import {
     BreakdownFilter,
@@ -166,7 +166,7 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
         properties: [(s) => [s.querySource], (q) => (q ? q.properties : null)],
         samplingFactor: [(s) => [s.querySource], (q) => (q ? q.samplingFactor : null)],
         showLegend: [(s) => [s.querySource], (q) => (q ? getShowLegend(q) : null)],
-        showValueOnSeries: [(s) => [s.querySource], (q) => (q ? getShowValueOnSeries(q) : null)],
+        showValuesOnSeries: [(s) => [s.querySource], (q) => (q ? getShowValuesOnSeries(q) : null)],
         showLabelOnSeries: [(s) => [s.querySource], (q) => (q ? getShowLabelsOnSeries(q) : null)],
         showPercentStackView: [(s) => [s.querySource], (q) => (q ? getShowPercentStackView(q) : null)],
         vizSpecificOptions: [(s) => [s.query], (q: Node) => (isInsightVizNode(q) ? q.vizSpecificOptions : null)],
@@ -270,10 +270,10 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
         ],
 
         hasLegend: [
-            (s) => [s.isTrends, s.isStickiness, s.display],
-            (isTrends, isStickiness, display) =>
-                (isTrends || isStickiness) &&
-                !DISPLAY_TYPES_WITHOUT_LEGEND.includes(display || ChartDisplayType.ActionsLineGraph),
+            (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.display],
+            (isTrends, isStickiness, isLifecycle, display) =>
+                (isTrends || isStickiness || isLifecycle) &&
+                !(display && DISPLAY_TYPES_WITHOUT_LEGEND.includes(display)),
         ],
 
         hasFormula: [(s) => [s.formula], (formula) => formula !== undefined],

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -1,5 +1,7 @@
 import 'chartjs-adapter-dayjs-3'
 
+import { LegendOptions } from 'chart.js'
+import { _DeepPartialObject } from 'chart.js/types/utils'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
 import clsx from 'clsx'
@@ -62,9 +64,8 @@ export function ensureTooltip(): [Root, HTMLElement] {
 function truncateString(str: string, num: number): string {
     if (str.length > num) {
         return str.slice(0, num) + ' ...'
-    } else {
-        return str
     }
+    return str
 }
 
 export function onChartClick(
@@ -230,12 +231,13 @@ export interface LineGraphProps {
     trendsFilter?: TrendsFilter | null
     formula?: string | null
     compare?: boolean | null
-    showValueOnSeries?: boolean | null
+    showValuesOnSeries?: boolean | null
     showPercentStackView?: boolean | null
     supportsPercentStackView?: boolean
     hideAnnotations?: boolean
     hideXAxis?: boolean
     hideYAxis?: boolean
+    legend?: _DeepPartialObject<LegendOptions<ChartType>>
 }
 
 export const LineGraph = (props: LineGraphProps): JSX.Element => {
@@ -263,12 +265,13 @@ export function LineGraph_({
     labelGroupType,
     trendsFilter,
     formula,
-    showValueOnSeries,
+    showValuesOnSeries,
     showPercentStackView,
     supportsPercentStackView,
     hideAnnotations,
     hideXAxis,
     hideYAxis,
+    legend,
 }: LineGraphProps): JSX.Element {
     let datasets = _datasets
 
@@ -422,10 +425,10 @@ export function LineGraph_({
                     },
                     display: (context) => {
                         const datum = context.dataset.data[context.dataIndex]
-                        if (showValueOnSeries && inSurveyView) {
+                        if (showValuesOnSeries && inSurveyView) {
                             return true
                         }
-                        return showValueOnSeries === true && typeof datum === 'number' && datum !== 0 ? 'auto' : false
+                        return showValuesOnSeries === true && typeof datum === 'number' && datum !== 0 ? 'auto' : false
                     },
                     formatter: (value: number, context) => {
                         const data = context.chart.data as ExtendedChartData
@@ -437,9 +440,7 @@ export function LineGraph_({
                     borderRadius: 4,
                     borderColor: 'white',
                 },
-                legend: {
-                    display: false,
-                },
+                legend: legend,
                 tooltip: {
                     ...tooltipOptions,
                     external({ tooltip }: { chart: Chart; tooltip: TooltipModel<ChartType> }) {
@@ -739,7 +740,7 @@ export function LineGraph_({
         })
         setMyLineChart(newChart)
         return () => newChart.destroy()
-    }, [datasets, hiddenLegendKeys, isDarkModeOn, trendsFilter, formula, showValueOnSeries, showPercentStackView])
+    }, [datasets, hiddenLegendKeys, isDarkModeOn, trendsFilter, formula, showValuesOnSeries, showPercentStackView])
 
     return (
         <div className={clsx('LineGraph w-full grow relative overflow-hidden')} data-attr={dataAttr}>

frontend/src/scenes/insights/views/LineGraph/PieChart.tsx

@@ -66,7 +66,7 @@ export function PieChart({
     ['data-attr']: dataAttr,
     trendsFilter,
     formula,
-    showValueOnSeries,
+    showValuesOnSeries,
     showLabelOnSeries,
     supportsPercentStackView,
     showPercentStackView,
@@ -145,7 +145,7 @@ export function PieChart({
                         },
                         display: (context) => {
                             const percentage = getPercentageForDataPoint(context)
-                            const showValueForSeries = showValueOnSeries !== false && context.dataset.data.length > 1 // show if true or unset
+                            const showValueForSeries = showValuesOnSeries !== false && context.dataset.data.length > 1 // show if true or unset
                             return (showValueForSeries || showLabelOnSeries) && percentage > 5 ? 'auto' : false
                         },
                         padding: (context) => {

frontend/src/scenes/surveys/surveyViewViz.tsx

@@ -206,7 +206,7 @@ export function RatingQuestionBarChart({
                                 <LineGraph
                                     inSurveyView={true}
                                     hideYAxis={true}
-                                    showValueOnSeries={true}
+                                    showValuesOnSeries={true}
                                     labelGroupType={1}
                                     data-attr="survey-rating"
                                     type={GraphType.Bar}
@@ -334,9 +334,8 @@ export function SingleChoiceQuestionPieChart({
                                     return 'py-15'
                                 } else if (dataLength < 10) {
                                     return 'py-10'
-                                } else {
-                                    return 'py-5'
                                 }
+                                return 'py-5'
                             })()} grid-cols-${Math.ceil(surveySingleChoiceResults[questionIndex].data.length / 10)}`}
                         >
                             {surveySingleChoiceResults[questionIndex].data.map((count: number, i: number) => {
@@ -417,7 +416,7 @@ export function MultipleChoiceQuestionBarChart({
                                 inSurveyView={true}
                                 hideYAxis={true}
                                 hideXAxis={true}
-                                showValueOnSeries={true}
+                                showValuesOnSeries={true}
                                 labelGroupType={1}
                                 data-attr="survey-multiple-choice"
                                 type={GraphType.HorizontalBar}

frontend/src/scenes/trends/trendsDataLogic.ts

@@ -52,7 +52,7 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
                 'compare',
                 'interval',
                 'breakdownFilter',
-                'showValueOnSeries',
+                'showValuesOnSeries',
                 'showLabelOnSeries',
                 'showPercentStackView',
                 'supportsPercentStackView',
@@ -65,6 +65,7 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
                 'isNonTimeSeriesDisplay',
                 'isSingleSeries',
                 'hasLegend',
+                'showLegend',
                 'vizSpecificOptions',
             ],
         ],

frontend/src/scenes/trends/viz/ActionsHorizontalBar.tsx

@@ -32,7 +32,7 @@ export function ActionsHorizontalBar({ showPersonsModal = true }: ChartParams):
     const { insightProps, hiddenLegendKeys } = useValues(insightLogic)
     const { featureFlags } = useValues(featureFlagLogic)
     const { isTrends, query } = useValues(insightVizDataLogic(insightProps))
-    const { indexedResults, labelGroupType, trendsFilter, formula, showValueOnSeries, isDataWarehouseSeries } =
+    const { indexedResults, labelGroupType, trendsFilter, formula, showValuesOnSeries, isDataWarehouseSeries } =
         useValues(trendsDataLogic(insightProps))
 
     function updateData(): void {
@@ -95,7 +95,7 @@ export function ActionsHorizontalBar({ showPersonsModal = true }: ChartParams):
             showPersonsModal={showPersonsModal}
             trendsFilter={trendsFilter}
             formula={formula}
-            showValueOnSeries={showValueOnSeries}
+            showValuesOnSeries={showValuesOnSeries}
             onClick={
                 !showPersonsModal || trendsFilter?.formula || isDataWarehouseSeries
                     ? undefined