Fix 0% display to show <1% for small percentages

- Replace Math.round(percentage) === 0 with '<1%' when count > 0
- Updated 9 components with 15+ instances total:
  - QuantitativeChart.jsx
  - HorizontalRatingsChart.jsx (4 instances)
  - RatingsChart.jsx (2 instances)
  - ChannelRatingsGrid.jsx
  - QualityComparisonRatingsGrid.jsx
  - DeviceSatisfactionGrid.jsx
  - DesignChangesRatingsGrid.jsx
  - UnderstandingRatingsGrid.jsx
  - MatrixChart.jsx (4 instances)
- Ensures responses with actual respondents never show as 0%

Author: dimitrieh

src/components/ChannelRatingsGrid.jsx

@@ -271,7 +271,7 @@ const ChannelRatingsGrid = ({ filters = {}, compact = true, wasmService }) => {
                             onMouseMove={handleBarMouseMove}
                           >
                             <span className="text-white font-semibold text-xs px-1">
-                              {Math.round(item.percentage)}%
+                              {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                             </span>
                           </div>
                         );

src/components/DesignChangesRatingsGrid.jsx

@@ -268,7 +268,7 @@ const DesignChangesRatingsGrid = ({ filters = {}, wasmService }) => {
                           }}
                         >
                           <span className="text-white font-semibold text-[10px] px-1">
-                            {Math.round(item.percentage)}%
+                            {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                           </span>
                         </div>
                       ))}

src/components/DeviceSatisfactionGrid.jsx

@@ -266,7 +266,7 @@ const DeviceSatisfactionGrid = ({ filters = {}, wasmService }) => {
                             onMouseMove={handleBarMouseMove}
                           >
                             <span className="text-white font-semibold text-xs px-1">
-                              {Math.round(item.percentage)}%
+                              {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                             </span>
                           </div>
                         );

src/components/HorizontalRatingsChart.jsx

@@ -456,7 +456,7 @@ const HorizontalRatingsChart = ({ questionId, questionTitle, filters = {}, showR
 
               // Determine if percentage text fits inside bar with padding
               // Calculate approximate text width: each char ~7px, padding pl-2 pr-2 = 16px total
-              const percentageText = `${Math.round(item.percentage)}%`;
+              const percentageText = Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`;
               const textWidth = percentageText.length * 7; // approximate char width for text-xs font-bold
               const paddingWidth = 16; // pl-2 (8px) + pr-2 (8px)
               const minRequiredWidth = textWidth + paddingWidth;
@@ -501,7 +501,7 @@ const HorizontalRatingsChart = ({ questionId, questionTitle, filters = {}, showR
                     {/* Percentage inside the bar on the left (only if it fits) */}
                     {percentageFitsInside && (
                       <span className="text-white text-xs font-bold pl-2 pr-2">
-                        {Math.round(item.percentage)}%
+                        {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                       </span>
                     )}
                   </div>
@@ -523,7 +523,7 @@ const HorizontalRatingsChart = ({ questionId, questionTitle, filters = {}, showR
                       {/* Show percentage closest to bar, then descriptor */}
                       {!percentageFitsInside && (
                         <span className="text-gray-900 text-xs font-bold whitespace-nowrap">
-                          {Math.round(item.percentage)}%
+                          {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                         </span>
                       )}
                       <span className="text-gray-700 text-xs font-semibold uppercase whitespace-nowrap">
@@ -545,7 +545,7 @@ const HorizontalRatingsChart = ({ questionId, questionTitle, filters = {}, showR
                       {/* Show percentage closest to bar if it doesn't fit inside, then descriptor */}
                       {!percentageFitsInside && (
                         <span className="text-gray-900 text-xs font-bold whitespace-nowrap">
-                          {Math.round(item.percentage)}%
+                          {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                         </span>
                       )}
                       <span className="text-gray-700 text-xs font-semibold uppercase whitespace-nowrap">

src/components/MatrixChart.jsx

@@ -166,7 +166,7 @@ const MatrixChart = ({ questionId, questionTitle, filters, _color, wasmService }
                         event.stopPropagation();
 
                         if (device.count > 0) {
-                          setTooltipContent(`${device.count} respondents (${Math.round(device.percentage)}%)`);
+                          setTooltipContent(`${device.count} respondents (${Math.round(device.percentage) === 0 && device.count > 0 ? '<1%' : `${Math.round(device.percentage)}%`})`);
 
                           const screenY = event.clientY;
                           const screenX = event.clientX;
@@ -242,7 +242,7 @@ const MatrixChart = ({ questionId, questionTitle, filters, _color, wasmService }
                         >
                           {device.percentage > 0 && (
                             <span className={`text-white font-semibold text-xs ${idx === 0 ? 'pl-2 pr-1' : idx === 2 ? 'pl-1 pr-2' : 'px-1'}`}>
-                              {Math.round(device.percentage)}%
+                              {Math.round(device.percentage) === 0 && device.count > 0 ? '<1%' : `${Math.round(device.percentage)}%`}
                             </span>
                           )}
                         </div>
@@ -321,7 +321,7 @@ const MatrixChart = ({ questionId, questionTitle, filters, _color, wasmService }
                             event.stopPropagation();
 
                             if (device.count > 0) {
-                              setTooltipContent(`${Math.round(device.percentage)}%`);
+                              setTooltipContent(`${Math.round(device.percentage) === 0 && device.count > 0 ? '<1%' : `${Math.round(device.percentage)}%`}`);
 
                               const screenY = event.clientY;
                               const screenX = event.clientX;
@@ -397,7 +397,7 @@ const MatrixChart = ({ questionId, questionTitle, filters, _color, wasmService }
                             >
                               {device.percentage > 0 && (
                                 <span className={`text-white font-semibold text-xs ${idx === 0 ? 'pl-2 pr-1' : idx === 2 ? 'pl-1 pr-2' : 'px-1'}`}>
-                                  {Math.round(device.percentage)}%
+                                  {Math.round(device.percentage) === 0 && device.count > 0 ? '<1%' : `${Math.round(device.percentage)}%`}
                                 </span>
                               )}
                             </div>

src/components/QualityComparisonRatingsGrid.jsx

@@ -259,7 +259,7 @@ const QualityComparisonRatingsGrid = ({ filters = {}, wasmService }) => {
                           }}
                         >
                           <span className="text-white font-semibold text-xs px-1">
-                            {Math.round(item.percentage)}%
+                            {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                           </span>
                         </div>
                       ))}

src/components/QuantitativeChart.jsx

@@ -68,7 +68,7 @@ const QuantitativeChart = ({ questionId, questionTitle, filterType, filters = {}
             return {
               Resource: cleanAnswer,
               resource: cleanAnswer,
-              [columnName]: item.percentage ? `${Math.round(item.percentage)}%` : '0%',
+              [columnName]: item.percentage ? (Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`) : '0%',
               count: item.count
             };
           });

src/components/RatingsChart.jsx

@@ -265,7 +265,7 @@ const RatingsChart = ({ questionId, questionTitle, filters = {}, _color, _colorS
                   >
                     {/* Percentage text inside bar - always show */}
                     <span className="text-white font-semibold text-xs px-1">
-                      {Math.round(item.percentage)}%
+                      {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                     </span>
                   </div>
                 );
@@ -309,7 +309,7 @@ const RatingsChart = ({ questionId, questionTitle, filters = {}, _color, _colorS
                       minWidth: item.percentage > 0 ? '30px' : '0'
                     }}
                   >
-                    {item.percentage >= 5 && `${Math.round(item.percentage)}%`}
+                    {item.percentage >= 5 && (Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`)}
                   </div>
                 </div>
                 <div className="text-xs text-gray-500 w-12 text-right">

src/components/UnderstandingRatingsGrid.jsx

@@ -258,7 +258,7 @@ const UnderstandingRatingsGrid = ({ filters = {}, wasmService }) => {
                             onMouseMove={handleBarMouseMove}
                           >
                             <span className="text-white font-semibold text-xs px-1">
-                              {Math.round(item.percentage)}%
+                              {Math.round(item.percentage) === 0 && item.count > 0 ? '<1%' : `${Math.round(item.percentage)}%`}
                             </span>
                           </div>
                         );