fix(surveys): survey results viz fixes (#20345)

* rename count bar to follow event name format

* add explore more results button

* fix squished options height

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `webkit` (2)

* fix wording

* Update UI snapshots for `webkit` (2)

* add data attr

* clarify match

* add bar chart icon

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

cypress/e2e/surveys.cy.ts

@@ -113,7 +113,7 @@ describe('Surveys', () => {
         // refresh, see survey show up on page
         cy.reload()
 
-        cy.contains('Unique users viewed').should('exist')
+        cy.contains('Unique users shown').should('exist')
 
         // stop survey
         cy.contains('Stop').click()

frontend/src/scenes/surveys/SurveyEdit.tsx

@@ -399,7 +399,7 @@ export default function SurveyEdit(): JSX.Element {
                                         value={!hasTargetingSet}
                                         options={[
                                             { label: 'All users', value: true },
-                                            { label: 'Users who match...', value: false },
+                                            { label: 'Users who match all of the following...', value: false },
                                         ]}
                                     />
                                     {!hasTargetingSet ? (

frontend/src/scenes/surveys/SurveyView.tsx

@@ -7,16 +7,18 @@ import { EditableField } from 'lib/components/EditableField/EditableField'
 import { PageHeader } from 'lib/components/PageHeader'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
+import { IconBarChart } from 'lib/lemon-ui/icons'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { capitalizeFirstLetter, pluralize } from 'lib/utils'
 import { useEffect, useState } from 'react'
+import { urls } from 'scenes/urls'
 
 import { Query } from '~/queries/Query/Query'
 import { NodeKind } from '~/queries/schema'
-import { PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType, SurveyType } from '~/types'
+import { InsightType, PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType, SurveyType } from '~/types'
 
 import { SURVEY_EVENT_NAME } from './constants'
 import { SurveyReleaseSummary } from './Survey'
@@ -316,6 +318,31 @@ export function SurveyResult({ disableEventsTable }: { disableEventsTable?: bool
                     }
                 })}
             </>
+            <div className="max-w-40 mb-4">
+                <LemonButton
+                    type="primary"
+                    data-attr="survey-results-explore"
+                    icon={<IconBarChart />}
+                    to={urls.insightNew({
+                        insight: InsightType.TRENDS,
+                        events: [
+                            { id: 'survey sent', name: 'survey sent', type: 'events' },
+                            { id: 'survey shown', name: 'survey shown', type: 'events' },
+                            { id: 'survey dismissed', name: 'survey dismissed', type: 'events' },
+                        ],
+                        properties: [
+                            {
+                                key: '$survey_id',
+                                value: survey.id,
+                                operator: PropertyOperator.Exact,
+                                type: PropertyFilterType.Event,
+                            },
+                        ],
+                    })}
+                >
+                    Explore results
+                </LemonButton>
+            </div>
             {!disableEventsTable && (surveyLoading ? <LemonSkeleton /> : <Query query={dataTableQuery} />)}
         </>
     )

frontend/src/scenes/surveys/surveyViewViz.tsx

@@ -3,7 +3,7 @@ import { BindLogic, useActions, useValues } from 'kea'
 import { IconInfo } from 'lib/lemon-ui/icons'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { LineGraph } from 'scenes/insights/views/LineGraph/LineGraph'
 import { PieChart } from 'scenes/insights/views/LineGraph/PieChart'
@@ -36,8 +36,8 @@ const formatCount = (count: number, total: number): string => {
 export function UsersCount({ surveyUserStats }: { surveyUserStats: SurveyUserStats }): JSX.Element {
     const { seen, dismissed, sent } = surveyUserStats
     const total = seen + dismissed + sent
-    const labelTotal = total === 1 ? 'Unique user viewed' : 'Unique users viewed'
-    const labelSent = sent === 1 ? 'Response submitted' : 'Responses submitted'
+    const labelTotal = total === 1 ? 'Unique user shown' : 'Unique users shown'
+    const labelSent = sent === 1 ? 'Response sent' : 'Responses sent'
 
     return (
         <div className="inline-flex mb-4">
@@ -71,7 +71,7 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
                         {[
                             {
                                 count: seen,
-                                label: 'Viewed',
+                                label: 'Shown',
                                 classes: `rounded-l ${dismissed === 0 && sent === 0 ? 'rounded-r' : ''}`,
                                 style: { backgroundColor: '#1D4AFF', width: `${seenPercentage}%` },
                             },
@@ -87,7 +87,7 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
                             },
                             {
                                 count: sent,
-                                label: 'Submitted',
+                                label: 'Sent',
                                 classes: `rounded-r ${seen === 0 && dismissed === 0 ? 'rounded-l' : ''}`,
                                 style: {
                                     backgroundColor: '#529B08',
@@ -378,6 +378,7 @@ export function MultipleChoiceQuestionBarChart({
 }): JSX.Element {
     const { loadSurveyMultipleChoiceResults } = useActions(surveyLogic)
     const { survey } = useValues(surveyLogic)
+    const [chartHeight, setChartHeight] = useState(200)
     const barColor = '#1d4aff'
 
     const question = survey.questions[questionIndex]
@@ -389,6 +390,12 @@ export function MultipleChoiceQuestionBarChart({
         loadSurveyMultipleChoiceResults({ questionIndex })
     }, [questionIndex])
 
+    useEffect(() => {
+        if (surveyMultipleChoiceResults?.[questionIndex]?.data?.length) {
+            setChartHeight(100 + 20 * surveyMultipleChoiceResults[questionIndex].data.length)
+        }
+    }, [surveyMultipleChoiceResults])
+
     return (
         <div className="mb-4">
             {!surveyMultipleChoiceResultsReady[questionIndex] ? (
@@ -399,7 +406,12 @@ export function MultipleChoiceQuestionBarChart({
                 <div className="mb-8">
                     <div className="font-semibold text-muted-alt">Multiple choice</div>
                     <div className="text-xl font-bold mb-2">{question.question}</div>
-                    <div className="border rounded pt-6 pr-10">
+
+                    <div
+                        className="border rounded pt-6 pr-10"
+                        // eslint-disable-next-line react/forbid-dom-props
+                        style={{ height: Math.min(chartHeight, 600) }}
+                    >
                         <BindLogic logic={insightLogic} props={insightProps}>
                             <LineGraph
                                 inSurveyView={true}