react-native-inapp-inspector 1.1.29 → 1.1.32

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

@@ -125,17 +125,36 @@ const AnalyticsHeader = react_1.default.memo(() => {
             barWidthPct: Math.round((count / maxVal) * 100),
         }));
     }, [filteredAnalyticsEvents]);
-    // Toggle category filter from top button group
+    // Multi-select category toggle from top button group
     const toggleCategoryFilter = (cat) => {
         (0, InspectorContext_1.animateNextLayout)();
         setAnalyticsFilters(prev => {
-            const isSelected = !prev.categories.has('all') && prev.categories.has(cat);
-            if (isSelected) {
+            if (cat === 'all') {
                 return { ...prev, categories: new Set(['all']) };
             }
+            const nextCategories = new Set(prev.categories);
+            if (nextCategories.has('all')) {
+                nextCategories.delete('all');
+                nextCategories.add(cat);
+            }
             else {
-                return { ...prev, categories: new Set([cat]) };
+                if (nextCategories.has(cat)) {
+                    nextCategories.delete(cat);
+                    if (nextCategories.size === 0) {
+                        nextCategories.add('all');
+                    }
+                }
+                else {
+                    nextCategories.add(cat);
+                    if (nextCategories.has('ecommerce') &&
+                        nextCategories.has('page_view') &&
+                        nextCategories.has('system') &&
+                        nextCategories.has('custom')) {
+                        return { ...prev, categories: new Set(['all']) };
+                    }
+                }
             }
+            return { ...prev, categories: nextCategories };
         });
     };
     // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (-30m / 30s to NOW)
@@ -215,7 +234,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
     }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
-      {/* ── Top Header Row (GA4 Style) ─────────────────────────────────────── */}
+      {/* ── 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 }}>
@@ -255,9 +274,280 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
 
-      {/* ── GA4 Realtime Metric Hero & Activity Chart ─────────────────────── */}
+      {/* ── 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,
+            backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
+            flexDirection: 'row',
+            overflow: 'hidden',
+            marginBottom: 8,
+        }}>
+          {categoryStats.ecommerce > 0 && (<react_native_1.View style={{
+                flex: categoryStats.ecommerce,
+                backgroundColor: AppColors_1.AppColors.amber500,
+            }}/>)}
+          {categoryStats.page_view > 0 && (<react_native_1.View style={{
+                flex: categoryStats.page_view,
+                backgroundColor: AppColors_1.AppColors.sky500,
+            }}/>)}
+          {categoryStats.system > 0 && (<react_native_1.View style={{
+                flex: categoryStats.system,
+                backgroundColor: AppColors_1.AppColors.purple,
+            }}/>)}
+          {categoryStats.custom > 0 && (<react_native_1.View style={{
+                flex: categoryStats.custom,
+                backgroundColor: AppColors_1.AppColors.brandPurple,
+            }}/>)}
+        </react_native_1.View>
+
+        {/* Multi-Select Category Buttons with Checkboxes */}
+        <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={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isAllSelected ? AppColors_1.AppColors.indigo600Alt : AppColors_1.AppColors.indigo50,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isAllSelected ? AppColors_1.AppColors.indigo600 : AppColors_1.AppColors.indigo400,
+                    },
+                    isAllSelected && {
+                        shadowColor: AppColors_1.AppColors.indigo600Alt,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo400,
+                    backgroundColor: isAllSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isAllSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.indigo600Alt} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.LayersIcon color={isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt,
+                }}>
+                  {t('analytics.allCategory')}: {categoryStats.totalCount}
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* Ecommerce Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('ecommerce');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('ecommerce')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.amber600 : AppColors_1.AppColors.amber100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.amber200,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.amber600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber500,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.amber600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber800Warm,
+                }}>
+                  {t('analytics.ecommerceCategory')}: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* Screens Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('page_view');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('page_view')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.sky600 : AppColors_1.AppColors.sky100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.blue700 : AppColors_1.AppColors.sky400,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.sky600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky400,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.sky600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600,
+                }}>
+                  {t('analytics.screensCategory')}: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* System Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('system');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('system')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.violet600 : AppColors_1.AppColors.purple100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.purpleShade700 : AppColors_1.AppColors.purple200,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.violet600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple400,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.violet600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
+                }}>
+                  {t('analytics.systemCategory')}: {categoryStats.system} ({categoryStats.systemPct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* Custom Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('custom');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('custom')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.pink600 : AppColors_1.AppColors.pink100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.rose700 : AppColors_1.AppColors.roseBorder,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.pink600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink400,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.pink600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink600,
+                }}>
+                  {t('analytics.customCategory')}: {categoryStats.custom} ({categoryStats.customPct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* ── 3. GA4 Realtime Metric Hero & Activity Chart (UNDER CATEGORIES) ─ */}
       <react_native_1.View style={{
-            marginTop: 10,
+            marginTop: 2,
             marginBottom: 8,
             backgroundColor: AppColors_1.AppColors.grayBackground,
             borderRadius: 10,
@@ -475,199 +765,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>
 
-      {/* ── Category Breakdown Distribution Bar & Interactive Filter Buttons ─ */}
-      <react_native_1.View style={{ marginTop: 2, marginBottom: 4 }}>
-        {/* Multi-color Proportional Segmented Bar */}
-        <react_native_1.View style={{
-            height: 5,
-            borderRadius: 2.5,
-            backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
-            flexDirection: 'row',
-            overflow: 'hidden',
-            marginBottom: 8,
-        }}>
-          {categoryStats.ecommerce > 0 && (<react_native_1.View style={{
-                flex: categoryStats.ecommerce,
-                backgroundColor: AppColors_1.AppColors.amber500,
-            }}/>)}
-          {categoryStats.page_view > 0 && (<react_native_1.View style={{
-                flex: categoryStats.page_view,
-                backgroundColor: AppColors_1.AppColors.sky500,
-            }}/>)}
-          {categoryStats.system > 0 && (<react_native_1.View style={{
-                flex: categoryStats.system,
-                backgroundColor: AppColors_1.AppColors.purple,
-            }}/>)}
-          {categoryStats.custom > 0 && (<react_native_1.View style={{
-                flex: categoryStats.custom,
-                backgroundColor: AppColors_1.AppColors.brandPurple,
-            }}/>)}
-        </react_native_1.View>
-
-        {/* 4 Interactive Category Filter Buttons */}
-        <react_native_1.View style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: 6,
-        }}>
-          {/* Ecommerce Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('ecommerce');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('ecommerce')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.amber500
-                            : `${AppColors_1.AppColors.amber500}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.amber500
-                            : `${AppColors_1.AppColors.amber500}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.amber500,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700,
-                }}>
-                  Ecommerce: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          {/* Screens Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('page_view');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('page_view')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.sky600
-                            : `${AppColors_1.AppColors.sky500}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.sky600
-                            : `${AppColors_1.AppColors.sky500}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.sky600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600,
-                }}>
-                  Screens: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          {/* System Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('system');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('system')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.purple
-                            : `${AppColors_1.AppColors.purple}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.purple
-                            : `${AppColors_1.AppColors.purple}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.purple,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
-                }}>
-                  System: {categoryStats.system} ({categoryStats.systemPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          {/* Custom Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('custom');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('custom')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.brandPurple
-                            : `${AppColors_1.AppColors.brandPurple}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.brandPurple
-                            : `${AppColors_1.AppColors.brandPurple}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.brandPurple,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
-                }}>
-                  Custom: {categoryStats.custom} ({categoryStats.customPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-        </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,