be-components 7.4.7 → 7.5.1

package/src/Charts/components/LivePriceChart.tsx

@@ -0,0 +1,521 @@
+/**
+ * Live Price Chart Component
+ * Shows away/home side prices moving over time with live updates
+ */
+
+import React, { useMemo, useState } from 'react';
+import { Text, StyleSheet, Dimensions, TouchableOpacity, Platform } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { View } from '../../Components/Themed';
+import BaseLineChart from './BaseLineChart';
+import type { LivePriceChartProps, TimeRangeFilterOption } from '../types';
+import { defaultChartTheme } from '../themes/chartTheme';
+import { formatPrice, getSmartTimeLabel, calculateNiceYBounds } from '../utils/formatters';
+
+/**
+ * LivePriceChart
+ * Beautiful real-time price chart showing away vs home odds movement
+ */
+const LivePriceChart: React.FC<LivePriceChartProps> = ({
+    data,
+    height = 300,
+    width,
+    animated = true,
+    showTooltip = true,
+    showLegend = true,
+    legendPosition = 'top',
+    showTimeFilter = false,
+    initialTimeFilter = 'all_time',
+    yAxisPrefix = '',
+    yAxisSuffix = '',
+    yAxisLabelCount = 6,
+    xAxisLabelCount = 5,
+    showYAxis = true,
+    showXAxis = true,
+    yAxisColor = '#E5E7EB',
+    xAxisColor = '#E5E7EB',
+    yAxisThickness = 1,
+    xAxisThickness = 1,
+    yAxisTextColor = '#6B7280',
+    xAxisTextColor = '#6B7280',
+    gridColor = '#E5E7EB',
+    showGrid = true,
+    timeRange,
+    onPointPress,
+    yMin,
+    yMax,
+    useFixedYRange = false,
+    spacing,
+    backgroundColor = 'transparent',
+    displayAsPercentage = false,
+    hideDataPointText = false,
+}) => {
+    // Track container dimensions for responsive sizing
+    const [containerWidth, setContainerWidth] = useState<number>(
+        width || Dimensions.get('window').width - 40 // Default with padding
+    );
+    const [containerHeight, setContainerHeight] = useState<number>(height || 300); // Default to 300 if no height provided
+
+    // Track selected time filter
+    const [selectedTimeFilter, setSelectedTimeFilter] = useState<TimeRangeFilterOption>(initialTimeFilter);
+
+    // Handle layout changes to update chart dimensions
+    const handleLayout = (event: LayoutChangeEvent) => {
+        const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+
+        if (layoutWidth > 0 && !width) { // Only auto-size if width not explicitly set
+            // Account for Y-axis labels (if shown) and some padding
+            const yAxisOffset = showYAxis ? 50 : 20;
+            // For inline labels, we want to use more of the width but still reserve space
+            const inlineLabelOffset = (showLegend && legendPosition === 'inline') ? 20 : 0;
+            setContainerWidth(layoutWidth - yAxisOffset - inlineLabelOffset);
+        }
+
+        // Auto-size height if container has height and chart doesn't have explicit height
+        if (layoutHeight > 0 && !height) {
+            // Reserve space for legend and time filters
+            const legendHeight = showLegend && legendPosition === 'top' ? 50 : 0;
+            const filterHeight = showTimeFilter ? 40 : 0;
+            const availableHeight = layoutHeight - legendHeight - filterHeight - 20; // 20px padding
+            setContainerHeight(Math.max(availableHeight, 100)); // Minimum 100px
+        }
+    };
+
+    // Determine available time filters based on data timespan
+    const availableTimeFilters = useMemo((): TimeRangeFilterOption[] => {
+        const allTimestamps = data.flatMap(series => series.data.map(point => point.timestamp));
+        if (allTimestamps.length === 0) return ['all_time'];
+
+        const minTime = Math.min(...allTimestamps);
+        const maxTime = Math.max(...allTimestamps);
+        const spanMs = maxTime - minTime;
+        const now = Date.now();
+
+        const filters: TimeRangeFilterOption[] = [];
+
+        // Check if data spans into today
+        const todayStart = new Date();
+        todayStart.setHours(0, 0, 0, 0);
+        if (maxTime >= todayStart.getTime()) {
+            filters.push('today');
+        }
+
+        // Check if data spans last 24 hours
+        if (maxTime >= now - (24 * 60 * 60 * 1000)) {
+            filters.push('last_24h');
+        }
+
+        // Check if data spans last week
+        if (spanMs >= 24 * 60 * 60 * 1000 || maxTime >= now - (7 * 24 * 60 * 60 * 1000)) {
+            filters.push('last_week');
+        }
+
+        // Check if data spans last month
+        if (spanMs >= 7 * 24 * 60 * 60 * 1000 || maxTime >= now - (30 * 24 * 60 * 60 * 1000)) {
+            filters.push('last_month');
+        }
+
+        // Always include all_time
+        filters.push('all_time');
+
+        return filters;
+    }, [data]);
+
+    // Apply time filter to data
+    const filteredData = useMemo(() => {
+        // If external timeRange prop is provided, use it
+        if (timeRange) {
+            return data.map(series => ({
+                ...series,
+                data: series.data.filter(
+                    point => point.timestamp >= timeRange.start && point.timestamp <= timeRange.end
+                ),
+            }));
+        }
+
+        // Otherwise, use internal time filter if enabled
+        if (!showTimeFilter) return data;
+
+        const now = Date.now();
+        let startTime: number;
+        let endTime: number = now;
+
+        switch (selectedTimeFilter) {
+            case '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 'all_time':
+            default:
+                return data; // No filtering
+        }
+
+        return data.map(series => ({
+            ...series,
+            data: series.data.filter(
+                point => point.timestamp >= startTime && point.timestamp <= endTime
+            ),
+        }));
+    }, [data, timeRange, showTimeFilter, selectedTimeFilter]);
+
+    // Calculate responsive spacing based on container width and FILTERED data points
+    const calculatedSpacing = useMemo(() => {
+        if (spacing !== undefined) return spacing; // Use explicit spacing if provided
+
+        // Use filtered data point count so spacing adjusts after filtering
+        const dataPointCount = filteredData[0]?.data.length || 20;
+        const chartWidth = width || containerWidth;
+
+        // When Y-axis is hidden, we add 60px to width (reclaiming full Y-axis space)
+        const effectiveWidth = !showYAxis ? chartWidth + 60 : chartWidth;
+
+        // Simple: divide container width by number of points to fit everything
+        // Subtract a buffer for padding
+        const buffer = showYAxis ? 60 : 20;
+        const availableWidth = effectiveWidth - buffer;
+
+        // Use number of points (not intervals) so chart doesn't overflow
+        const calculatedValue = availableWidth / dataPointCount;
+
+        return Math.max(calculatedValue, 3); // Minimum 3px spacing
+    }, [filteredData, width, containerWidth, spacing, showYAxis]);
+
+    // Calculate Y-axis bounds if not provided
+    const yBounds = useMemo(() => {
+        // If displayAsPercentage, override bounds to 0-100
+        if (displayAsPercentage && !useFixedYRange && yMin === undefined && yMax === undefined) {
+            return { min: 0, max: 100 };
+        }
+
+        // If useFixedYRange is true and yMin/yMax are provided, use them directly
+        if (useFixedYRange && yMin !== undefined && yMax !== undefined) {
+            const min = displayAsPercentage ? yMin * 100 : yMin;
+            const max = displayAsPercentage ? yMax * 100 : yMax;
+            return { min, max };
+        }
+
+        // If both yMin and yMax are provided (but not useFixedYRange), still use them
+        if (yMin !== undefined && yMax !== undefined) {
+            const min = displayAsPercentage ? yMin * 100 : yMin;
+            const max = displayAsPercentage ? yMax * 100 : yMax;
+            return { min, max };
+        }
+
+        // Otherwise, auto-calculate from data
+        const allValues = filteredData.flatMap(series => series.data.map(point => point.value));
+        const bounds = calculateNiceYBounds(allValues);
+        if (displayAsPercentage) {
+            return { min: bounds.min * 100, max: bounds.max * 100 };
+        }
+        return bounds;
+    }, [filteredData, yMin, yMax, useFixedYRange, displayAsPercentage]);
+
+    // Enhance data with smart time labels and percentage conversion
+    const enhancedData = useMemo(() => {
+        const allTimestamps = filteredData.flatMap(series => series.data.map(point => point.timestamp));
+        const minTime = Math.min(...allTimestamps);
+        const maxTime = Math.max(...allTimestamps);
+
+        return filteredData.map(series => ({
+            ...series,
+            data: series.data.map((point, index) => {
+                // On native with small spacing, show fewer labels to prevent overlap
+                // Each label needs ~50px of space, so calculate how many we can fit
+                const minLabelSpacing = 50; // Minimum pixels needed per label
+                const maxLabelsWeCanFit = Math.floor((width || containerWidth) / minLabelSpacing);
+                const labelInterval = Math.max(1, Math.ceil(series.data.length / Math.min(xAxisLabelCount, maxLabelsWeCanFit)));
+
+                const shouldLabel = index % labelInterval === 0;
+
+                return {
+                    ...point,
+                    value: displayAsPercentage ? point.value * 100 : point.value,
+                    label: shouldLabel ? getSmartTimeLabel(point.timestamp, minTime, maxTime) : '',
+                };
+            }),
+        }));
+    }, [filteredData, xAxisLabelCount, width, containerWidth, displayAsPercentage]);
+
+    // Get current prices for legend
+    const currentPrices = useMemo(() => {
+        return filteredData.map(series => {
+            const latestPoint = series.data[series.data.length - 1];
+            const rawValue = latestPoint?.value || 0;
+            const displayValue = displayAsPercentage ? rawValue * 100 : rawValue;
+            const change = calculatePriceChange(series.data);
+            const displayChange = displayAsPercentage && change !== null ? change * 100 : change;
+
+            return {
+                series: series.series,
+                displayLabel: series.series, // series.series is already the display label
+                color: series.color,
+                value: displayValue,
+                change: displayChange,
+            };
+        });
+    }, [filteredData, displayAsPercentage]);
+
+    // Handle point press
+    const handlePointPress = (item: any, index: number) => {
+        if (onPointPress && item) {
+            // Find which series this point belongs to
+            const seriesIndex = filteredData.findIndex(s =>
+                s.data.some(p => p.value === item.value)
+            );
+            const series = filteredData[seriesIndex];
+            const point = series?.data[index];
+
+            if (point) {
+                onPointPress(point, series.series);
+            }
+        }
+    };
+
+    // Get friendly label for time filter
+    const getFilterLabel = (filter: TimeRangeFilterOption): string => {
+        switch (filter) {
+            case 'today': return 'Today';
+            case 'last_24h': return '24H';
+            case 'last_week': return '1W';
+            case 'last_month': return '1M';
+            case 'all_time': return 'All';
+            default: return filter;
+        }
+    };
+
+    return (
+        <View transparent style={[styles.container, !height && { flex: 1 }]} onLayout={handleLayout}>
+            {/* Time Filter Buttons */}
+            {showTimeFilter && availableTimeFilters.length > 1 && (
+                <View transparent style={styles.timeFilterContainer}>
+                    {availableTimeFilters.map((filter) => (
+                        <TouchableOpacity
+                            key={filter}
+                            onPress={() => setSelectedTimeFilter(filter)}
+                            style={[
+                                styles.filterButton,
+                                selectedTimeFilter === filter && styles.filterButtonActive
+                            ]}
+                        >
+                            <Text style={[
+                                styles.filterButtonText,
+                                selectedTimeFilter === filter && styles.filterButtonTextActive
+                            ]}>
+                                {getFilterLabel(filter)}
+                            </Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            )}
+
+            {/* Legend - Top Position */}
+            {showLegend && legendPosition === 'top' && (
+                <View transparent style={styles.legend}>
+                    {currentPrices.map((price, index) => (
+                        <View transparent key={index} style={styles.legendItem}>
+                            <View style={[styles.legendDot, { backgroundColor: price.color }]} />
+                            <Text style={styles.legendLabel}>{price.displayLabel}</Text>
+                            <Text style={[styles.legendValue, { color: price.color }]}>
+                                {formatPrice(price.value, 2)}
+                            </Text>
+                            {price.change !== null && (
+                                <Text style={[
+                                    styles.legendChange,
+                                    { color: price.change >= 0 ? defaultChartTheme.success : defaultChartTheme.error }
+                                ]}>
+                                    {price.change >= 0 ? '▲' : '▼'} {Math.abs(price.change).toFixed(2)}
+                                </Text>
+                            )}
+                        </View>
+                    ))}
+                </View>
+            )}
+
+            {/* Chart with Inline Labels */}
+            <View transparent style={{
+                position: 'relative',
+                paddingBottom: showXAxis ? 30 : 0,
+                overflow: 'visible',
+                marginLeft: !showYAxis ? -60 : 0,
+            }}>
+                <BaseLineChart
+                data={enhancedData}
+                height={Platform.OS === 'web' ? containerHeight : (showXAxis ? containerHeight - 30 : containerHeight)}
+                width={!showYAxis ? (width || containerWidth) + 60 : (width || containerWidth)}
+                spacing={calculatedSpacing}
+                yAxisPrefix={yAxisPrefix}
+                yAxisSuffix={displayAsPercentage ? '%' : yAxisSuffix}
+                yAxisLabelCount={yAxisLabelCount}
+                xAxisLabelCount={xAxisLabelCount}
+                showYAxis={showYAxis}
+                showXAxis={showXAxis}
+                yAxisColor={yAxisColor}
+                xAxisColor={xAxisColor}
+                yAxisThickness={yAxisThickness}
+                xAxisThickness={xAxisThickness}
+                yAxisTextColor={yAxisTextColor}
+                xAxisTextColor={xAxisTextColor}
+                gridColor={gridColor}
+                showGrid={showGrid}
+                yMin={yBounds.min}
+                yMax={yBounds.max}
+                backgroundColor={backgroundColor}
+                animated={animated}
+                onDataPointClick={showTooltip ? handlePointPress : undefined}
+                hideDataPointText={hideDataPointText}
+            />
+
+            {/* Inline Labels - Positioned at last data point */}
+            {showLegend && legendPosition === 'inline' && (
+                <View transparent style={styles.inlineLabelsContainer}>
+                    {currentPrices.map((price, index) => {
+                        // Stack labels vertically in the center-right
+                        // Calculate spacing to distribute labels evenly
+                        const totalLabels = currentPrices.length;
+                        const labelHeight = 50; // Approximate height of each label (increased for more spacing)
+                        const totalHeight = totalLabels * labelHeight;
+                        const startY = (height - totalHeight) / 2; // Center vertically
+                        const yPosition = startY + (index * labelHeight);
+
+                        return (
+                            <View transparent
+                                key={index}
+                                style={[
+                                    styles.inlineLabel,
+                                    {
+                                        top: yPosition,
+                                        right: 10,
+                                    }
+                                ]}
+                            >
+                                <View type="blur" style={styles.inlineLabelContent}>
+                                    <Text style={[styles.inlineLabelText, { color: price.color }]}>
+                                        {price.displayLabel}
+                                    </Text>
+                                    <Text style={[styles.inlineLabelValue, { color: price.color }]}>
+                                        {displayAsPercentage
+                                            ? `${Math.round(price.value)}%`
+                                            : formatPrice(price.value, 2)
+                                        }
+                                    </Text>
+                                </View>
+                            </View>
+                        );
+                    })}
+                </View>
+            )}
+            </View>
+        </View>
+    );
+};
+
+/**
+ * Calculate price change from first to last data point
+ */
+const calculatePriceChange = (data: any[]): number | null => {
+    if (data.length < 2) return null;
+    const first = data[0].value;
+    const last = data[data.length - 1].value;
+    return last - first;
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    timeFilterContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 12,
+        gap: 8,
+    },
+    filterButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 6,
+        backgroundColor: '#F3F4F6',
+    },
+    filterButtonActive: {
+        backgroundColor: '#6366F1',
+    },
+    filterButtonText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    filterButtonTextActive: {
+        color: '#FFFFFF',
+    },
+    legend: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 16,
+        gap: 20,
+    },
+    legendItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    legendDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+    },
+    legendLabel: {
+        fontSize: 12,
+        color: '#6B7280',
+        fontWeight: '500',
+    },
+    legendValue: {
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+    legendChange: {
+        fontSize: 11,
+        fontWeight: '600',
+    },
+    inlineLabelsContainer: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        pointerEvents: 'none',
+    },
+    inlineLabel: {
+        position: 'absolute',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    inlineLabelContent: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        alignItems: 'flex-end',
+        borderRadius: 6,
+    },
+    inlineLabelText: {
+        fontSize: 12,
+        fontWeight: '700',
+        marginBottom: 2,
+        textAlign: 'right',
+    },
+    inlineLabelValue: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'right',
+    },
+});
+
+export default LivePriceChart;

package/src/Charts/index.tsx

@@ -0,0 +1,62 @@
+/**
+ * BettorEdge Charts Library
+ * Beautiful, cross-platform charts for React Native and Web
+ *
+ * @example
+ * ```typescript
+ * import { LivePriceChart, TradeChartAdapter } from './Charts';
+ *
+ * // Convert your trades to chart data
+ * const chartData = TradeChartAdapter.toTimeSeriesData(trades);
+ *
+ * // Render the chart
+ * <LivePriceChart
+ *   data={chartData}
+ *   height={300}
+ *   animated={true}
+ *   showTooltip={true}
+ * />
+ * ```
+ */
+
+// Components
+export { default as LivePriceChart } from './components/LivePriceChart';
+export { default as BaseLineChart } from './components/BaseLineChart';
+
+// Adapters
+export { TradeChartAdapter } from './adapters/TradeChartAdapter';
+export type { Trade, TradeChartOptions, SideLabel, TimeRangeFilter } from './adapters/TradeChartAdapter';
+
+// Types
+export type {
+    TimeSeriesPoint,
+    TimeSeriesData,
+    LivePriceChartProps,
+    ChartTheme,
+    TooltipConfig,
+    TimeRangeFilterOption,
+} from './types';
+
+// Themes
+export {
+    defaultChartTheme,
+    darkChartTheme,
+    gradients,
+    lineChartStyles,
+    getAwayHomeGradients,
+    chartDimensions,
+} from './themes/chartTheme';
+
+// Utilities
+export {
+    formatTime,
+    formatDate,
+    formatPrice,
+    formatCurrency,
+    formatPercentage,
+    formatROI,
+    getSmartTimeLabel,
+    formatLargeNumber,
+    calculateNiceYBounds,
+    generateYAxisLabels,
+} from './utils/formatters';

package/src/Charts/themes/chartTheme.ts

@@ -0,0 +1,113 @@
+/**
+ * Chart Theme Configuration
+ * Beautiful color schemes and styling for charts
+ */
+
+import type { ChartTheme } from '../types';
+
+/**
+ * Default chart theme with stunning gradients
+ */
+export const defaultChartTheme: ChartTheme = {
+    // Primary colors
+    primary: '#6366F1',      // Indigo
+    secondary: '#8B5CF6',    // Purple
+    success: '#10B981',      // Green
+    error: '#EF4444',        // Red
+    warning: '#F59E0B',      // Amber
+
+    // Chart colors
+    text: '#6B7280',         // Gray-500
+    background: '#FFFFFF',   // White
+    grid: '#E5E7EB',         // Gray-200
+
+    // Away/Home specific colors
+    away: '#FF6B6B',         // Coral Red
+    home: '#4ECDC4',         // Teal
+};
+
+/**
+ * Dark theme variant
+ */
+export const darkChartTheme: ChartTheme = {
+    primary: '#818CF8',      // Light Indigo
+    secondary: '#A78BFA',    // Light Purple
+    success: '#34D399',      // Light Green
+    error: '#F87171',        // Light Red
+    warning: '#FBBF24',      // Light Amber
+
+    text: '#D1D5DB',         // Gray-300
+    background: '#1F2937',   // Gray-800
+    grid: '#374151',         // Gray-700
+
+    away: '#FF8787',         // Lighter Coral
+    home: '#6EE7E0',         // Lighter Teal
+};
+
+/**
+ * Gradient configurations for stunning visuals
+ */
+export const gradients = {
+    away: ['rgba(255, 107, 107, 0.4)', 'rgba(255, 107, 107, 0.01)'],     // Red gradient
+    home: ['rgba(78, 205, 196, 0.4)', 'rgba(78, 205, 196, 0.01)'],       // Teal gradient
+    profit: ['rgba(16, 185, 129, 0.4)', 'rgba(16, 185, 129, 0.01)'],     // Green gradient
+    loss: ['rgba(239, 68, 68, 0.4)', 'rgba(239, 68, 68, 0.01)'],         // Red gradient
+    neutral: ['rgba(99, 102, 241, 0.4)', 'rgba(99, 102, 241, 0.01)'],    // Indigo gradient
+};
+
+/**
+ * Line chart styling presets
+ */
+export const lineChartStyles = {
+    default: {
+        thickness: 2.5,
+        curved: true,
+        showDataPoints: false,
+        animationDuration: 800,
+    },
+    bold: {
+        thickness: 3.5,
+        curved: true,
+        showDataPoints: true,
+        animationDuration: 800,
+    },
+    minimal: {
+        thickness: 1.5,
+        curved: false,
+        showDataPoints: false,
+        animationDuration: 400,
+    },
+    dots: {
+        thickness: 2,
+        curved: true,
+        showDataPoints: true,
+        animationDuration: 800,
+    },
+};
+
+/**
+ * Get away/home gradient colors
+ */
+export const getAwayHomeGradients = () => ({
+    away: {
+        color: defaultChartTheme.away,
+        gradient: true,
+        gradientColors: gradients.away as [string, string],
+    },
+    home: {
+        color: defaultChartTheme.home,
+        gradient: true,
+        gradientColors: gradients.home as [string, string],
+    },
+});
+
+/**
+ * Chart spacing and dimensions
+ */
+export const chartDimensions = {
+    defaultHeight: 300,
+    mobileHeight: 250,
+    defaultSpacing: 20,
+    xAxisLabelCount: 5,
+    yAxisLabelCount: 6,
+};