@beppla/tapas-ui 1.5.14 → 1.5.15

package/components/PieChart/NestedPieChart.tsx

@@ -0,0 +1,605 @@
+/**
+ * NestedPieChart - 多层级饼图组件
+ * 支持多层级嵌套、分组图例、交互高亮等功能
+ * 
+ * Note: This component uses inline styles for Web-specific rendering with Recharts.
+ * RN-specific lint rules are disabled for Web platform code.
+ */
+
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+
+import React, { useMemo, useState, useCallback } from 'react';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import { GroupedLegend } from './GroupedLegend';
+import {
+  NestedPieChartProps,
+  NestedPieChartNode,
+  NestedPieChartFlatData,
+  ProcessedSliceData,
+  SliceClickEvent,
+  LegendClickEvent,
+} from './NestedPieChart.types';
+import {
+  isTreeData,
+  flatToTree,
+  cleanData,
+  generateColorMap,
+  processData,
+  buildLegendGroupData,
+  defaultFormatPercent,
+  formatEuro,
+} from './NestedPieChart.utils';
+
+// 动态导入 recharts
+let RechartsPieChart: any, Pie: any, Cell: any, Tooltip: any, ResponsiveContainer: any;
+
+if (Platform.OS === 'web') {
+  try {
+    const recharts = require('recharts');
+    RechartsPieChart = recharts.PieChart;
+    Pie = recharts.Pie;
+    Cell = recharts.Cell;
+    Tooltip = recharts.Tooltip;
+    ResponsiveContainer = recharts.ResponsiveContainer;
+  } catch (e) {
+    // Recharts not available for Web
+  }
+}
+
+const DEFAULT_COLORS = [
+  '#FF6B00', // Orange
+  '#0066CC', // Blue
+  '#00B894', // Teal
+  '#6C5CE7', // Purple
+  '#FFB800', // Yellow
+  '#D63031', // Red
+  '#00CEC9', // Cyan
+  '#FF7675', // Pink
+  '#74B9FF', // Light Blue
+  '#A29BFE', // Lavender
+];
+
+export const NestedPieChart: React.FC<NestedPieChartProps> = ({
+  data: rawData,
+  dataType,
+  levels: _levels,
+  width,
+  height = 400,
+  outerRadius,
+  innerRadius = 60,
+  radiusGap = 15,
+  colorStrategy = { autoGenerate: true, colorSteps: 5, minColorDiff: 0.1 },
+  colors = DEFAULT_COLORS,
+  showLegend = true,
+  legendMode = 'grouped',
+  legendPosition = 'right',
+  legendContent: _legendContent = 'all',
+  legendCollapsible = true,
+  legendDefaultExpanded = true,
+  legendSortStrategy = 'none',
+  legendGroupSortStrategy = 'none',
+  legendShowValues = true,
+  legendShowPercent = true,
+  legendItemGap = 6,
+  legendGroupGap = 16,
+  legendLabelMinWidth,
+  legendChartGap = 30,
+  showLabels: _showLabels = false,
+  labelLevel: _labelLevel = 'all',
+  formatValue = formatEuro,
+  formatPercent = defaultFormatPercent,
+  onSliceClick,
+  onSliceHover: _onSliceHover,
+  onLegendClick,
+  enableLegendFilter = false,
+  showTooltip = true,
+  customTooltip,
+  padAngle = 0.01,
+  centerText,
+  centerTextStyle,
+  emptyText = 'No data available',
+  style,
+  testID,
+}) => {
+  // 状态管理
+  const [hoveredKey, setHoveredKey] = useState<string | number | null>(null);
+  const [hiddenKeys, setHiddenKeys] = useState<Set<string | number>>(new Set());
+
+  // 数据处理
+  const processedResult = useMemo(() => {
+    if (!rawData || rawData.length === 0) {
+      return { data: [], total: 0, groups: [], colorMap: new Map() };
+    }
+
+    // 判断数据类型
+    const isTree = dataType === 'tree' || (dataType === undefined && isTreeData(rawData));
+    
+    // 转换为树形数据
+    let treeData: NestedPieChartNode[] = isTree
+      ? (rawData as NestedPieChartNode[])
+      : flatToTree(rawData as NestedPieChartFlatData[]);
+    
+    // 清理数据（去重、过滤0值）
+    treeData = cleanData(treeData);
+    
+    if (treeData.length === 0) {
+      return { data: [], total: 0, groups: [], colorMap: new Map() };
+    }
+    
+    // 生成配色
+    const colorMap = generateColorMap(treeData, colorStrategy, colors);
+    
+    // 处理数据
+    const { processed, total } = processData(treeData, colorMap);
+    
+    // 构建图例数据
+    const groups = buildLegendGroupData(
+      processed,
+      legendGroupSortStrategy,
+      legendSortStrategy,
+      legendDefaultExpanded
+    );
+    
+    return { data: processed, total, groups, colorMap };
+  }, [
+    rawData,
+    dataType,
+    colorStrategy,
+    colors,
+    legendGroupSortStrategy,
+    legendSortStrategy,
+    legendDefaultExpanded,
+  ]);
+
+  const { data: processedData, total, groups } = processedResult;
+
+  // 空数据处理
+  if (!processedData || processedData.length === 0 || total === 0) {
+    return (
+      <View style={[styles.container, styles.emptyContainer, { height }, style]} testID={testID}>
+        <Text style={styles.emptyText}>{emptyText}</Text>
+      </View>
+    );
+  }
+
+  // 计算实际层数（保留供后续扩展使用）
+  // const actualLevels = levels || (processedData[0]?.children ? 2 : 1);
+
+  // Legend 点击处理
+  const handleLegendClick = useCallback((event: LegendClickEvent) => {
+    if (enableLegendFilter) {
+      const keyToToggle = event.isGroupHeader ? event.groupKey as string | number : event.key;
+      setHiddenKeys(prev => {
+        const next = new Set(prev);
+        if (next.has(keyToToggle)) {
+          next.delete(keyToToggle);
+        } else {
+          next.add(keyToToggle);
+        }
+        return next;
+      });
+    }
+    
+    if (onLegendClick) {
+      onLegendClick(event);
+    }
+  }, [enableLegendFilter, onLegendClick]);
+
+  // Web 端渲染
+  if (Platform.OS === 'web' && RechartsPieChart) {
+    return (
+      <NestedPieChartWeb
+        processedData={processedData}
+        total={total}
+        groups={groups}
+        height={height}
+        width={width}
+        outerRadius={outerRadius}
+        innerRadius={innerRadius}
+        radiusGap={radiusGap}
+        showLegend={showLegend}
+        legendMode={legendMode}
+        legendPosition={legendPosition}
+        legendCollapsible={legendCollapsible}
+        legendShowValues={legendShowValues}
+        legendShowPercent={legendShowPercent}
+        legendItemGap={legendItemGap}
+        legendGroupGap={legendGroupGap}
+        legendLabelMinWidth={legendLabelMinWidth}
+        legendChartGap={legendChartGap}
+        formatValue={formatValue}
+        formatPercent={formatPercent}
+        onSliceClick={onSliceClick}
+        onLegendClick={handleLegendClick}
+        hoveredKey={hoveredKey}
+        setHoveredKey={setHoveredKey}
+        hiddenKeys={hiddenKeys}
+        showTooltip={showTooltip}
+        customTooltip={customTooltip}
+        padAngle={padAngle}
+        centerText={centerText}
+        centerTextStyle={centerTextStyle}
+        style={style}
+        testID={testID}
+      />
+    );
+  }
+
+  // React Native 端（降级方案）
+  return (
+    <View style={[styles.container, { height }, style]} testID={testID}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        color: '#999',
+        fontSize: 14,
+        textAlign: 'center',
+        padding: '20px',
+      }}>
+        Nested PieChart is currently only available on Web platform.
+        <br />
+        Please use the web version for full functionality.
+      </div>
+    </View>
+  );
+};
+
+// Web 端实现组件
+interface NestedPieChartWebProps {
+  processedData: ProcessedSliceData[];
+  total: number;
+  groups: any[];
+  height: number;
+  width?: number;
+  outerRadius?: number | string;
+  innerRadius?: number | string;
+  radiusGap: number;
+  showLegend: boolean;
+  legendMode: 'flat' | 'grouped';
+  legendPosition: 'top' | 'bottom' | 'left' | 'right';
+  legendCollapsible: boolean;
+  legendShowValues: boolean;
+  legendShowPercent: boolean;
+  legendItemGap: number;
+  legendGroupGap: number;
+  legendLabelMinWidth?: number;
+  legendChartGap: number;
+  formatValue: any;
+  formatPercent: any;
+  onSliceClick?: (event: SliceClickEvent) => void;
+  onLegendClick: (event: LegendClickEvent) => void;
+  hoveredKey: string | number | null;
+  setHoveredKey: (key: string | number | null) => void;
+  hiddenKeys: Set<string | number>;
+  showTooltip: boolean;
+  customTooltip?: (event: SliceClickEvent) => React.ReactNode;
+  padAngle: number;
+  centerText?: string;
+  centerTextStyle?: React.CSSProperties;
+  style?: any;
+  testID?: string;
+}
+
+const NestedPieChartWeb: React.FC<NestedPieChartWebProps> = ({
+  processedData,
+  total: _total,
+  groups,
+  height,
+  width,
+  outerRadius: propsOuterRadius,
+  innerRadius: propsInnerRadius,
+  radiusGap,
+  showLegend,
+  legendMode,
+  legendPosition,
+  legendCollapsible,
+  legendShowValues,
+  legendShowPercent,
+  legendItemGap,
+  legendGroupGap,
+  legendLabelMinWidth,
+  legendChartGap,
+  formatValue,
+  formatPercent,
+  onSliceClick,
+  onLegendClick,
+  hoveredKey,
+  setHoveredKey,
+  hiddenKeys,
+  showTooltip,
+  customTooltip,
+  padAngle,
+  centerText,
+  centerTextStyle,
+  style,
+  testID,
+}) => {
+  // 计算半径
+  const defaultOuterRadius = (showLegend && (legendPosition === 'left' || legendPosition === 'right'))
+    ? Math.min(height * 0.35, 140)
+    : height * 0.4;
+  
+  const calculatedOuterRadius = propsOuterRadius !== undefined 
+    ? (typeof propsOuterRadius === 'string' ? propsOuterRadius : propsOuterRadius)
+    : defaultOuterRadius;
+  
+  const calculatedInnerRadius = typeof propsInnerRadius === 'number' 
+    ? propsInnerRadius 
+    : (typeof propsInnerRadius === 'string' ? propsInnerRadius : 60);
+
+  // 准备 Recharts 数据
+  const outerPieData = processedData
+    .filter(item => !hiddenKeys.has(item.key))
+    .map(item => ({
+      ...item,
+      name: item.label,
+      fill: item.color,
+    }));
+
+  const innerPieData: any[] = [];
+  processedData.forEach(parent => {
+    if (parent.children && !hiddenKeys.has(parent.key)) {
+      parent.children.forEach(child => {
+        if (!hiddenKeys.has(child.key)) {
+          innerPieData.push({
+            ...child,
+            name: child.label,
+            fill: child.color,
+            parentKey: parent.key,
+          });
+        }
+      });
+    }
+  });
+
+  // 自定义 Tooltip
+  const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: Array<Record<string, unknown>> }) => {
+    if (!active || !payload || payload.length === 0) return null;
+    
+    const data = payload[0]?.payload as any;
+    if (!data) return null;
+    
+    if (customTooltip) {
+      return customTooltip({
+        key: data.key,
+        label: data.name,
+        value: data.value,
+        level: data.level,
+        path: data.path,
+        parentKey: data.parentKey,
+        metadata: data.metadata,
+      });
+    }
+    
+    return (
+      <div style={{
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        border: '1px solid #E0E0E0',
+        borderRadius: '8px',
+        padding: '12px 16px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      }}>
+        <div style={{ fontWeight: 600, marginBottom: '6px', fontSize: '13px', color: '#2C3E50' }}>
+          {data.name}
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px', fontSize: '12px' }}>
+          <span style={{ color: '#7F8C8D' }}>Value:</span>
+          <span style={{ fontWeight: 600, color: '#2C3E50' }}>{formatValue(data.value)}</span>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px', fontSize: '12px' }}>
+          <span style={{ color: '#7F8C8D' }}>Percent:</span>
+          <span style={{ fontWeight: 600, color: '#2C3E50' }}>{formatPercent(data.percent)}</span>
+        </div>
+      </div>
+    );
+  };
+
+  // 计算图表容器宽度
+  const isVerticalLegend = legendPosition === 'left' || legendPosition === 'right';
+  const pieRadius = typeof calculatedOuterRadius === 'number' 
+    ? calculatedOuterRadius 
+    : parseInt(String(calculatedOuterRadius)) || defaultOuterRadius;
+  const pieWidth = pieRadius * 2 + 80;
+  
+  const calculatedLegendWidth = legendLabelMinWidth 
+    ? legendLabelMinWidth + 150
+    : 280;
+  const legendWidth = isVerticalLegend && showLegend ? calculatedLegendWidth + legendChartGap : 0;
+  
+  const chartWidth = isVerticalLegend && showLegend
+    ? pieWidth + legendWidth
+    : pieWidth;
+
+  // 处理点击事件
+  const handlePieClick = useCallback((data: any) => {
+    if (!onSliceClick || !data) return;
+    
+    onSliceClick({
+      key: data.key,
+      label: data.name,
+      value: data.value,
+      level: data.level,
+      path: data.path,
+      parentKey: data.parentKey,
+      metadata: data.metadata,
+    });
+  }, [onSliceClick]);
+
+  return (
+    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
+      <div style={{
+        display: 'flex',
+        flexDirection: isVerticalLegend ? 'row' : 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        gap: `${legendChartGap}px`,
+      }}>
+        {/* Legend 在左侧或顶部 */}
+        {showLegend && (legendPosition === 'left' || legendPosition === 'top') && (
+          <div style={{ 
+            maxHeight: isVerticalLegend ? '100%' : 'auto',
+            overflowY: isVerticalLegend ? 'auto' : 'visible',
+            overflowX: 'hidden',
+            padding: '8px',
+          }}>
+            {legendMode === 'grouped' ? (
+              <GroupedLegend
+                groups={groups}
+                showValues={legendShowValues}
+                showPercent={legendShowPercent}
+                collapsible={legendCollapsible}
+                itemGap={legendItemGap}
+                groupGap={legendGroupGap}
+                labelMinWidth={legendLabelMinWidth}
+                formatValue={formatValue}
+                formatPercent={formatPercent}
+                onItemClick={onLegendClick}
+                onGroupClick={onLegendClick}
+                highlightedKey={hoveredKey}
+                hiddenKeys={hiddenKeys}
+              />
+            ) : null}
+          </div>
+        )}
+        
+        {/* 饼图 */}
+        <div style={{ position: 'relative' }}>
+          {ResponsiveContainer ? (
+            <ResponsiveContainer width={chartWidth} height={height - 20}>
+              <RechartsPieChart>
+                {/* 外层（父分类） */}
+                <Pie
+                  data={outerPieData}
+                  dataKey="value"
+                  cx="50%"
+                  cy="50%"
+                  outerRadius={calculatedOuterRadius}
+                  innerRadius={typeof calculatedInnerRadius === 'number' 
+                    ? calculatedInnerRadius + radiusGap 
+                    : calculatedInnerRadius}
+                  paddingAngle={padAngle * 180 / Math.PI}
+                  onClick={handlePieClick}
+                  onMouseEnter={(_: any, index: number) => {
+                    const key = outerPieData[index]?.key;
+                    if (key !== undefined) {
+                      setHoveredKey(key);
+                    }
+                  }}
+                  onMouseLeave={() => setHoveredKey(null)}
+                >
+                  {outerPieData.map((entry: any, index: number) => (
+                    <Cell 
+                      key={`outer-cell-${index}`} 
+                      fill={entry.fill}
+                      opacity={hoveredKey && hoveredKey !== entry.key ? 0.3 : 1}
+                      style={{ cursor: 'pointer', transition: 'opacity 0.2s' }}
+                    />
+                  ))}
+                </Pie>
+                
+                {/* 内层（子分类） */}
+                {innerPieData.length > 0 && (
+                  <Pie
+                    data={innerPieData}
+                    dataKey="value"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={calculatedInnerRadius}
+                    outerRadius={typeof calculatedInnerRadius === 'number' 
+                      ? calculatedInnerRadius + radiusGap - 2
+                      : `${parseInt(String(calculatedInnerRadius)) + radiusGap - 2}%`}
+                    paddingAngle={padAngle * 180 / Math.PI}
+                    onClick={handlePieClick}
+                    onMouseEnter={(_: any, index: number) => {
+                      setHoveredKey(innerPieData[index]?.key);
+                    }}
+                    onMouseLeave={() => setHoveredKey(null)}
+                  >
+                    {innerPieData.map((entry: any, index: number) => (
+                      <Cell 
+                        key={`inner-cell-${index}`} 
+                        fill={entry.fill}
+                        opacity={hoveredKey && hoveredKey !== entry.key ? 0.3 : 1}
+                        style={{ cursor: 'pointer', transition: 'opacity 0.2s' }}
+                      />
+                    ))}
+                  </Pie>
+                )}
+                
+                {showTooltip && <Tooltip content={<CustomTooltip />} />}
+              </RechartsPieChart>
+            </ResponsiveContainer>
+          ) : null}
+          
+          {/* 中心文本 */}
+          {centerText && (
+            <div style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              textAlign: 'center',
+              pointerEvents: 'none',
+              fontSize: '18px',
+              fontWeight: 600,
+              color: '#2C3E50',
+              ...centerTextStyle,
+            }}>
+              {centerText}
+            </div>
+          )}
+        </div>
+        
+        {/* Legend 在右侧或底部 */}
+        {showLegend && (legendPosition === 'right' || legendPosition === 'bottom') && (
+          <div style={{ 
+            maxHeight: isVerticalLegend ? '100%' : 'auto',
+            overflowY: isVerticalLegend ? 'auto' : 'visible',
+            overflowX: 'hidden',
+            padding: '8px',
+          }}>
+            {legendMode === 'grouped' ? (
+              <GroupedLegend
+                groups={groups}
+                showValues={legendShowValues}
+                showPercent={legendShowPercent}
+                collapsible={legendCollapsible}
+                itemGap={legendItemGap}
+                groupGap={legendGroupGap}
+                labelMinWidth={legendLabelMinWidth}
+                formatValue={formatValue}
+                formatPercent={formatPercent}
+                onItemClick={onLegendClick}
+                onGroupClick={onLegendClick}
+                highlightedKey={hoveredKey}
+                hiddenKeys={hiddenKeys}
+              />
+            ) : null}
+          </div>
+        )}
+      </div>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    width: '100%',
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    color: '#999',
+    fontSize: 14,
+  },
+});
+
+export default NestedPieChart;