be-components 7.4.7 → 7.5.1

package/lib/commonjs/Charts/README.md

@@ -0,0 +1,310 @@
+# BettorEdge Charts Library
+
+Beautiful, cross-platform charting library for React Native (iOS/Android) and Web.
+
+## Features
+
+- ✨ Stunning visuals with gradients and smooth animations
+- 📱 Works on iOS, Android, and Web (react-native-web)
+- 🎨 Customizable themes and colors
+- 📊 Live updates for real-time data
+- 🎯 Interactive tooltips and click handlers
+- 🔄 Data adapter layer for easy integration
+
+## Installation
+
+Dependencies are already installed in this project:
+- `react-native-gifted-charts` (for React Native)
+- `react-gifted-charts` (for Web)
+
+## Quick Start
+
+### 1. Basic Usage
+
+```typescript
+import { LivePriceChart, TradeChartAdapter } from '../Charts';
+
+// Your trade data
+const trades = [
+  { timestamp: 1704067200000, price: 0.40, side: 'away' },
+  { timestamp: 1704067260000, price: 0.42, side: 'away' },
+  { timestamp: 1704067320000, price: 0.45, side: 'away' },
+  { timestamp: 1704067200000, price: 0.55, side: 'home' },
+  { timestamp: 1704067260000, price: 0.53, side: 'home' },
+  { timestamp: 1704067320000, price: 0.50, side: 'home' },
+];
+
+// Convert to chart format
+const chartData = TradeChartAdapter.toTimeSeriesData(trades, {
+  gradient: true,
+  curved: true,
+  showDataPoints: false,
+});
+
+// Render chart
+<LivePriceChart
+  data={chartData}
+  height={300}
+  animated={true}
+  showTooltip={true}
+  showLegend={true}
+/>
+```
+
+### 2. Live Updates
+
+```typescript
+import { useState, useEffect } from 'react';
+import { LivePriceChart, TradeChartAdapter, Trade } from '../Charts';
+
+const MarketDetailPage = () => {
+  const [trades, setTrades] = useState<Trade[]>([]);
+  const [chartData, setChartData] = useState([]);
+
+  // Initial load
+  useEffect(() => {
+    const initialTrades = fetchInitialTrades(); // Your data fetching
+    const data = TradeChartAdapter.toTimeSeriesData(initialTrades);
+    setChartData(data);
+  }, []);
+
+  // Subscribe to new trades
+  useEffect(() => {
+    const handleNewTrade = (newTrade: Trade) => {
+      setChartData(prev =>
+        TradeChartAdapter.appendTrade(prev, newTrade, 100) // Keep last 100 points
+      );
+    };
+
+    const unsubscribe = subscribeToTrades(handleNewTrade); // Your WebSocket/polling
+    return () => unsubscribe();
+  }, []);
+
+  return (
+    <View>
+      <Text>Live Market Prices</Text>
+      <LivePriceChart
+        data={chartData}
+        height={300}
+        animated={true}
+        showTooltip={true}
+        onPointPress={(point, series) => {
+          console.log(`${series} price: ${point.value} at ${new Date(point.timestamp)}`);
+        }}
+      />
+    </View>
+  );
+};
+```
+
+### 3. Custom Styling
+
+```typescript
+import {
+  LivePriceChart,
+  TradeChartAdapter,
+  defaultChartTheme,
+  lineChartStyles,
+} from '../Charts';
+
+const chartData = TradeChartAdapter.toTimeSeriesData(trades, {
+  gradient: true,
+  curved: true,
+  showDataPoints: true,
+});
+
+// Override colors
+chartData[0].color = '#FF0000'; // Custom away color
+chartData[1].color = '#0000FF'; // Custom home color
+
+<LivePriceChart
+  data={chartData}
+  height={350}
+  animated={true}
+  showLegend={true}
+  yAxisPrefix=""
+  yAxisSuffix=""
+  yAxisLabelCount={8}
+  xAxisLabelCount={6}
+/>
+```
+
+### 4. Time Range Filtering
+
+```typescript
+const now = Date.now();
+const oneHourAgo = now - (60 * 60 * 1000);
+
+<LivePriceChart
+  data={chartData}
+  timeRange={{
+    start: oneHourAgo,
+    end: now,
+  }}
+  height={300}
+/>
+```
+
+## Data Adapter
+
+The `TradeChartAdapter` is the middle layer that converts your trade data to chart format.
+
+### Trade Interface
+
+Define your trade type to match this interface:
+
+```typescript
+interface Trade {
+  timestamp: number;  // Unix timestamp in milliseconds
+  price: number;      // Price/odds value (e.g., 0.40, 0.55)
+  side: 'away' | 'home';  // Which side of the market
+}
+```
+
+### Adapter Methods
+
+```typescript
+// Convert trades to chart data
+const chartData = TradeChartAdapter.toTimeSeriesData(trades, options);
+
+// Append new trade (for live updates)
+const updated = TradeChartAdapter.appendTrade(existingData, newTrade);
+
+// Filter by time range
+const filtered = TradeChartAdapter.filterByTimeRange(trades, startTime, endTime);
+
+// Get statistics
+const stats = TradeChartAdapter.getStats(trades);
+// Returns: { min, max, avg, latest, change }
+```
+
+## Components
+
+### LivePriceChart
+
+Main chart component for showing away/home prices over time.
+
+**Props:**
+- `data` - Array of TimeSeriesData (from adapter)
+- `height` - Chart height in pixels (default: 300)
+- `width` - Chart width (default: full width)
+- `animated` - Enable animations (default: true)
+- `showTooltip` - Show tooltips on press/hover (default: true)
+- `showLegend` - Show legend with current prices (default: true)
+- `yAxisPrefix` - Prefix for Y-axis labels (e.g., "$")
+- `yAxisSuffix` - Suffix for Y-axis labels (e.g., "%")
+- `timeRange` - Filter data by time range
+- `onPointPress` - Callback when user presses a point
+
+### BaseLineChart
+
+Lower-level chart component for custom use cases.
+
+## Themes
+
+```typescript
+import {
+  defaultChartTheme,
+  darkChartTheme,
+  gradients,
+  getAwayHomeGradients,
+} from '../Charts';
+
+// Use default colors
+const colors = defaultChartTheme;
+
+// Or dark theme
+const darkColors = darkChartTheme;
+
+// Get away/home gradients
+const awayHomeGradients = getAwayHomeGradients();
+```
+
+## Utilities
+
+```typescript
+import {
+  formatTime,
+  formatDate,
+  formatPrice,
+  formatCurrency,
+  formatPercentage,
+  getSmartTimeLabel,
+  calculateNiceYBounds,
+} from '../Charts';
+
+// Format timestamp to "3:45 PM"
+const timeStr = formatTime(timestamp, 'medium');
+
+// Format timestamp to "Jan 15"
+const dateStr = formatDate(timestamp, 'medium');
+
+// Format price to "0.42"
+const priceStr = formatPrice(0.423, 2);
+
+// Smart label based on data range
+const label = getSmartTimeLabel(timestamp, minTime, maxTime);
+
+// Calculate nice Y-axis bounds
+const { min, max } = calculateNiceYBounds([0.40, 0.42, 0.45]);
+```
+
+## Architecture
+
+```
+Charts/
+├── components/       # React components
+│   ├── LivePriceChart.tsx    # Main chart for away/home prices
+│   └── BaseLineChart.tsx     # Low-level chart wrapper
+├── adapters/        # Data transformation layer
+│   └── TradeChartAdapter.ts  # Converts trades → chart data
+├── themes/          # Colors and styling
+│   └── chartTheme.ts         # Theme configuration
+├── utils/           # Helper functions
+│   └── formatters.ts         # Date/price formatters
+├── types.ts         # TypeScript interfaces
+└── index.tsx        # Public exports
+```
+
+## Extending
+
+### Adding New Chart Types
+
+1. Create new component in `components/`
+2. Use `BaseLineChart` or create custom implementation
+3. Export from `index.tsx`
+
+### Custom Data Adapters
+
+Create adapter for your specific data type:
+
+```typescript
+export class CustomDataAdapter {
+  static toTimeSeriesData(customData: YourType[]): TimeSeriesData[] {
+    // Your transformation logic
+    return transformedData;
+  }
+}
+```
+
+## Performance Tips
+
+- Limit data points with `maxPoints` option (default: 100)
+- Use `smoothing: true` to reduce noise
+- Disable animations on very frequent updates
+- Filter data by time range before passing to chart
+
+## Troubleshooting
+
+### Chart not rendering on web
+- Make sure `react-gifted-charts` is installed
+- Check that Platform.OS === 'web' is correctly detected
+
+### Performance issues with many points
+- Use `maxPoints` option in adapter
+- Enable smoothing to reduce data points
+- Consider pagination/windowing for historical data
+
+## License
+
+Part of the BettorEdge be-components module.

package/lib/commonjs/Charts/adapters/TradeChartAdapter.js

@@ -0,0 +1,406 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TradeChartAdapter = void 0;
+var _chartTheme = require("../themes/chartTheme");
+var _formatters = require("../utils/formatters");
+/**
+ * Trade Chart Adapter
+ * Converts BettorEdge TradeProps to chart-ready format
+ * This is the middle layer that transforms your app's trade types to chart data structures
+ */
+
+/**
+ * Re-export TradeProps for convenience
+ */
+
+/**
+ * Side label mapping
+ */
+
+/**
+ * Time range filter options
+ */
+
+/**
+ * Options for trade chart transformation
+ */
+
+/**
+ * TradeChartAdapter
+ * Handles transformation of trade data to chart format
+ */
+class TradeChartAdapter {
+  /**
+   * Create reversed trades from single-side trade data
+   * Takes trades from one side (e.g., home) and creates the opposite side (e.g., away)
+   * @param trades Array of trades from one side
+   * @param market Market object with trade_side and side_options
+   * @returns Array with both original and reversed trades
+   */
+  static createReversedTrades(trades, market) {
+    // Get the opposite side from side_options
+    const tradeSide = market.trade_side;
+    const oppositeSideOption = market.side_options.find(opt => opt.side !== tradeSide);
+    if (!oppositeSideOption) {
+      // If no opposite side found, return original trades
+      return trades;
+    }
+    const oppositeSide = oppositeSideOption.side;
+
+    // Create reversed trades
+    const reversedTrades = trades.map(trade => ({
+      ...trade,
+      side: oppositeSide,
+      side_id: trade.reversed_side_id,
+      reversed_side_id: trade.side_id,
+      // Swap the reversed_side_id
+      probability: 1 - trade.probability,
+      // Invert probability
+      odds: trade.odds * -1 // Reverse odds
+    }));
+
+    // Return both original and reversed trades
+    return [...trades, ...reversedTrades];
+  }
+
+  /**
+   * Convert array of BettorEdge trades to time series chart data
+   * @param trades Array of TradeProps objects
+   * @param options Transformation options
+   * @returns Array of TimeSeriesData (side series based on side_id)
+   */
+  static toTimeSeriesData(trades, options = {}) {
+    const {
+      maxPoints = 100,
+      smoothing = false,
+      showDataPoints = false,
+      curved = true,
+      gradient = true,
+      sideLabels = [],
+      timeFilter = 'all_time',
+      customTimeRange,
+      smartSampling = true
+    } = options;
+
+    // Sort trades by create_datetime (timestamp)
+    const sortedTrades = [...trades].sort((a, b) => {
+      const timeA = new Date(a.create_datetime).getTime();
+      const timeB = new Date(b.create_datetime).getTime();
+      return timeA - timeB;
+    });
+
+    // Apply time range filter
+    const filteredTrades = this.applyTimeFilter(sortedTrades, timeFilter, customTimeRange);
+
+    // Group trades by side_id to create separate series for each side
+    const tradesBySide = this.groupBySide(filteredTrades);
+
+    // Get gradient colors
+    const gradients = (0, _chartTheme.getAwayHomeGradients)();
+
+    // Create a helper to get label for a side
+    const getSideLabel = (side, sideId) => {
+      // First try to find label by side property
+      const labelBySide = sideLabels.find(sl => sl.side === side);
+      if (labelBySide) return labelBySide.label;
+
+      // Fallback to side_id
+      return sideId;
+    };
+
+    // Convert each side to a time series
+    const seriesData = [];
+    const sides = Object.keys(tradesBySide);
+    sides.forEach((sideId, index) => {
+      // Sort this side's trades by create_datetime to ensure correct order
+      const sideTrades = (tradesBySide[sideId] || []).sort((a, b) => {
+        const timeA = new Date(a.create_datetime).getTime();
+        const timeB = new Date(b.create_datetime).getTime();
+        return timeA - timeB;
+      });
+
+      // Get the side property from the first trade in this group
+      const side = sideTrades[0]?.side || '';
+
+      // Get the display label for this side
+      const displayLabel = getSideLabel(side, sideId);
+
+      // Apply smart sampling or simple limiting
+      const limitedTrades = smartSampling ? this.smartSample(sideTrades, filteredTrades, maxPoints) : this.limitDataPoints(sideTrades, maxPoints);
+
+      // Convert to time series points
+      const points = this.tradesToPoints(limitedTrades);
+
+      // Apply smoothing if requested
+      const finalPoints = smoothing ? this.smoothData(points) : points;
+
+      // Use alternating colors (away/home style)
+      const isFirstSide = index === 0;
+      const colorConfig = isFirstSide ? gradients.away : gradients.home;
+      seriesData.push({
+        series: displayLabel,
+        // Use display label as series identifier
+        color: colorConfig.color,
+        data: finalPoints,
+        gradient: gradient,
+        gradientColors: gradient ? colorConfig.gradientColors : undefined,
+        showDataPoints,
+        curved,
+        thickness: 2.5
+      });
+    });
+    return seriesData;
+  }
+
+  /**
+   * Append a new trade to existing chart data
+   * Used for live updates
+   */
+  static appendTrade(existingData, newTrade, maxPoints = 100) {
+    return existingData.map(series => {
+      // Only add to matching series (by side_id)
+      if (series.series === newTrade.side_id) {
+        const timestamp = new Date(newTrade.create_datetime).getTime();
+        const newPoint = {
+          timestamp,
+          value: newTrade.probability,
+          label: (0, _formatters.formatTime)(timestamp),
+          metadata: newTrade
+        };
+
+        // Append and limit
+        const updatedData = [...series.data, newPoint];
+        return {
+          ...series,
+          data: updatedData.slice(-maxPoints) // Keep only last N points
+        };
+      }
+      return series;
+    });
+  }
+
+  /**
+   * Group trades by side_id
+   */
+  static groupBySide(trades) {
+    return trades.reduce((acc, trade) => {
+      if (!acc[trade.side_id]) {
+        acc[trade.side_id] = [];
+      }
+      acc[trade.side_id].push(trade);
+      return acc;
+    }, {});
+  }
+
+  /**
+   * Convert trades to TimeSeriesPoints
+   */
+  static tradesToPoints(trades) {
+    return trades.map(trade => {
+      const timestamp = new Date(trade.create_datetime).getTime();
+      return {
+        timestamp,
+        value: trade.probability,
+        label: (0, _formatters.formatTime)(timestamp),
+        metadata: trade
+      };
+    });
+  }
+
+  /**
+   * Limit data points by sampling
+   * Keeps first, last, and evenly spaced points in between
+   */
+  static limitDataPoints(trades, maxPoints) {
+    if (trades.length <= maxPoints) return trades;
+    const result = [];
+    const step = Math.floor(trades.length / maxPoints);
+    for (let i = 0; i < trades.length; i += step) {
+      const trade = trades[i];
+      if (trade) result.push(trade);
+    }
+
+    // Always include the last trade
+    const lastTrade = trades[trades.length - 1];
+    if (lastTrade && result[result.length - 1] !== lastTrade) {
+      result.push(lastTrade);
+    }
+    return result;
+  }
+
+  /**
+   * Simple moving average smoothing
+   * Reduces noise in price data
+   * NOTE: Preserves the last point's actual value (no smoothing on most recent trade)
+   */
+  static smoothData(points, windowSize = 3) {
+    if (points.length < windowSize) return points;
+    const smoothed = [];
+    const halfWindow = Math.floor(windowSize / 2);
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      if (!point) continue;
+
+      // For the last point, preserve the actual value (don't smooth it)
+      if (i === points.length - 1) {
+        smoothed.push(point);
+        continue;
+      }
+      const start = Math.max(0, i - halfWindow);
+      const end = Math.min(points.length, i + halfWindow + 1);
+      const window = points.slice(start, end);
+      const avgValue = window.reduce((sum, p) => sum + p.value, 0) / window.length;
+      smoothed.push({
+        ...point,
+        value: avgValue
+      });
+    }
+    return smoothed;
+  }
+
+  /**
+   * Filter trades by time range
+   */
+  static filterByTimeRange(trades, startTime, endTime) {
+    return trades.filter(trade => {
+      const timestamp = new Date(trade.create_datetime).getTime();
+      return timestamp >= startTime && timestamp <= endTime;
+    });
+  }
+
+  /**
+   * Get price statistics from trades
+   */
+  static getStats(trades) {
+    if (trades.length === 0) {
+      return {
+        min: 0,
+        max: 0,
+        avg: 0,
+        latest: 0,
+        change: 0
+      };
+    }
+    const prices = trades.map(t => t.probability);
+    const min = Math.min(...prices);
+    const max = Math.max(...prices);
+    const avg = prices.reduce((sum, p) => sum + p, 0) / prices.length;
+    const latest = prices[prices.length - 1] ?? 0;
+    const first = prices[0] ?? 0;
+    const change = latest - first;
+    return {
+      min,
+      max,
+      avg,
+      latest,
+      change
+    };
+  }
+
+  /**
+   * Apply time range filter to trades
+   */
+  static applyTimeFilter(trades, filter, customRange) {
+    if (trades.length === 0) return trades;
+    const now = new Date().getTime();
+    let startTime;
+    let endTime = now;
+    switch (filter) {
+      case 'today':
+        // From start of today
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        startTime = today.getTime();
+        break;
+      case 'last_24h':
+        startTime = now - 24 * 60 * 60 * 1000;
+        break;
+      case 'last_week':
+        startTime = now - 7 * 24 * 60 * 60 * 1000;
+        break;
+      case 'last_month':
+        startTime = now - 30 * 24 * 60 * 60 * 1000;
+        break;
+      case 'custom':
+        if (!customRange) return trades;
+        startTime = typeof customRange.start === 'number' ? customRange.start : new Date(customRange.start).getTime();
+        endTime = typeof customRange.end === 'number' ? customRange.end : new Date(customRange.end).getTime();
+        break;
+      case 'all_time':
+      default:
+        return trades;
+      // No filtering
+    }
+    return this.filterByTimeRange(trades, startTime, endTime);
+  }
+
+  /**
+   * Smart sampling based on data timespan
+   * Automatically determines optimal sample interval
+   */
+  static smartSample(trades, allTrades, maxPoints) {
+    if (trades.length <= maxPoints) return trades;
+
+    // Calculate timespan of all data
+    const firstTrade = allTrades[0];
+    const lastTrade = allTrades[allTrades.length - 1];
+    if (!firstTrade || !lastTrade) return trades;
+    const firstTime = new Date(firstTrade.create_datetime).getTime();
+    const lastTime = new Date(lastTrade.create_datetime).getTime();
+    const totalSpanMs = lastTime - firstTime;
+
+    // Determine sampling interval based on timespan
+    let sampleIntervalMs;
+    if (totalSpanMs <= 60 * 60 * 1000) {
+      // Less than 1 hour: sample every minute
+      sampleIntervalMs = 60 * 1000;
+    } else if (totalSpanMs <= 24 * 60 * 60 * 1000) {
+      // Less than 1 day: sample every 5 minutes
+      sampleIntervalMs = 5 * 60 * 1000;
+    } else if (totalSpanMs <= 7 * 24 * 60 * 60 * 1000) {
+      // Less than 1 week: sample every 30 minutes
+      sampleIntervalMs = 30 * 60 * 1000;
+    } else if (totalSpanMs <= 30 * 24 * 60 * 60 * 1000) {
+      // Less than 1 month: sample every 3 hours
+      sampleIntervalMs = 3 * 60 * 60 * 1000;
+    } else {
+      // More than 1 month: sample every 12 hours
+      sampleIntervalMs = 12 * 60 * 60 * 1000;
+    }
+
+    // Sample trades at intervals
+    const sampledTrades = [];
+
+    // Always include first trade
+    const firstSampledTrade = trades[0];
+    if (!firstSampledTrade) return trades;
+    sampledTrades.push(firstSampledTrade);
+    let lastSampleTime = new Date(firstSampledTrade.create_datetime).getTime();
+    for (let i = 1; i < trades.length; i++) {
+      const trade = trades[i];
+      if (!trade) continue;
+      const tradeTime = new Date(trade.create_datetime).getTime();
+      if (tradeTime - lastSampleTime >= sampleIntervalMs) {
+        sampledTrades.push(trade);
+        lastSampleTime = tradeTime;
+      }
+    }
+
+    // Always include last trade
+    const lastSampledTrade = trades[trades.length - 1];
+    if (lastSampledTrade && sampledTrades[sampledTrades.length - 1] !== lastSampledTrade) {
+      sampledTrades.push(lastSampledTrade);
+    }
+
+    // If still too many points, fallback to simple limiting
+    if (sampledTrades.length > maxPoints) {
+      return this.limitDataPoints(sampledTrades, maxPoints);
+    }
+    return sampledTrades;
+  }
+}
+exports.TradeChartAdapter = TradeChartAdapter;
+//# sourceMappingURL=TradeChartAdapter.js.map