Fix dashboard style

mock/chart.js

@@ -3,12 +3,24 @@ import moment from 'moment';
 // mock data
 const visitData = [];
 const beginDay = new Date().getTime();
-for (let i = 0; i < 30; i += 1) {
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
+for (let i = 0; i < fakeY.length; i += 1) {
   visitData.push({
     x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
+    y: fakeY[i],
+  });
+}
+
+const visitData2 = [];
+const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
+for (let i = 0; i < fakeY2.length; i += 1) {
+  visitData2.push({
+    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
+    y: fakeY2[i],
   });
 }
+
 const salesData = [];
 for (let i = 0; i < 12; i += 1) {
   salesData.push({
@@ -169,6 +181,7 @@ radarOriginData.forEach((item) => {
 
 export const getFakeChartData = {
   visitData,
+  visitData2,
   salesData,
   searchData,
   offlineData,

package.json

 {
   "name": "ant-design-pro",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "precommit": "npm run lint-staged",

src/components/Charts/Bar/index.js

@@ -25,7 +25,7 @@ class Bar extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33abfb', margin = [32, 0, 32, 40] } = this.props;
+    const { height = 0, fit = true, color = 'rgba(24, 144, 255, 0.85)', margin = [32, 0, 32, 40] } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;

src/components/Charts/ChartCard/index.less

@@ -36,9 +36,8 @@
   }
   .footer {
     border-top: 1px solid @border-color-split;
-    padding-top: 8px;
+    padding-top: 9px;
     margin-top: 20px;
-    margin-bottom: 10px;
     & > * {
       position: relative;
     }

src/components/Charts/Field/index.less

@@ -10,8 +10,7 @@
     line-height: 22px;
   }
   span:last-child {
-    font-weight: 600;
     margin-left: 8px;
+    color: @heading-color;
   }
 }
-

src/components/Charts/MiniArea/index.js

@@ -4,6 +4,11 @@ import equal from '../equal';
 import styles from '../index.less';
 
 class MiniArea extends PureComponent {
+  static defaultProps = {
+    borderColor: '#1890FF',
+    color: 'rgba(24, 144, 255, 0.2)',
+  };
+
   componentDidMount() {
     this.renderChart(this.props.data);
   }
@@ -25,7 +30,9 @@ class MiniArea extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33abfb', borderWidth = 1, line, xAxis, yAxis, animate = true } = this.props;
+    const {
+      height = 0, fit = true, color, borderWidth = 2, line, xAxis, yAxis, animate = true,
+    } = this.props;
     const borderColor = this.props.borderColor || color;
 
     if (!data || (data && data.length < 1)) {

src/components/Charts/TimelineChart/index.js

@@ -30,7 +30,7 @@ class TimelineChart extends Component {
   }
 
   renderChart(data) {
-    const { height = 400, margin = [60, 20, 40, 40], titleMap } = this.props;
+    const { height = 400, margin = [60, 20, 40, 40], titleMap, borderWidth = 2 } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -81,8 +81,8 @@ class TimelineChart extends Component {
       },
     });
 
-    chart.line().position('x*y1').color('#1890FF');
-    chart.line().position('x*y2').color('#2FC25B');
+    chart.line().position('x*y1').color('#1890FF').size(borderWidth);
+    chart.line().position('x*y2').color('#2FC25B').size(borderWidth);
 
     this.chart = chart;
 

src/components/Charts/Trend/index.js

@@ -43,8 +43,8 @@ const Item = ({ title, flag, children, ...rest }, { mini }) => {
     <div {...rest} className={clsString}>
       <div className={styles.content}>
         <span className={styles.title}>{title}</span>
-        { flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
         <span className={styles.value}>{children}</span>
+        {flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
       </div>
       <div className={styles.miniContent}>
         {miniContent}
@@ -70,7 +70,10 @@ class Trend extends React.Component {
   render() {
     const { colorType, children, mini, ...rest } = this.props;
     return (
-      <div className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend} {...rest}>
+      <div
+        className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend}
+        {...rest}
+      >
         {children}
       </div>
     );

src/components/Charts/Trend/index.less

@@ -11,7 +11,7 @@
 
 .trendItem {
   display: inline-block;
-  margin-right: 16px;
+  margin-right: 24px;
   color: @text-color;
   font-size: @font-size-base;
   line-height: 22px;
@@ -26,12 +26,11 @@
     margin-right: 8px;
   }
   .value {
-    color: @text-color;
-    font-weight: 600;
+    color: @heading-color;
   }
   .up, .down {
-    color: #00a854;
-    margin-right: 4px;
+    color: @green-6;
+    margin-left: 4px;
     position: relative;
     top: 1px;
     i {
@@ -40,7 +39,7 @@
     }
   }
   .down {
-    color: #f04134;
+    color: @red-6;
     top: -1px;
   }
 }
@@ -52,7 +51,7 @@
 .trendgray {
   .trend();
   .trendItem {
-    color: @text-color-secondary;
+    color: @text-color;
   }
 }
 

src/components/Charts/index.md

@@ -7,7 +7,7 @@ cols: 2
 
 Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。
 
-因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 
+因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。
 
 ## API
 
@@ -25,7 +25,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `#33abfb` |
+| color | 图表颜色 | string | `#1890FF` |
 | height | 图表高度 | number | - |
 | data | 数据 | array<{x, y}> | - |
 
@@ -33,8 +33,8 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `#33abfb` |
-| borderColor | 图表边颜色 | string | `#33abfb` |
+| color | 图表颜色 | string | `#rgba(24, 144, 255, 0.2)` |
+| borderColor | 图表边颜色 | string | `#1890FF` |
 | height | 图表高度 | number | - |
 | line | 是否显示描边 | boolean | false |
 | animate | 是否显示动画 | boolean | true |
@@ -56,7 +56,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
 | title | 图表标题 | ReactNode\|string | - |
-| color | 图表颜色 | string | `#33abfb` |
+| color | 图表颜色 | string | `#rgba(24, 144, 255, 0.85)` |
 | margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
 | height | 图表高度 | number | - |
 | data | 数据 | array<{x, y}> | - |
@@ -126,7 +126,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | title | 标题 | ReactNode\|string | - |
 | flag | 上升下降标识 | boolean | - |
 
-### NumberInfo 
+### NumberInfo
 
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|

src/models/chart.js

@@ -5,6 +5,7 @@ export default {
 
   state: {
     visitData: [],
+    visitData2: [],
     salesData: [],
     searchData: [],
     offlineData: [],
@@ -50,6 +51,7 @@ export default {
     clear() {
       return {
         visitData: [],
+        visitData2: [],
         salesData: [],
         searchData: [],
         offlineData: [],

src/routes/Dashboard/Analysis.js

@@ -80,6 +80,7 @@ export default class Analysis extends Component {
     const { chart } = this.props;
     const {
       visitData,
+      visitData2,
       salesData,
       searchData,
       offlineData,
@@ -187,13 +188,13 @@ export default class Analysis extends Component {
             <ChartCard
               bordered={false}
               title="总销售额"
-              action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>}
+              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
               total={yuan(126560)}
-              footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+              footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
               contentHeight={46}
             >
               <Trend colorType="gray" mini={['xlg', 'md']}>
-                <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
+                <Trend.Item title="周同比" flag="up">12%</Trend.Item>
                 <Trend.Item title="日环比" flag="down">11%</Trend.Item>
               </Trend>
             </ChartCard>
@@ -202,7 +203,7 @@ export default class Analysis extends Component {
             <ChartCard
               bordered={false}
               title="访问量"
-              action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>}
+              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
               total={numeral(8846).format('0,0')}
               footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
               contentHeight={46}
@@ -218,7 +219,7 @@ export default class Analysis extends Component {
             <ChartCard
               bordered={false}
               title="支付笔数"
-              action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>}
+              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
               total={numeral(6560).format('0,0')}
               footer={<Field label="转化率" value="60%" />}
               contentHeight={46}
@@ -233,7 +234,7 @@ export default class Analysis extends Component {
             <ChartCard
               bordered={false}
               title="运营活动效果"
-              action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>}
+              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
               total="78%"
               footer={
                 <Trend mini={['xlg', 'md']}>
@@ -253,7 +254,7 @@ export default class Analysis extends Component {
           bodyStyle={{ padding: 0 }}
         >
           <div className={styles.salesCard}>
-            <Tabs tabBarExtraContent={salesExtra}>
+            <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
               <TabPane tab="销售额" key="sales">
                 <Row>
                   <Col xl={16} lg={12} md={12} sm={24} xs={24}>
@@ -334,10 +335,8 @@ export default class Analysis extends Component {
                   />
                   <MiniArea
                     line
-                    borderColor="#00a2fc"
-                    color="#c9eafe"
                     height={45}
-                    data={visitData}
+                    data={visitData2}
                   />
                 </Col>
                 <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
@@ -349,10 +348,8 @@ export default class Analysis extends Component {
                   />
                   <MiniArea
                     line
-                    borderColor="#00a2fc"
-                    color="#c9eafe"
                     height={45}
-                    data={visitData}
+                    data={visitData2}
                   />
                 </Col>
               </Row>