feat(insights): add % of total option to line, bar and area trend insights (fixes #13728, #11276)

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

@@ -16,6 +16,7 @@ import { ChartFilter } from 'lib/components/ChartFilter'
 import { FunnelDisplayLayoutPicker } from 'scenes/insights/views/Funnels/FunnelDisplayLayoutPicker'
 import { FunnelBinsPicker } from 'scenes/insights/views/Funnels/FunnelBinsPicker'
 import { ValueOnSeriesFilter } from 'scenes/insights/EditorFilters/ValueOnSeriesFilter'
+import { PercentStackView } from 'scenes/insights/EditorFilters/PercentStackView'
 
 interface InsightDisplayConfigProps {
     disableTable: boolean
@@ -28,6 +29,7 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
         disableDateRange,
         showCompare,
         showValueOnSeries,
+        showPercentStackView,
         showUnit,
         showChart,
         showInterval,
@@ -83,6 +85,12 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
                         <ValueOnSeriesFilter />
                     </ConfigFilter>
                 )}
+
+                {showPercentStackView && (
+                    <ConfigFilter>
+                        <PercentStackView />
+                    </ConfigFilter>
+                )}
             </div>
             <div className="flex items-center space-x-4 flex-wrap my-2 grow justify-end">
                 {showUnit && (

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

@@ -59,6 +59,18 @@ export const insightDisplayConfigLogic = kea<insightDisplayConfigLogicType>([
                 }
             },
         ],
+        showPercentStackView: [
+            (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.display],
+            (isTrends, isStickiness, isLifecycle, display) => {
+                if (isTrends || isStickiness) {
+                    return display === ChartDisplayType.ActionsBar
+                } else if (isLifecycle) {
+                    return true
+                } else {
+                    return false
+                }
+            },
+        ],
         showUnit: [(s) => [s.supportsDisplay, s.isTrends], (supportsDisplay, isTrends) => supportsDisplay && isTrends],
         showChart: [(s) => [s.supportsDisplay], (supportsDisplay) => supportsDisplay],
         showInterval: [

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

@@ -106,6 +106,18 @@ export const getShowValueOnSeries = (query: InsightQueryNode): boolean | undefin
     }
 }
 
+export const getShowPercentStackView = (query: InsightQueryNode): boolean | undefined => {
+    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
+    }
+}
+
 export const getCachedResults = (
     cachedInsight: Partial<InsightModel> | undefined | null,
     query: InsightQueryNode

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

@@ -0,0 +1,20 @@
+import { useActions, useValues } from 'kea'
+import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
+import { insightLogic } from '../insightLogic'
+import { percentStackViewLogic } from './percentStackViewLogic'
+
+export function PercentStackView(): JSX.Element {
+    const { insightProps } = useValues(insightLogic)
+    const { showPercentStackView } = useValues(percentStackViewLogic(insightProps))
+    const { setShowPercentStackView } = useActions(percentStackViewLogic(insightProps))
+
+    return (
+        <LemonCheckbox
+            checked={showPercentStackView}
+            onChange={setShowPercentStackView}
+            label={<span className="font-normal">Show 100% Stacked</span>}
+            bordered
+            size="small"
+        />
+    )
+}

frontend/src/scenes/insights/EditorFilters/percentStackViewLogic.ts

@@ -0,0 +1,39 @@
+import { actions, connect, kea, key, listeners, path, props, selectors } from 'kea'
+import { InsightLogicProps, TrendsFilterType } from '~/types'
+import { insightVizDataLogic } from '../insightVizDataLogic'
+import { keyForInsightLogicProps } from '../sharedUtils'
+
+import type { percentStackViewLogicType } from './percentStackViewLogicType'
+
+export const percentStackViewLogic = kea<percentStackViewLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    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 })
+        },
+    })),
+])

frontend/src/scenes/insights/insightVizDataLogic.ts

@@ -37,6 +37,7 @@ import {
     getInterval,
     getSeries,
     getShownAs,
+    getShowPercentStackView,
     getShowValueOnSeries,
 } from '~/queries/nodes/InsightViz/utils'
 import { DISPLAY_TYPES_WITHOUT_LEGEND } from 'lib/components/InsightLegend/utils'
@@ -116,6 +117,7 @@ export const insightVizDataLogic = kea<insightVizDataLogicType>([
         samplingFactor: [(s) => [s.querySource], (q) => (q ? q.samplingFactor : null)],
         shownAs: [(s) => [s.querySource], (q) => (q ? getShownAs(q) : null)],
         showValueOnSeries: [(s) => [s.querySource], (q) => (q ? getShowValueOnSeries(q) : null)],
+        showPercentStackView: [(s) => [s.querySource], (q) => (q ? getShowPercentStackView(q) : undefined)],
 
         insightFilter: [(s) => [s.querySource], (q) => (q ? filterForQuery(q) : null)],
         trendsFilter: [(s) => [s.querySource], (q) => (isTrendsQuery(q) ? q.trendsFilter : null)],

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

@@ -35,6 +35,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { SeriesLetter } from 'lib/components/SeriesGlyph'
 import { TrendsFilter } from '~/queries/schema'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import ChartjsPluginStacked100 from 'chartjs-plugin-stacked100'
 
 export function ensureTooltipElement(): HTMLElement {
     let tooltipEl = document.getElementById('InsightTooltipWrapper')
@@ -211,6 +212,7 @@ export interface LineGraphProps {
     formula?: string | null
     compare?: boolean | null
     showValueOnSeries?: boolean | null
+    showPercentStackView?: boolean
 }
 
 export const LineGraph = (props: LineGraphProps): JSX.Element => {
@@ -239,6 +241,7 @@ export function LineGraph_({
     trendsFilter,
     formula,
     showValueOnSeries,
+    showPercentStackView,
 }: LineGraphProps): JSX.Element {
     let datasets = _datasets
 
@@ -371,6 +374,7 @@ export function LineGraph_({
                 },
             },
             plugins: {
+                stacked100: { enable: showPercentStackView && type === GraphType.Bar, precision: 1 },
                 datalabels: {
                     color: 'white',
                     anchor: (context) => {
@@ -614,7 +618,7 @@ export function LineGraph_({
             }
             options.indexAxis = 'y'
         }
-
+        Chart.register(ChartjsPluginStacked100)
         const newChart = new Chart(canvasRef.current?.getContext('2d') as ChartItem, {
             type: (isBar ? GraphType.Bar : type) as ChartType,
             data: { labels, datasets },

frontend/src/scenes/trends/trendsDataLogic.ts

@@ -27,6 +27,7 @@ export const trendsDataLogic = kea<trendsDataLogicType>([
                 'breakdown',
                 'shownAs',
                 'showValueOnSeries',
+                'showPercentStackView',
                 'trendsFilter',
                 'lifecycleFilter',
                 'isTrends',

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

@@ -26,6 +26,7 @@ export function ActionsLineGraph({
         interval,
         shownAs,
         showValueOnSeries,
+        showPercentStackView,
         trendsFilter,
         isLifecycle,
         isStickiness,
@@ -46,6 +47,7 @@ export function ActionsLineGraph({
             trendsFilter={trendsFilter}
             formula={formula}
             showValueOnSeries={showValueOnSeries}
+            showPercentStackView={showPercentStackView}
             tooltip={
                 isLifecycle
                     ? {

frontend/src/types.ts

@@ -1654,6 +1654,7 @@ export interface TrendsFilterType extends FilterType {
     shown_as?: ShownAsValue
     display?: ChartDisplayType
     show_values_on_series?: boolean
+    show_percent_stack_view?: boolean
     breakdown_histogram_bin_count?: number // trends breakdown histogram bin count
 }
 export interface StickinessFilterType extends FilterType {
@@ -1664,6 +1665,7 @@ 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
@@ -1720,6 +1722,7 @@ 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[]
 }
 

package.json

@@ -92,6 +92,7 @@
         "chartjs-adapter-dayjs-3": "^1.2.3",
         "chartjs-plugin-crosshair": "^1.2.0",
         "chartjs-plugin-datalabels": "^2.2.0",
+        "chartjs-plugin-stacked100": "^1.4.0",
         "chokidar": "^3.5.3",
         "clsx": "^1.1.1",
         "core-js": "3.15.2",