1- import React from 'react' ;
2- import { BarChart , Filter , Users , Info } from 'lucide-react' ;
1+ import React , { useState } from 'react' ;
2+ import { BarChart , Filter , Users , Info , ChevronDown , ChevronUp } from 'lucide-react' ;
33import { AnalyticsData } from '../../types/analytics' ;
44
55interface ClosedQuestionTopicsCardProps {
@@ -13,7 +13,19 @@ export const ClosedQuestionTopicsCard: React.FC<ClosedQuestionTopicsCardProps> =
1313 selectedTopics = [ ] ,
1414 hasActiveFilters = false
1515} ) => {
16+ const [ expandedAnswers , setExpandedAnswers ] = useState < Set < string > > ( new Set ( ) ) ;
1617 const closedQuestionCorrelations = analytics ?. correlations ?. closedQuestionTopics || [ ] ;
18+
19+ const toggleAnswer = ( questionIndex : number , answerIndex : number ) => {
20+ const key = `${ questionIndex } ${ answerIndex } ;
21+ const newExpanded = new Set ( expandedAnswers ) ;
22+ if ( newExpanded . has ( key ) ) {
23+ newExpanded . delete ( key ) ;
24+ } else {
25+ newExpanded . add ( key ) ;
26+ }
27+ setExpandedAnswers ( newExpanded ) ;
28+ } ;
1729
1830 // Filter by selected topics if any
1931 const filteredCorrelations = selectedTopics . length > 0
@@ -101,52 +113,75 @@ export const ClosedQuestionTopicsCard: React.FC<ClosedQuestionTopicsCardProps> =
101113
102114 { /* Answer values in 2-column grid */ }
103115 < div className = "grid grid-cols-1 lg:grid-cols-2 gap-3" >
104- { question . correlations . map ( ( answer , aIndex ) => (
105- < div key = { aIndex } className = "bg-gray-50 rounded-lg p-3 border border-gray-200" >
106- < div className = "flex items-center justify-between mb-2" >
107- < span className = "text-sm font-medium text-gray-900" > { answer . answerValue } </ span >
108- < span className = "flex items-center gap-1 text-xs text-gray-600" >
109- < Users className = "w-3 h-3" />
110- { answer . responseCount } { answer . responseCount === 1 ? 'response' : 'responses' }
111- </ span >
112- </ div >
116+ { question . correlations . map ( ( answer , aIndex ) => {
117+ const answerKey = `${ qIndex } ${ aIndex } ;
118+ const isExpanded = expandedAnswers . has ( answerKey ) ;
119+ const displayedTopics = isExpanded
120+ ? answer . topicDistribution
121+ : answer . topicDistribution . slice ( 0 , 5 ) ;
122+
123+ return (
124+ < div key = { aIndex } className = "bg-gray-50 rounded-lg p-3 border border-gray-200" >
125+ < div className = "flex items-center justify-between mb-2" >
126+ < span className = "text-sm font-medium text-gray-900" > { answer . answerValue } </ span >
127+ < span className = "flex items-center gap-1 text-xs text-gray-600" >
128+ < Users className = "w-3 h-3" />
129+ { answer . responseCount } { answer . responseCount === 1 ? 'response' : 'responses' }
130+ </ span >
131+ </ div >
113132
114- { /* Topic distribution */ }
115- { answer . topicDistribution . length > 0 ? (
116- < div className = "space-y-1.5" >
117- { answer . topicDistribution . slice ( 0 , 5 ) . map ( ( topic , tIndex ) => (
118- < div key = { tIndex } className = "flex items-center gap-2" >
119- < div className = "flex-1" >
120- < div className = "flex items-center justify-between text-xs mb-1" >
121- < span className = { `inline-flex px-2 py-0.5 rounded font-medium ${ getTopicColor ( tIndex ) } } >
122- { topic . topic }
123- </ span >
124- < span className = "text-gray-600 font-medium" > { topic . percentage } %</ span >
125- </ div >
126- { /* Progress bar */ }
127- < div className = "h-1.5 bg-gray-200 rounded-full overflow-hidden" >
128- < div
129- className = { `h-full ${ getTopicColor ( tIndex ) . split ( ' ' ) [ 0 ] } }
130- style = { { width : `${ topic . percentage } } }
131- />
133+ { /* Topic distribution */ }
134+ { answer . topicDistribution . length > 0 ? (
135+ < div className = "space-y-1.5" >
136+ { displayedTopics . map ( ( topic , tIndex ) => (
137+ < div key = { tIndex } className = "flex items-center gap-2" >
138+ < div className = "flex-1" >
139+ < div className = "flex items-center justify-between text-xs mb-1" >
140+ < span className = { `inline-flex px-2 py-0.5 rounded font-medium ${ getTopicColor ( tIndex ) } } >
141+ { topic . topic }
142+ </ span >
143+ < span className = "text-gray-600 font-medium" > { topic . percentage } %</ span >
144+ </ div >
145+ { /* Progress bar */ }
146+ < div className = "h-1.5 bg-gray-200 rounded-full overflow-hidden" >
147+ < div
148+ className = { `h-full ${ getTopicColor ( tIndex ) . split ( ' ' ) [ 0 ] } }
149+ style = { { width : `${ topic . percentage } } }
150+ />
151+ </ div >
132152 </ div >
153+ < span className = "text-xs text-gray-500 w-8 text-right" >
154+ { topic . count }
155+ </ span >
133156 </ div >
134- < span className = "text-xs text-gray-500 w-8 text-right" >
135- { topic . count }
136- </ span >
137- </ div >
138- ) ) }
139- { answer . topicDistribution . length > 5 && (
140- < p className = "text-xs text-gray-500 text-center mt-2" >
141- +{ answer . topicDistribution . length - 5 } more topics
142- </ p >
143- ) }
144- </ div >
145- ) : (
146- < p className = "text-xs text-gray-500 italic" > No topics discussed</ p >
147- ) }
148- </ div >
149- ) ) }
157+ ) ) }
158+ { answer . topicDistribution . length > 5 && (
159+ < div className = "text-center mt-2" >
160+ < button
161+ onClick = { ( ) => toggleAnswer ( qIndex , aIndex ) }
162+ className = "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded transition-colors"
163+ >
164+ { isExpanded ? (
165+ < >
166+ < ChevronUp className = "w-3 h-3" />
167+ Show Less
168+ </ >
169+ ) : (
170+ < >
171+ < ChevronDown className = "w-3 h-3" />
172+ Show All { answer . topicDistribution . length } Topics
173+ </ >
174+ ) }
175+ </ button >
176+ </ div >
177+ ) }
178+ </ div >
179+ ) : (
180+ < p className = "text-xs text-gray-500 italic" > No topics discussed</ p >
181+ ) }
182+ </ div >
183+ ) ;
184+ } ) }
150185 </ div >
151186 </ div >
152187 ) ) }
0 commit comments