be-components 7.4.8 → 7.5.2

package/src/Charts/components/BaseLineChart.tsx

@@ -0,0 +1,311 @@
+/**
+ * Base Line Chart Component
+ * Cross-platform wrapper for gifted-charts
+ * Works on React Native (iOS/Android) and Web
+ */
+
+import React from 'react';
+import { Platform } from 'react-native';
+import moment from 'moment-mini';
+import type { TimeSeriesData } from '../types';
+import { View, Text } from '../../Components/Themed';
+
+// Platform-specific imports
+const LineChart = Platform.OS === 'web'
+    ? require('react-gifted-charts').LineChart
+    : require('react-native-gifted-charts').LineChart;
+
+export interface BaseLineChartProps {
+    data: TimeSeriesData[];
+    height?: number;
+    width?: number;
+    spacing?: number;
+    yAxisPrefix?: string;
+    yAxisSuffix?: string;
+    yAxisLabelCount?: number;
+    xAxisLabelCount?: number;
+    showYAxis?: boolean;
+    showXAxis?: boolean;
+    yAxisColor?: string;
+    xAxisColor?: string;
+    yAxisThickness?: number;
+    xAxisThickness?: number;
+    yAxisTextColor?: string;
+    xAxisTextColor?: string;
+    gridColor?: string;
+    showGrid?: boolean;
+    yMin?: number;
+    yMax?: number;
+    backgroundColor?: string;
+    showLegend?: boolean;
+    animated?: boolean;
+    onDataPointClick?: (item: any, index: number) => void;
+    hideDataPointText?: boolean;
+}
+
+/**
+ * BaseLineChart - Cross-platform line chart wrapper
+ */
+const BaseLineChart: React.FC<BaseLineChartProps> = ({
+    data,
+    height = 300,
+    width,
+    spacing = 20,
+    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,
+    yMin,
+    yMax,
+    backgroundColor = 'transparent',
+    // showLegend = true,
+    animated = true,
+    onDataPointClick,
+    hideDataPointText = false,
+}) => {
+    // Transform our TimeSeriesData to gifted-charts format
+    const transformedData = data.map((series) => {
+        const chartData = series.data.map((point, pointIndex) => {
+            const isLastPoint = pointIndex === series.data.length - 1;
+
+            return {
+                value: point.value,
+                ...(showXAxis && { label: point.label || '' }),
+                // Only show text on the last point (unless hideDataPointText is true)
+                dataPointText: (isLastPoint && !hideDataPointText) ? point.value.toFixed(2) : '',
+                onPress: () => onDataPointClick?.(point, pointIndex),
+                // Make last point larger, historical points smaller
+                dataPointRadius: isLastPoint ? 5 : 2,
+                dataPointColor: series.color,
+                // Store timestamp for tooltip
+                timestamp: point.timestamp,
+            };
+        });
+
+        return {
+            data: chartData,
+            color: series.color,
+            thickness: series.thickness || 2.5,
+            curved: series.curved !== false,
+            areaChart: series.gradient || false,
+            startFillColor: series.gradientColors?.[0] || series.color,
+            endFillColor: series.gradientColors?.[1] || series.color,
+            startOpacity: 0.4,
+            endOpacity: 0.01,
+            showDataPoint: series.showDataPoints || false,
+            dataPointsColor: series.color,
+            dataPointsRadius: 2, // Default small size for historical points
+        };
+    });
+
+    // Calculate Y-axis bounds if not provided
+    const allValues = data.flatMap(series => series.data.map(point => point.value));
+    const calculatedYMin = yMin !== undefined ? yMin : Math.min(...allValues) * 0.95;
+    const calculatedYMax = yMax !== undefined ? yMax : Math.max(...allValues) * 1.05;
+
+    // Primary series (first one)
+    const primarySeries = transformedData[0];
+    if (!primarySeries) return null;
+
+    // Secondary series (rest)
+    const secondarySeries = transformedData.slice(1);
+
+    // Extract labels for xAxisLabelTexts
+    const xAxisLabels = primarySeries.data.map(d => d.label || '');
+
+    // Custom label component for native to prevent clipping
+    const customLabel = Platform.OS !== 'web' && showXAxis ? (value: string) => {
+        return (
+            <View style={{ width: 60, alignItems: 'center' }}>
+                <Text style={{ color: xAxisTextColor, fontSize: 10, textAlign: 'center' }}>
+                    {value}
+                </Text>
+            </View>
+        );
+    } : undefined;
+
+    return (
+        <LineChart
+            // Data
+            data={primarySeries.data}
+            data2={secondarySeries[0]?.data}
+            data3={secondarySeries[1]?.data}
+            data4={secondarySeries[2]?.data}
+
+            // X-axis labels
+            {...(showXAxis && { xAxisLabelTexts: xAxisLabels })}
+            {...(customLabel && { renderLabel: customLabel })}
+
+            // Colors and styling
+            color={primarySeries.color}
+            color2={secondarySeries[0]?.color}
+            color3={secondarySeries[1]?.color}
+            color4={secondarySeries[2]?.color}
+
+            thickness={primarySeries.thickness}
+            thickness2={secondarySeries[0]?.thickness}
+            thickness3={secondarySeries[1]?.thickness}
+            thickness4={secondarySeries[2]?.thickness}
+
+            curved={primarySeries.curved}
+            curved2={secondarySeries[0]?.curved}
+            curved3={secondarySeries[1]?.curved}
+            curved4={secondarySeries[2]?.curved}
+
+            // Area/Gradient fills
+            areaChart={primarySeries.areaChart}
+            areaChart2={secondarySeries[0]?.areaChart}
+            areaChart3={secondarySeries[1]?.areaChart}
+            areaChart4={secondarySeries[2]?.areaChart}
+
+            startFillColor={primarySeries.startFillColor}
+            startFillColor2={secondarySeries[0]?.startFillColor}
+            startFillColor3={secondarySeries[1]?.startFillColor}
+            startFillColor4={secondarySeries[2]?.startFillColor}
+
+            endFillColor={primarySeries.endFillColor}
+            endFillColor2={secondarySeries[0]?.endFillColor}
+            endFillColor3={secondarySeries[1]?.endFillColor}
+            endFillColor4={secondarySeries[2]?.endFillColor}
+
+            startOpacity={primarySeries.startOpacity}
+            endOpacity={primarySeries.endOpacity}
+
+            // Data points - always show to display individual point sizes
+            textShiftY={-8}
+            textShiftX={0}
+            textFontSize={10}
+            textColor1={primarySeries.color}
+            textColor2={secondarySeries[0]?.color}
+            hideDataPoints1={false}
+            hideDataPoints2={false}
+
+            // Dimensions
+            height={height}
+            width={width}
+            spacing={spacing}
+            initialSpacing={10}
+            endSpacing={10}
+
+            // Y-axis
+            hideYAxisText={!showYAxis}
+            yAxisTextStyle={{ color: yAxisTextColor, fontSize: 10 }}
+            yAxisLabelPrefix={yAxisPrefix}
+            yAxisLabelSuffix={yAxisSuffix}
+            noOfSections={yAxisLabelCount - 1}
+            maxValue={calculatedYMax}
+            minValue={calculatedYMin}
+            yAxisThickness={showYAxis ? yAxisThickness : 0}
+            yAxisColor={yAxisColor}
+
+            // X-axis
+            xAxisLabelTextStyle={{ color: xAxisTextColor, fontSize: 10 }}
+            xAxisThickness={showXAxis ? xAxisThickness : 0}
+            xAxisColor={xAxisColor}
+            {...(Platform.OS !== 'web' && !showXAxis && { xAxisLabelTexts: [] })}
+
+            // Grid
+            rulesType={showGrid ? "solid" : undefined}
+            rulesColor={gridColor}
+            hideRules={!showGrid}
+
+            // Background
+            backgroundColor={backgroundColor}
+
+            // Animation
+            isAnimated={animated}
+            animationDuration={800}
+            animateTogether={true}
+
+            // Interactions
+            pointerConfig={{
+                pointerStripHeight: height,
+                pointerStripColor: '#D1D5DB',
+                pointerStripWidth: 1,
+                pointerColor: '#6366F1',
+                radius: 6,
+                pointerLabelWidth: 120,
+                pointerLabelHeight: 90,
+                activatePointersOnLongPress: false,
+                autoAdjustPointerLabelPosition: true,
+                pointerLabelComponent: (items: any[]) => {
+                    if (!items || items.length === 0) return null;
+
+                    // Get timestamp from first item
+                    const firstItem = items[0];
+                    let formattedTime = '';
+                    if (firstItem && firstItem.timestamp) {
+                        const now = moment();
+                        const pointTime = moment(firstItem.timestamp);
+                        const isToday = now.isSame(pointTime, 'day');
+                        const diffDays = now.diff(pointTime, 'days');
+
+                        if (isToday) {
+                            // Same day: show time only
+                            formattedTime = pointTime.format('h:mm A');
+                        } else if (diffDays < 7) {
+                            // Less than 7 days: show day and time
+                            formattedTime = pointTime.format('ddd h:mm A');
+                        } else {
+                            // More than 7 days: show date and time
+                            formattedTime = pointTime.format('MMM D, h:mm A');
+                        }
+                    }
+
+                    return (
+                        <View style={{
+                            backgroundColor: '#1F2937',
+                            padding: 8,
+                            paddingHorizontal: 12,
+                            borderRadius: 6,
+                            shadowColor: '#000',
+                            shadowOffset: { width: 0, height: 4 },
+                            shadowOpacity: 0.1,
+                            shadowRadius: 6,
+                            elevation: 4,
+                            minWidth: 100,
+                        }}>
+                            {/* Show all series values */}
+                            {items.map((item, index) => {
+                                // Get the series label from the data
+                                const seriesData = data[index];
+                                const seriesLabel = seriesData?.series || `Series ${index + 1}`;
+                                const seriesColor = seriesData?.color || '#6366F1';
+
+                                return (
+                                    <View transparent key={index} style={{ marginBottom: index < items.length - 1 ? 6 : 0 }}>
+                                        <Text style={{ color: seriesColor, fontSize: 11, fontWeight: '600' }}>
+                                            {seriesLabel}
+                                        </Text>
+                                        <Text style={{ color: '#F9FAFB', fontSize: 12, fontWeight: 'bold' }}>
+                                            {yAxisPrefix}{item.value?.toFixed(2)}{yAxisSuffix}
+                                        </Text>
+                                    </View>
+                                );
+                            })}
+
+                            {/* Show timestamp at bottom */}
+                            {formattedTime && (
+                                <Text style={{ color: '#D1D5DB', fontSize: 10, marginTop: 6, borderTopWidth: 1, borderTopColor: '#374151', paddingTop: 6 }}>
+                                    {formattedTime}
+                                </Text>
+                            )}
+                        </View>
+                    );
+                },
+            }}
+        />
+    );
+};
+
+export default BaseLineChart;