@beppla/tapas-ui 1.4.30 → 1.4.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/commonjs/PieChart/BACKWARD_COMPATIBILITY.md +157 -0
- package/commonjs/PieChart/BUGFIX_EMPTY_DATA.md +86 -0
- package/commonjs/PieChart/GroupedLegend.js +240 -0
- package/commonjs/PieChart/GroupedLegend.js.map +1 -0
- package/commonjs/PieChart/IMPLEMENTATION_SUMMARY.md +306 -0
- package/commonjs/PieChart/NestedPieChart.README.md +421 -0
- package/commonjs/PieChart/NestedPieChart.js +567 -0
- package/commonjs/PieChart/NestedPieChart.js.map +1 -0
- package/commonjs/PieChart/NestedPieChart.types.js +2 -0
- package/commonjs/PieChart/NestedPieChart.types.js.map +1 -0
- package/commonjs/PieChart/NestedPieChart.utils.js +360 -0
- package/commonjs/PieChart/NestedPieChart.utils.js.map +1 -0
- package/commonjs/PieChart/index.js +8 -0
- package/commonjs/PieChart/index.js.map +1 -1
- package/module/PieChart/BACKWARD_COMPATIBILITY.md +157 -0
- package/module/PieChart/BUGFIX_EMPTY_DATA.md +86 -0
- package/module/PieChart/GroupedLegend.js +234 -0
- package/module/PieChart/GroupedLegend.js.map +1 -0
- package/module/PieChart/IMPLEMENTATION_SUMMARY.md +306 -0
- package/module/PieChart/NestedPieChart.README.md +421 -0
- package/module/PieChart/NestedPieChart.js +563 -0
- package/module/PieChart/NestedPieChart.js.map +1 -0
- package/module/PieChart/NestedPieChart.types.js +2 -0
- package/module/PieChart/NestedPieChart.types.js.map +1 -0
- package/module/PieChart/NestedPieChart.utils.js +343 -0
- package/module/PieChart/NestedPieChart.utils.js.map +1 -0
- package/module/PieChart/index.js +1 -0
- package/module/PieChart/index.js.map +1 -1
- package/package.json +1 -1
- package/typescript/PieChart/GroupedLegend.d.ts +26 -0
- package/typescript/PieChart/GroupedLegend.d.ts.map +1 -0
- package/typescript/PieChart/NestedPieChart.d.ts +12 -0
- package/typescript/PieChart/NestedPieChart.d.ts.map +1 -0
- package/typescript/PieChart/NestedPieChart.types.d.ts +117 -0
- package/typescript/PieChart/NestedPieChart.types.d.ts.map +1 -0
- package/typescript/PieChart/NestedPieChart.utils.d.ts +57 -0
- package/typescript/PieChart/NestedPieChart.utils.d.ts.map +1 -0
- package/typescript/PieChart/index.d.ts +2 -0
- package/typescript/PieChart/index.d.ts.map +1 -1
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# 向下兼容性说明
|
|
2
|
+
|
|
3
|
+
## ✅ 完全向下兼容
|
|
4
|
+
|
|
5
|
+
NestedPieChart 的添加**不会影响**现有的 PieChart 组件及其使用:
|
|
6
|
+
|
|
7
|
+
### 1. 独立导出
|
|
8
|
+
|
|
9
|
+
```typescript
|
|
10
|
+
// 现有组件 - 完全不受影响
|
|
11
|
+
export { PieChart } from './PieChart';
|
|
12
|
+
export type { PieChartProps, PieChartData } from './PieChart';
|
|
13
|
+
|
|
14
|
+
// 新增组件 - 独立导出
|
|
15
|
+
export { default as NestedPieChart } from './NestedPieChart';
|
|
16
|
+
export type {
|
|
17
|
+
NestedPieChartProps,
|
|
18
|
+
NestedPieChartNode,
|
|
19
|
+
// ... 其他类型
|
|
20
|
+
} from './NestedPieChart.types';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 2. 现有代码无需更改
|
|
24
|
+
|
|
25
|
+
**旧代码继续正常工作:**
|
|
26
|
+
```tsx
|
|
27
|
+
// 这些代码完全不受影响
|
|
28
|
+
import { PieChart } from '@beppla/tapas-ui';
|
|
29
|
+
|
|
30
|
+
<PieChart
|
|
31
|
+
data={[
|
|
32
|
+
{ value: 100, label: 'A' },
|
|
33
|
+
{ value: 200, label: 'B' }
|
|
34
|
+
]}
|
|
35
|
+
/>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**新功能可选使用:**
|
|
39
|
+
```tsx
|
|
40
|
+
// 只有需要多层级时才使用新组件
|
|
41
|
+
import { NestedPieChart } from '@beppla/tapas-ui';
|
|
42
|
+
|
|
43
|
+
<NestedPieChart
|
|
44
|
+
data={nestedData}
|
|
45
|
+
/>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### 3. 文件结构
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
components/PieChart/
|
|
52
|
+
├── PieChart.tsx # 原有 - 未修改
|
|
53
|
+
├── __tests__/PieChart.test.tsx # 原有 - 未修改
|
|
54
|
+
├── NestedPieChart.tsx # 新增
|
|
55
|
+
├── NestedPieChart.types.ts # 新增
|
|
56
|
+
├── NestedPieChart.utils.ts # 新增
|
|
57
|
+
├── GroupedLegend.tsx # 新增
|
|
58
|
+
├── __tests__/NestedPieChart.test.tsx # 新增
|
|
59
|
+
└── index.tsx # 更新 - 仅添加导出
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 4. 依赖关系
|
|
63
|
+
|
|
64
|
+
- NestedPieChart **不依赖** PieChart
|
|
65
|
+
- PieChart **不依赖** NestedPieChart
|
|
66
|
+
- 两者**完全独立**,互不影响
|
|
67
|
+
|
|
68
|
+
### 5. 包大小影响
|
|
69
|
+
|
|
70
|
+
- **Tree-shaking 支持**:如果不使用 NestedPieChart,它不会被打包
|
|
71
|
+
- **按需导入**:
|
|
72
|
+
```tsx
|
|
73
|
+
// 只导入 PieChart - NestedPieChart 不会被打包
|
|
74
|
+
import { PieChart } from '@beppla/tapas-ui';
|
|
75
|
+
|
|
76
|
+
// 只导入 NestedPieChart - PieChart 不会被打包
|
|
77
|
+
import { NestedPieChart } from '@beppla/tapas-ui';
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### 6. API 兼容性
|
|
81
|
+
|
|
82
|
+
| 特性 | PieChart | NestedPieChart | 说明 |
|
|
83
|
+
|------|----------|----------------|------|
|
|
84
|
+
| 单层数据 | ✅ | ✅ | NestedPieChart 支持降级 |
|
|
85
|
+
| 多层数据 | ❌ | ✅ | 新功能 |
|
|
86
|
+
| Web 支持 | ✅ | ✅ | 完全支持 |
|
|
87
|
+
| RN 支持 | ✅ | ⚠️ | 降级提示 |
|
|
88
|
+
| Props 冲突 | N/A | ❌ | 无冲突 |
|
|
89
|
+
|
|
90
|
+
### 7. 版本策略
|
|
91
|
+
|
|
92
|
+
这是一个**小版本(minor)**更新:
|
|
93
|
+
- ✅ 添加新功能
|
|
94
|
+
- ✅ 完全向下兼容
|
|
95
|
+
- ❌ 无破坏性变更
|
|
96
|
+
- ❌ 无 API 修改
|
|
97
|
+
|
|
98
|
+
符合语义化版本规范(Semver)。
|
|
99
|
+
|
|
100
|
+
### 8. 迁移路径(可选)
|
|
101
|
+
|
|
102
|
+
如果要从 PieChart 迁移到 NestedPieChart:
|
|
103
|
+
|
|
104
|
+
**不需要迁移:**
|
|
105
|
+
- 单层数据继续使用 PieChart 即可
|
|
106
|
+
|
|
107
|
+
**需要迁移:**
|
|
108
|
+
- 只有需要多层级功能时才考虑
|
|
109
|
+
- 数据结构需要调整为树形或扁平+groupKey
|
|
110
|
+
|
|
111
|
+
**迁移示例:**
|
|
112
|
+
```tsx
|
|
113
|
+
// 旧代码 (PieChart - 单层)
|
|
114
|
+
<PieChart data={[
|
|
115
|
+
{ value: 100, label: 'A' },
|
|
116
|
+
{ value: 200, label: 'B' }
|
|
117
|
+
]} />
|
|
118
|
+
|
|
119
|
+
// 新代码 (NestedPieChart - 多层)
|
|
120
|
+
<NestedPieChart data={[
|
|
121
|
+
{
|
|
122
|
+
key: 'group-a',
|
|
123
|
+
label: 'Group A',
|
|
124
|
+
children: [
|
|
125
|
+
{ key: 'a1', label: 'A1', value: 50 },
|
|
126
|
+
{ key: 'a2', label: 'A2', value: 50 }
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
]} />
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### 9. TypeScript 类型安全
|
|
133
|
+
|
|
134
|
+
- 所有新类型都独立导出
|
|
135
|
+
- 不会与现有类型冲突
|
|
136
|
+
- 完整的类型推导支持
|
|
137
|
+
|
|
138
|
+
### 10. 测试覆盖
|
|
139
|
+
|
|
140
|
+
- PieChart 的测试不受影响
|
|
141
|
+
- NestedPieChart 有独立的测试套件
|
|
142
|
+
- 无测试冲突
|
|
143
|
+
|
|
144
|
+
## 🎯 总结
|
|
145
|
+
|
|
146
|
+
**NestedPieChart 是一个完全独立的新组件:**
|
|
147
|
+
|
|
148
|
+
✅ 不修改现有组件
|
|
149
|
+
✅ 不修改现有 API
|
|
150
|
+
✅ 不影响现有使用
|
|
151
|
+
✅ 不增加包大小(未使用时)
|
|
152
|
+
✅ 可选使用,渐进增强
|
|
153
|
+
|
|
154
|
+
**建议:**
|
|
155
|
+
- 现有项目无需任何修改
|
|
156
|
+
- 新需求可使用 NestedPieChart
|
|
157
|
+
- 两者可共存使用
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# 问题修复:Empty Data 报错
|
|
2
|
+
|
|
3
|
+
## 🐛 问题描述
|
|
4
|
+
|
|
5
|
+
在 Storybook 中查看 `Empty Data` story 时出现错误:
|
|
6
|
+
```
|
|
7
|
+
Cannot read properties of undefined (reading 'fonts')
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## 🔍 根本原因
|
|
11
|
+
|
|
12
|
+
NestedPieChart 组件在空数据情况下使用了 `Text` 组件(来自 `@rneui/themed`),该组件依赖主题上下文中的 `theme.fonts` 配置。但在某些 Storybook 场景下可能缺少完整的主题提供者(ThemeProvider)。
|
|
13
|
+
|
|
14
|
+
## ✅ 解决方案
|
|
15
|
+
|
|
16
|
+
将空数据提示从 React Native 的 `Text` 组件改为纯 HTML `div`,因为:
|
|
17
|
+
|
|
18
|
+
1. **NestedPieChart 是 Web 专用组件**(使用 Recharts)
|
|
19
|
+
2. **不需要 RN 的 Text 组件**来显示空状态
|
|
20
|
+
3. **避免主题依赖**,使组件更加独立和健壮
|
|
21
|
+
|
|
22
|
+
### 修改内容
|
|
23
|
+
|
|
24
|
+
**修改前:**
|
|
25
|
+
```tsx
|
|
26
|
+
import RNText from '../Text/Text';
|
|
27
|
+
|
|
28
|
+
// 空数据处理
|
|
29
|
+
if (!processedData || processedData.length === 0 || total === 0) {
|
|
30
|
+
return (
|
|
31
|
+
<View style={[styles.container, { height }, style]} testID={testID}>
|
|
32
|
+
<RNText style={styles.emptyText}>{emptyText}</RNText>
|
|
33
|
+
</View>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**修改后:**
|
|
39
|
+
```tsx
|
|
40
|
+
// 移除 RNText 导入
|
|
41
|
+
|
|
42
|
+
// 空数据处理
|
|
43
|
+
if (!processedData || processedData.length === 0 || total === 0) {
|
|
44
|
+
return (
|
|
45
|
+
<View style={[styles.container, { height }, style]} testID={testID}>
|
|
46
|
+
<div style={{
|
|
47
|
+
display: 'flex',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
justifyContent: 'center',
|
|
50
|
+
height: '100%',
|
|
51
|
+
color: '#999',
|
|
52
|
+
fontSize: 14,
|
|
53
|
+
}}>
|
|
54
|
+
{emptyText}
|
|
55
|
+
</div>
|
|
56
|
+
</View>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
同样的修改也应用到了 RN 端降级提示。
|
|
62
|
+
|
|
63
|
+
## 🎯 修复结果
|
|
64
|
+
|
|
65
|
+
- ✅ Empty Data story 正常渲染
|
|
66
|
+
- ✅ 无主题依赖错误
|
|
67
|
+
- ✅ ESLint 检查通过
|
|
68
|
+
- ✅ 组件更加独立和健壮
|
|
69
|
+
|
|
70
|
+
## 📝 注意事项
|
|
71
|
+
|
|
72
|
+
由于 NestedPieChart 是 **Web 专用组件**(Platform.OS === 'web' && RechartsPieChart),使用纯 HTML 元素完全合理且推荐。组件已经在顶部添加了 eslint-disable 注释来处理 Web 专用代码。
|
|
73
|
+
|
|
74
|
+
## 🧪 验证
|
|
75
|
+
|
|
76
|
+
在 Storybook 中访问:
|
|
77
|
+
- `Empty Data` story - 现在应该正常显示 "No sales data available"
|
|
78
|
+
- 所有其他 stories - 不受影响,正常工作
|
|
79
|
+
|
|
80
|
+
## 🔄 后续
|
|
81
|
+
|
|
82
|
+
如果将来需要在 React Native 端实现完整功能,可以考虑:
|
|
83
|
+
1. 条件渲染:Web 端用 div,RN 端用 Text
|
|
84
|
+
2. 或者确保 ThemeProvider 包裹所有组件使用场景
|
|
85
|
+
|
|
86
|
+
但目前的解决方案对于 Web 专用组件来说是最佳实践。
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.GroupedLegend = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
|
+
/**
|
|
11
|
+
* GroupedLegend - 分组图例组件
|
|
12
|
+
* 支持折叠/展开、分组显示、点击交互
|
|
13
|
+
*
|
|
14
|
+
* Note: This component uses inline styles as it's specifically designed for Web platform
|
|
15
|
+
* where CSS-in-JS is the standard approach. RN-specific lint rules are disabled.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/* eslint-disable react-native/no-inline-styles */
|
|
19
|
+
/* eslint-disable react-native/no-color-literals */
|
|
20
|
+
|
|
21
|
+
const GroupedLegend = ({
|
|
22
|
+
groups,
|
|
23
|
+
showValues = true,
|
|
24
|
+
showPercent = true,
|
|
25
|
+
collapsible = true,
|
|
26
|
+
itemGap = 6,
|
|
27
|
+
groupGap = 16,
|
|
28
|
+
labelMinWidth,
|
|
29
|
+
formatValue,
|
|
30
|
+
formatPercent,
|
|
31
|
+
onItemClick,
|
|
32
|
+
onGroupClick,
|
|
33
|
+
highlightedKey,
|
|
34
|
+
hiddenKeys = new Set()
|
|
35
|
+
}) => {
|
|
36
|
+
const [expandedGroups, setExpandedGroups] = (0, _react.useState)(new Set(groups.filter(g => g.isExpanded).map(g => g.groupKey)));
|
|
37
|
+
const toggleGroup = (0, _react.useCallback)(groupKey => {
|
|
38
|
+
if (!collapsible) return;
|
|
39
|
+
setExpandedGroups(prev => {
|
|
40
|
+
const next = new Set(prev);
|
|
41
|
+
if (next.has(groupKey)) {
|
|
42
|
+
next.delete(groupKey);
|
|
43
|
+
} else {
|
|
44
|
+
next.add(groupKey);
|
|
45
|
+
}
|
|
46
|
+
return next;
|
|
47
|
+
});
|
|
48
|
+
}, [collapsible]);
|
|
49
|
+
const handleGroupClick = (0, _react.useCallback)(group => {
|
|
50
|
+
if (collapsible) {
|
|
51
|
+
toggleGroup(group.groupKey);
|
|
52
|
+
}
|
|
53
|
+
if (onGroupClick) {
|
|
54
|
+
onGroupClick({
|
|
55
|
+
key: group.groupKey,
|
|
56
|
+
label: group.groupLabel,
|
|
57
|
+
value: group.groupValue,
|
|
58
|
+
level: 0,
|
|
59
|
+
path: [group.groupKey],
|
|
60
|
+
metadata: group.metadata,
|
|
61
|
+
groupKey: group.groupKey,
|
|
62
|
+
isGroupHeader: true
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}, [collapsible, toggleGroup, onGroupClick]);
|
|
66
|
+
const handleItemClick = (0, _react.useCallback)((item, group) => {
|
|
67
|
+
if (onItemClick) {
|
|
68
|
+
onItemClick({
|
|
69
|
+
key: item.key,
|
|
70
|
+
label: item.label,
|
|
71
|
+
value: item.value,
|
|
72
|
+
level: 1,
|
|
73
|
+
path: [group.groupKey, item.key],
|
|
74
|
+
parentKey: group.groupKey,
|
|
75
|
+
metadata: item.metadata,
|
|
76
|
+
groupKey: group.groupKey,
|
|
77
|
+
isGroupHeader: false
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
}, [onItemClick]);
|
|
81
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
82
|
+
style: {
|
|
83
|
+
display: 'flex',
|
|
84
|
+
flexDirection: 'column',
|
|
85
|
+
gap: `${groupGap}px`
|
|
86
|
+
},
|
|
87
|
+
children: groups.map(group => {
|
|
88
|
+
const isExpanded = expandedGroups.has(group.groupKey);
|
|
89
|
+
const isGroupHidden = hiddenKeys.has(group.groupKey);
|
|
90
|
+
const isGroupHighlighted = highlightedKey === group.groupKey;
|
|
91
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
92
|
+
style: {
|
|
93
|
+
opacity: isGroupHidden ? 0.3 : 1,
|
|
94
|
+
transition: 'opacity 0.2s'
|
|
95
|
+
},
|
|
96
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
97
|
+
onClick: () => handleGroupClick(group),
|
|
98
|
+
style: {
|
|
99
|
+
display: 'flex',
|
|
100
|
+
alignItems: 'center',
|
|
101
|
+
marginBottom: isExpanded && group.items.length > 0 ? `${itemGap + 4}px` : '0',
|
|
102
|
+
cursor: collapsible || onGroupClick ? 'pointer' : 'default',
|
|
103
|
+
padding: '4px 0',
|
|
104
|
+
backgroundColor: isGroupHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent',
|
|
105
|
+
borderRadius: '4px',
|
|
106
|
+
transition: 'background-color 0.2s'
|
|
107
|
+
},
|
|
108
|
+
onMouseEnter: e => {
|
|
109
|
+
if (!onGroupClick) return;
|
|
110
|
+
e.currentTarget.style.backgroundColor = 'rgba(0, 102, 204, 0.05)';
|
|
111
|
+
},
|
|
112
|
+
onMouseLeave: e => {
|
|
113
|
+
if (!onGroupClick) return;
|
|
114
|
+
e.currentTarget.style.backgroundColor = isGroupHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent';
|
|
115
|
+
},
|
|
116
|
+
children: [collapsible && group.items.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
117
|
+
style: {
|
|
118
|
+
marginRight: '6px',
|
|
119
|
+
fontSize: '12px',
|
|
120
|
+
color: '#666',
|
|
121
|
+
transition: 'transform 0.2s',
|
|
122
|
+
transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
|
|
123
|
+
display: 'inline-block'
|
|
124
|
+
},
|
|
125
|
+
children: "\u25B6"
|
|
126
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
127
|
+
style: {
|
|
128
|
+
width: '14px',
|
|
129
|
+
height: '14px',
|
|
130
|
+
borderRadius: '3px',
|
|
131
|
+
backgroundColor: group.groupColor,
|
|
132
|
+
marginRight: '8px',
|
|
133
|
+
flexShrink: 0
|
|
134
|
+
}
|
|
135
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
136
|
+
style: {
|
|
137
|
+
fontSize: '13px',
|
|
138
|
+
fontWeight: 600,
|
|
139
|
+
color: '#2C3E50',
|
|
140
|
+
flex: 1,
|
|
141
|
+
minWidth: labelMinWidth ? `${labelMinWidth}px` : 'auto'
|
|
142
|
+
},
|
|
143
|
+
children: group.groupLabel
|
|
144
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
145
|
+
style: {
|
|
146
|
+
display: 'flex',
|
|
147
|
+
gap: '8px',
|
|
148
|
+
marginLeft: '12px'
|
|
149
|
+
},
|
|
150
|
+
children: [showValues && formatValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
151
|
+
style: {
|
|
152
|
+
fontSize: '13px',
|
|
153
|
+
fontWeight: 600,
|
|
154
|
+
color: '#2C3E50'
|
|
155
|
+
},
|
|
156
|
+
children: formatValue(group.groupValue)
|
|
157
|
+
}), showPercent && formatPercent && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
158
|
+
style: {
|
|
159
|
+
fontSize: '12px',
|
|
160
|
+
color: '#7F8C8D'
|
|
161
|
+
},
|
|
162
|
+
children: ["(", formatPercent(group.groupPercent), ")"]
|
|
163
|
+
})]
|
|
164
|
+
})]
|
|
165
|
+
}), isExpanded && group.items.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
166
|
+
style: {
|
|
167
|
+
marginLeft: collapsible ? '20px' : '0',
|
|
168
|
+
display: 'flex',
|
|
169
|
+
flexDirection: 'column',
|
|
170
|
+
gap: `${itemGap}px`
|
|
171
|
+
},
|
|
172
|
+
children: group.items.map(item => {
|
|
173
|
+
const isItemHidden = hiddenKeys.has(item.key);
|
|
174
|
+
const isItemHighlighted = highlightedKey === item.key;
|
|
175
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
176
|
+
onClick: () => handleItemClick(item, group),
|
|
177
|
+
style: {
|
|
178
|
+
display: 'flex',
|
|
179
|
+
alignItems: 'center',
|
|
180
|
+
opacity: isItemHidden ? 0.3 : 1,
|
|
181
|
+
cursor: onItemClick ? 'pointer' : 'default',
|
|
182
|
+
padding: '2px 0',
|
|
183
|
+
backgroundColor: isItemHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent',
|
|
184
|
+
borderRadius: '4px',
|
|
185
|
+
transition: 'all 0.2s'
|
|
186
|
+
},
|
|
187
|
+
onMouseEnter: e => {
|
|
188
|
+
if (!onItemClick) return;
|
|
189
|
+
e.currentTarget.style.backgroundColor = 'rgba(0, 102, 204, 0.05)';
|
|
190
|
+
},
|
|
191
|
+
onMouseLeave: e => {
|
|
192
|
+
if (!onItemClick) return;
|
|
193
|
+
e.currentTarget.style.backgroundColor = isItemHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent';
|
|
194
|
+
},
|
|
195
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
196
|
+
style: {
|
|
197
|
+
width: '10px',
|
|
198
|
+
height: '10px',
|
|
199
|
+
borderRadius: '2px',
|
|
200
|
+
backgroundColor: item.color,
|
|
201
|
+
marginRight: '8px',
|
|
202
|
+
flexShrink: 0
|
|
203
|
+
}
|
|
204
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
205
|
+
style: {
|
|
206
|
+
fontSize: '12px',
|
|
207
|
+
color: '#34495E',
|
|
208
|
+
flex: 1,
|
|
209
|
+
minWidth: labelMinWidth ? `${labelMinWidth - 30}px` : 'auto'
|
|
210
|
+
},
|
|
211
|
+
children: item.label
|
|
212
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
213
|
+
style: {
|
|
214
|
+
display: 'flex',
|
|
215
|
+
gap: '8px',
|
|
216
|
+
marginLeft: '12px'
|
|
217
|
+
},
|
|
218
|
+
children: [showValues && formatValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
219
|
+
style: {
|
|
220
|
+
fontSize: '12px',
|
|
221
|
+
color: '#34495E'
|
|
222
|
+
},
|
|
223
|
+
children: formatValue(item.value)
|
|
224
|
+
}), showPercent && formatPercent && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
225
|
+
style: {
|
|
226
|
+
fontSize: '11px',
|
|
227
|
+
color: '#95A5A6'
|
|
228
|
+
},
|
|
229
|
+
children: ["(", formatPercent(item.percent), ")"]
|
|
230
|
+
})]
|
|
231
|
+
})]
|
|
232
|
+
}, item.key);
|
|
233
|
+
})
|
|
234
|
+
})]
|
|
235
|
+
}, group.groupKey);
|
|
236
|
+
})
|
|
237
|
+
});
|
|
238
|
+
};
|
|
239
|
+
exports.GroupedLegend = GroupedLegend;
|
|
240
|
+
//# sourceMappingURL=GroupedLegend.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GroupedLegend","groups","showValues","showPercent","collapsible","itemGap","groupGap","labelMinWidth","formatValue","formatPercent","onItemClick","onGroupClick","highlightedKey","hiddenKeys","Set","expandedGroups","setExpandedGroups","useState","filter","g","isExpanded","map","groupKey","toggleGroup","useCallback","prev","next","delete","add","handleGroupClick","group","key","label","groupLabel","value","groupValue","level","path","metadata","isGroupHeader","handleItemClick","item","parentKey","jsx","style","display","flexDirection","gap","children","isGroupHidden","isGroupHighlighted","jsxs","opacity","transition","onClick","alignItems","marginBottom","items","length","cursor","padding","backgroundColor","borderRadius","onMouseEnter","currentTarget","onMouseLeave","marginRight","fontSize","color","transform","width","height","groupColor","flexShrink","fontWeight","flex","minWidth","marginLeft","groupPercent","isItemHidden","isItemHighlighted","percent","exports"],"sourceRoot":"../../../components","sources":["PieChart/GroupedLegend.tsx"],"mappings":"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","ignoreList":[]}
|