mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-04 10:30:00 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

Refactor NPS and Rating summary components for better UI

Browse Source 
Co-authored-by: johannes <johannes@formbricks.com>
This commit is contained in:
Cursor Agent
2025-11-17 09:48:28 +00:00
parent f0252ed30f
commit 2d3a38c818
2 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
View File

@@ -149,7 +149,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
return (
<button
key={choice.rating}
className="flex cursor-pointer flex-col items-center space-y-2 hover:brightness-110"
className="flex cursor-pointer flex-col items-center hover:brightness-110"
onClick={() =>
setFilter(
questionSummary.question.id,
@@ -161,17 +161,17 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
}>
<div className="flex h-32 w-full flex-col items-center justify-end">
<div
className="bg-brand-dark w-full rounded-t border border-slate-200 transition-all"
className="bg-brand-dark w-full rounded-t-lg border border-slate-200 transition-all"
style={{
height: `${Math.max(choice.percentage, 2)}%`,
opacity,
}}
/>
</div>
<div className="text-center">
<div className="font-semibold text-slate-700">{choice.rating}</div>
<div className="text-xs text-slate-600">{choice.count}</div>
<div className="text-xs text-slate-500">
<div className="flex w-full flex-col items-center rounded-b-lg border border-t-0 border-slate-200 bg-slate-50 px-1 py-2">
<div className="mb-1 text-xs font-medium text-slate-500">{choice.rating}</div>
<div className="mb-1 text-base font-semibold text-slate-700">{choice.count}</div>
<div className="rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-600">
{convertFloatToNDecimal(choice.percentage, 1)}%
</div>
</div>

20
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx
View File

@@ -144,6 +144,26 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
);
})}
</div>
<div className="mt-3 flex w-full justify-between px-1">
<div className="flex items-center space-x-1">
<RatingResponse
scale={questionSummary.question.scale}
answer={1}
range={questionSummary.question.range}
addColors={false}
/>
<span className="text-xs text-slate-500">Low</span>
</div>
<div className="flex items-center space-x-1">
<span className="text-xs text-slate-500">High</span>
<RatingResponse
scale={questionSummary.question.scale}
answer={questionSummary.question.range}
range={questionSummary.question.range}
addColors={false}
/>
</div>
</div>
</div>
</TabsContent>