react-native-inapp-inspector 1.1.35 → 2.0.1

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

@@ -1,8 +1,7 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import { FlatList, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
-import AnalyticsDetail from '../AnalyticsDetail';
 import AnalyticsFilterModal from './AnalyticsFilterModal';
 import EndOfListFooter from '../EndOfListFooter';
 import styles from '../../styles';
@@ -13,7 +12,7 @@ import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGrad
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
-import { LayersIcon, CheckIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
+import { LayersIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
 const AnalyticsHeader = React.memo(() => {
     const { t } = useTranslation();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
@@ -21,6 +20,10 @@ 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;
@@ -119,16 +122,25 @@ const AnalyticsHeader = React.memo(() => {
             return { ...prev, categories: nextCategories };
         });
     };
-    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (-30m / 30s to NOW)
+    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (60s live rolling stream)
     const BUCKET_COUNT = 12;
     const chartHeight = 64;
     const svgWidth = 320;
     const [selectedBucketIdx, setSelectedBucketIdx] = useState(null);
+    const [liveTick, setLiveTick] = useState(0);
+    useEffect(() => {
+        if (!isTrackingEnabled)
+            return;
+        const interval = setInterval(() => {
+            setLiveTick(t => (t + 1) % 100000);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [isTrackingEnabled]);
     const histogramData = useMemo(() => {
         const buckets = [];
         const now = Date.now();
-        const windowMs = 60000; // 60s window
-        const bucketDuration = windowMs / BUCKET_COUNT;
+        const windowMs = 60000; // 60s live rolling window
+        const bucketDuration = windowMs / BUCKET_COUNT; // 5s per bucket
         for (let i = 0; i < BUCKET_COUNT; i++) {
             const bucketAgeSec = Math.round(((BUCKET_COUNT - 1 - i) * bucketDuration) / 1000);
             buckets.push({
@@ -193,7 +205,7 @@ const AnalyticsHeader = React.memo(() => {
             peakVal,
             eventRate,
         };
-    }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
+    }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<View style={styles.analyticsHeaderCard}>
       {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
@@ -265,7 +277,7 @@ const AnalyticsHeader = React.memo(() => {
             }}/>)}
         </View>
 
-        {/* Multi-Select Category Buttons with Checkboxes */}
+        {/* Multi-Select Category Buttons */}
         <View style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -294,18 +306,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isAllSelected ? AppColors.white : AppColors.indigo400,
-                    backgroundColor: isAllSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isAllSelected && <CheckIcon color={AppColors.indigo600Alt} size={8}/>}
-                </View>
                 <LayersIcon color={isAllSelected ? AppColors.white : AppColors.indigo600Alt} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -341,18 +341,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.amber500,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.amber600} size={8}/>}
-                </View>
                 <CartIcon color={isSelected ? AppColors.white : AppColors.amber700} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -388,18 +376,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.sky400,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.sky600} size={8}/>}
-                </View>
                 <GlobeIcon color={isSelected ? AppColors.white : AppColors.sky600} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -435,18 +411,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.purple400,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.violet600} size={8}/>}
-                </View>
                 <BoltIcon color={isSelected ? AppColors.white : AppColors.purple} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -482,18 +446,6 @@ const AnalyticsHeader = React.memo(() => {
                         elevation: 2,
                     },
                 ]}>
-                <View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: isSelected ? AppColors.white : AppColors.pink400,
-                    backgroundColor: isSelected ? AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                  {isSelected && <CheckIcon color={AppColors.pink600} size={8}/>}
-                </View>
                 <SparkleIcon color={isSelected ? AppColors.white : AppColors.brandPurple} size={11}/>
                 <Text style={{
                     fontFamily: AppFonts.interBold,
@@ -590,8 +542,8 @@ const AnalyticsHeader = React.memo(() => {
         </View>
 
         {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
-        <View style={{ height: chartHeight, position: 'relative' }}>
-          <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
+        <View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
+          <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <Defs>
               <SvgLinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
                 <Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
@@ -689,7 +641,7 @@ const AnalyticsHeader = React.memo(() => {
             </View>
           </View>)}
 
-        {/* Timeline Axis Labels */}
+        {/* Timeline Axis Labels (60s Realtime Rolling Stream) */}
         <View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -701,21 +653,21 @@ const AnalyticsHeader = React.memo(() => {
             fontSize: 8.5,
             color: AppColors.grayTextWeak,
         }}>
-            {t('analytics.time30mAgo')}
+            -60s
           </Text>
           <Text style={{
             fontFamily: AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors.grayTextWeak,
         }}>
-            {t('analytics.time20mAgo')}
+            -40s
           </Text>
           <Text style={{
             fontFamily: AppFonts.interMedium,
             fontSize: 8.5,
             color: AppColors.grayTextWeak,
         }}>
-            {t('analytics.time10mAgo')}
+            -20s
           </Text>
           <Text style={{
             fontFamily: AppFonts.interBold,
@@ -955,7 +907,7 @@ const AnalyticsTab = React.memo(() => {
       <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<View style={styles.emptyContainer}>
+        {isAnalyticsLayoutReady ? (<FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<View style={styles.emptyContainer}>
                 <View style={styles.emptyIconWrap}>
                   <EmptyRadarIcon color={AppColors.purple} size={32}/>
                 </View>