feat(surveys): Multiple Choice question results (#17954)

PostHog · Oct 16, 2023 · cda82fc · cda82fc
1 parent c1fc51c
commit cda82fc
Show file tree

Hide file tree

Showing 5 changed files with 321 additions and 23 deletions.
diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -207,6 +207,7 @@ export interface LineGraphProps {
     showPersonsModal?: boolean
     tooltip?: TooltipConfig
     inCardView?: boolean
+    inSurveyView?: boolean
     isArea?: boolean
     incompletenessOffsetFromEnd?: number // Number of data points at end of dataset to replace with a dotted line. Only used in line graphs.
     labelGroupType: number | 'people' | 'none'
@@ -217,6 +218,8 @@ export interface LineGraphProps {
     showPercentStackView?: boolean | null
     supportsPercentStackView?: boolean
     hideAnnotations?: boolean
+    hideXAxis?: boolean
+    hideYAxis?: boolean
 }
 
 export const LineGraph = (props: LineGraphProps): JSX.Element => {
@@ -238,6 +241,7 @@ export function LineGraph_({
     showPersonsModal = true,
     compare = false,
     inCardView,
+    inSurveyView,
     isArea = false,
     incompletenessOffsetFromEnd = -1,
     tooltip: tooltipConfig,
@@ -248,6 +252,8 @@ export function LineGraph_({
     showPercentStackView,
     supportsPercentStackView,
     hideAnnotations,
+    hideXAxis,
+    hideYAxis,
 }: LineGraphProps): JSX.Element {
     let datasets = _datasets
 
@@ -566,6 +572,7 @@ export function LineGraph_({
         if (type === GraphType.Bar) {
             options.scales = {
                 x: {
+                    display: !hideXAxis,
                     beginAtZero: true,
                     stacked: true,
                     ticks: {
@@ -575,9 +582,11 @@ export function LineGraph_({
                     grid: gridOptions,
                 },
                 y: {
+                    display: !hideYAxis,
                     beginAtZero: true,
                     stacked: true,
                     ticks: {
+                        display: !hideYAxis,
                         ...tickOptions,
                         precision,
                         callback: (value) => {
@@ -590,8 +599,8 @@ export function LineGraph_({
         } else if (type === GraphType.Line) {
             options.scales = {
                 x: {
+                    display: !hideXAxis,
                     beginAtZero: true,
-                    display: true,
                     ticks: tickOptions,
                     grid: {
                         ...gridOptions,
@@ -600,10 +609,11 @@ export function LineGraph_({
                     },
                 },
                 y: {
+                    display: !hideYAxis,
                     beginAtZero: true,
-                    display: true,
                     stacked: showPercentStackView || isArea,
                     ticks: {
+                        display: !hideYAxis,
                         ...tickOptions,
                         precision,
                         callback: (value) => {
@@ -616,9 +626,10 @@ export function LineGraph_({
         } else if (isHorizontal) {
             options.scales = {
                 x: {
+                    display: !hideXAxis,
                     beginAtZero: true,
-                    display: true,
                     ticks: {
+                        display: !hideXAxis,
                         ...tickOptions,
                         precision,
                         callback: (value) => {
@@ -628,8 +639,15 @@ export function LineGraph_({
                     grid: gridOptions,
                 },
                 y: {
+                    display: true,
                     beforeFit: (scale) => {
-                        if (shouldAutoResize) {
+                        if (inSurveyView) {
+                            const ROW_HEIGHT = 60
+                            const dynamicHeight = scale.ticks.length * ROW_HEIGHT
+                            const height = dynamicHeight
+                            const parentNode: any = scale.chart?.canvas?.parentNode
+                            parentNode.style.height = `${height}px`
+                        } else if (shouldAutoResize) {
                             // automatically resize the chart container to fit the number of rows
                             const MIN_HEIGHT = 575
                             const ROW_HEIGHT = 16
@@ -656,7 +674,10 @@ export function LineGraph_({
                             return labelDescriptors.join(' - ')
                         },
                     },
-                    grid: gridOptions,
+                    grid: {
+                        ...gridOptions,
+                        display: !inSurveyView,
+                    },
                 },
             }
             options.indexAxis = 'y'

diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -28,7 +28,12 @@ import { dayjs } from 'lib/dayjs'
 import { defaultSurveyAppearance, SURVEY_EVENT_NAME } from './constants'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { Summary, RatingQuestionBarChart, SingleChoiceQuestionPieChart } from './surveyViewViz'
+import {
+    Summary,
+    RatingQuestionBarChart,
+    SingleChoiceQuestionPieChart,
+    MultipleChoiceQuestionBarChart,
+} from './surveyViewViz'
 
 export function SurveyView({ id }: { id: string }): JSX.Element {
     const { survey, surveyLoading } = useValues(surveyLogic)
@@ -263,6 +268,8 @@ export function SurveyResult({ disableEventsTable }: { disableEventsTable?: bool
         surveyRatingResultsReady,
         surveySingleChoiceResults,
         surveySingleChoiceResultsReady,
+        surveyMultipleChoiceResults,
+        surveyMultipleChoiceResultsReady,
     } = useValues(surveyLogic)
     const { setCurrentQuestionIndexAndType } = useActions(surveyLogic)
     const { featureFlags } = useValues(featureFlagLogic)
@@ -291,6 +298,15 @@ export function SurveyResult({ disableEventsTable }: { disableEventsTable?: bool
                                     questionIndex={i}
                                 />
                             )
+                        } else if (question.type === SurveyQuestionType.MultipleChoice) {
+                            return (
+                                <MultipleChoiceQuestionBarChart
+                                    key={`survey-q-${i}`}
+                                    surveyMultipleChoiceResults={surveyMultipleChoiceResults}
+                                    surveyMultipleChoiceResultsReady={surveyMultipleChoiceResultsReady}
+                                    questionIndex={i}
+                                />
+                            )
                         }
                     })}
                 </>
@@ -337,11 +353,12 @@ export function SurveyResult({ disableEventsTable }: { disableEventsTable?: bool
                     </div>
                 )}
             {(currentQuestionIndexAndType.type === SurveyQuestionType.SingleChoice ||
-                currentQuestionIndexAndType.type === SurveyQuestionType.MultipleChoice) && (
-                <div className="mb-4">
-                    <Query query={surveyMultipleChoiceQuery} />
-                </div>
-            )}
+                currentQuestionIndexAndType.type === SurveyQuestionType.MultipleChoice) &&
+                !featureFlags[FEATURE_FLAGS.SURVEYS_RESULTS_VISUALIZATIONS] && (
+                    <div className="mb-4">
+                        <Query query={surveyMultipleChoiceQuery} />
+                    </div>
+                )}
             {!disableEventsTable && (surveyLoading ? <LemonSkeleton /> : <Query query={dataTableQuery} />)}
         </>
     )

diff --git a/frontend/src/scenes/surveys/surveyLogic.test.ts b/frontend/src/scenes/surveys/surveyLogic.test.ts
@@ -0,0 +1,99 @@
+import { initKeaTests } from '~/test/init'
+import { surveyLogic } from 'scenes/surveys/surveyLogic'
+import { expectLogic } from 'kea-test-utils'
+import { useMocks } from '~/mocks/jest'
+import { Survey, SurveyQuestionType, SurveyType } from '~/types'
+
+const SURVEY: Survey = {
+    id: '018b22a3-09b1-0000-2f5b-1bd8352ceec9',
+    name: 'Multiple Choice survey',
+    description: '',
+    type: SurveyType.Popover,
+    linked_flag: null,
+    linked_flag_id: null,
+    targeting_flag: null,
+    questions: [
+        {
+            type: SurveyQuestionType.MultipleChoice,
+            choices: ['Tutorials', 'Customer case studies', 'Product announcements'],
+            question: 'Which types of content would you like to see more of?',
+            description: '',
+        },
+    ],
+    conditions: null,
+    appearance: {
+        position: 'right',
+        whiteLabel: false,
+        borderColor: '#c9c6c6',
+        placeholder: '',
+        backgroundColor: '#eeeded',
+        submitButtonText: 'Submit',
+        ratingButtonColor: 'white',
+        submitButtonColor: 'black',
+        thankYouMessageHeader: 'Thank you for your feedback!',
+        displayThankYouMessage: true,
+        ratingButtonActiveColor: 'black',
+    },
+    created_at: '2023-10-12T06:46:32.113745Z',
+    created_by: {
+        id: 1,
+        uuid: '018aa8a6-10e8-0000-dba2-0e956f7bae38',
+        distinct_id: 'TGqg9Cn4jLkj9X87oXni9ZPBD6VbOxMtGV1GfJeB5LO',
+        first_name: 'test',
+        email: '[email protected]',
+        is_email_verified: false,
+    },
+    start_date: '2023-10-12T06:46:34.482000Z',
+    end_date: null,
+    archived: false,
+    targeting_flag_filters: undefined,
+}
+
+describe('survey logic', () => {
+    let logic: ReturnType<typeof surveyLogic.build>
+
+    beforeEach(() => {
+        initKeaTests()
+        logic = surveyLogic({ id: 'new' })
+        logic.mount()
+
+        useMocks({
+            get: {
+                '/api/projects/:team/surveys/': () => [200, { results: [] }],
+                '/api/projects/:team/surveys/responses_count': () => [200, {}],
+            },
+            post: {
+                '/api/projects/:team/query/': () => [
+                    200,
+                    {
+                        results: [
+                            [336, '"Tutorials"'],
+                            [312, '"Customer case studies"'],
+                        ],
+                    },
+                ],
+            },
+        })
+    })
+
+    describe('main', () => {
+        it('post processes return values', async () => {
+            await expectLogic(logic, () => {
+                logic.actions.loadSurveySuccess(SURVEY)
+            }).toDispatchActions(['loadSurveySuccess'])
+
+            await expectLogic(logic, () => {
+                logic.actions.loadSurveyMultipleChoiceResults({ questionIndex: 0 })
+            })
+                .toFinishAllListeners()
+                .toMatchValues({
+                    surveyMultipleChoiceResults: {
+                        0: {
+                            labels: ['Tutorials', 'Customer case studies', 'Product announcements'],
+                            data: [336, 312, 0],
+                        },
+                    },
+                })
+        })
+    })
+})