diff --git a/cypress/e2e/surveys.cy.ts b/cypress/e2e/surveys.cy.ts
index 5c22e0655e0d1..faf48f70f8023 100644
--- a/cypress/e2e/surveys.cy.ts
+++ b/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()
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index a7fda625ac48c..a17198f15edca 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/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 ? (
diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
index 7cc725516e593..56d647dcef99a 100644
--- a/frontend/src/scenes/surveys/SurveyView.tsx
+++ b/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
}
})}
>
+
+ }
+ 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
+
+
{!disableEventsTable && (surveyLoading ? : )}
>
)
diff --git a/frontend/src/scenes/surveys/surveyViewViz.tsx b/frontend/src/scenes/surveys/surveyViewViz.tsx
index 138e47f8e01fd..dbe3735bb91be 100644
--- a/frontend/src/scenes/surveys/surveyViewViz.tsx
+++ b/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 (
@@ -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 (
{!surveyMultipleChoiceResultsReady[questionIndex] ? (
@@ -399,7 +406,12 @@ export function MultipleChoiceQuestionBarChart({
Multiple choice
{question.question}
-