feat: Display stickiness data as percentages along with count

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

@@ -255,6 +255,17 @@ export function InsightsTable({
 
         const capitalizeFirstLetter = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
 
+        const dataSorter = (a: IndexedTrendResult, b: IndexedTrendResult, index: number): number => {
+            const aValue = a.data[index] ?? NaN
+            const bValue = b.data[index] ?? NaN
+
+            if (isStickiness) {
+                return aValue / a.count - bValue / b.count
+            }
+
+            return aValue - bValue
+        }
+
         return results.map((_, index) => ({
             title: isStickiness ? (
                 `${interval ? capitalizeFirstLetter(interval) : 'Day'} ${index + 1}`
@@ -266,11 +277,11 @@ export function InsightsTable({
                     interval={interval}
                 />
             ),
-            render: (_, item: IndexedTrendResult) => (
-                <ValueColumnItem index={index} item={item} trendsFilter={trendsFilter} />
-            ),
+            render: (_, item: IndexedTrendResult) => {
+                return <ValueColumnItem index={index} item={item} trendsFilter={trendsFilter} />
+            },
             key: `data-${index}`,
-            sorter: (a: IndexedTrendResult, b: IndexedTrendResult) => (a.data[index] ?? NaN) - (b.data[index] ?? NaN),
+            sorter: (a: IndexedTrendResult, b: IndexedTrendResult) => dataSorter(a, b, index),
             align: 'right',
         }))
     }, [indexedResults, trendsFilter, isStickiness, compareFilter?.compare, interval])

frontend/src/scenes/insights/views/InsightsTable/columns/ValueColumn.tsx

@@ -1,7 +1,9 @@
 import { useValues } from 'kea'
 import { DateDisplay } from 'lib/components/DateDisplay'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
+import { insightLogic } from 'scenes/insights/insightLogic'
 import { formatAggregationValue } from 'scenes/insights/utils'
+import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
 import { IndexedTrendResult } from 'scenes/trends/types'
 
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
@@ -36,13 +38,23 @@ type ValueColumnItemProps = {
 
 export function ValueColumnItem({ index, item, trendsFilter }: ValueColumnItemProps): JSX.Element {
     const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)
+    const { insightProps } = useValues(insightLogic)
+    const { isStickiness } = useValues(trendsDataLogic(insightProps))
+    const formattedValue = formatAggregationValue(
+        item.action?.math_property,
+        item.data[index],
+        (value) => formatAggregationAxisValue(trendsFilter as Partial<TrendsFilterType>, value),
+        formatPropertyValueForDisplay
+    )
     return (
         <span>
-            {formatAggregationValue(
-                item.action?.math_property,
-                item.data[index],
-                (value) => formatAggregationAxisValue(trendsFilter as Partial<TrendsFilterType>, value),
-                formatPropertyValueForDisplay
+            {isStickiness ? (
+                <div>
+                    <div>{item.count ? ((item.data[index] / item.count) * 100).toFixed(1) : '0'}%</div>
+                    <div>({formattedValue})</div>
+                </div>
+            ) : (
+                formattedValue
             )}
         </span>
     )

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

@@ -257,6 +257,7 @@ export interface LineGraphProps {
     showValuesOnSeries?: boolean | null
     showPercentStackView?: boolean | null
     supportsPercentStackView?: boolean
+    showPercentView?: boolean | null
     hideAnnotations?: boolean
     hideXAxis?: boolean
     hideYAxis?: boolean
@@ -298,6 +299,7 @@ export function LineGraph_({
     showValuesOnSeries,
     showPercentStackView,
     supportsPercentStackView,
+    showPercentView,
     hideAnnotations,
     hideXAxis,
     hideYAxis,
@@ -306,6 +308,7 @@ export function LineGraph_({
     legend = { display: false },
     goalLines: _goalLines,
 }: LineGraphProps): JSX.Element {
+    const originalDatasets = _datasets
     let datasets = _datasets
 
     const { aggregationLabel } = useValues(groupsModel)
@@ -401,6 +404,12 @@ export function LineGraph_({
             adjustedData = adjustedData.map((value) => (value === 0 ? LOG_ZERO : value))
         }
 
+        // Transform data to percentages if showPercentView is enabled
+        if (showPercentView && Array.isArray(adjustedData)) {
+            const count = dataset.count
+            adjustedData = adjustedData.map((value) => (typeof value === 'number' ? (value / count) * 100 : value))
+        }
+
         // `horizontalBar` colors are set in `ActionsHorizontalBar.tsx` and overridden in spread of `dataset` below
         return {
             borderColor: mainColor,
@@ -448,6 +457,13 @@ export function LineGraph_({
         }
     }
 
+    function formatYAxisTick(value: number | string): string {
+        if (showPercentView) {
+            return `${Number(value).toFixed(1)}%`
+        }
+        return formatPercentStackAxisValue(trendsFilter, value, isPercentStackView)
+    }
+
     function generateYaxesForLineGraph(
         dataSetCount: number,
         seriesNonZeroMin: number,
@@ -468,8 +484,7 @@ export function LineGraph_({
                 ...tickOptions,
                 display: !hideYAxis,
                 ...(yAxisScaleType !== 'log10' && { precision }), // Precision is not supported for the log scale
-                callback: (value: number | string) =>
-                    formatPercentStackAxisValue(trendsFilter, value, isPercentStackView),
+                callback: formatYAxisTick,
                 color: (context: any) => {
                     if (context.tick) {
                         for (const annotation of goalLinesWithColor) {
@@ -492,7 +507,7 @@ export function LineGraph_({
                 )
                 const annotationTicks = goalLines.map((value) => ({
                     value: value.value,
-                    label: `⬤ ${formatPercentStackAxisValue(trendsFilter, value.value, isPercentStackView)}`,
+                    label: `⬤ ${formatYAxisTick(value.value)}`,
                 }))
 
                 // Guarantee that all annotations exist as ticks
@@ -711,6 +726,23 @@ export function LineGraph_({
                                     renderCount={
                                         tooltipConfig?.renderCount ||
                                         ((value: number): string => {
+                                            if (showPercentView) {
+                                                const series = seriesData.find((s) => s.count === value)
+                                                const datasetIndex = series?.datasetIndex
+                                                const dataIndex = series?.dataIndex
+                                                if (datasetIndex !== undefined && dataIndex !== undefined) {
+                                                    const originalDataset = originalDatasets[datasetIndex]
+                                                    const originalValue = originalDataset.data?.[dataIndex]
+
+                                                    if (originalValue !== undefined && originalValue !== null) {
+                                                        return `${value.toFixed(1)}% (${formatAggregationAxisValue(
+                                                            trendsFilter,
+                                                            originalValue
+                                                        )})`
+                                                    }
+                                                }
+                                            }
+
                                             if (!isPercentStackView) {
                                                 return formatAggregationAxisValue(trendsFilter, value)
                                             }

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

@@ -94,6 +94,7 @@ export function ActionsLineGraph({
             trendsFilter={trendsFilter}
             formula={formula}
             showValuesOnSeries={showValuesOnSeries}
+            showPercentView={isStickiness}
             showPercentStackView={showPercentStackView}
             supportsPercentStackView={supportsPercentStackView}
             yAxisScaleType={yAxisScaleType}