Skip to content

Commit

Permalink
feat(surveys): add responses to the events table + fixes (#18088)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jurajmajerik
jurajmajerik authored Oct 19, 2023
1 parent 614463d commit d60f409
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 38 deletions.
Binary file modified frontend/__snapshots__/scenes-app-surveys--survey-view.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 43 additions & 20 deletions frontend/src/scenes/surveys/surveyLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,16 @@ export interface SurveyMultipleChoiceResults {

export interface SurveyOpenTextResults {
[key: number]: {
events: { properties: Record<string, any>; distinct_id: string }[]
events: { distinct_id: string; properties: Record<string, any>; personProperties: Record<string, any> }[]
}
}

export interface QuestionResultsReady {
[key: string]: boolean
}

const getResponseField = (i: number): string => (i === 0 ? '$survey_response' : `$survey_response_${i}`)

export const surveyLogic = kea<surveyLogicType>([
props({} as SurveyLogicProps),
key(({ id }) => id),
Expand Down Expand Up @@ -228,13 +230,12 @@ export const surveyLogic = kea<surveyLogicType>([
? dayjs(survey.end_date).add(1, 'day').format('YYYY-MM-DD')
: dayjs().add(1, 'day').format('YYYY-MM-DD')

const surveyResponseField =
questionIndex === 0 ? '$survey_response' : `$survey_response_${questionIndex}`

const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
query: `
SELECT JSONExtractString(properties, '${surveyResponseField}') AS survey_response, COUNT(survey_response)
SELECT
JSONExtractString(properties, '${getResponseField(questionIndex)}') AS survey_response,
COUNT(survey_response)
FROM events
WHERE event = 'survey sent'
AND properties.$survey_id = '${props.id}'
Expand All @@ -251,7 +252,9 @@ export const surveyLogic = kea<surveyLogicType>([
const data = new Array(dataSize).fill(0)
results?.forEach(([value, count]) => {
total += count
data[value - 1] = count

const index = question.scale === 10 ? value : value - 1
data[index] = count
})

return { ...values.surveyRatingResults, [questionIndex]: { total, data } }
Expand All @@ -269,13 +272,12 @@ export const surveyLogic = kea<surveyLogicType>([
? dayjs(survey.end_date).add(1, 'day').format('YYYY-MM-DD')
: dayjs().add(1, 'day').format('YYYY-MM-DD')

const surveyResponseField =
questionIndex === 0 ? '$survey_response' : `$survey_response_${questionIndex}`

const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
query: `
SELECT JSONExtractString(properties, '${surveyResponseField}') AS survey_response, COUNT(survey_response)
SELECT
JSONExtractString(properties, '${getResponseField(questionIndex)}') AS survey_response,
COUNT(survey_response)
FROM events
WHERE event = 'survey sent'
AND properties.$survey_id = '${props.id}'
Expand Down Expand Up @@ -312,13 +314,12 @@ export const surveyLogic = kea<surveyLogicType>([
? dayjs(survey.end_date).add(1, 'day').format('YYYY-MM-DD')
: dayjs().add(1, 'day').format('YYYY-MM-DD')

const surveyResponseField =
questionIndex === 0 ? '$survey_response' : `$survey_response_${questionIndex}`

const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
query: `
SELECT count(), arrayJoin(JSONExtractArrayRaw(properties, '${surveyResponseField}')) AS choice
SELECT
count(),
arrayJoin(JSONExtractArrayRaw(properties, '${getResponseField(questionIndex)}')) AS choice
FROM events
WHERE event == 'survey sent'
AND properties.$survey_id == '${survey.id}'
Expand Down Expand Up @@ -346,7 +347,7 @@ export const surveyLogic = kea<surveyLogicType>([
const data = results?.map((r) => r[0])
const labels = results?.map((r) => r[1])

return { ...values.surveyRatingResults, [questionIndex]: { labels, data } }
return { ...values.surveyMultipleChoiceResults, [questionIndex]: { labels, data } }
},
},
surveyOpenTextResults: {
Expand All @@ -370,7 +371,7 @@ export const surveyLogic = kea<surveyLogicType>([
const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
query: `
SELECT properties, distinct_id
SELECT distinct_id, properties, person.properties
FROM events
WHERE event == 'survey sent'
AND properties.$survey_id == '${survey.id}'
Expand All @@ -383,9 +384,15 @@ export const surveyLogic = kea<surveyLogicType>([
const responseJSON = await api.query(query)
const { results } = responseJSON

const events = results?.map((r) => ({ properties: JSON.parse(r[0]), distinct_id: r[1] }))
const events =
results?.map((r) => {
const distinct_id = r[0]
const properties = JSON.parse(r[1])
const personProperties = JSON.parse(r[2])
return { distinct_id, properties, personProperties }
}) || []

return { ...values.surveyRatingResults, [questionIndex]: { events } }
return { ...values.surveyOpenTextResults, [questionIndex]: { events } }
},
},
})),
Expand Down Expand Up @@ -592,7 +599,7 @@ export const surveyLogic = kea<surveyLogicType>([
],
dataTableQuery: [
(s) => [s.survey, s.surveyResponseProperty],
(survey, surveyResponseProperty): DataTableNode | null => {
(survey): DataTableNode | null => {
if (survey.id === 'new') {
return null
}
Expand All @@ -601,7 +608,23 @@ export const surveyLogic = kea<surveyLogicType>([
kind: NodeKind.DataTableNode,
source: {
kind: NodeKind.EventsQuery,
select: ['*', `properties.${surveyResponseProperty}`, 'timestamp', 'person'],
select: [
'*',
...survey.questions.map((q, i) => {
if (q.type === SurveyQuestionType.MultipleChoice) {
// Join array items into a string
return `coalesce(arrayStringConcat(JSONExtractArrayRaw(properties, '${getResponseField(
i
)}'), ', ')) -- ${q.question}`
}

return `coalesce(JSONExtractString(properties, '${getResponseField(i)}')) -- ${
q.question
}`
}),
'timestamp',
'person',
],
orderBy: ['timestamp DESC'],
where: [`event == 'survey sent'`],
after: createdAt,
Expand Down
51 changes: 33 additions & 18 deletions frontend/src/scenes/surveys/surveyViewViz.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,15 +115,18 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
{ count: seen, label: 'Viewed', style: { backgroundColor: '#1D4AFF' } },
{ count: dismissed, label: 'Dismissed', style: { backgroundColor: '#E3A506' } },
{ count: sent, label: 'Submitted', style: { backgroundColor: '#529B08' } },
].map(({ count, label, style }) => (
<div key={`survey-summary-legend-${label}`} className="flex items-center mr-6">
<div className="w-3 h-3 rounded-full mr-2" style={style} />
<span className="font-semibold text-muted-alt">{`${label} (${(
(count / total) *
100
).toFixed(1)}%)`}</span>
</div>
))}
].map(
({ count, label, style }) =>
count > 0 && (
<div key={`survey-summary-legend-${label}`} className="flex items-center mr-6">
<div className="w-3 h-3 rounded-full mr-2" style={style} />
<span className="font-semibold text-muted-alt">{`${label} (${(
(count / total) *
100
).toFixed(1)}%)`}</span>
</div>
)
)}
</div>
</div>
</div>
Expand Down Expand Up @@ -462,16 +465,28 @@ export function OpenTextViz({
{question.question} • <span className="">Latest responses</span>
</div>
<div className="mt-4 mb-8 masonry-container">
{surveyOpenTextResults[questionIndex].events.map((event, i) => (
<div key={`open-text-${questionIndex}-${i}`} className="masonry-item border rounded">
<div className="masonry-item-text text-center italic font-semibold px-5 py-4">
{event.properties[surveyResponseField]}
</div>
<div className="masonry-item-link items-center px-5 py-4 border-t rounded-b truncate w-full">
<PersonDisplay person={event} withIcon={true} noEllipsis={false} isCentered />
{surveyOpenTextResults[questionIndex].events.map((event, i) => {
const personProp = {
distinct_id: event.distinct_id,
properties: event.personProperties,
}

return (
<div key={`open-text-${questionIndex}-${i}`} className="masonry-item border rounded">
<div className="masonry-item-text text-center italic font-semibold px-5 py-4">
{event.properties[surveyResponseField]}
</div>
<div className="masonry-item-link items-center px-5 py-4 border-t rounded-b truncate w-full">
<PersonDisplay
person={personProp}
withIcon={true}
noEllipsis={false}
isCentered
/>
</div>
</div>
</div>
))}
)
})}
</div>
</>
)}
Expand Down

0 comments on commit d60f409

Please sign in to comment.