Skip to content

GitLab

P
pro-blocks
Commit fc178e55 authored by niko's avatar niko Committed by ddcat1115
Browse files
Options

Fixed: #1142 (#1160) 

* fixed: #1142

* fix typo

* fix typo

* fix typo

* add missing fix
parent 9dcebdc2
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 66 deletions
src/components/Charts/ChartCard/index.d.ts
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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>
);
};
......
src/components/Charts/Pie/index.d.ts
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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
View file @ fc178e55
......@@ -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}
/>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment