Fixed: #1142 (#1160)

* fixed: #1142 * fix typo * fix typo * fix typo * add missing fix
8 years ago · fc178e55d9
9 changed files with 106 additions and 66 deletions
--- a/src/components/Charts/ChartCard/index.d.ts
+++ b/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;
--- a/src/components/Charts/ChartCard/index.js
+++ b/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 && (
-          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-            <div className={contentHeight && styles.contentFixed}>
-              {children}
-            </div>
-          </div>
-        )
-      }
-      {
-        footer && (
-          <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
-            {footer}
-          </div>
-        )
-      }
+      {children && (
+        <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
+          <div className={contentHeight && styles.contentFixed}>{children}</div>
+        </div>
+      )}
+      {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>
  );
 };
--- a/src/components/Charts/Pie/index.d.ts
+++ b/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;
 }

--- a/src/components/Charts/Pie/index.js
+++ b/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>
--- a/src/components/Charts/demo/chart-card.md
+++ b/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,
+);
+```
--- a/src/components/Charts/demo/mix.md
+++ b/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
--- a/src/components/Charts/demo/pie.md
+++ b/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,
+);
+```
--- a/src/components/Charts/index.md
+++ b/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

--- a/src/routes/Dashboard/Analysis.js
+++ b/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}
              />