From fd230b1964dba088ccc4b98d31479f3452c2b4d7 Mon Sep 17 00:00:00 2001
From: Neil Kakkar <neilkakkar@gmail.com>
Date: Tue, 17 Oct 2023 14:21:34 +0100
Subject: [PATCH] fix: Make rating start at 0 for surveys (#18011)

---
 cypress/e2e/surveys.cy.ts                     |  2 +-
 frontend/src/scenes/surveys/EditSurveyNew.tsx |  2 +-
 .../src/scenes/surveys/SurveyAppearance.tsx   | 32 +++++++++++--------
 frontend/src/scenes/surveys/surveyLogic.tsx   |  3 +-
 frontend/src/scenes/surveys/surveyViewViz.tsx | 12 ++++---
 5 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/cypress/e2e/surveys.cy.ts b/cypress/e2e/surveys.cy.ts
index a6d1c9ded9dbd..a1b1c6c9c92b3 100644
--- a/cypress/e2e/surveys.cy.ts
+++ b/cypress/e2e/surveys.cy.ts
@@ -92,7 +92,7 @@ describe('Surveys', () => {
 
         cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.scale"]')
             .invoke('html')
-            .should('include', '1 - 10')
+            .should('include', '0 - 10')
 
         cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.upperBoundLabel"]').should(
             'have.value',
diff --git a/frontend/src/scenes/surveys/EditSurveyNew.tsx b/frontend/src/scenes/surveys/EditSurveyNew.tsx
index 10d32135757ae..3a4137ceda36d 100644
--- a/frontend/src/scenes/surveys/EditSurveyNew.tsx
+++ b/frontend/src/scenes/surveys/EditSurveyNew.tsx
@@ -458,7 +458,7 @@ export default function EditSurveyNew(): JSX.Element {
                                                                                         'number'
                                                                                             ? [
                                                                                                   {
-                                                                                                      label: '1 - 10',
+                                                                                                      label: '0 - 10',
                                                                                                       value: 10,
                                                                                                   },
                                                                                               ]
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index 80e7f9e1dec39..8b78e2aa90d93 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -365,27 +365,31 @@ const NumberRating = ({
     preview?: boolean
 }): JSX.Element => {
     const [activeNumber, setActiveNumber] = useState<number | undefined>()
+
+    const totalNumbers = ratingSurveyQuestion.scale === 10 ? 11 : ratingSurveyQuestion.scale
     return (
         <div
             style={{
                 border: `1.5px solid ${appearance.borderColor || defaultSurveyAppearance.borderColor}`,
-                gridTemplateColumns: `repeat(${ratingSurveyQuestion.scale}, minmax(0, 1fr))`,
+                gridTemplateColumns: `repeat(${totalNumbers}, minmax(0, 1fr))`,
             }}
             className={`rating-options-buttons ${ratingSurveyQuestion.scale === 5 ? '' : 'max-numbers'}`}
         >
-            {(ratingSurveyQuestion.scale === 5 ? [1, 2, 3, 4, 5] : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).map((num, idx) => {
-                const active = activeNumber === num
-                return (
-                    <RatingButton
-                        preview={preview}
-                        key={idx}
-                        active={active}
-                        appearance={appearance}
-                        num={num}
-                        setActiveNumber={setActiveNumber}
-                    />
-                )
-            })}
+            {(ratingSurveyQuestion.scale === 10 ? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] : [1, 2, 3, 4, 5]).map(
+                (num, idx) => {
+                    const active = activeNumber === num
+                    return (
+                        <RatingButton
+                            preview={preview}
+                            key={idx}
+                            active={active}
+                            appearance={appearance}
+                            num={num}
+                            setActiveNumber={setActiveNumber}
+                        />
+                    )
+                }
+            )}
         </div>
     )
 }
diff --git a/frontend/src/scenes/surveys/surveyLogic.tsx b/frontend/src/scenes/surveys/surveyLogic.tsx
index f0eb72d14c5a8..b3c9bca46aad5 100644
--- a/frontend/src/scenes/surveys/surveyLogic.tsx
+++ b/frontend/src/scenes/surveys/surveyLogic.tsx
@@ -232,7 +232,8 @@ export const surveyLogic = kea<surveyLogicType>([
                 const { results } = responseJSON
 
                 let total = 0
-                const data = new Array(question.scale).fill(0)
+                const dataSize = question.scale === 10 ? 11 : question.scale
+                const data = new Array(dataSize).fill(0)
                 results?.forEach(([value, count]) => {
                     total += count
                     data[value - 1] = count
diff --git a/frontend/src/scenes/surveys/surveyViewViz.tsx b/frontend/src/scenes/surveys/surveyViewViz.tsx
index df818be92fcbc..8b5f6d55ad7a1 100644
--- a/frontend/src/scenes/surveys/surveyViewViz.tsx
+++ b/frontend/src/scenes/surveys/surveyViewViz.tsx
@@ -185,7 +185,9 @@ export function RatingQuestionBarChart({
                 <></>
             ) : (
                 <div className="mb-8">
-                    <div className="font-semibold text-muted-alt">{`1-${question.scale} rating`}</div>
+                    <div className="font-semibold text-muted-alt">{`${
+                        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="relative h-full w-full">
@@ -216,9 +218,11 @@ export function RatingQuestionBarChart({
                                             hoverBackgroundColor: barColor,
                                         },
                                     ]}
-                                    labels={Array.from({ length: question.scale }, (_, i) => (i + 1).toString()).map(
-                                        (n) => n
-                                    )}
+                                    labels={
+                                        question.scale === 10
+                                            ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
+                                            : ['1', '2', '3', '4', '5']
+                                    }
                                 />
                             </BindLogic>
                         </div>