Skip to content

Commit

Permalink
fix(surveys): bypass HogQL coercion + UI fixes (#18063)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jurajmajerik
jurajmajerik authored Oct 18, 2023
1 parent 0546442 commit 2d1bab5
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 8 deletions.
30 changes: 29 additions & 1 deletion frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,14 @@ export function ensureTooltipElement(): HTMLElement {
return tooltipEl
}

function truncateString(str: string, num: number): string {
if (str.length > num) {
return str.slice(0, num) + ' ...'
} else {
return str
}
}

export function onChartClick(
event: ChartEvent,
chart: Chart,
Expand Down Expand Up @@ -408,6 +416,9 @@ export function LineGraph_({
},
display: (context) => {
const datum = context.dataset.data[context.dataIndex]
if (showValueOnSeries && inSurveyView) {
return true
}
return showValueOnSeries === true && typeof datum === 'number' && datum !== 0 ? 'auto' : false
},
formatter: (value: number, context) => {
Expand Down Expand Up @@ -570,6 +581,9 @@ export function LineGraph_({
}

if (type === GraphType.Bar) {
if (hideXAxis || hideYAxis) {
options.layout = { padding: 20 }
}
options.scales = {
x: {
display: !hideXAxis,
Expand All @@ -578,8 +592,9 @@ export function LineGraph_({
ticks: {
...tickOptions,
precision,
...(inSurveyView ? { padding: 10 } : {}),
},
grid: gridOptions,
grid: inSurveyView ? { display: false } : gridOptions,
},
y: {
display: !hideYAxis,
Expand All @@ -597,6 +612,9 @@ export function LineGraph_({
},
}
} else if (type === GraphType.Line) {
if (hideXAxis || hideYAxis) {
options.layout = { padding: 20 }
}
options.scales = {
x: {
display: !hideXAxis,
Expand Down Expand Up @@ -624,6 +642,9 @@ export function LineGraph_({
},
}
} else if (isHorizontal) {
if (hideXAxis || hideYAxis) {
options.layout = { padding: 20 }
}
options.scales = {
x: {
display: !hideXAxis,
Expand All @@ -642,6 +663,13 @@ export function LineGraph_({
display: true,
beforeFit: (scale) => {
if (inSurveyView) {
scale.ticks = scale.ticks.map((tick) => {
if (typeof tick.label === 'string') {
return { ...tick, label: truncateString(tick.label, 50) }
}
return tick
})

const ROW_HEIGHT = 60
const dynamicHeight = scale.ticks.length * ROW_HEIGHT
const height = dynamicHeight
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/scenes/surveys/SurveyView.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
column-gap: 10px;
}

@media screen and (max-width: 1024px) {
.masonry-container {
column-count: 2;
}
}

.masonry-item {
margin: 0;
display: grid;
Expand All @@ -16,7 +22,7 @@

.masonry-item-text {
max-height: 305px;
overflow: scroll;
overflow-y: scroll;
}

.masonry-item-link {
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/scenes/surveys/surveyLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ export const surveyLogic = kea<surveyLogicType>([
const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
query: `
SELECT properties.${surveyResponseField} AS survey_response, COUNT(survey_response)
SELECT JSONExtractString(properties, '${surveyResponseField}') AS survey_response, COUNT(survey_response)
FROM events
WHERE event = 'survey sent'
AND properties.$survey_id = '${props.id}'
Expand Down Expand Up @@ -266,7 +266,7 @@ export const surveyLogic = kea<surveyLogicType>([
const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
query: `
SELECT properties.${surveyResponseField} AS survey_response, COUNT(survey_response)
SELECT JSONExtractString(properties, '${surveyResponseField}') AS survey_response, COUNT(survey_response)
FROM events
WHERE event = 'survey sent'
AND properties.$survey_id = '${props.id}'
Expand Down Expand Up @@ -303,10 +303,13 @@ 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, '$survey_response')) AS choice
SELECT count(), arrayJoin(JSONExtractArrayRaw(properties, '${surveyResponseField}')) AS choice
FROM events
WHERE event == 'survey sent'
AND properties.$survey_id == '${survey.id}'
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/scenes/surveys/surveyViewViz.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,13 +191,12 @@ export function RatingQuestionBarChart({
question.scale === 10 ? '0 - 10' : '1 - 5'
} rating`}</div>
<div className="text-xl font-bold mb-2">{question.question}</div>
<div className=" h-50 border rounded pt-6 pb-2 px-2">
<div className=" h-50 border rounded pt-6 pb-2">
<div className="relative h-full w-full">
<BindLogic logic={insightLogic} props={insightProps}>
<LineGraph
inSurveyView={true}
hideYAxis={true}
hideXAxis={true}
showValueOnSeries={true}
labelGroupType={1}
data-attr="survey-rating"
Expand Down Expand Up @@ -465,7 +464,7 @@ export function OpenTextViz({
<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 italic font-semibold px-5 py-4">
<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">
Expand Down

0 comments on commit 2d1bab5

Please sign in to comment.