@beppla/tapas-ui 1.5.14 → 1.5.15

package/components/PieChart/PieChart.tsx

@@ -0,0 +1,456 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet, Platform, ScrollView } from 'react-native';
+import RNText from '../Text/Text';
+
+// 动态导入依赖
+let RNPieChart: any, SVGText: any;
+let RechartsPieChart: any, Pie: any, Cell: any, Tooltip: any, Legend: any;
+
+if (Platform.OS === 'web') {
+  // Web 环境使用 recharts
+  try {
+    const recharts = require('recharts');
+    RechartsPieChart = recharts.PieChart;
+    Pie = recharts.Pie;
+    Cell = recharts.Cell;
+    Tooltip = recharts.Tooltip;
+    Legend = recharts.Legend;
+  } catch (e) {
+    console.warn('Recharts not available for Web', e);
+  }
+} else {
+  // 移动端使用 react-native-svg-charts
+  try {
+    const svgCharts = require('react-native-svg-charts');
+    const svg = require('react-native-svg');
+    RNPieChart = svgCharts.PieChart;
+    SVGText = svg.Text;
+  } catch (e) {
+    console.warn('react-native-svg-charts not available', e);
+  }
+}
+
+export interface PieChartData {
+  value: number;
+  label?: string;
+  color?: string;
+  key?: string | number;
+}
+
+export interface PieChartProps {
+  data: PieChartData[];
+  width?: number;
+  height?: number;
+  colors?: string[];
+  outerRadius?: number | string; // 设置外圆半径/直径，可以是数字（像素）或字符串（百分比如'80%'）。默认为 height * 0.3
+  innerRadius?: number | string;  // 设置innerRadius可以创建Donut图
+  padAngle?: number;
+  showLabels?: boolean;
+  showLegend?: boolean;
+  legendPosition?: 'top' | 'bottom' | 'left' | 'right'; // 图例位置
+  showLegendValues?: boolean; // 是否在图例中显示数值
+  legendValueAlign?: 'left' | 'right'; // 图例数值对齐方式
+  legendItemGap?: number; // 图例项之间的行间距，默认 8
+  legendLabelValueGap?: number; // 图例中 label 与 value 之间的间距，默认 12
+  legendLabelMinWidth?: number; // 图例 label 的最小宽度，确保对齐整齐，默认不设置
+  legendChartGap?: number; // 饼图和图例之间的间距，默认 30（仅左右图例位置生效）
+  centerText?: string;
+  style?: any;
+  testID?: string;
+}
+
+const DEFAULT_COLORS = [
+  '#FF6B00',
+  '#0066CC',
+  '#00B894',
+  '#6C5CE7',
+  '#FFB800',
+  '#D63031',
+];
+
+export const PieChart: React.FC<PieChartProps> = ({
+  data,
+  width,
+  height = 300,
+  colors = DEFAULT_COLORS,
+  outerRadius,
+  innerRadius = 0,
+  padAngle = 0.02,
+  showLabels = false,
+  showLegend = true,
+  legendPosition = 'right',
+  showLegendValues = true,
+  legendValueAlign = 'right',
+  legendItemGap = 8,
+  legendLabelValueGap = 12,
+  legendLabelMinWidth,
+  legendChartGap = 30,
+  centerText,
+  style,
+  testID,
+}) => {
+  if (data.length === 0) {
+    return (
+      <View style={[styles.container, { height }, style]}>
+        <RNText style={styles.emptyText}>No data available</RNText>
+      </View>
+    );
+  }
+
+  const webChartData = useMemo(() => data.map((item, index) => ({
+    name: item.label || `Item ${index + 1}`,
+    value: item.value,
+    fill: item.color || colors[index % colors.length],
+  })), [data, colors]);
+
+  const mobileChartData = useMemo(() => data.map((item, index) => ({
+    ...item,
+    svg: {
+      fill: item.color || colors[index % colors.length],
+    },
+    key: item.key || `pie-slice-${index}`,
+  })), [data, colors]);
+
+  // Web 环境使用 Recharts
+  if (Platform.OS === 'web' && RechartsPieChart) {
+    const chartData = webChartData;
+
+    // 计算外圆半径
+    // 如果有右侧/左侧图例，默认使用更大的半径以充分利用空间
+    const defaultOuterRadius = (showLegend && (legendPosition === 'left' || legendPosition === 'right'))
+      ? Math.min(height * 0.4, 150)  // 有左右图例时，半径为 height * 0.4，最大 150
+      : height * 0.35;  // 无图例或上下图例时，半径为 height * 0.35
+    
+    const calculatedOuterRadius = outerRadius !== undefined 
+      ? (typeof outerRadius === 'string' ? outerRadius : outerRadius)
+      : defaultOuterRadius;
+
+    // 自定义 Legend 渲染函数（Web 端）
+    const renderCustomLegend = (props: any) => {
+      const { payload } = props;
+      if (!payload || payload.length === 0) return null;
+
+      const isVertical = legendPosition === 'left' || legendPosition === 'right';
+
+      return (
+        <div style={{
+          display: 'flex',
+          flexDirection: isVertical ? 'column' : 'row',
+          flexWrap: isVertical ? 'nowrap' : 'wrap',
+          justifyContent: isVertical ? 'center' : 'center',
+          alignItems: isVertical ? 'flex-start' : 'center',
+        }}>
+          {payload.map((entry: any, index: number) => {
+            const dataItem = data.find(d => (d.label || '') === entry.payload.name);
+            const isLastItem = index === payload.length - 1;
+            return (
+              <div key={`legend-${index}`} style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginBottom: !isLastItem ? `${legendItemGap}px` : '0',
+                paddingBottom: '0', // 确保没有额外的 padding
+              }}>
+                <div style={{
+                  width: '12px',
+                  height: '12px',
+                  borderRadius: '6px',
+                  backgroundColor: entry.color,
+                  flexShrink: 0,
+                  marginRight: '8px',
+                }}></div>
+                <span style={{
+                  fontSize: '12px',
+                  color: '#2C3E50',
+                  minWidth: legendLabelMinWidth ? `${legendLabelMinWidth}px` : 'auto',
+                  display: 'inline-block',
+                }}>
+                  {entry.value}
+                </span>
+                {showLegendValues && dataItem && (
+                  <span style={{
+                    fontSize: '12px',
+                    color: '#2C3E50',
+                    fontWeight: 600,
+                    textAlign: legendValueAlign === 'right' ? 'right' : 'left',
+                    minWidth: '40px',
+                    display: 'inline-block',
+                    marginLeft: `${legendLabelValueGap}px`,
+                  }}>
+                    {dataItem.value}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      );
+    };
+
+    // 计算实际的饼图宽度（包括 Legend 空间）
+    const pieRadius = typeof calculatedOuterRadius === 'number' 
+      ? calculatedOuterRadius 
+      : parseInt(String(calculatedOuterRadius)) || defaultOuterRadius;
+    const pieWidth = pieRadius * 2 + 60; // 直径 + 左右边距
+    
+    // 为 Legend 预留空间
+    const isVerticalLegend = legendPosition === 'left' || legendPosition === 'right';
+    // 计算图例实际需要的宽度：颜色圆点(12) + 边距(8) + Label最小宽度 + 间距 + Value(40) + 额外空间(40)
+    const calculatedLegendWidth = legendLabelMinWidth 
+      ? 12 + 8 + legendLabelMinWidth + legendLabelValueGap + 40 + 40
+      : 250;
+    const legendWidth = isVerticalLegend && showLegend ? calculatedLegendWidth + legendChartGap : 0; // 图例宽度 + 间距
+    
+    // PieChart 的宽度设置
+    const chartWidth = isVerticalLegend && showLegend
+      ? pieWidth + legendWidth  // 饼图宽度 + 图例宽度（含间距）
+      : pieWidth;
+
+    const ChartComponent = (
+      <RechartsPieChart width={chartWidth} height={height}>
+        <Pie
+          data={chartData}
+          cx={isVerticalLegend && showLegend ? pieRadius + 30 : "50%"}
+          cy="50%"
+          labelLine={false}
+          label={showLabels ? ({ name, percent }: any) => `${name} ${(percent * 100).toFixed(0)}%` : false}
+          outerRadius={calculatedOuterRadius}
+          innerRadius={typeof innerRadius === 'number' ? innerRadius : 0}
+          paddingAngle={padAngle * 50}
+          dataKey="value"
+        >
+          {chartData.map((entry: any, index: number) => (
+            <Cell key={`cell-${index}`} fill={entry.fill} />
+          ))}
+        </Pie>
+        <Tooltip />
+        {showLegend && (
+          <Legend 
+            content={renderCustomLegend}
+            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'middle'}
+            align={legendPosition === 'right' ? 'right' : legendPosition === 'left' ? 'left' : 'center'}
+            layout={legendPosition === 'left' || legendPosition === 'right' ? 'vertical' : 'horizontal'}
+            wrapperStyle={{
+              paddingTop: '0',
+              paddingBottom: legendPosition === 'top' ? '24px' : '0',
+              paddingLeft: legendPosition === 'right' ? `${legendChartGap}px` : '0',
+              paddingRight: legendPosition === 'left' ? `${legendChartGap}px` : '0',
+              margin: '0',
+            }}
+          />
+        )}
+      </RechartsPieChart>
+    );
+
+    return (
+      <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
+        {ChartComponent}
+      </View>
+    );
+  }
+
+  // 移动端使用 react-native-svg-charts
+  if (!RNPieChart) {
+    return (
+      <View style={[styles.container, { height }, style]}>
+        <RNText style={styles.emptyText}>Chart library not available</RNText>
+      </View>
+    );
+  }
+
+  const pieData = mobileChartData;
+
+  const Labels = ({ slices }: any) => {
+    if (!showLabels || !SVGText) return null;
+    
+    return slices.map((slice: any, index: number) => {
+      const { labelCentroid, data } = slice;
+      return (
+        <SVGText
+          key={index}
+          x={labelCentroid[0]}
+          y={labelCentroid[1]}
+          fill={'black'}
+          textAnchor={'middle'}
+          alignmentBaseline={'middle'}
+          fontSize={12}
+          fontWeight="bold"
+        >
+          {`${data.value.toFixed(0)}`}
+        </SVGText>
+      );
+    });
+  };
+
+  const CenterLabel = ({ slices }: any) => {
+    if (!centerText || !SVGText) return null;
+    
+    // 计算饼图中心点
+    const centerX = slices[0]?.pieCentroid[0] || 0;
+    const centerY = slices[0]?.pieCentroid[1] || 0;
+    
+    return (
+      <SVGText
+        x={centerX}
+        y={centerY}
+        fill={'#2C3E50'}
+        textAnchor={'middle'}
+        alignmentBaseline={'middle'}
+        fontSize={18}
+        fontWeight="bold"
+      >
+        {centerText}
+      </SVGText>
+    );
+  };
+
+  // 计算饼图容器的样式
+  const chartContainerStyle: any = legendPosition === 'right' || legendPosition === 'left'
+    ? { flex: 1, marginRight: legendPosition === 'right' ? 100 : 0, marginLeft: legendPosition === 'left' ? 100 : 0 }
+    : { width: '100%' };
+
+  return (
+    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
+      <View style={chartContainerStyle}>
+        <RNPieChart
+          style={{ height: height - (showLegend && (legendPosition === 'top' || legendPosition === 'bottom') ? 80 : 20) }}
+          data={pieData}
+          innerRadius={innerRadius}
+          padAngle={padAngle}
+        >
+          <Labels />
+          <CenterLabel />
+        </RNPieChart>
+      </View>
+
+      {showLegend && (
+        <ScrollView
+          style={[
+            styles.legendContainer,
+            legendPosition === 'right' && styles.legendRight,
+            legendPosition === 'left' && styles.legendLeft,
+            legendPosition === 'top' && styles.legendTop,
+            legendPosition === 'bottom' && styles.legendBottom,
+          ]}
+          contentContainerStyle={[
+            styles.legend,
+            legendPosition === 'right' || legendPosition === 'left' ? styles.legendVertical : styles.legendHorizontal,
+          ]}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+        >
+          {data.map((item, index) => {
+            return (
+              <View key={index} style={[styles.legendItem, { marginBottom: legendItemGap }]}>
+                <View
+                  style={[
+                    styles.legendColor,
+                    { backgroundColor: item.color || colors[index % colors.length] },
+                  ]}
+                />
+                <RNText style={[
+                  styles.legendLabel, 
+                  !showLegendValues && styles.legendLabelOnly,
+                  legendLabelMinWidth ? { minWidth: legendLabelMinWidth } : null
+                ]}>
+                  {item.label || `Item ${index + 1}`}
+                </RNText>
+                {showLegendValues && (
+                  <RNText style={[styles.legendValue, legendValueAlign === 'right' && styles.legendValueRight, { marginLeft: legendLabelValueGap }]}>
+                    {item.value}
+                  </RNText>
+                )}
+              </View>
+            );
+          })}
+        </ScrollView>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  legendContainer: {
+    maxHeight: '100%',
+  },
+  legend: {
+    paddingHorizontal: 16,
+    flexGrow: 0,
+  },
+  legendVertical: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  legendHorizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  legendRight: {
+    paddingLeft: 16,
+    paddingRight: 0,
+  },
+  legendLeft: {
+    paddingRight: 16,
+    paddingLeft: 0,
+  },
+  legendTop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    marginTop: 0,
+    marginBottom: 16,
+  },
+  legendBottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    marginTop: 16,
+    marginBottom: 0,
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 0,
+    justifyContent: 'space-between',
+    minWidth: 120,
+  },
+  legendColor: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    marginRight: 8,
+    flexShrink: 0,
+  },
+  legendLabel: {
+    fontSize: 12,
+    color: '#2C3E50',
+    flex: 1,
+  },
+  legendLabelOnly: {
+    flex: 0,
+  },
+  legendValue: {
+    fontSize: 12,
+    color: '#2C3E50',
+    fontWeight: '600',
+  },
+  legendValueRight: {
+    textAlign: 'right',
+    minWidth: 40,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+  },
+});
+

package/components/PieChart/index.tsx

@@ -0,0 +1,19 @@
+export { PieChart } from './PieChart';
+export type { PieChartProps, PieChartData } from './PieChart';
+
+export { default as NestedPieChart } from './NestedPieChart';
+export type {
+  NestedPieChartProps,
+  NestedPieChartNode,
+  NestedPieChartFlatData,
+  LegendMode,
+  LegendContent,
+  LegendSortStrategy,
+  ColorStrategy,
+  ValueFormatter,
+  PercentFormatter,
+  SliceClickEvent,
+  LegendClickEvent,
+  ProcessedSliceData,
+  LegendGroupData,
+} from './NestedPieChart.types';

package/components/Popover/Popover.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { View,  StyleProp, ViewStyle } from 'react-native';
+import { makeStyles, withTheme } from '@rneui/themed';
+import Icon from '../Icons/TapasIcon';
+
+export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+export type ArrowPosition = 'start' | 'center' | 'end';
+
+export interface Props {
+  isVisible: boolean;
+  children?: React.ReactNode;
+  position?: PopoverPosition;
+  arrowPosition?: ArrowPosition;
+  width?: number;
+  height?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    position: 'absolute',
+    backgroundColor: theme.colors.white,
+    borderRadius: theme.radius.rounded,
+    shadowColor: theme.colors.grey4,
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+    shadowOpacity: 0.58,
+    shadowRadius: 24,
+    elevation: 8,
+    zIndex: 9999,
+  },
+  arrow: {
+    position: 'absolute',
+    color: theme.colors.white,
+    width: 12,
+    height: 27,
+  },
+  arrowTop: {
+    top: -6,
+    shadowColor: theme.colors.grey4,
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  arrowBottom: {
+    bottom: -6,
+    shadowColor: theme.colors.grey4, 
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  arrowLeft: {
+    left: -6,
+    shadowColor: theme.colors.grey4,
+    shadowOffset: {
+      width: -2,
+      height: 0,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  arrowRight: {
+    right: -6,
+    shadowColor: theme.colors.grey4,
+    shadowOffset: {
+      width: 2,
+      height: 0,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  content: {
+    flex: 1,
+    borderRadius: theme.radius.rounded,
+    overflow: 'hidden',
+  },
+}));
+
+const Popover: React.FC<Props> = ({
+  isVisible,
+  children,
+  position = 'bottom',
+  arrowPosition = 'center',
+  width = 392,
+  height = 696,
+  containerStyle,
+  contentStyle,
+  ...props
+}) => {
+  const styles = useStyles(props);
+
+  if (!isVisible) return null;
+
+  const getArrowStyle = () => {
+    let arrowPositionStyle = {};
+    
+    switch (position) {
+      case 'top':
+        arrowPositionStyle = styles.arrowTop;
+        break;
+      case 'bottom':
+        arrowPositionStyle = styles.arrowBottom;
+        break;
+      case 'left':
+        arrowPositionStyle = styles.arrowLeft;
+        break;
+      case 'right':
+        arrowPositionStyle = styles.arrowRight;
+        break;
+    }
+
+    // 根据箭头位置调整left/top值
+    const positionStyle: any = {};
+    if (position === 'top' || position === 'bottom') {
+      switch (arrowPosition) {
+        case 'start':
+          positionStyle.left = 20;
+          break;
+        case 'center':
+          positionStyle.left = width / 2 - 6;
+          break;
+        case 'end':
+          positionStyle.right = 20;
+          break;
+      }
+    } else {
+      switch (arrowPosition) {
+        case 'start':
+          positionStyle.top = 20;
+          break;
+        case 'center':
+          positionStyle.top = height / 2 - 6;
+          break;
+        case 'end':
+          positionStyle.bottom = 20;
+          break;
+      }
+    }
+
+    return {
+      ...styles.arrow,
+      ...arrowPositionStyle,
+      ...positionStyle,
+    };
+  };
+
+  return (
+    <View style={[styles.container, { width, height }, containerStyle]} testID="popover">
+      {/* 箭头 */}
+      <Icon name="left_arrow" size={17} style={getArrowStyle()} />
+      {/* 内容区域 */}
+      <View style={[styles.content, contentStyle]}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export default withTheme(Popover);