react-native-inapp-inspector 2.3.5 → 2.3.7

package/dist/esm/components/Inspector/AnalyticsTab.js

@@ -21,14 +21,12 @@ const AnalyticsHeader = React.memo(() => {
     const userProperties = getCurrentUserProperties();
     const defaultParams = getDefaultEventParameters();
     const isTrackingEnabled = getCollectionEnabled();
-    // If there are no analytics events in the session, hide the graph, category breakdown, and realtime card
     if (analyticsEvents.length === 0) {
         return null;
     }
     const hasUserProps = Object.keys(userProperties).length > 0;
     const hasDefaultParams = Object.keys(defaultParams).length > 0;
     const totalEvents = filteredAnalyticsEvents.length;
-    // Category counts & breakdown across all session events
     const categoryStats = useMemo(() => {
         let ecommerce = 0;
         let page_view = 0;
@@ -69,7 +67,6 @@ const AnalyticsHeader = React.memo(() => {
             totalCount: total,
         };
     }, [analyticsEvents]);
-    // Top Screen Views Leaderboard (GA4 Realtime Card)
     const topScreens = useMemo(() => {
         const screenMap = new Map();
         for (const e of filteredAnalyticsEvents) {
@@ -91,7 +88,6 @@ const AnalyticsHeader = React.memo(() => {
             barWidthPct: Math.round((count / maxVal) * 100),
         }));
     }, [filteredAnalyticsEvents]);
-    // Multi-select category toggle from top button group
     const toggleCategoryFilter = (cat) => {
         animateNextLayout();
         setAnalyticsFilters(prev => {
@@ -123,7 +119,6 @@ const AnalyticsHeader = React.memo(() => {
             return { ...prev, categories: nextCategories };
         });
     };
-    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (60s live rolling stream)
     const BUCKET_COUNT = 12;
     const chartHeight = 64;
     const svgWidth = 320;
@@ -140,8 +135,8 @@ const AnalyticsHeader = React.memo(() => {
     const histogramData = useMemo(() => {
         const buckets = [];
         const now = Date.now();
-        const windowMs = 60000; // 60s live rolling window
-        const bucketDuration = windowMs / BUCKET_COUNT; // 5s per bucket
+        const windowMs = 60000;
+        const bucketDuration = windowMs / BUCKET_COUNT;
         for (let i = 0; i < BUCKET_COUNT; i++) {
             const bucketAgeSec = Math.round(((BUCKET_COUNT - 1 - i) * bucketDuration) / 1000);
             buckets.push({
@@ -181,7 +176,6 @@ const AnalyticsHeader = React.memo(() => {
             const normalizedH = (b.total / maxVal) * (chartHeight - 22);
             b.y = chartHeight - 10 - normalizedH;
         });
-        // Generate Cubic Bézier Spline paths
         let linePath = `M ${buckets[0].x.toFixed(1)} ${buckets[0].y.toFixed(1)}`;
         for (let i = 0; i < buckets.length - 1; i++) {
             const p0 = buckets[Math.max(0, i - 1)];
@@ -209,7 +203,7 @@ const AnalyticsHeader = React.memo(() => {
     }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<View style={styles.analyticsHeaderCard}>
-      {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
+      
       <View style={styles.analyticsHeaderTop}>
         <View style={{ flex: 1 }}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -249,9 +243,9 @@ const AnalyticsHeader = React.memo(() => {
         </TouchableOpacity>
       </View>
 
-      {/* ── 2. Multi-Select Category Filter Buttons (AT THE TOP) ──────────── */}
+      
       <View style={{ marginTop: 10, marginBottom: 8 }}>
-        {/* Multi-color Proportional Segmented Bar */}
+        
         <View style={{
             height: 4.5,
             borderRadius: 2.5,
@@ -278,13 +272,13 @@ const AnalyticsHeader = React.memo(() => {
             }}/>)}
         </View>
 
-        {/* Multi-Select Category Buttons */}
+        
         <View style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
             gap: 6,
         }}>
-          {/* All Button */}
+          
           {(() => {
             const isAllSelected = analyticsFilters.categories.has('all');
             return (<TouchableScale onPress={() => toggleCategoryFilter('all')} style={[
@@ -318,7 +312,7 @@ const AnalyticsHeader = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Ecommerce Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('ecommerce');
@@ -353,7 +347,7 @@ const AnalyticsHeader = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Screens Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('page_view');
@@ -388,7 +382,7 @@ const AnalyticsHeader = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* System Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('system');
@@ -423,7 +417,7 @@ const AnalyticsHeader = React.memo(() => {
               </TouchableScale>);
         })()}
 
-          {/* Custom Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('custom');
@@ -460,7 +454,7 @@ const AnalyticsHeader = React.memo(() => {
         </View>
       </View>
 
-      {/* ── 3. GA4 Realtime Metric Hero & Activity Chart (UNDER CATEGORIES) ─ */}
+      
       <View style={{
             marginTop: 2,
             marginBottom: 8,
@@ -470,7 +464,7 @@ const AnalyticsHeader = React.memo(() => {
             borderColor: AppColors.dividerColor,
             padding: 10,
         }}>
-        {/* Hero Metric Row */}
+        
         <View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -497,7 +491,7 @@ const AnalyticsHeader = React.memo(() => {
             </View>
           </View>
 
-          {/* Realtime Rate Badges */}
+          
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
             <View style={{
             flexDirection: 'row',
@@ -542,7 +536,7 @@ const AnalyticsHeader = React.memo(() => {
           </View>
         </View>
 
-        {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
+        
         <View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
           <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <Defs>
@@ -557,14 +551,14 @@ const AnalyticsHeader = React.memo(() => {
               </SvgLinearGradient>
             </Defs>
 
-            {/* Subtle Grid Guidelines */}
+            
             <Line x1="6" y1={chartHeight - 6} x2={svgWidth - 6} y2={chartHeight - 6} stroke="#E2E8F0" strokeWidth="1"/>
             <Line x1="6" y1={chartHeight / 2} x2={svgWidth - 6} y2={chartHeight / 2} stroke="#F1F5F9" strokeWidth="1" strokeDasharray="4,4"/>
 
-            {/* Glowing Area Underlay */}
+            
             <Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
 
-            {/* Vertical Crashlytics Histogram Bars */}
+            
             {histogramData.buckets.map((b, idx) => {
             const isSelected = selectedBucketIdx === idx;
             const barWidth = 10;
@@ -572,28 +566,28 @@ const AnalyticsHeader = React.memo(() => {
             const barHeight = Math.max(3, chartHeight - 8 - b.y);
             const barY = chartHeight - 8 - barHeight;
             return (<G key={`bar-${b.index}`}>
-                  {/* Background slot */}
+                  
                   <Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
 
-                  {/* Active Event Bar */}
+                  
                   {b.total > 0 && (<Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
 
-                  {/* Selected Cursor Line */}
+                  
                   {isSelected && (<Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
                 </G>);
         })}
 
-            {/* Crashlytics Apex Trendline */}
+            
             <Path d={histogramData.linePath} fill="none" stroke="#8B5CF6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
 
-            {/* Pulsing Dot on Current Active Time Bucket */}
+            
             {histogramData.buckets.length > 0 && (<G>
                 <Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="5.5" fill="#8B5CF6" opacity="0.25"/>
                 <Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="3" fill="#7C3AED"/>
               </G>)}
           </Svg>
 
-          {/* Invisible Touch Columns for Interactive Bucket Selection */}
+          
           <View style={{
             position: 'absolute',
             top: 0,
@@ -606,7 +600,7 @@ const AnalyticsHeader = React.memo(() => {
           </View>
         </View>
 
-        {/* Selected Bucket Quick Breakdown Overlay */}
+        
         {selectedBucket && (<View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -642,7 +636,7 @@ const AnalyticsHeader = React.memo(() => {
             </View>
           </View>)}
 
-        {/* Timeline Axis Labels (60s Realtime Rolling Stream) */}
+        
         <View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -680,7 +674,7 @@ const AnalyticsHeader = React.memo(() => {
         </View>
       </View>
 
-      {/* ── Top Screens / Views Mini Leaderboard (GA4 Realtime Overview) ──── */}
+      
       {topScreens.length > 0 && (<View style={{
                 marginTop: 8,
                 backgroundColor: `${AppColors.sky500}0A`,
@@ -738,7 +732,7 @@ const AnalyticsHeader = React.memo(() => {
                     {scr.count} ({scr.pct}%)
                   </Text>
                 </View>
-                {/* Mini Horizontal Progress Meter */}
+                
                 <View style={{
                     height: 3,
                     borderRadius: 1.5,
@@ -755,9 +749,9 @@ const AnalyticsHeader = React.memo(() => {
           </View>
         </View>)}
 
-      {/* ── Expandable User Properties & Default Parameters ───────────────── */}
+      
       {analyticsHeaderExpanded && (<>
-          {/* Stats Row */}
+          
           <View style={styles.analyticsStatsRow}>
             <View style={styles.analyticsStatBox}>
               <Text style={styles.analyticsStatValue}>{totalEvents}</Text>
@@ -777,7 +771,7 @@ const AnalyticsHeader = React.memo(() => {
             </View>
           </View>
 
-          {/* Details Section */}
+          
           {(hasUserProps || hasDefaultParams) && (<View style={styles.analyticsHeaderDetails}>
               {hasUserProps && (<View style={{ marginBottom: 10 }}>
                   <Text style={styles.detailsGroupTitle}>{t('analytics.userProperties')}</Text>
@@ -843,7 +837,7 @@ const AnalyticsTab = React.memo(() => {
             })()}/>);
     }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent, logRouteMapRef]);
     return (<>
-      {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+      
       {selectedEvent == null && (<View style={[
                 styles.toolbarRow,
                 { marginTop: 12, marginBottom: 8 },
@@ -888,7 +882,7 @@ const AnalyticsTab = React.memo(() => {
                 : AppColors.grayTextStrong} size={16}/>
           </TouchableOpacity>
 
-          {/* GA Dashboard-style Filter Button */}
+          
           <TouchableOpacity style={[
                 styles.toolbarBtn,
                 isAnalyticsFilterApplied && {
@@ -924,7 +918,7 @@ const AnalyticsTab = React.memo(() => {
         </View>
       </View>)}
 
-      {/* Filter Modal */}
+      
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>