From ac1995f63fe092eff0a206cafd4394fb8aa1012e Mon Sep 17 00:00:00 2001
From: Kelly <kelly@cannabrands.com>
Date: Wed, 10 Dec 2025 23:24:31 -0700
Subject: [PATCH] fix(pricing): Simplify category chart to prevent overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace complex price range bars with simple horizontal bars
- Use overflow-hidden to prevent bars extending beyond container
- Calculate bar width as percentage of max avg price
- Limit to top 12 categories for cleaner display
- Fixed-width labels prevent layout shift

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 cannaiq/src/pages/IntelligencePricing.tsx | 54 +++++++++--------------
 1 file changed, 20 insertions(+), 34 deletions(-)

diff --git a/cannaiq/src/pages/IntelligencePricing.tsx b/cannaiq/src/pages/IntelligencePricing.tsx
index 9b4425e9..ffcaaf57 100644
--- a/cannaiq/src/pages/IntelligencePricing.tsx
+++ b/cannaiq/src/pages/IntelligencePricing.tsx
@@ -196,43 +196,29 @@ export function IntelligencePricing() {
             <BarChart3 className="w-5 h-5 text-green-500" />
             Average Price by Category
           </h3>
-          <div className="space-y-3">
-            {sortedCategories.map((cat) => (
-              <div key={cat.category} className="flex items-center gap-3">
-                <span className="text-sm font-medium w-32 truncate" title={cat.category}>
-                  {cat.category || 'Unknown'}
-                </span>
-                <div className="flex-1 relative">
-                  {/* Price range bar */}
-                  <div className="bg-gray-100 rounded-full h-6 relative">
-                    {/* Min-Max range */}
-                    <div
-                      className="absolute top-0 h-6 bg-blue-100 rounded-full"
-                      style={{
-                        left: `${(cat.minPrice / (overall?.maxPrice || 100)) * 100}%`,
-                        width: `${((cat.maxPrice - cat.minPrice) / (overall?.maxPrice || 100)) * 100}%`,
-                      }}
-                    />
-                    {/* Average marker */}
-                    <div
-                      className="absolute top-0 h-6 w-1 bg-green-500 rounded"
-                      style={{ left: `${(cat.avgPrice / (overall?.maxPrice || 100)) * 100}%` }}
-                    />
+          <div className="space-y-2">
+            {sortedCategories.slice(0, 12).map((cat) => {
+              const maxPrice = Math.max(...sortedCategories.map(c => c.avgPrice || 0), 1);
+              const barWidth = Math.min(((cat.avgPrice || 0) / maxPrice) * 100, 100);
+              return (
+                <div key={cat.category} className="flex items-center gap-3">
+                  <span className="text-sm font-medium w-28 truncate shrink-0" title={cat.category}>
+                    {cat.category || 'Unknown'}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <div className="bg-gray-100 rounded h-5 overflow-hidden">
+                      <div
+                        className="bg-gradient-to-r from-emerald-400 to-emerald-500 h-5 rounded transition-all"
+                        style={{ width: `${barWidth}%` }}
+                      />
+                    </div>
                   </div>
-                </div>
-                <div className="flex gap-4 text-xs w-48">
-                  <span className="text-gray-500">
-                    Min: <span className="text-blue-600 font-mono">{formatPrice(cat.minPrice)}</span>
-                  </span>
-                  <span className="text-gray-500">
-                    Avg: <span className="text-green-600 font-mono font-bold">{formatPrice(cat.avgPrice)}</span>
-                  </span>
-                  <span className="text-gray-500">
-                    Max: <span className="text-orange-600 font-mono">{formatPrice(cat.maxPrice)}</span>
+                  <span className="text-sm font-mono font-semibold text-emerald-600 w-16 text-right shrink-0">
+                    {formatPrice(cat.avgPrice)}
                   </span>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </div>