From 5951ec301d87efafce381d8c1d835ee0c1f7ca50 Mon Sep 17 00:00:00 2001 From: Li Yi Yu Date: Thu, 15 Feb 2024 13:20:03 -0500 Subject: [PATCH] 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 | 2 +- frontend/src/scenes/surveys/SurveyEdit.tsx | 2 +- frontend/src/scenes/surveys/SurveyView.tsx | 29 ++++++++++++++++++- frontend/src/scenes/surveys/surveyViewViz.tsx | 24 +++++++++++---- 4 files changed, 48 insertions(+), 9 deletions(-) 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}
-
+ +