@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/PieChart/NestedPieChart.tsx

@@ -1,605 +0,0 @@
-/**
- * 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;