feat(bi): Added stacked bar charts

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -82,6 +82,10 @@ const displayMap: Record<
         className: 'bar',
         element: ActionsHorizontalBar,
     },
+    ActionsStackedBar: {
+        className: 'bar',
+        element: ActionsLineGraph,
+    },
     ActionsTable: {
         className: 'table',
         element: DashboardInsightsTable,

frontend/src/lib/constants.tsx

@@ -6,6 +6,7 @@ import { ChartDisplayCategory, ChartDisplayType, Region, SSOProvider } from '../
 export const DISPLAY_TYPES_TO_CATEGORIES: Record<ChartDisplayType, ChartDisplayCategory> = {
     [ChartDisplayType.ActionsLineGraph]: ChartDisplayCategory.TimeSeries,
     [ChartDisplayType.ActionsBar]: ChartDisplayCategory.TimeSeries,
+    [ChartDisplayType.ActionsStackedBar]: ChartDisplayCategory.TimeSeries,
     [ChartDisplayType.ActionsAreaGraph]: ChartDisplayCategory.TimeSeries,
     [ChartDisplayType.ActionsLineGraphCumulative]: ChartDisplayCategory.CumulativeTimeSeries,
     [ChartDisplayType.BoldNumber]: ChartDisplayCategory.TotalValue,

frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx

@@ -32,7 +32,9 @@ export const LineGraph = (): JSX.Element => {
     // TODO: Extract this logic out of this component and inject values in
     // via props. Make this a purely presentational component
     const { xData, yData, presetChartHeight, visualizationType, showEditingUI } = useValues(dataVisualizationLogic)
-    const isBarChart = visualizationType === ChartDisplayType.ActionsBar
+    const isBarChart =
+        visualizationType === ChartDisplayType.ActionsBar || visualizationType === ChartDisplayType.ActionsStackedBar
+    const isStackedBarChart = visualizationType === ChartDisplayType.ActionsStackedBar
     const isAreaChart = visualizationType === ChartDisplayType.ActionsAreaGraph
 
     const { goalLines } = useValues(displayLogic)
@@ -243,6 +245,7 @@ export const LineGraph = (): JSX.Element => {
                 x: {
                     display: true,
                     beginAtZero: true,
+                    stacked: isStackedBarChart,
                     ticks: tickOptions,
                     grid: {
                         ...gridOptions,
@@ -253,7 +256,7 @@ export const LineGraph = (): JSX.Element => {
                 y: {
                     display: true,
                     beginAtZero: true,
-                    stacked: isAreaChart,
+                    stacked: isAreaChart || isStackedBarChart,
                     ticks: {
                         display: true,
                         ...tickOptions,

frontend/src/queries/nodes/DataVisualization/Components/TableDisplay.tsx

@@ -1,4 +1,4 @@
-import { IconGraph, IconTrends } from '@posthog/icons'
+import { IconGraph, IconLifecycle, IconTrends } from '@posthog/icons'
 import { LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Icon123, IconAreaChart, IconTableChart } from 'lib/lemon-ui/icons'
@@ -40,6 +40,11 @@ export const TableDisplay = (): JSX.Element => {
                     icon: <IconGraph />,
                     label: 'Bar chart',
                 },
+                {
+                    value: ChartDisplayType.ActionsStackedBar,
+                    icon: <IconLifecycle />,
+                    label: 'Stacked bar chart',
+                },
                 {
                     value: ChartDisplayType.ActionsAreaGraph,
                     icon: <IconAreaChart />,

frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx

@@ -108,7 +108,8 @@ function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX
     } else if (
         visualizationType === ChartDisplayType.ActionsLineGraph ||
         visualizationType === ChartDisplayType.ActionsBar ||
-        visualizationType === ChartDisplayType.ActionsAreaGraph
+        visualizationType === ChartDisplayType.ActionsAreaGraph ||
+        visualizationType === ChartDisplayType.ActionsStackedBar
     ) {
         component = <Chart />
     } else if (visualizationType === ChartDisplayType.BoldNumber) {

frontend/src/queries/schema.json

@@ -2002,6 +2002,7 @@
             "enum": [
                 "ActionsLineGraph",
                 "ActionsBar",
+                "ActionsStackedBar",
                 "ActionsAreaGraph",
                 "ActionsLineGraphCumulative",
                 "BoldNumber",

frontend/src/scenes/insights/utils/compareInsightQuery.ts

@@ -15,6 +15,7 @@ const groupedChartDisplayTypes: Record<ChartDisplayType, ChartDisplayType> = {
     [ChartDisplayType.ActionsLineGraph]: ChartDisplayType.ActionsLineGraph,
     [ChartDisplayType.ActionsBar]: ChartDisplayType.ActionsLineGraph,
     [ChartDisplayType.ActionsAreaGraph]: ChartDisplayType.ActionsLineGraph,
+    [ChartDisplayType.ActionsStackedBar]: ChartDisplayType.ActionsLineGraph,
 
     // cumulative time series
     [ChartDisplayType.ActionsLineGraphCumulative]: ChartDisplayType.ActionsLineGraphCumulative,

frontend/src/types.ts

@@ -2013,6 +2013,7 @@ export interface DatedAnnotationType extends Omit<AnnotationType, 'date_marker'>
 export enum ChartDisplayType {
     ActionsLineGraph = 'ActionsLineGraph',
     ActionsBar = 'ActionsBar',
+    ActionsStackedBar = 'ActionsStackedBar',
     ActionsAreaGraph = 'ActionsAreaGraph',
     ActionsLineGraphCumulative = 'ActionsLineGraphCumulative',
     BoldNumber = 'BoldNumber',

posthog/schema.py

@@ -155,6 +155,7 @@ class ChartAxis(BaseModel):
 class ChartDisplayType(StrEnum):
     ACTIONS_LINE_GRAPH = "ActionsLineGraph"
     ACTIONS_BAR = "ActionsBar"
+    ACTIONS_STACKED_BAR = "ActionsStackedBar"
     ACTIONS_AREA_GRAPH = "ActionsAreaGraph"
     ACTIONS_LINE_GRAPH_CUMULATIVE = "ActionsLineGraphCumulative"
     BOLD_NUMBER = "BoldNumber"