react-native-inapp-inspector 2.3.5 → 2.3.7

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

@@ -59,14 +59,12 @@ const AnalyticsHeader = react_1.default.memo(() => {
     const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
     const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
     const isTrackingEnabled = (0, analyticsLogger_1.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 = (0, react_1.useMemo)(() => {
         let ecommerce = 0;
         let page_view = 0;
@@ -107,7 +105,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
             totalCount: total,
         };
     }, [analyticsEvents]);
-    // Top Screen Views Leaderboard (GA4 Realtime Card)
     const topScreens = (0, react_1.useMemo)(() => {
         const screenMap = new Map();
         for (const e of filteredAnalyticsEvents) {
@@ -129,7 +126,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
             barWidthPct: Math.round((count / maxVal) * 100),
         }));
     }, [filteredAnalyticsEvents]);
-    // Multi-select category toggle from top button group
     const toggleCategoryFilter = (cat) => {
         (0, InspectorContext_1.animateNextLayout)();
         setAnalyticsFilters(prev => {
@@ -161,7 +157,6 @@ const AnalyticsHeader = react_1.default.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;
@@ -178,8 +173,8 @@ const AnalyticsHeader = react_1.default.memo(() => {
     const histogramData = (0, react_1.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({
@@ -219,7 +214,6 @@ const AnalyticsHeader = react_1.default.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)];
@@ -247,7 +241,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
     }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
-      {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
+      
       <react_native_1.View style={styles_1.default.analyticsHeaderTop}>
         <react_native_1.View style={{ flex: 1 }}>
           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -287,9 +281,9 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
 
-      {/* ── 2. Multi-Select Category Filter Buttons (AT THE TOP) ──────────── */}
+      
       <react_native_1.View style={{ marginTop: 10, marginBottom: 8 }}>
-        {/* Multi-color Proportional Segmented Bar */}
+        
         <react_native_1.View style={{
             height: 4.5,
             borderRadius: 2.5,
@@ -316,13 +310,13 @@ const AnalyticsHeader = react_1.default.memo(() => {
             }}/>)}
         </react_native_1.View>
 
-        {/* Multi-Select Category Buttons */}
+        
         <react_native_1.View style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
             gap: 6,
         }}>
-          {/* All Button */}
+          
           {(() => {
             const isAllSelected = analyticsFilters.categories.has('all');
             return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('all')} style={[
@@ -356,7 +350,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Ecommerce Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('ecommerce');
@@ -391,7 +385,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Screens Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('page_view');
@@ -426,7 +420,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* System Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('system');
@@ -461,7 +455,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
               </TouchableScale_1.default>);
         })()}
 
-          {/* Custom Button */}
+          
           {(() => {
             const isSelected = !analyticsFilters.categories.has('all') &&
                 analyticsFilters.categories.has('custom');
@@ -498,7 +492,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>
 
-      {/* ── 3. GA4 Realtime Metric Hero & Activity Chart (UNDER CATEGORIES) ─ */}
+      
       <react_native_1.View style={{
             marginTop: 2,
             marginBottom: 8,
@@ -508,7 +502,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             borderColor: AppColors_1.AppColors.dividerColor,
             padding: 10,
         }}>
-        {/* Hero Metric Row */}
+        
         <react_native_1.View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -535,7 +529,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Realtime Rate Badges */}
+          
           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
             <react_native_1.View style={{
             flexDirection: 'row',
@@ -580,7 +574,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
+        
         <react_native_1.View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
           <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <react_native_svg_1.Defs>
@@ -595,14 +589,14 @@ const AnalyticsHeader = react_1.default.memo(() => {
               </react_native_svg_1.LinearGradient>
             </react_native_svg_1.Defs>
 
-            {/* Subtle Grid Guidelines */}
+            
             <react_native_svg_1.Line x1="6" y1={chartHeight - 6} x2={svgWidth - 6} y2={chartHeight - 6} stroke="#E2E8F0" strokeWidth="1"/>
             <react_native_svg_1.Line x1="6" y1={chartHeight / 2} x2={svgWidth - 6} y2={chartHeight / 2} stroke="#F1F5F9" strokeWidth="1" strokeDasharray="4,4"/>
 
-            {/* Glowing Area Underlay */}
+            
             <react_native_svg_1.Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
 
-            {/* Vertical Crashlytics Histogram Bars */}
+            
             {histogramData.buckets.map((b, idx) => {
             const isSelected = selectedBucketIdx === idx;
             const barWidth = 10;
@@ -610,28 +604,28 @@ const AnalyticsHeader = react_1.default.memo(() => {
             const barHeight = Math.max(3, chartHeight - 8 - b.y);
             const barY = chartHeight - 8 - barHeight;
             return (<react_native_svg_1.G key={`bar-${b.index}`}>
-                  {/* Background slot */}
+                  
                   <react_native_svg_1.Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
 
-                  {/* Active Event Bar */}
+                  
                   {b.total > 0 && (<react_native_svg_1.Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
 
-                  {/* Selected Cursor Line */}
+                  
                   {isSelected && (<react_native_svg_1.Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
                 </react_native_svg_1.G>);
         })}
 
-            {/* Crashlytics Apex Trendline */}
+            
             <react_native_svg_1.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 && (<react_native_svg_1.G>
                 <react_native_svg_1.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"/>
                 <react_native_svg_1.Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="3" fill="#7C3AED"/>
               </react_native_svg_1.G>)}
           </react_native_svg_1.default>
 
-          {/* Invisible Touch Columns for Interactive Bucket Selection */}
+          
           <react_native_1.View style={{
             position: 'absolute',
             top: 0,
@@ -644,7 +638,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* Selected Bucket Quick Breakdown Overlay */}
+        
         {selectedBucket && (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -680,7 +674,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>)}
 
-        {/* Timeline Axis Labels (60s Realtime Rolling Stream) */}
+        
         <react_native_1.View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -718,7 +712,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>
 
-      {/* ── Top Screens / Views Mini Leaderboard (GA4 Realtime Overview) ──── */}
+      
       {topScreens.length > 0 && (<react_native_1.View style={{
                 marginTop: 8,
                 backgroundColor: `${AppColors_1.AppColors.sky500}0A`,
@@ -776,7 +770,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
                     {scr.count} ({scr.pct}%)
                   </react_native_1.Text>
                 </react_native_1.View>
-                {/* Mini Horizontal Progress Meter */}
+                
                 <react_native_1.View style={{
                     height: 3,
                     borderRadius: 1.5,
@@ -793,9 +787,9 @@ const AnalyticsHeader = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>)}
 
-      {/* ── Expandable User Properties & Default Parameters ───────────────── */}
+      
       {analyticsHeaderExpanded && (<>
-          {/* Stats Row */}
+          
           <react_native_1.View style={styles_1.default.analyticsStatsRow}>
             <react_native_1.View style={styles_1.default.analyticsStatBox}>
               <react_native_1.Text style={styles_1.default.analyticsStatValue}>{totalEvents}</react_native_1.Text>
@@ -815,7 +809,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Details Section */}
+          
           {(hasUserProps || hasDefaultParams) && (<react_native_1.View style={styles_1.default.analyticsHeaderDetails}>
               {hasUserProps && (<react_native_1.View style={{ marginBottom: 10 }}>
                   <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{t('analytics.userProperties')}</react_native_1.Text>
@@ -881,7 +875,7 @@ const AnalyticsTab = react_1.default.memo(() => {
             })()}/>);
     }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent, logRouteMapRef]);
     return (<>
-      {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
+      
       {selectedEvent == null && (<react_native_1.View style={[
                 styles_1.default.toolbarRow,
                 { marginTop: 12, marginBottom: 8 },
@@ -926,7 +920,7 @@ const AnalyticsTab = react_1.default.memo(() => {
                 : AppColors_1.AppColors.grayTextStrong} size={16}/>
           </react_native_1.TouchableOpacity>
 
-          {/* GA Dashboard-style Filter Button */}
+          
           <react_native_1.TouchableOpacity style={[
                 styles_1.default.toolbarBtn,
                 isAnalyticsFilterApplied && {
@@ -962,7 +956,7 @@ const AnalyticsTab = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>)}
 
-      {/* Filter Modal */}
+      
       <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>