Fixed: #1142 (#1160)

* fixed: #1142

* fix typo

* fix typo

* fix typo

* add missing fix

src/components/Charts/ChartCard/index.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 export interface IChartCardProps {
   title: React.ReactNode;
   action?: React.ReactNode;
-  total?: React.ReactNode | number;
+  total?: React.ReactNode | function | number;
   footer?: React.ReactNode;
   contentHeight?: number;
   avatar?: React.ReactNode;

src/components/Charts/ChartCard/index.js

@@ -10,8 +10,8 @@ const renderTotal = (total) => {
     case undefined:
       totalDom = null;
       break;
-    case 'string':
-      totalDom = <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />;
+    case 'function':
+      totalDom = <div className={styles.total}>{total()}</div>;
       break;
     default:
       totalDom = <div className={styles.total}>{total}</div>;
@@ -20,18 +20,22 @@ const renderTotal = (total) => {
 };
 
 const ChartCard = ({
-  loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
+  loading = false,
+  contentHeight,
+  title,
+  avatar,
+  action,
+  total,
+  footer,
+  children,
+  ...rest
 }) => {
   const content = (
     <div className={styles.chartCard}>
       <div
-        className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
+        className={classNames(styles.chartTop, { [styles.chartTopMargin]: !children && !footer })}
       >
-        <div className={styles.avatar}>
-          {
-            avatar
-          }
-        </div>
+        <div className={styles.avatar}>{avatar}</div>
         <div className={styles.metaWrap}>
           <div className={styles.meta}>
             <span className={styles.title}>{title}</span>
@@ -40,31 +44,26 @@ const ChartCard = ({
           {renderTotal(total)}
         </div>
       </div>
-      {
-        children && (
+      {children && (
         <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-            <div className={contentHeight && styles.contentFixed}>
-              {children}
-            </div>
+          <div className={contentHeight && styles.contentFixed}>{children}</div>
         </div>
-        )
-      }
-      {
-        footer && (
+      )}
+      {footer && (
         <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
           {footer}
         </div>
-        )
-      }
+      )}
     </div>
   );
 
   return (
-    <Card
-      bodyStyle={{ padding: '20px 24px 8px 24px' }}
-      {...rest}
-    >
-      {<Spin spinning={loading} wrapperClassName={styles.spin}>{content}</Spin>}
+    <Card bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
+      {
+        <Spin spinning={loading} wrapperClassName={styles.spin}>
+          {content}
+        </Spin>
+      }
     </Card>
   );
 };

src/components/Charts/Pie/index.d.ts

@@ -10,10 +10,10 @@ export interface IPieProps {
     x: string | string;
     y: number;
   }>;
-  total?: string;
+  total?: string | function;
   title?: React.ReactNode;
   tooltip?: boolean;
-  valueFormat?: (value: string) => string;
+  valueFormat?: (value: string) => string | React.ReactNode;
   subTitle?: React.ReactNode;
 }
 

src/components/Charts/Pie/index.js

@@ -221,7 +221,9 @@ export default class Pie extends Component {
               <div className={styles.total}>
                 {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
                 {/* eslint-disable-next-line */}
-                {total && <div className="pie-stat" dangerouslySetInnerHTML={{ __html: total }} />}
+                {total && (
+                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
+                )}
               </div>
             )}
           </div>
@@ -240,12 +242,7 @@ export default class Pie extends Component {
                 <span className={styles.percent}>
                   {`${(isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
                 </span>
-                <span
-                  className={styles.value}
-                  dangerouslySetInnerHTML={{
-                    __html: valueFormat ? valueFormat(item.y) : item.y,
-                  }}
-                />
+                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
               </li>
             ))}
           </ul>

src/components/Charts/demo/chart-card.md

@@ -5,7 +5,7 @@ title: 图表卡片
 
 用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
 
-````jsx
+```jsx
 import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
 import Trend from 'ant-design-pro/lib/Trend';
 import { Row, Col, Icon, Tooltip } from 'antd';
@@ -16,18 +16,33 @@ ReactDOM.render(
     <Col span={24}>
       <ChartCard
         title="销售额"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={() => (
+          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
+        )}
+        footer={
+          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
+        }
         contentHeight={46}
       >
         <span>
           周同比
-          <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
+          <Trend flag="up" style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}>
+            12%
+          </Trend>
         </span>
         <span style={{ marginLeft: 16 }}>
           日环比
-          <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
+          <Trend
+            flag="down"
+            style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}
+          >
+            11%
+          </Trend>
         </span>
       </ChartCard>
     </Col>
@@ -41,25 +56,40 @@ ReactDOM.render(
             alt="indicator"
           />
         }
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={() => (
+          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
+        )}
+        footer={
+          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
+        }
       />
     </Col>
     <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="移动指标"
-        avatar={(
+        avatar={
           <img
             alt="indicator"
             style={{ width: 56, height: 56 }}
             src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
           />
+        }
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={() => (
+          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
         )}
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
       />
     </Col>
-  </Row>
-, mountNode);
-````
+  </Row>,
+  mountNode,
+);
+```

src/components/Charts/demo/mix.md

@@ -27,6 +27,7 @@ ReactDOM.render(
     <Col span={24}>
       <ChartCard
         title="搜索用户数量"
+        total={numeral(8846).format('0,0')}
         contentHeight={134}
       >
         <NumberInfo

src/components/Charts/demo/pie.md

@@ -3,7 +3,7 @@ order: 5
 title: 饼状图
 ---
 
-````jsx
+```jsx
 import { Pie, yuan } from 'ant-design-pro/lib/Charts';
 
 const salesPieData = [
@@ -38,10 +38,17 @@ ReactDOM.render(
     hasLegend
     title="销售额"
     subTitle="销售额"
-    total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
+    total={() => (
+      <span
+        dangerouslySetInnerHTML={{
+          __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))
+        }}
+      />
+    )}
     data={salesPieData}
-    valueFormat={val => yuan(val)}
+    valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
     height={294}
-  />
-, mountNode);
-````
+  />,
+  mountNode,
+);
+```

src/components/Charts/index.md

@@ -19,7 +19,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 |----------|------------------------------------------|-------------|-------|
 | title | 卡片标题 | ReactNode\|string | - |
 | action | 卡片操作 | ReactNode | - |
-| total | 数据总量 | ReactNode \| number | - |
+| total | 数据总量 | ReactNode \| number \| function | - |
 | footer | 卡片底部 | ReactNode | - |
 | contentHeight | 内容区域高度 | number | - |
 | avatar | 右侧图标 | React.ReactNode | - |
@@ -78,7 +78,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | valueFormat | 显示值的格式化函数 | function | - |
 | title | 图表标题 | ReactNode\|string | - |
 | subTitle | 图表子标题 | ReactNode\|string | - |
-| total | 图标中央的总数 | string | - |
+| total | 图标中央的总数 | string | function | - |
 
 ### Radar
 

src/routes/Dashboard/Analysis.js

@@ -252,7 +252,7 @@ export default class Analysis extends Component {
                   <Icon type="info-circle-o" />
                 </Tooltip>
               }
-              total={yuan(126560)}
+              total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
               footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
               contentHeight={46}
             >
@@ -451,9 +451,15 @@ export default class Analysis extends Component {
               <Pie
                 hasLegend
                 subTitle="销售额"
-                total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
+                total={() => (
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0)),
+                    }}
+                  />
+                )}
                 data={salesPieData}
-                valueFormat={val => yuan(val)}
+                valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
                 height={248}
                 lineWidth={4}
               />