@beppla/tapas-ui 1.5.10 → 1.5.11

package/components/Layout/index.tsx

@@ -0,0 +1,24 @@
+import { ToastProvider } from "./ToastContext";
+import { DrawerProvider } from "./DrawerContext";
+import React from "react";
+import Layout, { Props } from "./Layout";
+import {View} from "react-native";
+
+export { Props } from "./Layout";
+export { NavItem, NavItemType, SelectedItem } from "../Navigation/Navigation";
+
+const Index: React.FC<Props> = ({children, ...props}) => {
+    return (
+        <ToastProvider>
+            <DrawerProvider>
+                <Layout {...props} >
+                <View>
+                    {children}
+                </View>
+                </Layout>
+            </DrawerProvider>
+        </ToastProvider>
+    )
+}
+
+export default Index;

package/components/LineChart/LineChart.tsx

@@ -0,0 +1,487 @@
+import React, { useMemo } 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');
+  }
+}
+
+const DEFAULT_MULTI_SERIES_COLORS = [
+  '#6C63FF', '#00BFA5', '#FF6B00', '#FFC107', '#E91E63',
+  '#9C27B0', '#3F51B5', '#00BCD4', '#4CAF50', '#FF9800',
+];
+
+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>
+    );
+  }
+
+  const lineColors = useMemo(
+    () => colors || (isMultiSeries ? DEFAULT_MULTI_SERIES_COLORS : [color]),
+    [colors, isMultiSeries, color]
+  );
+
+  const { webChartData, seriesKeys } = useMemo(() => {
+    let result: any[] = [];
+    let keys: string[] = [];
+
+    if (isMultiSeries) {
+      const series = data as LineChartSeriesData[];
+      keys = series.map((s, i) => s.label || `Series ${i + 1}`);
+
+      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 (keys[sIndex]) {
+            point[keys[sIndex]] = s.data?.[i]?.value || 0;
+          }
+        });
+        result.push(point);
+      }
+    } else {
+      result = (data as LineChartDataPoint[]).map((item, index) => ({
+        name: item.label || `Point ${index + 1}`,
+        value: item.value,
+      }));
+      keys = ['value'];
+    }
+
+    return { webChartData: result, seriesKeys: keys };
+  }, [data, isMultiSeries]);
+
+  // Web 环境使用 Recharts
+  if (Platform.OS === 'web' && RechartsLine) {
+    const chartData = webChartData;
+
+    // 自定义图例渲染函数
+    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

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