@beppla/tapas-ui 1.5.9 → 1.5.11

package/components/PieChart/GroupedLegend.tsx

@@ -0,0 +1,284 @@
+/**
+ * GroupedLegend - 分组图例组件
+ * 支持折叠/展开、分组显示、点击交互
+ * 
+ * Note: This component uses inline styles as it's specifically designed for Web platform
+ * where CSS-in-JS is the standard approach. RN-specific lint rules are disabled.
+ */
+
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+
+import React, { useState, useCallback } from 'react';
+import { LegendGroupData, LegendClickEvent, ValueFormatter, PercentFormatter } from './NestedPieChart.types';
+
+export interface GroupedLegendProps {
+  groups: LegendGroupData[];
+  showValues?: boolean;
+  showPercent?: boolean;
+  collapsible?: boolean;
+  itemGap?: number;
+  groupGap?: number;
+  labelMinWidth?: number;
+  formatValue?: ValueFormatter;
+  formatPercent?: PercentFormatter;
+  onItemClick?: (event: LegendClickEvent) => void;
+  onGroupClick?: (event: LegendClickEvent) => void;
+  highlightedKey?: string | number | null;
+  hiddenKeys?: Set<string | number>;
+}
+
+export const GroupedLegend: React.FC<GroupedLegendProps> = ({
+  groups,
+  showValues = true,
+  showPercent = true,
+  collapsible = true,
+  itemGap = 6,
+  groupGap = 16,
+  labelMinWidth,
+  formatValue,
+  formatPercent,
+  onItemClick,
+  onGroupClick,
+  highlightedKey,
+  hiddenKeys = new Set(),
+}) => {
+  const [expandedGroups, setExpandedGroups] = useState<Set<string | number>>(
+    new Set(groups.filter(g => g.isExpanded).map(g => g.groupKey))
+  );
+
+  const toggleGroup = useCallback((groupKey: string | number) => {
+    if (!collapsible) return;
+    
+    setExpandedGroups(prev => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) {
+        next.delete(groupKey);
+      } else {
+        next.add(groupKey);
+      }
+      return next;
+    });
+  }, [collapsible]);
+
+  const handleGroupClick = useCallback((group: LegendGroupData) => {
+    if (collapsible) {
+      toggleGroup(group.groupKey);
+    }
+    
+    if (onGroupClick) {
+      onGroupClick({
+        key: group.groupKey,
+        label: group.groupLabel,
+        value: group.groupValue,
+        level: 0,
+        path: [group.groupKey],
+        metadata: group.metadata,
+        groupKey: group.groupKey,
+        isGroupHeader: true,
+      });
+    }
+  }, [collapsible, toggleGroup, onGroupClick]);
+
+  const handleItemClick = useCallback((
+    item: LegendGroupData['items'][0],
+    group: LegendGroupData
+  ) => {
+    if (onItemClick) {
+      onItemClick({
+        key: item.key,
+        label: item.label,
+        value: item.value,
+        level: 1,
+        path: [group.groupKey, item.key],
+        parentKey: group.groupKey,
+        metadata: item.metadata,
+        groupKey: group.groupKey,
+        isGroupHeader: false,
+      });
+    }
+  }, [onItemClick]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: `${groupGap}px` }}>
+      {groups.map((group) => {
+        const isExpanded = expandedGroups.has(group.groupKey);
+        const isGroupHidden = hiddenKeys.has(group.groupKey);
+        const isGroupHighlighted = highlightedKey === group.groupKey;
+        
+        return (
+          <div
+            key={group.groupKey}
+            style={{
+              opacity: isGroupHidden ? 0.3 : 1,
+              transition: 'opacity 0.2s',
+            }}
+          >
+            {/* 分组标题 */}
+            <div
+              onClick={() => handleGroupClick(group)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginBottom: isExpanded && group.items.length > 0 ? `${itemGap + 4}px` : '0',
+                cursor: collapsible || onGroupClick ? 'pointer' : 'default',
+                padding: '4px 0',
+                backgroundColor: isGroupHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent',
+                borderRadius: '4px',
+                transition: 'background-color 0.2s',
+              }}
+              onMouseEnter={(e) => {
+                if (!onGroupClick) return;
+                e.currentTarget.style.backgroundColor = 'rgba(0, 102, 204, 0.05)';
+              }}
+              onMouseLeave={(e) => {
+                if (!onGroupClick) return;
+                e.currentTarget.style.backgroundColor = isGroupHighlighted 
+                  ? 'rgba(0, 102, 204, 0.1)' 
+                  : 'transparent';
+              }}
+            >
+              {/* 展开/折叠图标 */}
+              {collapsible && group.items.length > 0 && (
+                <span style={{
+                  marginRight: '6px',
+                  fontSize: '12px',
+                  color: '#666',
+                  transition: 'transform 0.2s',
+                  transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                  display: 'inline-block',
+                }}>
+                  ▶
+                </span>
+              )}
+              
+              {/* 颜色指示器 */}
+              <div style={{
+                width: '14px',
+                height: '14px',
+                borderRadius: '3px',
+                backgroundColor: group.groupColor,
+                marginRight: '8px',
+                flexShrink: 0,
+              }} />
+              
+              {/* 标签 */}
+              <span style={{
+                fontSize: '13px',
+                fontWeight: 600,
+                color: '#2C3E50',
+                flex: 1,
+                minWidth: labelMinWidth ? `${labelMinWidth}px` : 'auto',
+              }}>
+                {group.groupLabel}
+              </span>
+              
+              {/* 值和百分比 */}
+              <div style={{ display: 'flex', gap: '8px', marginLeft: '12px' }}>
+                {showValues && formatValue && (
+                  <span style={{
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: '#2C3E50',
+                  }}>
+                    {formatValue(group.groupValue)}
+                  </span>
+                )}
+                {showPercent && formatPercent && (
+                  <span style={{
+                    fontSize: '12px',
+                    color: '#7F8C8D',
+                  }}>
+                    ({formatPercent(group.groupPercent)})
+                  </span>
+                )}
+              </div>
+            </div>
+            
+            {/* 子项列表 */}
+            {isExpanded && group.items.length > 0 && (
+              <div style={{
+                marginLeft: collapsible ? '20px' : '0',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: `${itemGap}px`,
+              }}>
+                {group.items.map((item) => {
+                  const isItemHidden = hiddenKeys.has(item.key);
+                  const isItemHighlighted = highlightedKey === item.key;
+                  
+                  return (
+                    <div
+                      key={item.key}
+                      onClick={() => handleItemClick(item, group)}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        opacity: isItemHidden ? 0.3 : 1,
+                        cursor: onItemClick ? 'pointer' : 'default',
+                        padding: '2px 0',
+                        backgroundColor: isItemHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent',
+                        borderRadius: '4px',
+                        transition: 'all 0.2s',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!onItemClick) return;
+                        e.currentTarget.style.backgroundColor = 'rgba(0, 102, 204, 0.05)';
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!onItemClick) return;
+                        e.currentTarget.style.backgroundColor = isItemHighlighted 
+                          ? 'rgba(0, 102, 204, 0.1)' 
+                          : 'transparent';
+                      }}
+                    >
+                      {/* 颜色指示器 */}
+                      <div style={{
+                        width: '10px',
+                        height: '10px',
+                        borderRadius: '2px',
+                        backgroundColor: item.color,
+                        marginRight: '8px',
+                        flexShrink: 0,
+                      }} />
+                      
+                      {/* 标签 */}
+                      <span style={{
+                        fontSize: '12px',
+                        color: '#34495E',
+                        flex: 1,
+                        minWidth: labelMinWidth ? `${labelMinWidth - 30}px` : 'auto',
+                      }}>
+                        {item.label}
+                      </span>
+                      
+                      {/* 值和百分比 */}
+                      <div style={{ display: 'flex', gap: '8px', marginLeft: '12px' }}>
+                        {showValues && formatValue && (
+                          <span style={{
+                            fontSize: '12px',
+                            color: '#34495E',
+                          }}>
+                            {formatValue(item.value)}
+                          </span>
+                        )}
+                        {showPercent && formatPercent && (
+                          <span style={{
+                            fontSize: '11px',
+                            color: '#95A5A6',
+                          }}>
+                            ({formatPercent(item.percent)})
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};