@beppla/tapas-ui 1.4.35 → 1.5.0

package/components/LineChart/LineChart.tsx

@@ -1,479 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import Text from '../Text/Text';
-
-// 动态导入依赖
-let RNLineChart: any, Grid: any, RNXAxis: any, Circle: any;
-let RechartsLine: any, Line: any, RechartsXAxis: any, RechartsYAxis: any, CartesianGrid: any, Tooltip: any, Legend: any, ResponsiveContainer: any;
-
-if (Platform.OS === 'web') {
-  // Web 环境使用 recharts
-  try {
-    const recharts = require('recharts');
-    RechartsLine = recharts.LineChart;
-    Line = recharts.Line;
-    RechartsXAxis = recharts.XAxis;
-    RechartsYAxis = recharts.YAxis;
-    CartesianGrid = recharts.CartesianGrid;
-    Tooltip = recharts.Tooltip;
-    Legend = recharts.Legend;
-    ResponsiveContainer = recharts.ResponsiveContainer;
-  } catch (e) {
-    console.warn('Recharts not available for Web');
-  }
-} else {
-  // 移动端使用 react-native-svg-charts
-  try {
-    const svgCharts = require('react-native-svg-charts');
-    const svg = require('react-native-svg');
-    RNLineChart = svgCharts.LineChart;
-    Grid = svgCharts.Grid;
-    RNXAxis = svgCharts.XAxis;
-    Circle = svg.Circle;
-  } catch (e) {
-    console.warn('react-native-svg-charts not available');
-  }
-}
-
-export interface LineChartDataPoint {
-  value: number;
-  label?: string;
-}
-
-export interface LineChartSeriesData {
-  data: LineChartDataPoint[];
-  color?: string;
-  label?: string;
-}
-
-export interface TooltipData {
-  label: string;
-  value: number;
-  dataIndex: number;
-  seriesLabel?: string;
-  [key: string]: any; // 允许额外的自定义数据
-}
-
-export interface LineChartProps {
-  data: LineChartDataPoint[] | LineChartSeriesData[];
-  width?: number;
-  height?: number;
-  color?: string;
-  colors?: string[];
-  showGrid?: boolean;
-  showLabels?: boolean;
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  showLegend?: boolean;
-  legendPosition?: 'top' | 'bottom' | 'left' | 'right';
-  legendIconType?: 'circle' | 'rect' | 'square' | 'line';
-  legendIconSize?: { width: number; height: number };
-  legendTextStyle?: {
-    fontFamily?: string;
-    fontSize?: number;
-    fontWeight?: string | number;
-    letterSpacing?: number;
-  };
-  curveType?: 'monotone' | 'linear' | 'step' | 'natural' | 'basis';
-  showDots?: boolean;
-  showArea?: boolean;
-  customTooltip?: (data: TooltipData) => React.ReactElement | null; // 自定义 Tooltip 渲染函数
-  tooltipFormatter?: (data: TooltipData) => { title?: string; items?: Array<{ label: string; value: string | number }> }; // Tooltip 数据格式化
-  contentInset?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
-  yAxisFormat?: (value: number) => string;
-  xAxisFormat?: (value: number, index: number) => string;
-  onLineClick?: (seriesLabel: string, dataPoint: LineChartDataPoint, dataIndex: number) => void;
-  style?: any;
-  testID?: string;
-}
-
-export const LineChart: React.FC<LineChartProps> = ({
-  data,
-  width,
-  height = 300,
-  color = '#0066CC',
-  colors,
-  showGrid = true,
-  showLabels = true,
-  showXAxis = true,
-  showYAxis = true,
-  showLegend = true,
-  legendPosition = 'bottom',
-  legendIconType = 'rect',
-  legendIconSize = { width: 18, height: 8 },
-  legendTextStyle = {
-    fontFamily: 'Bricolage Grotesque, sans-serif',
-    fontSize: 10,
-    fontWeight: 400,
-    letterSpacing: 0.1,
-  },
-  curveType = 'monotone',
-  showDots = true,
-  customTooltip,
-  tooltipFormatter,
-  yAxisFormat,
-  xAxisFormat,
-  onLineClick,
-  contentInset = { top: 20, bottom: 20, left: 20, right: 20 },
-  style,
-  testID,
-}) => {
-  // 检查是否为多系列数据
-  const isMultiSeries = Array.isArray(data) && data.length > 0 && data[0] && 'data' in data[0];
-  
-  if (!isMultiSeries && (!Array.isArray(data) || data.length === 0)) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <Text style={styles.emptyText}>No data available</Text>
-      </View>
-    );
-  }
-
-  // Web 环境使用 Recharts
-  if (Platform.OS === 'web' && RechartsLine) {
-    let chartData: any[] = [];
-    let seriesKeys: string[] = [];
-
-    if (isMultiSeries) {
-      // 多系列数据
-      const series = data as LineChartSeriesData[];
-      seriesKeys = series.map((s, i) => s.label || `Series ${i + 1}`);
-      
-      // 转换为 recharts 格式
-      const maxLength = Math.max(...series.map(s => s.data?.length || 0));
-      for (let i = 0; i < maxLength; i++) {
-        const point: any = { name: series[0]?.data?.[i]?.label || `Point ${i + 1}` };
-        series.forEach((s, sIndex) => {
-          if (seriesKeys[sIndex]) {
-            point[seriesKeys[sIndex]] = s.data?.[i]?.value || 0;
-          }
-        });
-        chartData.push(point);
-      }
-    } else {
-      // 单系列数据
-      chartData = (data as LineChartDataPoint[]).map((item, index) => ({
-        name: item.label || `Point ${index + 1}`,
-        value: item.value,
-      }));
-      seriesKeys = ['value'];
-    }
-
-    const lineColors = colors || (isMultiSeries ? [
-      '#6C63FF', '#00BFA5', '#FF6B00', '#FFC107', '#E91E63', 
-      '#9C27B0', '#3F51B5', '#00BCD4', '#4CAF50', '#FF9800'
-    ] : [color]);
-
-    // 自定义图例渲染函数
-    const renderLegend = (props: any) => {
-      const { payload } = props;
-      if (!payload || payload.length === 0) return null;
-
-      return (
-        <div style={{ 
-          display: 'flex', 
-          flexWrap: 'wrap', 
-          gap: '12px',
-          justifyContent: legendPosition === 'left' || legendPosition === 'right' ? 'flex-start' : 'center',
-          padding: legendPosition === 'top' ? '0 0 24px 0' : '10px 0 0 0'
-        }}>
-          {payload.map((entry: any, index: number) => {
-            const iconStyle: React.CSSProperties = {
-              display: 'inline-block',
-              marginRight: '6px',
-              verticalAlign: 'middle',
-            };
-
-            // 根据 iconType 设置不同的图标
-            if (legendIconType === 'rect' || legendIconType === 'line') {
-              iconStyle.width = `${legendIconSize.width}px`;
-              iconStyle.height = `${legendIconSize.height}px`;
-              iconStyle.backgroundColor = entry.color;
-              iconStyle.borderRadius = legendIconType === 'rect' ? '2px' : '0';
-            } else if (legendIconType === 'square') {
-              const size = Math.max(legendIconSize.width, legendIconSize.height);
-              iconStyle.width = `${size}px`;
-              iconStyle.height = `${size}px`;
-              iconStyle.backgroundColor = entry.color;
-              iconStyle.borderRadius = '2px';
-            } else {
-              // circle
-              const size = Math.max(legendIconSize.width, legendIconSize.height);
-              iconStyle.width = `${size}px`;
-              iconStyle.height = `${size}px`;
-              iconStyle.backgroundColor = entry.color;
-              iconStyle.borderRadius = '50%';
-            }
-
-            return (
-              <div key={`legend-${index}`} style={{ display: 'flex', alignItems: 'center' }}>
-                <span style={iconStyle}></span>
-                <span style={{
-                  fontFamily: legendTextStyle.fontFamily,
-                  fontSize: `${legendTextStyle.fontSize}px`,
-                  fontWeight: legendTextStyle.fontWeight,
-                  letterSpacing: `${legendTextStyle.letterSpacing}px`,
-                  color: '#333',
-                  lineHeight: 'normal',
-                }}>
-                  {entry.value}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      );
-    };
-
-    // 自定义 Tooltip 组件
-    const CustomTooltipContent = ({ active, payload, label }: any) => {
-      if (!active || !payload || payload.length === 0) return null;
-
-      const dataIndex = chartData.findIndex(item => item.name === label);
-      const tooltipData: TooltipData = {
-        label: label || '',
-        value: payload[0]?.value || 0,
-        dataIndex,
-        seriesLabel: payload[0]?.dataKey || '',
-      };
-
-      // 如果提供了自定义 Tooltip 渲染函数
-      if (customTooltip) {
-        return customTooltip(tooltipData);
-      }
-
-      // 如果提供了 Tooltip 格式化函数
-      if (tooltipFormatter) {
-        const formatted = tooltipFormatter(tooltipData);
-        return (
-          <div style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 8,
-            padding: '12px 16px',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-          }}>
-            {formatted.title && (
-              <div style={{ fontWeight: 'bold', marginBottom: 8, fontSize: 14 }}>
-                {formatted.title}
-              </div>
-            )}
-            {formatted.items?.map((item, idx) => (
-              <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, fontSize: 12 }}>
-                <span style={{ color: '#666', marginRight: 16 }}>{item.label}</span>
-                <span style={{ fontWeight: '600' }}>{item.value}</span>
-              </div>
-            ))}
-          </div>
-        );
-      }
-
-      // 默认 Tooltip
-      return null;
-    };
-
-    const ChartComponent = (
-      <RechartsLine 
-        data={chartData}
-        margin={{ 
-          top: 20, 
-          right: 30, 
-          left: showYAxis ? 20 : 10, 
-          bottom: (showLabels && showXAxis) ? 20 : 10 
-        }}
-      >
-        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
-        
-        {(showLabels && showXAxis) && (
-          <RechartsXAxis 
-            dataKey="name"
-            style={{ fontSize: 10 }}
-          />
-        )}
-        
-        {showYAxis && (
-          <RechartsYAxis 
-            style={{ fontSize: 10 }}
-            tickFormatter={yAxisFormat}
-          />
-        )}
-        
-        <Tooltip 
-          content={customTooltip || tooltipFormatter ? <CustomTooltipContent /> : undefined}
-          contentStyle={!customTooltip && !tooltipFormatter ? { 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          } : undefined}
-        />
-        
-        {(isMultiSeries && showLegend) && (
-          <Legend 
-            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'top'}
-            align={legendPosition === 'left' || legendPosition === 'right' ? legendPosition : 'center'}
-            content={renderLegend}
-          />
-        )}
-        
-        {seriesKeys.map((key, index) => {
-          const handleClick = (clickData: any) => {
-            if (onLineClick && clickData) {
-              // 找到原始数据索引
-              const dataIndex = chartData.findIndex(item => item.name === clickData.name);
-              
-              if (dataIndex >= 0) {
-                if (isMultiSeries) {
-                  const series = (data as LineChartSeriesData[])[index];
-                  const originalDataPoint = series?.data?.[dataIndex];
-                  if (originalDataPoint) {
-                    onLineClick(key, originalDataPoint, dataIndex);
-                  }
-                } else {
-                  const originalDataPoint = (data as LineChartDataPoint[])[dataIndex];
-                  if (originalDataPoint) {
-                    onLineClick(key, originalDataPoint, dataIndex);
-                  }
-                }
-              }
-            }
-          };
-
-          return (
-            <Line
-              key={key}
-              type={curveType}
-              dataKey={key}
-              stroke={lineColors[index % lineColors.length]}
-              strokeWidth={2}
-              dot={showDots ? { fill: lineColors[index % lineColors.length], r: 4 } : false}
-              activeDot={showDots ? { r: 6 } : false}
-              onClick={handleClick}
-            />
-          );
-        })}
-      </RechartsLine>
-    );
-
-    return (
-      <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-        {ResponsiveContainer ? (
-          <ResponsiveContainer width="100%" height={height - 20}>
-            {ChartComponent}
-          </ResponsiveContainer>
-        ) : (
-          ChartComponent
-        )}
-      </View>
-    );
-  }
-
-  // 移动端使用 react-native-svg-charts
-  if (!RNLineChart) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <Text style={styles.emptyText}>Chart library not available</Text>
-      </View>
-    );
-  }
-
-  // 单系列数据
-  const chartData = isMultiSeries 
-    ? ((data as LineChartSeriesData[])[0]?.data || []).map(d => d.value)
-    : (data as LineChartDataPoint[]).map(d => d.value);
-
-  const Decorator = ({ x, y, data: chartValues }: any) => {
-    if (!showDots || !Circle) return null;
-    
-    return chartValues.map((value: any, index: number) => {
-      const handlePress = () => {
-        if (onLineClick) {
-          let originalDataPoint: LineChartDataPoint;
-          let seriesLabel: string;
-          
-          if (isMultiSeries) {
-            const firstSeries = (data as LineChartSeriesData[])[0];
-            originalDataPoint = firstSeries?.data?.[index] || { value };
-            seriesLabel = firstSeries?.label || 'Series 1';
-          } else {
-            originalDataPoint = (data as LineChartDataPoint[])[index] || { value };
-            seriesLabel = 'value';
-          }
-          
-          onLineClick(seriesLabel, originalDataPoint, index);
-        }
-      };
-
-      return (
-        <Circle
-          key={index}
-          cx={x(index)}
-          cy={y(value)}
-          r={4}
-          stroke={color}
-          fill="white"
-          strokeWidth={2}
-          onPress={handlePress}
-        />
-      );
-    });
-  };
-
-  return (
-    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-      <View style={styles.chartWrapper}>
-        <RNLineChart
-          style={{ flex: 1 }}
-          data={chartData}
-          svg={{ stroke: color, strokeWidth: 2 }}
-          contentInset={contentInset}
-          gridMin={0}
-        >
-          {showGrid && Grid && <Grid />}
-          <Decorator />
-        </RNLineChart>
-        
-        {(showLabels && showXAxis) && RNXAxis && (
-          <RNXAxis
-            style={styles.xAxis}
-            data={chartData}
-            formatLabel={(value: any, index: number) => {
-              if (xAxisFormat) {
-                return xAxisFormat(value, index);
-              }
-              if (isMultiSeries) {
-                return ((data as LineChartSeriesData[])[0]?.data || [])[index]?.label || index.toString();
-              }
-              return (data as LineChartDataPoint[])[index]?.label || index.toString();
-            }}
-            contentInset={{ left: 20, right: 20 }}
-            svg={{ fontSize: 10, fill: 'black' }}
-          />
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-  },
-  chartWrapper: {
-    flex: 1,
-  },
-  xAxis: {
-    marginHorizontal: -10,
-    height: 30,
-  },
-  emptyText: {
-    textAlign: 'center',
-    marginTop: 100,
-    color: '#999',
-  },
-});
-

package/components/LineChart/index.tsx

@@ -1,2 +0,0 @@
-export { LineChart } from './LineChart';
-export type { LineChartProps, LineChartDataPoint, LineChartSeriesData } from './LineChart';