be-components 7.4.7 → 7.5.1

package/src/Charts/types.ts

@@ -0,0 +1,160 @@
+/**
+ * Chart Type Definitions
+ * Generic data structures for all chart components
+ */
+
+/**
+ * Single data point in a time series
+ */
+export interface TimeSeriesPoint {
+    /** Unix timestamp in milliseconds */
+    timestamp: number;
+    /** Numeric value (e.g., price, count, percentage) */
+    value: number;
+    /** Optional label for display (e.g., "3:45 PM", "Jan 15") */
+    label?: string;
+    /** Optional metadata for tooltips or click handlers */
+    metadata?: any;
+}
+
+/**
+ * A complete time series with styling
+ */
+export interface TimeSeriesData {
+    /** Series identifier (e.g., "Away", "Home", "ROI") */
+    series: string;
+    /** Line/bar color (hex or rgba) */
+    color: string;
+    /** Array of data points */
+    data: TimeSeriesPoint[];
+    /** Enable gradient fill under line */
+    gradient?: boolean;
+    /** Gradient colors [start, end] */
+    gradientColors?: [string, string];
+    /** Line thickness */
+    thickness?: number;
+    /** Show dots on data points */
+    showDataPoints?: boolean;
+    /** Curve the line (vs straight segments) */
+    curved?: boolean;
+}
+
+/**
+ * Time range filter options
+ */
+export type TimeRangeFilterOption = 'today' | 'last_24h' | 'last_week' | 'last_month' | 'all_time';
+
+/**
+ * Props for LivePriceChart component
+ */
+export interface LivePriceChartProps {
+    /** Array of time series to display */
+    data: TimeSeriesData[];
+    /** Chart height in pixels */
+    height?: number;
+    /** Chart width in pixels (undefined = full width) */
+    width?: number;
+    /** Enable animations on mount and updates */
+    animated?: boolean;
+    /** Show interactive tooltips on press/hover */
+    showTooltip?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Legend position: 'top' (default) or 'inline' (attached to last data point) */
+    legendPosition?: 'top' | 'inline';
+    /** Show time filter buttons */
+    showTimeFilter?: boolean;
+    /** Initial time filter selection */
+    initialTimeFilter?: TimeRangeFilterOption;
+    /** Y-axis label prefix (e.g., "$") */
+    yAxisPrefix?: string;
+    /** Y-axis label suffix (e.g., "%") */
+    yAxisSuffix?: string;
+    /** Number of Y-axis labels */
+    yAxisLabelCount?: number;
+    /** Number of X-axis labels */
+    xAxisLabelCount?: number;
+    /** Show Y-axis */
+    showYAxis?: boolean;
+    /** Show X-axis */
+    showXAxis?: boolean;
+    /** Y-axis color */
+    yAxisColor?: string;
+    /** X-axis color */
+    xAxisColor?: string;
+    /** Y-axis thickness */
+    yAxisThickness?: number;
+    /** X-axis thickness */
+    xAxisThickness?: number;
+    /** Y-axis text color */
+    yAxisTextColor?: string;
+    /** X-axis text color */
+    xAxisTextColor?: string;
+    /** Grid line color */
+    gridColor?: string;
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Time range filter */
+    timeRange?: {
+        start: number;  // Unix timestamp
+        end: number;    // Unix timestamp
+    };
+    /** Callback when user presses a data point */
+    onPointPress?: (point: TimeSeriesPoint, series: string) => void;
+    /** Minimum Y value (auto-calculated if not provided) */
+    yMin?: number;
+    /** Maximum Y value (auto-calculated if not provided) */
+    yMax?: number;
+    /** Use fixed Y-axis range (yMin and yMax) instead of auto-calculating from data */
+    useFixedYRange?: boolean;
+    /** Spacing between data points */
+    spacing?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** Display values as percentages (multiply by 100, add % suffix, scale 0-100) */
+    displayAsPercentage?: boolean;
+    /** Hide the data point text label on the last point */
+    hideDataPointText?: boolean;
+}
+
+/**
+ * Chart theme colors
+ */
+export interface ChartTheme {
+    /** Primary line color */
+    primary: string;
+    /** Secondary line color */
+    secondary: string;
+    /** Success/positive color */
+    success: string;
+    /** Error/negative color */
+    error: string;
+    /** Warning color */
+    warning: string;
+    /** Text color */
+    text: string;
+    /** Background color */
+    background: string;
+    /** Grid line color */
+    grid: string;
+    /** Away side color */
+    away: string;
+    /** Home side color */
+    home: string;
+}
+
+/**
+ * Tooltip configuration
+ */
+export interface TooltipConfig {
+    /** Show value in tooltip */
+    showValue?: boolean;
+    /** Show label in tooltip */
+    showLabel?: boolean;
+    /** Show series name in tooltip */
+    showSeries?: boolean;
+    /** Custom formatter for value */
+    valueFormatter?: (value: number) => string;
+    /** Custom formatter for label */
+    labelFormatter?: (label: string, timestamp: number) => string;
+}

package/src/Charts/utils/formatters.ts

@@ -0,0 +1,182 @@
+/**
+ * Formatting utilities for chart labels and tooltips
+ */
+
+/**
+ * Format Unix timestamp to time string
+ * @param timestamp Unix timestamp in milliseconds
+ * @param format 'short' | 'medium' | 'long'
+ * @returns Formatted time string
+ */
+export const formatTime = (timestamp: number, format: 'short' | 'medium' | 'long' = 'short'): string => {
+    const date = new Date(timestamp);
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+
+    const pad = (num: number) => String(num).padStart(2, '0');
+    const hour12 = hours % 12 || 12;
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+
+    switch (format) {
+        case 'short':
+            return `${pad(hour12)}:${pad(minutes)}`;
+        case 'medium':
+            return `${pad(hour12)}:${pad(minutes)} ${ampm}`;
+        case 'long':
+            return `${pad(hour12)}:${pad(minutes)}:${pad(seconds)} ${ampm}`;
+        default:
+            return `${pad(hour12)}:${pad(minutes)}`;
+    }
+};
+
+/**
+ * Format Unix timestamp to date string
+ * @param timestamp Unix timestamp in milliseconds
+ * @param format 'short' | 'medium' | 'long'
+ * @returns Formatted date string
+ */
+export const formatDate = (timestamp: number, format: 'short' | 'medium' | 'long' = 'medium'): string => {
+    const date = new Date(timestamp);
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const monthName = monthNames[date.getMonth()];
+
+    switch (format) {
+        case 'short':
+            return `${month}/${day}`;
+        case 'medium':
+            return `${monthName} ${day}`;
+        case 'long':
+            return `${monthName} ${day}, ${year}`;
+        default:
+            return `${monthName} ${day}`;
+    }
+};
+
+/**
+ * Format price/odds value
+ * @param value Numeric value
+ * @param decimals Number of decimal places
+ * @returns Formatted price string
+ */
+export const formatPrice = (value: number, decimals: number = 2): string => {
+    return value.toFixed(decimals);
+};
+
+/**
+ * Format currency value
+ * @param value Numeric value
+ * @param currency Currency symbol (default: $)
+ * @returns Formatted currency string
+ */
+export const formatCurrency = (value: number, currency: string = '$'): string => {
+    const absValue = Math.abs(value);
+    const sign = value < 0 ? '-' : '';
+
+    if (absValue >= 1000000) {
+        return `${sign}${currency}${(absValue / 1000000).toFixed(2)}M`;
+    }
+    if (absValue >= 1000) {
+        return `${sign}${currency}${(absValue / 1000).toFixed(2)}K`;
+    }
+    return `${sign}${currency}${absValue.toFixed(2)}`;
+};
+
+/**
+ * Format percentage value
+ * @param value Numeric value (e.g., 0.45 or 45)
+ * @param asDecimal Whether value is in decimal form (0.45) vs percentage (45)
+ * @returns Formatted percentage string
+ */
+export const formatPercentage = (value: number, asDecimal: boolean = false): string => {
+    const percent = asDecimal ? value * 100 : value;
+    return `${percent.toFixed(2)}%`;
+};
+
+/**
+ * Format ROI value with + or - prefix
+ * @param value ROI value
+ * @returns Formatted ROI string
+ */
+export const formatROI = (value: number): string => {
+    const sign = value >= 0 ? '+' : '';
+    return `${sign}${value.toFixed(2)}%`;
+};
+
+/**
+ * Smart time label based on data range
+ * Automatically chooses appropriate format based on time span
+ */
+export const getSmartTimeLabel = (timestamp: number, minTime: number, maxTime: number): string => {
+    const range = maxTime - minTime;
+    const oneHour = 60 * 60 * 1000;
+    const oneDay = 24 * oneHour;
+    const oneWeek = 7 * oneDay;
+
+    if (range < oneHour) {
+        // Less than 1 hour: show time only
+        return formatTime(timestamp, 'short');
+    } else if (range < oneDay) {
+        // Less than 1 day: show time with AM/PM
+        return formatTime(timestamp, 'medium');
+    } else if (range < oneWeek) {
+        // Less than 1 week: show date + time
+        return `${formatDate(timestamp, 'short')} ${formatTime(timestamp, 'short')}`;
+    } else {
+        // More than 1 week: show date only
+        return formatDate(timestamp, 'medium');
+    }
+};
+
+/**
+ * Format large numbers with K/M suffix
+ */
+export const formatLargeNumber = (value: number, decimals: number = 1): string => {
+    const absValue = Math.abs(value);
+    const sign = value < 0 ? '-' : '';
+
+    if (absValue >= 1000000) {
+        return `${sign}${(absValue / 1000000).toFixed(decimals)}M`;
+    }
+    if (absValue >= 1000) {
+        return `${sign}${(absValue / 1000).toFixed(decimals)}K`;
+    }
+    return `${sign}${absValue.toFixed(decimals)}`;
+};
+
+/**
+ * Calculate nice Y-axis bounds
+ * Finds clean min/max values for Y-axis
+ */
+export const calculateNiceYBounds = (values: number[]): { min: number; max: number } => {
+    if (values.length === 0) return { min: 0, max: 1 };
+
+    const dataMin = Math.min(...values);
+    const dataMax = Math.max(...values);
+    const range = dataMax - dataMin;
+
+    // Add 10% padding
+    const padding = range * 0.1;
+    const min = Math.floor((dataMin - padding) * 100) / 100;
+    const max = Math.ceil((dataMax + padding) * 100) / 100;
+
+    return { min: Math.max(0, min), max };
+};
+
+/**
+ * Generate evenly spaced Y-axis labels
+ */
+export const generateYAxisLabels = (min: number, max: number, count: number = 6): number[] => {
+    const labels: number[] = [];
+    const step = (max - min) / (count - 1);
+
+    for (let i = 0; i < count; i++) {
+        labels.push(min + (step * i));
+    }
+
+    return labels;
+};

package/src/Components/Dropdown.tsx

@@ -16,10 +16,13 @@ const DropDown = ({ invalid, errors, read_only, selected_value, dropdown_options
     const Colors = useColors();
     const [ expanded, setExpanded ] = useState(false);
     let options:string[] = []
+    
+    if(dropdown_options){
+        dropdown_options.map(o => {
+            options = options.concat(o.eligible_options)
+        })
+    }
 
-    dropdown_options.map(o => {
-        options = options.concat(o.eligible_options)
-    })
 
     const handleOptionSelect = (option:string) => {
         setExpanded(false);

package/src/Components/Icons.tsx

@@ -1618,7 +1618,18 @@ const LocationIcon = ({ color, size }:IconProps) => {
 }
 
 //Premium!!
+const TargetIcon = ({ color, size }:IconProps) => {
 
+    return (
+        <Svg width={`${size ?? 18}`} height={`${size ?? 18}`} viewBox="0 0 40 40">
+    <G id="app-icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <G id="target-82-svgrepo-com" fill={color ?? Colors.brand.midnight} fillRule="nonzero">
+            <Path d="M22,20 C22,21.104 21.104,22 20,22 C18.896,22 18,21.104 18,20 C18,18.896 18.896,18 20,18 C21.104,18 22,18.896 22,20 M30,22 L31.82,22 C30.972,27.014 27.014,30.972 22,31.82 L22,30 C22,28.896 21.104,28 20,28 C18.896,28 18,28.896 18,30 L18,31.82 C12.986,30.972 9.028,27.014 8.18,22 L10,22 C11.104,22 12,21.104 12,20 C12,18.896 11.104,18 10,18 L8.18,18 C9.028,12.986 12.986,9.028 18,8.18 L18,10 C18,11.104 18.896,12 20,12 C21.104,12 22,11.104 22,10 L22,8.18 C27.014,9.028 30.972,12.986 31.82,18 L30,18 C28.896,18 28,18.896 28,20 C28,21.104 28.896,22 30,22 M38,18 L35.862,18 C34.958,10.766 29.234,5.042 22,4.138 L22,2 C22,0.896 21.104,0 20,0 C18.896,0 18,0.896 18,2 L18,4.138 C10.766,5.042 5.042,10.766 4.138,18 L2,18 C0.896,18 0,18.896 0,20 C0,21.104 0.896,22 2,22 L4.138,22 C5.042,29.234 10.766,34.958 18,35.862 L18,38 C18,39.104 18.896,40 20,40 C21.104,40 22,39.104 22,38 L22,35.862 C29.234,34.958 34.958,29.234 35.862,22 L38,22 C39.104,22 40,21.104 40,20 C40,18.896 39.104,18 38,18" id="target-[#82]"></Path>
+        </G>
+    </G>
+</Svg>
+    )
+}
 
 
 
@@ -1626,6 +1637,7 @@ export default {
     SearchIcon,
     LiquidityIcon,
     EyeOnIcon,
+    TargetIcon,
     MarketClosedIcon,
     //BetScopeSuccessIcon,
     AlertIcon,

package/src/Components/index.tsx

@@ -18,6 +18,10 @@ import PlayerLozenge from './PlayerLozenge';
 import AutoPageFlatList from './AutoPageFlatList';
 import CircularFadeOut from './CircularFadeOut';
 import SearchBox from './SearchBox';
+
+// Charts
+export * from '../Charts';
+
 export {
     Button,
     Text,

package/src/LocationTracker/LocationStatus.tsx

@@ -6,10 +6,11 @@ import { Platform } from 'react-native';
 
 type UsePlayerLocationProps = {
     player_id?:string,
-    distinct_id?:string
+    distinct_id?:string,
+    web_override?:boolean
 }
 
-export const usePlayerLocation = ({ player_id, distinct_id }:UsePlayerLocationProps) => {
+export const usePlayerLocation = ({ player_id, distinct_id, web_override }:UsePlayerLocationProps) => {
     const [ location, setLocation ] = useState<{
         loading: boolean,
         error?:string,
@@ -111,7 +112,7 @@ export const usePlayerLocation = ({ player_id, distinct_id }:UsePlayerLocationPr
                 }
                 
                 //Shoot! Couldnt get it - lets now get a new one!
-                const addresses = await LocationApi.reverseCoordLookup(coordinates.latitude, coordinates.longitude);
+                const addresses = await LocationApi.reverseCoordLookup(coordinates.latitude, coordinates.longitude, { web_only: web_override });
                 const generated_address = LocationHelpers.getAddressFromGeoCodeResults(addresses, locations);
                 let new_loc = {
                     loading:false,

package/src/LocationTracker/api/index.tsx

@@ -99,10 +99,10 @@ const LocationApi = {
             accuracy: coords.accuracy
         }      
     },
-    reverseCoordLookup : async(latitude:number, longitude:number) => {
+    reverseCoordLookup : async(latitude:number, longitude:number, options?:{ web_only?:boolean }) => {
         try {
             let addresses:Location.LocationGeocodedAddress[] = []
-            if(Platform.OS == 'web'){
+            if(Platform.OS == 'web' || options?.web_only){
                 const resp = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${LOCATION_API}`, {
                     headers: {
                         'Authorization': undefined,

package/src/index.tsx

@@ -72,6 +72,11 @@ import MyAction from './MyAction';
 import BettorBotDashboard from './BettorBot';
 import NotificationManager from './NotificationManager';
 import { NotificationApi, NotificationHelpers } from './NotificationManager/api';
+import BetRouter from './BetRouter/index';
+
+// Charts
+export { LivePriceChart, BaseLineChart, TradeChartAdapter } from './Charts';
+export type { Trade, TradeChartOptions, TimeSeriesPoint, TimeSeriesData, LivePriceChartProps } from './Charts';
 
 export {
   Authenticator,
@@ -79,6 +84,7 @@ export {
   MyAction,
   CreateEmbed,
   ReferralCodeManager,
+  BetRouter,
   CreateEngagement,
   DiscordConnectionManager,
   BEEventApi,