Merge pull request #880 from thundersdata-frontend/rn-issue

feat: 进度条组件支持非百分比模式
thundersdata-frontend · Jul 10, 2024 · ffef805 · ffef805
2 parents d13a1ef + 91b431a
commit ffef805
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/poor-phones-rule.md b/.changeset/poor-phones-rule.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+feat: 进度条组件支持非百分比模式
diff --git a/packages/lego/example/ProgressDemo/demo2.tsx b/packages/lego/example/ProgressDemo/demo2.tsx
@@ -22,6 +22,7 @@ export default () => {
             { name: '上海', value: 78 },
             { name: '成都', value: 38 },
           ]}
+          mode="normal"
           inModal
         />
       </Modal>

diff --git a/packages/lego/src/progress/index.tsx b/packages/lego/src/progress/index.tsx
@@ -41,14 +41,25 @@ export interface ProgressProps {
   onEvents?: Record<string, (params?: any) => void>;
   /** 图表渲染器 */
   renderer?: 'canvas' | 'svg';
+  /** 显示模式： percentage百分比； normal数字 */
+  mode: 'percentage' | 'normal';
 }
 
 /**
  * 进度条图，对应Figma其他图6
  */
 export default forwardRef<ReactEcharts, ProgressProps>(
   (
-    { name, data, style = { width: 300, height: 300 }, config, inModal = false, onEvents, renderer = 'canvas' },
+    {
+      name,
+      data,
+      style = { width: 300, height: 300 },
+      config,
+      inModal = false,
+      mode = 'percentage',
+      onEvents,
+      renderer = 'canvas',
+    },
     ref
   ) => {
     const theme = useTheme();
@@ -111,8 +122,8 @@ export default forwardRef<ReactEcharts, ProgressProps>(
             z: 2,
             silent: true,
             data: data.map(item => ({
-              name: item.value + '%',
-              value: 100,
+              name: item.value + (mode === 'percentage' ? '%' : ''),
+              value: mode === 'percentage' ? 100 : Math.max(...data.map(item => +item.value)) * 2.5,
             })),
             label: {
               ...baseBarConfig.label,