Improve chart visuals and add null safety in analytics

Refactored GrowthAnalyticsChart to use Area for 'orders' with gradient fill and improved dot handling. Enhanced PredictionsChart with consistent null checks for predictions data, improved tooltip rendering, and adjusted chart margins and axis styles. Updated RevenueChart to add activeDot styling for better interactivity.

components/analytics/GrowthAnalyticsChart.tsx

@@ -201,6 +201,10 @@ export default function GrowthAnalyticsChart({
                       <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
                       <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                     </linearGradient>
+                    <linearGradient id="colorOrdersGrowth" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.6} />
+                      <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                    </linearGradient>
                   </defs>
                   <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
                   <XAxis
@@ -255,14 +259,16 @@ export default function GrowthAnalyticsChart({
                       return null;
                     }}
                   />
-                  <Line
+                  <Area
                     yAxisId="left"
                     type="monotone"
                     dataKey="orders"
                     stroke="#3b82f6"
                     strokeWidth={2}
-                    dot={{ fill: "#3b82f6", r: 3 }}
+                    dot={false}
+                    activeDot={{ r: 4, strokeWidth: 0 }}
                     name="Orders"
+                    fill="url(#colorOrdersGrowth)"
                   />
                   <Area
                     yAxisId="right"
@@ -270,7 +276,8 @@ export default function GrowthAnalyticsChart({
                     dataKey="revenue"
                     stroke="#10b981"
                     strokeWidth={3}
-                    dot={{ fill: "#10b981", r: 4 }}
+                    dot={false}
+                    activeDot={{ r: 5, strokeWidth: 0 }}
                     name="Revenue"
                     fill="url(#colorRevenueGrowth)"
                   />