react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/commonjs/components/AnalyticsGraph.js

@@ -1,411 +1,111 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-const AppColors_1 = require("../styles/AppColors");
-const AppFonts_1 = require("../styles/AppFonts");
-const BAR_HEIGHT = 24;
-const PADDING_Y = 12;
-const AnalyticsGraph = ({ event, accentColor }) => {
-    const params = event.params || {};
-    const itemsArray = Array.isArray(params.items) ? params.items : null;
-    const filteredItems = itemsArray?.filter((item) => typeof item.price === 'number') || [];
-    const rootNumericKeys = [];
-    Object.entries(params).forEach(([k, v]) => {
-        if (typeof v === 'number' &&
-            !k.toLowerCase().includes('id') &&
-            !k.toLowerCase().includes('timestamp')) {
-            rootNumericKeys.push({ key: k, value: v });
-        }
-    });
-    const dateKeys = [];
-    Object.entries(params).forEach(([k, v]) => {
-        if (typeof v === 'string' &&
-            v.length >= 10 &&
-            /^\d{4}-\d{2}-\d{2}/.test(v)) {
-            const d = new Date(v);
-            if (!isNaN(d.getTime())) {
-                dateKeys.push({ key: k, date: d });
-            }
-        }
-    });
-    const paramTypes = { string: 0, number: 0, boolean: 0, object: 0 };
-    const strings = [];
-    Object.entries(params).forEach(([k, v]) => {
-        const t = typeof v;
-        if (t === 'string') {
-            paramTypes.string++;
-            strings.push({ label: k, value: v.length });
-        }
-        else if (t === 'number') {
-            paramTypes.number++;
-        }
-        else if (t === 'boolean') {
-            paramTypes.boolean++;
-        }
-        else if (t === 'object' && v !== null) {
-            paramTypes.object++;
-        }
-    });
-    const typeData = [
-        { label: 'Strings', value: paramTypes.string, color: AppColors_1.AppColors.purple },
-        { label: 'Numbers', value: paramTypes.number, color: AppColors_1.AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: AppColors_1.AppColors.amber500 },
-        { label: 'Objects', value: paramTypes.object, color: AppColors_1.AppColors.greenColor },
-    ].filter(d => d.value > 0);
-    strings.sort((a, b) => b.value - a.value);
-    const topStrings = strings.slice(0, 5);
-    const hasItemsChart = filteredItems.length > 0;
-    const hasRootNumericChart = rootNumericKeys.length > 0;
-    const hasDatesChart = dateKeys.length > 0;
-    const hasStringsChart = topStrings.length > 0;
-    const hasTypeData = typeData.length > 0;
-    const screenWidth = react_native_1.Dimensions.get('window').width - 60;
-    const rightMargin = 40;
-    const maxBarWidth = screenWidth - rightMargin;
-    return (<react_native_1.View style={graphStyles.container}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,r,a){a===void 0&&(a=r);var n=Object.getOwnPropertyDescriptor(e,r);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,a,n)}):(function(t,e,r,a){a===void 0&&(a=r),t[a]=e[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(r){var a=[];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(a[a.length]=n);return a},t(e)};return function(e){if(e&&e.__esModule)return e;var r={};if(e!=null)for(var a=t(e),n=0;n<a.length;n++)a[n]!=="default"&&__createBinding(r,e,a[n]);return __setModuleDefault(r,e),r}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),AppColors_1=require("../styles/AppColors"),AppFonts_1=require("../styles/AppFonts"),BAR_HEIGHT=24,PADDING_Y=12,AnalyticsGraph=({event:t,accentColor:e})=>{const r=t.params||{},n=(Array.isArray(r.items)?r.items:null)?.filter(l=>typeof l.price=="number")||[],s=[];Object.entries(r).forEach(([l,p])=>{typeof p=="number"&&!l.toLowerCase().includes("id")&&!l.toLowerCase().includes("timestamp")&&s.push({key:l,value:p})});const o=[];Object.entries(r).forEach(([l,p])=>{if(typeof p=="string"&&p.length>=10&&/^\d{4}-\d{2}-\d{2}/.test(p)){const g=new Date(p);isNaN(g.getTime())||o.push({key:l,date:g})}});const i={string:0,number:0,boolean:0,object:0},c=[];Object.entries(r).forEach(([l,p])=>{const g=typeof p;g==="string"?(i.string++,c.push({label:l,value:p.length})):g==="number"?i.number++:g==="boolean"?i.boolean++:g==="object"&&p!==null&&i.object++});const u=[{label:"Strings",value:i.string,color:AppColors_1.AppColors.purple},{label:"Numbers",value:i.number,color:AppColors_1.AppColors.skyBlue},{label:"Booleans",value:i.boolean,color:AppColors_1.AppColors.amber500},{label:"Objects",value:i.object,color:AppColors_1.AppColors.greenColor}].filter(l=>l.value>0);c.sort((l,p)=>p.value-l.value);const h=c.slice(0,5),y=n.length>0,d=s.length>0,_=o.length>0,m=h.length>0,v=u.length>0,f=react_native_1.Dimensions.get("window").width-60-40;return<react_native_1.View style={graphStyles.container}>
       <react_native_1.Text style={graphStyles.headerTitle}>Data Visualization</react_native_1.Text>
 
-      {hasTypeData && (<react_native_1.View style={graphStyles.chartBlock}>
+      {v&&<react_native_1.View style={graphStyles.chartBlock}>
           <react_native_1.Text style={graphStyles.chartTitle}>Data Types Breakdown</react_native_1.Text>
-          <DonutChart data={typeData}/>
-        </react_native_1.View>)}
+          <DonutChart data={u}/>
+        </react_native_1.View>}
 
-      {hasStringsChart && (<react_native_1.View style={graphStyles.chartBlock}>
+      {m&&<react_native_1.View style={graphStyles.chartBlock}>
           <react_native_1.Text style={graphStyles.chartTitle}>Highest Payload Strings</react_native_1.Text>
-          <BarChart data={topStrings} accentColor={AppColors_1.AppColors.purple} maxBarWidth={maxBarWidth} isGradient/>
-        </react_native_1.View>)}
+          <BarChart data={h}accentColor={AppColors_1.AppColors.purple}maxBarWidth={f}isGradient/>
+        </react_native_1.View>}
 
-      {hasRootNumericChart && (<react_native_1.View style={graphStyles.chartBlock}>
+      {d&&<react_native_1.View style={graphStyles.chartBlock}>
           <react_native_1.Text style={graphStyles.chartTitle}>Top-Level Metrics</react_native_1.Text>
-          <GaugeChart data={rootNumericKeys.map(d => ({ label: d.key, value: d.value }))} accentColor={accentColor}/>
-        </react_native_1.View>)}
+          <GaugeChart data={s.map(l=>({label:l.key,value:l.value}))}accentColor={e}/>
+        </react_native_1.View>}
 
-      {hasDatesChart && (<react_native_1.View style={graphStyles.chartBlock}>
+      {_&&<react_native_1.View style={graphStyles.chartBlock}>
           <react_native_1.Text style={graphStyles.chartTitle}>Important Dates</react_native_1.Text>
-          <CalendarChart data={dateKeys.map(d => ({ label: d.key, date: d.date }))} accentColor={accentColor}/>
-        </react_native_1.View>)}
+          <CalendarChart data={o.map(l=>({label:l.key,date:l.date}))}accentColor={e}/>
+        </react_native_1.View>}
 
-      {hasItemsChart && (<react_native_1.View style={graphStyles.chartBlock}>
+      {y&&<react_native_1.View style={graphStyles.chartBlock}>
           <react_native_1.Text style={graphStyles.chartTitle}>Item Prices</react_native_1.Text>
-          <BarChart data={filteredItems.map((item, i) => ({
-                label: item.item_name || item.item_id || `Item ${i + 1}`,
-                value: item.price,
-            }))} accentColor={AppColors_1.AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
-        </react_native_1.View>)}
-    </react_native_1.View>);
-};
-const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
-    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-    };
-};
-const getPiePath = (x, y, radius, innerRadius, startAngle, endAngle) => {
-    const start = polarToCartesian(x, y, radius, endAngle);
-    const end = polarToCartesian(x, y, radius, startAngle);
-    const startInner = polarToCartesian(x, y, innerRadius, endAngle);
-    const endInner = polarToCartesian(x, y, innerRadius, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    return `
-    M ${start.x} ${start.y}
-    A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}
-    L ${endInner.x} ${endInner.y}
-    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${startInner.x} ${startInner.y}
+          <BarChart data={n.map((l,p)=>({label:l.item_name||l.item_id||`Item ${p+1}`,value:l.price}))}accentColor={AppColors_1.AppColors.successGreen}maxBarWidth={f}isGradient={!1}/>
+        </react_native_1.View>}
+    </react_native_1.View>},polarToCartesian=(t,e,r,a)=>{const n=(a-90)*Math.PI/180;return{x:t+r*Math.cos(n),y:e+r*Math.sin(n)}},getPiePath=(t,e,r,a,n,s)=>{const o=polarToCartesian(t,e,r,s),i=polarToCartesian(t,e,r,n),c=polarToCartesian(t,e,a,s),u=polarToCartesian(t,e,a,n),h=s-n<=180?"0":"1";return`
+    M ${o.x} ${o.y}
+    A ${r} ${r} 0 ${h} 0 ${i.x} ${i.y}
+    L ${u.x} ${u.y}
+    A ${a} ${a} 0 ${h} 1 ${c.x} ${c.y}
     Z
-  `;
-};
-const DonutChart = ({ data, }) => {
-    const total = data.reduce((sum, d) => sum + d.value, 0);
-    if (total === 0)
-        return null;
-    let currentAngle = 0;
-    const radius = 50;
-    const innerRadius = 30;
-    const center = 60;
-    return (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <react_native_svg_1.default width="120" height="120" viewBox="0 0 120 120">
-        {data.map((d, i) => {
-            if (d.value === 0)
-                return null;
-            const angle = (d.value / total) * 360;
-            const startAngle = currentAngle;
-            const endAngle = currentAngle + angle;
-            currentAngle += angle;
-            if (angle === 360) {
-                return (<react_1.default.Fragment key={i}>
-                <react_native_svg_1.Circle cx={center} cy={center} r={radius} fill={d.color}/>
-                <react_native_svg_1.Circle cx={center} cy={center} r={innerRadius} fill={AppColors_1.AppColors.primaryLight}/>
-              </react_1.default.Fragment>);
-            }
-            const path = getPiePath(center, center, radius, innerRadius, startAngle, endAngle);
-            return <react_native_svg_1.Path key={i} d={path} fill={d.color}/>;
-        })}
+  `},DonutChart=({data:t})=>{const e=t.reduce((o,i)=>o+i.value,0);if(e===0)return null;let r=0;const a=50,n=30,s=60;return<react_native_1.View style={{flexDirection:"row",alignItems:"center"}}>
+      <react_native_svg_1.default width="120"height="120"viewBox="0 0 120 120">
+        {t.map((o,i)=>{if(o.value===0)return null;const c=o.value/e*360,u=r,h=r+c;if(r+=c,c===360)return<react_1.default.Fragment key={i}>
+                <react_native_svg_1.Circle cx={s}cy={s}r={a}fill={o.color}/>
+                <react_native_svg_1.Circle cx={s}cy={s}r={n}fill={AppColors_1.AppColors.primaryLight}/>
+              </react_1.default.Fragment>;const y=getPiePath(s,s,a,n,u,h);return<react_native_svg_1.Path key={i}d={y}fill={o.color}/>})}
       </react_native_svg_1.default>
-      <react_native_1.View style={{ marginLeft: 16, flex: 1, gap: 6 }}>
-        {data.map((d, i) => {
-            if (d.value === 0)
-                return null;
-            return (<react_native_1.View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <react_native_1.View style={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: 5,
-                    backgroundColor: d.color,
-                }}/>
-              <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 11,
-                    color: AppColors_1.AppColors.grayTextStrong,
-                }}>
-                {d.label} ({d.value})
+      <react_native_1.View style={{marginLeft:16,flex:1,gap:6}}>
+        {t.map((o,i)=>o.value===0?null:<react_native_1.View key={i}style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <react_native_1.View style={{width:10,height:10,borderRadius:5,backgroundColor:o.color}}/>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong}}>
+                {o.label} ({o.value})
               </react_native_1.Text>
-            </react_native_1.View>);
-        })}
+            </react_native_1.View>)}
       </react_native_1.View>
-    </react_native_1.View>);
-};
-const GaugeChart = ({ data, accentColor, }) => {
-    const maxVal = Math.max(...data.map(d => Math.abs(d.value)), 1);
-    const radius = 26;
-    const stroke = 5;
-    const circumference = 2 * Math.PI * radius;
-    return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            gap: 16,
-            paddingRight: 16,
-            paddingTop: 6,
-            paddingBottom: 6,
-        }}>
-      {data.map(d => {
-            const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
-            const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001);
-            return (<react_native_1.View key={d.label} style={{ alignItems: 'center', width: 70 }}>
-            <react_native_svg_1.default width="60" height="60" viewBox="0 0 60 60">
-              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={AppColors_1.AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
-              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
+    </react_native_1.View>},GaugeChart=({data:t,accentColor:e})=>{const r=Math.max(...t.map(o=>Math.abs(o.value)),1),a=26,n=5,s=2*Math.PI*a;return<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {t.map(o=>{const i=Math.min(Math.abs(o.value)/r,1),c=Math.max(s-i*s,.001);return<react_native_1.View key={o.label}style={{alignItems:"center",width:70}}>
+            <react_native_svg_1.default width="60"height="60"viewBox="0 0 60 60">
+              <react_native_svg_1.Circle cx="30"cy="30"r={a}stroke={AppColors_1.AppColors.grayBorderSecondary}strokeWidth={n}fill="none"/>
+              <react_native_svg_1.Circle cx="30"cy="30"r={a}stroke={e}strokeWidth={n}fill="none"strokeLinecap="round"strokeDasharray={s}strokeDashoffset={c}rotation="-90"origin="30, 30"/>
             </react_native_svg_1.default>
-            <react_native_1.View style={{
-                    position: 'absolute',
-                    top: 20,
-                    height: 20,
-                    width: 60,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}>
-              <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
-                    color: AppColors_1.AppColors.primaryBlack,
-                    textAlign: 'center',
-                }}>
-                {d.value >= 1000 ? (d.value / 1000).toFixed(1) + 'k' : d.value}
+            <react_native_1.View style={{position:"absolute",top:20,height:20,width:60,justifyContent:"center",alignItems:"center"}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack,textAlign:"center"}}>
+                {o.value>=1e3?(o.value/1e3).toFixed(1)+"k":o.value}
               </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    marginTop: 6,
-                    textAlign: 'center',
-                }} numberOfLines={1}>
-              {d.label}
+            <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginTop:6,textAlign:"center"}}numberOfLines={1}>
+              {o.label}
             </react_native_1.Text>
-          </react_native_1.View>);
-        })}
-    </react_native_1.ScrollView>);
-};
-const CalendarChart = ({ data, accentColor, }) => {
-    const months = [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ];
-    return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            gap: 16,
-            paddingRight: 16,
-            paddingTop: 6,
-            paddingBottom: 6,
-        }}>
-      {data.map((d, i) => {
-            const monthText = months[d.date.getMonth()];
-            const dayText = d.date.getDate();
-            const yearText = d.date.getFullYear();
-            return (<react_native_1.View key={d.label + i} style={{ width: 70, alignItems: 'center' }}>
-            <react_native_1.View style={{
-                    width: 58,
-                    height: 62,
-                    backgroundColor: AppColors_1.AppColors.white,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.05,
-                    shadowRadius: 4,
-                    shadowOffset: { width: 0, height: 2 },
-                    elevation: 2,
-                }}>
+          </react_native_1.View>})}
+    </react_native_1.ScrollView>},CalendarChart=({data:t,accentColor:e})=>{const r=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];return<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{gap:16,paddingRight:16,paddingTop:6,paddingBottom:6}}>
+      {t.map((a,n)=>{const s=r[a.date.getMonth()],o=a.date.getDate(),i=a.date.getFullYear();return<react_native_1.View key={a.label+n}style={{width:70,alignItems:"center"}}>
+            <react_native_1.View style={{width:58,height:62,backgroundColor:AppColors_1.AppColors.white,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,overflow:"hidden",shadowColor:AppColors_1.AppColors.black,shadowOpacity:.05,shadowRadius:4,shadowOffset:{width:0,height:2},elevation:2}}>
               
-              <react_native_1.View style={{
-                    backgroundColor: accentColor,
-                    height: 18,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                }}>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
-                    color: AppColors_1.AppColors.white,
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.5,
-                }}>
-                  {monthText} {yearText}
+              <react_native_1.View style={{backgroundColor:e,height:18,justifyContent:"center",alignItems:"center"}}>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:AppColors_1.AppColors.white,textTransform:"uppercase",letterSpacing:.5}}>
+                  {s} {i}
                 </react_native_1.Text>
               </react_native_1.View>
               
-              <react_native_1.View style={{
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                }}>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 24,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }}>
-                  {dayText}
+              <react_native_1.View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:AppColors_1.AppColors.grayBackground}}>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:24,color:AppColors_1.AppColors.primaryBlack}}>
+                  {o}
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
 
-            <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    marginTop: 8,
-                    textAlign: 'center',
-                }} numberOfLines={2}>
-              {d.label.replace(/_/g, ' ')}
+            <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginTop:8,textAlign:"center"}}numberOfLines={2}>
+              {a.label.replace(/_/g," ")}
             </react_native_1.Text>
-          </react_native_1.View>);
-        })}
-    </react_native_1.ScrollView>);
-};
-const BarChart = ({ data, accentColor, maxBarWidth, isGradient = false, }) => {
-    const maxVal = Math.max(...data.map(d => d.value), 1);
-    const chartHeight = data.length * (BAR_HEIGHT + PADDING_Y) + 10;
-    return (<react_native_1.View style={graphStyles.svgContainer}>
-      <react_native_svg_1.default width="100%" height={chartHeight}>
+          </react_native_1.View>})}
+    </react_native_1.ScrollView>},BarChart=({data:t,accentColor:e,maxBarWidth:r,isGradient:a=!1})=>{const n=Math.max(...t.map(o=>o.value),1),s=t.length*(BAR_HEIGHT+PADDING_Y)+10;return<react_native_1.View style={graphStyles.svgContainer}>
+      <react_native_svg_1.default width="100%"height={s}>
         <react_native_svg_1.Defs>
-          <react_native_svg_1.LinearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0">
-            <react_native_svg_1.Stop offset="0" stopColor={accentColor} stopOpacity="0.6"/>
-            <react_native_svg_1.Stop offset="1" stopColor={accentColor} stopOpacity="1"/>
+          <react_native_svg_1.LinearGradient id="barGrad"x1="0"y1="0"x2="1"y2="0">
+            <react_native_svg_1.Stop offset="0"stopColor={e}stopOpacity="0.6"/>
+            <react_native_svg_1.Stop offset="1"stopColor={e}stopOpacity="1"/>
           </react_native_svg_1.LinearGradient>
         </react_native_svg_1.Defs>
-        {data.map((d, i) => {
-            const y = i * (BAR_HEIGHT + PADDING_Y);
-            const barWidth = Math.max((d.value / maxVal) * maxBarWidth, 2);
-            return (<react_1.default.Fragment key={d.label}>
+        {t.map((o,i)=>{const c=i*(BAR_HEIGHT+PADDING_Y),u=Math.max(o.value/n*r,2);return<react_1.default.Fragment key={o.label}>
               
-              <react_native_svg_1.Text x={0} y={y + 12} fill={AppColors_1.AppColors.grayTextStrong} fontSize="11" fontFamily={AppFonts_1.AppFonts.interMedium}>
-                {d.label}
+              <react_native_svg_1.Text x={0}y={c+12}fill={AppColors_1.AppColors.grayTextStrong}fontSize="11"fontFamily={AppFonts_1.AppFonts.interMedium}>
+                {o.label}
               </react_native_svg_1.Text>
 
               
-              <react_native_svg_1.Line x1={0} y1={y + 24} x2={maxBarWidth} y2={y + 24} stroke={AppColors_1.AppColors.grayBorderSecondary} strokeDasharray="4"/>
+              <react_native_svg_1.Line x1={0}y1={c+24}x2={r}y2={c+24}stroke={AppColors_1.AppColors.grayBorderSecondary}strokeDasharray="4"/>
 
               
-              <react_native_svg_1.Rect x={0} y={y + 16} width={barWidth} height={14} fill={isGradient ? 'url(#barGrad)' : accentColor} rx={4} opacity={0.85}/>
+              <react_native_svg_1.Rect x={0}y={c+16}width={u}height={14}fill={a?"url(#barGrad)":e}rx={4}opacity={.85}/>
 
               
-              <react_native_svg_1.Text x={barWidth + 6} y={y + 26} fill={AppColors_1.AppColors.primaryBlack} fontSize="11" fontFamily={AppFonts_1.AppFonts.interBold}>
-                {d.value}
+              <react_native_svg_1.Text x={u+6}y={c+26}fill={AppColors_1.AppColors.primaryBlack}fontSize="11"fontFamily={AppFonts_1.AppFonts.interBold}>
+                {o.value}
               </react_native_svg_1.Text>
-            </react_1.default.Fragment>);
-        })}
+            </react_1.default.Fragment>})}
       </react_native_svg_1.default>
-    </react_native_1.View>);
-};
-const graphStyles = react_native_1.StyleSheet.create({
-    container: {
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        borderRadius: 12,
-        marginBottom: 10,
-        padding: 14,
-        overflow: 'hidden',
-    },
-    headerTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.primaryBlack,
-        fontSize: 14,
-        marginBottom: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-        paddingBottom: 8,
-    },
-    chartBlock: {
-        marginBottom: 16,
-    },
-    chartTitle: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.grayTextWeak,
-        fontSize: 12,
-        textTransform: 'uppercase',
-        letterSpacing: 0.5,
-        marginBottom: 8,
-    },
-    svgContainer: {
-        marginTop: 4,
-    },
-});
-exports.default = AnalyticsGraph;
+    </react_native_1.View>},graphStyles=react_native_1.StyleSheet.create({container:{backgroundColor:AppColors_1.AppColors.primaryLight,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,borderRadius:12,marginBottom:10,padding:14,overflow:"hidden"},headerTitle:{fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.primaryBlack,fontSize:14,marginBottom:12,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,paddingBottom:8},chartBlock:{marginBottom:16},chartTitle:{fontFamily:AppFonts_1.AppFonts.interMedium,color:AppColors_1.AppColors.grayTextWeak,fontSize:12,textTransform:"uppercase",letterSpacing:.5,marginBottom:8},svgContainer:{marginTop:4}});exports.default=AnalyticsGraph;

package/dist/commonjs/components/AnimatedEntrance.js

@@ -1,11 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ children, style, }) {
-    return <react_native_1.View style={style}>{children}</react_native_1.View>;
-});
-exports.default = AnimatedEntrance;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),react_native_1=require("react-native"),AnimatedEntrance=react_1.default.memo(function({children:t,style:r}){return<react_native_1.View style={r}>{t}</react_native_1.View>});exports.default=AnimatedEntrance;

package/dist/commonjs/components/AppHeaderLogo.js

@@ -1,134 +1,7 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppHeaderLogo = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const BrandSquareIcon_1 = __importDefault(require("./BrandSquareIcon"));
-const AppHeaderLogo = ({ size = 46, customIcon, }) => {
-    const [loadError, setLoadError] = (0, react_1.useState)(false);
-    if (customIcon) {
-        if (react_1.default.isValidElement(customIcon)) {
-            const clonedIcon = react_1.default.cloneElement(customIcon, {
-                size,
-                width: size,
-                height: size,
-            });
-            return (<react_native_1.View style={[
-                    logoStyles.svgContainer,
-                    {
-                        width: size,
-                        height: size,
-                        borderRadius: Math.round(size * 0.23),
-                    },
-                ]}>
-          {clonedIcon}
-        </react_native_1.View>);
-        }
-        return (<react_native_1.View style={[
-                logoStyles.imageContainer,
-                {
-                    width: size,
-                    height: size,
-                    borderRadius: Math.round(size * 0.23),
-                },
-            ]}>
-        <react_native_1.Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
-      </react_native_1.View>);
-    }
-    if (!loadError && react_native_1.Platform.OS !== 'web') {
-        const nativeSource = react_native_1.Platform.select({
-            ios: { uri: 'AppIcon' },
-            android: { uri: 'ic_launcher' },
-            default: { uri: 'AppIcon' },
-        });
-        return (<react_native_1.View style={[
-                logoStyles.imageContainer,
-                {
-                    width: size,
-                    height: size,
-                    borderRadius: Math.round(size * 0.23),
-                },
-            ]}>
-        <react_native_1.Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
-      </react_native_1.View>);
-    }
-    return (<react_native_1.View style={[
-            logoStyles.svgContainer,
-            {
-                width: size,
-                height: size,
-                borderRadius: Math.round(size * 0.23),
-            },
-        ]}>
-      <BrandSquareIcon_1.default size={size}/>
-    </react_native_1.View>);
-};
-exports.AppHeaderLogo = AppHeaderLogo;
-const logoStyles = react_native_1.StyleSheet.create({
-    svgContainer: {
-        overflow: 'hidden',
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 3,
-    },
-    imageContainer: {
-        overflow: 'hidden',
-        backgroundColor: 'rgba(255, 255, 255, 0.15)',
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.35)',
-        padding: 2,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3,
-        elevation: 3,
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 8,
-    },
-});
-exports.default = exports.AppHeaderLogo;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppHeaderLogo=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),BrandSquareIcon_1=__importDefault(require("./BrandSquareIcon")),AppColors_1=require("../styles/AppColors"),AppHeaderLogo=({size:e=46,customIcon:t})=>{const r=Math.round(e*.23);if(t){if(react_1.default.isValidElement(t)){const o=react_1.default.cloneElement(t,{size:e,width:e,height:e});return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
+          {o}
+        </react_native_1.View>}return<react_native_1.View style={[logoStyles.imageContainer,{width:e,height:e,borderRadius:r}]}>
+        <react_native_1.Image source={t}style={[logoStyles.image,{borderRadius:r-2}]}resizeMode="cover"/>
+      </react_native_1.View>}return<react_native_1.View style={[logoStyles.container,{width:e,height:e,borderRadius:r}]}>
+      <BrandSquareIcon_1.default size={e}/>
+    </react_native_1.View>};exports.AppHeaderLogo=AppHeaderLogo;const logoStyles=react_native_1.StyleSheet.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:AppColors_1.AppColors.whiteAlpha33,backgroundColor:AppColors_1.AppColors.whiteAlpha12,shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:5,elevation:4},imageContainer:{overflow:"hidden",backgroundColor:AppColors_1.AppColors.whiteAlpha15,borderWidth:1.5,borderColor:AppColors_1.AppColors.whiteAlpha33,alignItems:"center",justifyContent:"center",shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.3,shadowRadius:4,elevation:3,padding:1.5},image:{width:"100%",height:"100%"}});exports.default=exports.AppHeaderLogo;