PR comment related changes

PostHog · Jul 26, 2023 · d60f811 · d60f811
1 parent 60a247a
commit d60f811
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 36 deletions.
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -19,11 +19,14 @@ export const NON_VALUES_ON_SERIES_DISPLAY_TYPES = [
     ChartDisplayType.WorldMap,
     ChartDisplayType.BoldNumber,
 ]
+
+/** Display types for which a percent stack view is available. */
 export const PERCENT_STACK_VIEW_DISPLAY_TYPE = [
     ChartDisplayType.ActionsBar,
     ChartDisplayType.ActionsLineGraph,
     ChartDisplayType.ActionsAreaGraph,
 ]
+
 export enum OrganizationMembershipLevel {
     Member = 1,
     Admin = 8,

diff --git a/frontend/src/queries/nodes/InsightViz/insightDisplayConfigLogic.ts b/frontend/src/queries/nodes/InsightViz/insightDisplayConfigLogic.ts
@@ -65,9 +65,9 @@ export const insightDisplayConfigLogic = kea<insightDisplayConfigLogicType>([
             },
         ],
         showPercentStackView: [
-            (s) => [s.isTrends, s.isLifecycle, s.display],
-            (isTrends, isLifecycle, display) =>
-                isTrends && display ? PERCENT_STACK_VIEW_DISPLAY_TYPE.includes(display) : isLifecycle,
+            (s) => [s.isTrends, s.display],
+            (isTrends, display) =>
+                isTrends && PERCENT_STACK_VIEW_DISPLAY_TYPE.includes(display || ChartDisplayType.ActionsLineGraph),
         ],
         showUnit: [(s) => [s.supportsDisplay, s.isTrends], (supportsDisplay, isTrends) => supportsDisplay && isTrends],
         showChart: [(s) => [s.supportsDisplay], (supportsDisplay) => supportsDisplay],

diff --git a/frontend/src/queries/nodes/InsightViz/utils.ts b/frontend/src/queries/nodes/InsightViz/utils.ts
@@ -107,19 +107,11 @@ export const getShowValueOnSeries = (query: InsightQueryNode): boolean | undefin
 }
 
 export const getShowPercentStackView = (query: InsightQueryNode): boolean | undefined => {
-    if (PERCENT_STACK_VIEW_DISPLAY_TYPE.includes(getDisplay(query) as ChartDisplayType)) {
-        if (isLifecycleQuery(query)) {
-            return query.lifecycleFilter?.show_percent_stack_view
-        } else if (isStickinessQuery(query)) {
-            return query.stickinessFilter?.show_percent_stack_view
-        } else if (isTrendsQuery(query)) {
-            return query.trendsFilter?.show_percent_stack_view
-        } else {
-            return undefined
-        }
-    } else {
-        return undefined
-    }
+    return PERCENT_STACK_VIEW_DISPLAY_TYPE.includes(
+        getDisplay(query) || (ChartDisplayType.ActionsLineGraph as ChartDisplayType)
+    ) && isTrendsQuery(query)
+        ? query.trendsFilter?.show_percent_stack_view
+        : undefined
 }
 
 export const getCachedResults = (

diff --git a/frontend/src/scenes/insights/EditorFilters/PercentStackView.tsx b/frontend/src/scenes/insights/EditorFilters/PercentStackView.tsx
@@ -2,10 +2,11 @@ import { useActions, useValues } from 'kea'
 import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
 import { insightLogic } from '../insightLogic'
 import { percentStackViewLogic } from './percentStackViewLogic'
+import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
 
 export function PercentStackView(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
-    const { showPercentStackView } = useValues(percentStackViewLogic(insightProps))
+    const { showPercentStackView } = useValues(trendsDataLogic(insightProps))
     const { setShowPercentStackView } = useActions(percentStackViewLogic(insightProps))
 
     return (

diff --git a/frontend/src/scenes/insights/EditorFilters/percentStackViewLogic.ts b/frontend/src/scenes/insights/EditorFilters/percentStackViewLogic.ts
@@ -1,5 +1,5 @@
-import { actions, connect, kea, key, listeners, path, props, selectors } from 'kea'
-import { InsightLogicProps, TrendsFilterType } from '~/types'
+import { actions, connect, kea, key, listeners, path, props } from 'kea'
+import { InsightLogicProps } from '~/types'
 import { insightVizDataLogic } from '../insightVizDataLogic'
 import { keyForInsightLogicProps } from '../sharedUtils'
 
@@ -11,26 +11,13 @@ export const percentStackViewLogic = kea<percentStackViewLogicType>([
     path((key) => ['scenes', 'insights', 'EditorFilters', 'percentStackViewLogic', key]),
 
     connect((props: InsightLogicProps) => ({
-        values: [insightVizDataLogic(props), ['isTrends', 'isStickiness', 'isLifecycle', 'insightFilter']],
         actions: [insightVizDataLogic(props), ['updateInsightFilter']],
     })),
 
     actions({
         setShowPercentStackView: (checked: boolean) => ({ checked }),
     }),
 
-    selectors({
-        showPercentStackView: [
-            (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.insightFilter],
-            (isTrends, isStickiness, isLifecycle, insightFilter) => {
-                return !!(
-                    (isTrends || isStickiness || isLifecycle) &&
-                    (insightFilter as TrendsFilterType)?.show_percent_stack_view
-                )
-            },
-        ],
-    }),
-
     listeners(({ actions }) => ({
         setShowPercentStackView: ({ checked }) => {
             actions.updateInsightFilter({ show_percent_stack_view: checked })

diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -391,8 +391,9 @@ export function LineGraph_({
                     formatter: (value: number, context) => {
                         const data = context.chart.data as ExtendedChartData
                         const { datasetIndex, dataIndex } = context
-                        if (showPercentStackView) {
-                            return `${data.calculatedData?.[datasetIndex][dataIndex]}%`
+                        const percentageValue = data.calculatedData?.[datasetIndex][dataIndex]
+                        if (showPercentStackView && percentageValue) {
+                            return formatYAxisLabel(trendsFilter, percentageValue)
                         }
                         return formatAggregationAxisValue(trendsFilter, value)
                     },

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -1665,7 +1665,6 @@ export interface StickinessFilterType extends FilterType {
     shown_as?: ShownAsValue
     display?: ChartDisplayType
     show_values_on_series?: boolean
-    show_percent_stack_view?: boolean
 }
 export interface FunnelsFilterType extends FilterType {
     funnel_viz_type?: FunnelVizType // parameter sent to funnels API for time conversion code path
@@ -1722,7 +1721,6 @@ export interface RetentionFilterType extends FilterType {
 export interface LifecycleFilterType extends FilterType {
     shown_as?: ShownAsValue
     show_values_on_series?: boolean
-    show_percent_stack_view?: boolean
     toggledLifecycles?: LifecycleToggle[]
 }